/* ============================================================
   KIPS ACADEMY
   MASTER PORTAL
   ============================================================ */

:root{

  --blue:#0876cf;
  --blue-dark:#075aa0;
  --blue-light:#eaf5ff;

  --cyan:#22b7e9;

  --green:#16a34a;
  --green-light:#dcfce7;

  --red:#dc2626;
  --red-light:#fee2e2;

  --orange:#f59e0b;
  --orange-light:#fef3c7;

  --purple:#7c3aed;

  --dark:#14213d;
  --dark2:#0f172a;

  --bg:#f4f7fb;

  --border:#dbe4ee;

  --muted:#64748b;

  --white:#ffffff;

  --shadow:
    0 8px 28px
    rgba(15,23,42,.09);

}


/* ============================================================
   RESET
   ============================================================ */

*{
  box-sizing:border-box;
}


html,
body{

  margin:0;
  min-height:100%;
}


body{

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    var(--bg);

  color:
    #1e293b;

}


button,
input,
select,
textarea{

  font:inherit;

}


button{

  cursor:pointer;

}


button:disabled{

  cursor:not-allowed;
  opacity:.48;

}


input,
select,
textarea{

  width:100%;

  padding:
    12px
    14px;

  border:
    1px solid
    #cbd5e1;

  border-radius:
    11px;

  background:
    #ffffff;

  color:
    #1e293b;

}


input:focus,
select:focus,
textarea:focus{

  outline:none;

  border-color:
    var(--blue);

  box-shadow:
    0 0 0 3px
    rgba(8,118,207,.12);

}


textarea{

  min-height:
    110px;

  resize:
    vertical;

}


label{

  display:block;

  margin:
    12px
    0
    6px;

  font-weight:
    700;

}


h1,
h2,
h3,
h4{

  color:
    var(--dark2);

}


a{

  color:
    var(--blue);

}


.hidden{

  display:none!important;

}


.muted{

  color:
    var(--muted);

}


.center{

  text-align:center;

}


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

.primary{

  border:0;

  padding:
    11px
    17px;

  border-radius:
    10px;

  background:
    var(--blue);

  color:
    white;

  font-weight:
    800;

}


.primary:hover:not(:disabled){

  background:
    var(--blue-dark);

}


.secondary{

  padding:
    10px
    16px;

  border-radius:
    10px;

  border:
    1px solid
    #cbd5e1;

  background:
    white;

  color:
    #1e293b;

  font-weight:
    700;

}


.secondary:hover:not(:disabled){

  background:
    #f8fafc;

}


.success{

  border:0;

  padding:
    10px
    15px;

  border-radius:
    10px;

  background:
    var(--green);

  color:
    white;

  font-weight:
    800;

}


.danger{

  border:0;

  padding:
    10px
    15px;

  border-radius:
    10px;

  background:
    var(--red);

  color:
    white;

  font-weight:
    800;

}


.warning{

  border:0;

  padding:
    10px
    15px;

  border-radius:
    10px;

  background:
    var(--orange);

  color:
    #111827;

  font-weight:
    800;

}


.buttonRow{

  display:flex;

  gap:
    9px;

  flex-wrap:
    wrap;

  margin-top:
    16px;

}


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

#loginScreen{

  min-height:
    100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:
    22px;

  background:

    radial-gradient(
      circle at 15% 20%,
      rgba(255,255,255,.23),
      transparent 25%
    ),

    radial-gradient(
      circle at 85% 80%,
      rgba(255,255,255,.18),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #065ea8,
      #0876cf,
      #22b7e9
    );

}


.loginCard{

  width:
    100%;

  max-width:
    460px;

  background:
    white;

  padding:
    38px;

  border-radius:
    26px;

  box-shadow:
    0 28px 80px
    rgba(0,0,0,.25);

}


.loginBrand{

  text-align:center;

  margin-bottom:
    25px;

}


.loginLogoCircle{

  width:
    100px;

  height:
    100px;

  margin:
    0 auto 14px;

  border-radius:
    50%;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
    linear-gradient(
      135deg,
      #0876cf,
      #22b7e9
    );

  color:
    white;

  font-size:
    54px;

  box-shadow:
    0 10px 30px
    rgba(8,118,207,.28);

}


.loginCard h1{

  text-align:center;

  color:
    var(--blue);

  margin:
    5px 0;

  font-size:
    31px;

}


.loginSubtitle{

  text-align:center;

  color:
    #64748b;

  line-height:
    1.5;

}


.signInButton{

  width:
    100%;

  margin-top:
    22px;

  padding:
    15px;

  font-size:
    17px;

}


#loginMessage{

  margin-top:
    15px;

  text-align:center;

  font-weight:
    700;

}


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

#appScreen{

  display:none;

}


.topbar{

  min-height:
    74px;

  display:flex;

  justify-content:
    space-between;

  align-items:center;

  padding:
    0 22px;

  background:

    linear-gradient(
      90deg,
      #075fa9,
      #0876cf
    );

  color:
    white;

  position:
    sticky;

  top:
    0;

  z-index:
    1000;

  box-shadow:
    0 3px 12px
    rgba(15,23,42,.16);

}


.brand{

  display:flex;

  align-items:center;

  gap:
    12px;

  font-size:
    21px;

  font-weight:
    900;

}


.brandIcon{

  width:
    44px;

  height:
    44px;

  border-radius:
    12px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
    white;

  color:
    var(--blue);

  font-size:
    25px;

}


.userBox{

  display:flex;

  gap:
    12px;

  align-items:center;

}


.userText{

  text-align:right;

}


.userName{

  font-weight:
    900;

}


.userRole{

  font-size:
    12px;

  opacity:
    .9;

}


.logoutButton{

  border:
    1px solid
    rgba(255,255,255,.85);

  background:
    transparent;

  color:
    white;

  padding:
    9px 13px;

  border-radius:
    9px;

  font-weight:
    700;

}


.appLayout{

  display:grid;

  grid-template-columns:
    265px
    minmax(0,1fr);

  min-height:
    calc(
      100vh - 74px
    );

}


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

.sidebar{

  background:

    linear-gradient(
      180deg,
      #14213d,
      #0f172a
    );

  color:
    white;

  padding:
    20px 14px;

}


.roleBadge{

  padding:
    14px;

  text-align:center;

  background:
    rgba(255,255,255,.11);

  border-radius:
    13px;

  margin-bottom:
    18px;

  font-weight:
    900;

}

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

.sidebar{
  position: relative;
  transition:
    width .25s ease,
    padding .25s ease;
}

.appLayout{
  transition:
    grid-template-columns .25s ease;
}

.sidebarToggle{
  position: absolute;
  top: 18px;
  right: -17px;

  width: 34px;
  height: 34px;

  border: 0;
  border-radius: 50%;

  background: #2563eb;
  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  font-weight: 900;

  cursor: pointer;
  z-index: 100;

  box-shadow:
    0 4px 14px rgba(0,0,0,.25);

  transition:
    transform .2s ease,
    background .2s ease;
}

.sidebarToggle:hover{
  background: #1d4ed8;
  transform: scale(1.08);
}

/* KIPS SIDEBAR: slide fully off-screen and expand the page */
.appLayout{
  grid-template-columns:265px minmax(0,1fr);
  transition:grid-template-columns .28s ease;
}

.sidebar{
  width:265px;
  min-width:265px;
  transition:
    transform .28s ease,
    opacity .20s ease;
  will-change:transform;
}

.appLayout.sidebarCollapsed{
  grid-template-columns:0 minmax(0,1fr);
}

.appLayout.sidebarCollapsed .sidebar{
  transform:translateX(-110%);
  opacity:0;
  pointer-events:none;
}

.appLayout.sidebarCollapsed #roleBadge,
.appLayout.sidebarCollapsed #sidebarMenu{
  display:block;
}

#kipsSidebarReopen{
  position:fixed;
  left:10px;
  top:136px;
  z-index:10050;
  width:42px;
  height:42px;
  border:3px solid #ffffff;
  border-radius:50%;
  background:linear-gradient(135deg,#0757c9,#1689f4);
  color:#ffffff;
  font-size:22px;
  font-weight:900;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(7,87,201,.32);
}

#kipsSidebarReopen:hover{
  transform:scale(1.06);
}

body.kipsSidebarIsClosed #kipsSidebarReopen{
  display:flex;
}

@media(max-width:900px){
  .appLayout{
    grid-template-columns:min(82vw,300px) minmax(0,1fr);
  }

  .sidebar{
    width:min(82vw,300px);
    min-width:min(82vw,300px);
  }

  .appLayout.sidebarCollapsed{
    grid-template-columns:0 minmax(0,1fr);
  }
}


.menuGroupTitle{

  margin:
    18px 10px 8px;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    1px;

  color:
    #94a3b8;

}


.menuButton{

  width:
    100%;

  border:
    0;

  background:
    transparent;

  color:
    white;

  text-align:
    left;

  padding:
    12px;

  border-radius:
    9px;

  margin-bottom:
    4px;

  font-weight:
    700;

}


.menuButton:hover{

  background:
    rgba(255,255,255,.11);

}


.menuButton.active{

  background:
    rgba(255,255,255,.19);

}


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

.mainContent{

  padding:
    28px;

  min-width:
    0;

}


.hero{

  padding:
    25px;

  border-radius:
    19px;

  background:
    white;

  box-shadow:
    var(--shadow);

}


.hero h2{

  margin:
    0 0 8px;

  color:
    var(--blue);

}


.hero p{

  margin-bottom:
    0;

  color:
    var(--muted);

  line-height:
    1.55;

}


.cards{

  display:grid;

  grid-template-columns:

    repeat(
      auto-fit,
      minmax(
        205px,
        1fr
      )
    );

  gap:
    16px;

  margin-top:
    18px;

}


.card{

  background:
    white;

  padding:
    20px;

  border-radius:
    16px;

  box-shadow:
    var(--shadow);

}


.card h3{

  margin-top:
    0;

}


.bigNumber{

  color:
    var(--blue);

  font-size:
    34px;

  font-weight:
    900;

}


.toolbar{

  display:flex;

  justify-content:
    space-between;

  gap:
    10px;

  flex-wrap:
    wrap;

  margin:
    18px 0;

}


.toolbarLeft,
.toolbarRight{

  display:flex;

  gap:
    9px;

  flex-wrap:
    wrap;

}


/* ============================================================
   FORMS
   ============================================================ */

.formCard{

  max-width:
    1100px;

  background:
    white;

  padding:
    25px;

  border-radius:
    18px;

  box-shadow:
    var(--shadow);

}


.formGrid{

  display:grid;

  grid-template-columns:

    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    16px;

}


.formGrid3{

  display:grid;

  grid-template-columns:

    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    16px;

}


.full{

  grid-column:
    1/-1;

}


.infoBox{

  padding:
    14px;

  border-radius:
    11px;

  margin:
    14px 0;

  border:
    1px solid
    #93c5fd;

  background:
    #eff6ff;

  color:
    #1e3a8a;

  line-height:
    1.5;

}


.warningBox{

  padding:
    14px;

  border-radius:
    11px;

  margin:
    14px 0;

  border:
    1px solid
    #fdba74;

  background:
    #fff7ed;

  color:
    #9a3412;

}


.successBox{

  padding:
    14px;

  border-radius:
    11px;

  margin:
    14px 0;

  border:
    1px solid
    #86efac;

  background:
    #f0fdf4;

  color:
    #166534;

}


/* ============================================================
   TABLE
   ============================================================ */

.tableWrap{

  background:
    white;

  border-radius:
    16px;

  overflow:
    auto;

  box-shadow:
    var(--shadow);

}


table{

  width:
    100%;

  min-width:
    850px;

  border-collapse:
    collapse;

}


th,
td{

  padding:
    13px;

  text-align:
    left;

  border-bottom:
    1px solid
    #e5e7eb;

  vertical-align:
    top;

}


th{

  background:
    #eef5fb;

  color:
    #1e3a8a;

  font-size:
    13px;

}


tbody tr:hover{

  background:
    #fafcff;

}


/* ============================================================
   STATUS BADGES
   ============================================================ */

.statusBadge{

  display:inline-flex;

  align-items:center;

  gap:
    5px;

  padding:
    6px 10px;

  border-radius:
    999px;

  font-weight:
    900;

  font-size:
    12px;

}


.statusActive{

  background:
    #dcfce7;

  color:
    #166534;

}


.statusInactive{

  background:
    #fee2e2;

  color:
    #991b1b;

}


.statusSent{

  background:
    #dbeafe;

  color:
    #1e40af;

}


.statusWatching{

  background:
    #fef3c7;

  color:
    #92400e;

}


.statusDraft{

  background:
    #f1f5f9;

  color:
    #475569;

}


/* ============================================================
   LOADING
   ============================================================ */

.loadingCard{

  max-width:
    700px;

  margin:
    20px auto;

  background:
    white;

  padding:
    32px;

  text-align:
    center;

  border-radius:
    18px;

  box-shadow:
    var(--shadow);

}


.spinner{

  width:
    48px;

  height:
    48px;

  margin:
    5px auto 18px;

  border:
    5px solid
    #dbeafe;

  border-top-color:
    var(--blue);

  border-radius:
    50%;

  animation:
    spin .8s linear infinite;

}


@keyframes spin{

  to{

    transform:
      rotate(
        360deg
      );

  }

}


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

.assignmentGrid{

  display:grid;

  grid-template-columns:

    repeat(
      auto-fit,
      minmax(
        290px,
        1fr
      )
    );

  gap:
    21px;

  align-items:
    stretch;

}


.assignmentCard{

  background:
    white;

  border-radius:
    20px;

  overflow:
    hidden;

  box-shadow:
    var(--shadow);

  border:
    1px solid
    #e5e7eb;

  display:flex;

  flex-direction:
    column;

}


.assignmentImage{

  height:
    185px;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      #eef6ff,
      #ecfdf5
    );

  position:
    relative;

}


.assignmentImage img{

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  display:
    block;

}


.assignmentPlaceholder{

  width:
    100%;

  height:
    100%;

  display:flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    68px;

}


.assignmentSource{

  display:inline-flex;

  padding:
    6px 10px;

  border-radius:
    999px;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    .4px;

}


.sourceKips{

  background:
    #ecfdf5;

  color:
    #047857;

}


.sourceClassroom{

  background:
    #e8f0fe;

  color:
    #174ea6;

}


.assignmentBody{

  padding:
    20px;

  display:flex;

  flex-direction:
    column;

  flex:
    1;

}


.assignmentBody h3{

  margin:
    8px 0 10px;

  font-size:
    21px;

  line-height:
    1.3;

}


.assignmentDescription{

  color:
    #475569;

  line-height:
    1.55;

  font-size:
    14px;

}


.assignmentMeta{

  background:
    #f8fafc;

  border-radius:
    12px;

  padding:
    12px;

  font-size:
    13px;

  line-height:
    1.7;

  margin:
    12px 0 16px;

}


/* ============================================================
   GOOGLE CLASSROOM
   ============================================================ */

.classroomBanner{

  padding:
    22px;

  border-radius:
    18px;

  background:

    linear-gradient(
      135deg,
      #e8f0fe,
      #f7fbff
    );

  border:
    1px solid
    #c7d8ff;

  margin-bottom:
    20px;

}


.classroomBanner h3{

  margin:
    0 0 7px;

  color:
    #174ea6;

}


.classroomStats{

  display:grid;

  grid-template-columns:

    repeat(
      auto-fit,
      minmax(
        160px,
        1fr
      )
    );

  gap:
    12px;

  margin-top:
    15px;

}


.classroomStat{

  background:
    rgba(255,255,255,.85);

  padding:
    14px;

  border-radius:
    12px;

}


.classroomStat strong{

  display:block;

  font-size:
    23px;

  color:
    #174ea6;

}


/* ============================================================
   EXERCISE
   ============================================================ */

.exerciseShell{

  max-width:
    1050px;

  margin:
    auto;

}


.exerciseHeader{

  background:
    white;

  padding:
    22px;

  border-radius:
    18px;

  box-shadow:
    var(--shadow);

}


.questionStrip{

  display:flex;

  gap:
    7px;

  flex-wrap:
    wrap;

  margin-top:
    18px;

}


.questionNumberButton{

  width:
    44px;

  height:
    44px;

  border-radius:
    10px;

  border:
    2px solid
    #cbd5e1;

  background:
    white;

  font-weight:
    900;

}


.questionNumberButton.current{

  border-color:
    var(--blue);

}


.questionNumberButton.correct{

  background:
    #dcfce7;

  border-color:
    #16a34a;

  color:
    #166534;

}


.questionNumberButton.incorrect{

  background:
    #fee2e2;

  border-color:
    #dc2626;

  color:
    #991b1b;

}


.questionPanel{

  background:
    white;

  margin-top:
    18px;

  padding:
    28px;

  border-radius:
    20px;

  box-shadow:
    var(--shadow);

}


.questionTop{

  display:flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    10px;

  flex-wrap:
    wrap;

}


.questionCount{

  color:
    var(--blue);

  font-weight:
    900;

}


.questionTimer{

  background:
    #eef5fb;

  border-radius:
    999px;

  padding:
    8px 12px;

  font-weight:
    900;

}


.questionText{

  margin:
    30px 0 24px;

  font-size:
    24px;

  font-weight:
    900;

  line-height:
    1.5;

  white-space:
    pre-wrap;

}


.questionImageWrap{

  width:
    100%;

  display:flex;

  justify-content:
    center;

  margin-bottom:
    24px;

}


.questionImage{

  display:block;

  max-width:
    100%;

  max-height:
    470px;

  object-fit:
    contain;

  border-radius:
    14px;

  border:
    1px solid
    #e2e8f0;

  background:
    white;

}


.answerOption{

  display:block;

  width:
    100%;

  padding:
    16px;

  text-align:
    left;

  background:
    white;

  border:
    2px solid
    #dbe3ee;

  border-radius:
    12px;

  margin-bottom:
    11px;

  font-weight:
    700;

}


.answerOption:hover:not(:disabled){

  border-color:
    #93c5fd;

}


.answerOption.selected{

  border-color:
    var(--blue);

  background:
    #e8f3ff;

}


.answerOption.correctChoice{

  border-color:
    #16a34a;

  background:
    #dcfce7;

  color:
    #166534;

}


.answerOption.wrongChoice{

  border-color:
    #dc2626;

  background:
    #fee2e2;

  color:
    #991b1b;

}


.shortAnswerInput{

  width:
    100%;

  padding:
    17px;

  font-size:
    20px;

  border:
    2px solid
    #cbd5e1;

  border-radius:
    11px;

}


.exerciseActionRow{

  margin-top:
    25px;

  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  gap:
    10px;

  align-items:
    center;

}


.exerciseActionRow button:first-child{

  justify-self:
    start;

}


.exerciseActionRow button:last-child{

  justify-self:
    end;

}


.feedback{

  display:none;

  margin-top:
    18px;

  padding:
    17px;

  border-radius:
    12px;

  font-weight:
    900;

}


.feedback.good{

  display:block;

  background:
    #dcfce7;

  color:
    #166534;

  border:
    2px solid
    #16a34a;

}


.feedback.bad{

  display:block;

  background:
    #fee2e2;

  color:
    #991b1b;

  border:
    2px solid
    #dc2626;

}


/* ============================================================
   VIDEO CENTER
   ============================================================ */

.videoGrid{

  display:grid;

  grid-template-columns:

    repeat(
      auto-fit,
      minmax(
        270px,
        1fr
      )
    );

  gap:
    17px;

}


.videoCard{

  overflow:
    hidden;

  background:
    white;

  border-radius:
    17px;

  box-shadow:
    var(--shadow);

}


.videoThumb{

  width:
    100%;

  height:
    180px;

  object-fit:
    cover;

  background:
    #dbeafe;

}


.videoPlaceholder{

  width:
    100%;

  height:
    180px;

  display:flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    58px;

  background:

    linear-gradient(
      135deg,
      #dbeafe,
      #e0f2fe
    );

}


.videoBody{

  padding:
    18px;

}


.videoFrame{

  width:
    100%;

  aspect-ratio:
    16/9;

  border:
    0;

  background:
    #000;

  border-radius:
    15px;

}


/* ============================================================
   HELP QUEUE
   ============================================================ */

.helpQueueHeader{

  display:flex;

  justify-content:
    space-between;

  gap:
    15px;

  align-items:
    center;

  flex-wrap:
    wrap;

}


.helpQueueStudent{

  font-weight:
    900;

  font-size:
    16px;

}


.helpQueueTopic{

  font-weight:
    800;

}


.helpQueueQuestionText{

  font-size:
    20px;

  line-height:
    1.5;

  font-weight:
    800;

  white-space:
    pre-wrap;

}


/* ============================================================
   LIVE HELP OVERLAY
   ============================================================ */

#liveHelpOverlay{

  display:none;

  position:
    fixed;

  inset:
    0;

  z-index:
    99999;

  background:
    rgba(15,23,42,.90);

  justify-content:
    center;

  align-items:
    center;

  padding:
    18px;

}


.liveHelpCard{

  width:
    100%;

  max-width:
    1000px;

  max-height:
    96vh;

  overflow:
    auto;

  border-radius:
    23px;

  background:
    white;

}


.liveHelpHeader{

  background:
    var(--blue);

  color:
    white;

  padding:
    22px;

  border-radius:
    23px 23px 0 0;

}


.liveHelpHeader h2{

  color:
    white;

  margin:
    0 0 5px;

}


.liveHelpBody{

  padding:
    22px;

}


.liveHelpMessage{

  background:
    #eff6ff;

  color:
    #1e3a8a;

  padding:
    15px;

  border-radius:
    11px;

  margin-bottom:
    17px;

}


.liveHelpFrame{

  width:
    100%;

  aspect-ratio:
    16/9;

  border:
    0;

  background:
    #000;

  border-radius:
    14px;

}


.requiredHelp{

  margin-top:
    13px;

  padding:
    12px;

  background:
    #fff7ed;

  color:
    #9a3412;

  border-radius:
    10px;

  font-weight:
    900;

}


.optionalHelp{

  margin-top:
    13px;

  padding:
    12px;

  background:
    #f0fdf4;

  color:
    #166534;

  border-radius:
    10px;

}


/* ============================================================
   MODALS
   ============================================================ */

.modalOverlay{

  position:
    fixed;

  inset:
    0;

  z-index:
    99990;

  display:flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

  background:
    rgba(15,23,42,.77);

}


.modalCard{

  width:
    100%;

  max-width:
    950px;

  max-height:
    93vh;

  overflow:
    auto;

  background:
    white;

  padding:
    24px;

  border-radius:
    19px;

}


.helpVideoGrid{

  display:grid;

  grid-template-columns:

    repeat(
      auto-fit,
      minmax(
        230px,
        1fr
      )
    );

  gap:
    13px;

}


.helpVideoChoice{

  background:
    white;

  border:
    2px solid
    #e2e8f0;

  border-radius:
    13px;

  padding:
    13px;

  cursor:
    pointer;

}


.helpVideoChoice.selected{

  background:
    #eff6ff;

  border-color:
    var(--blue);

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(
  max-width:900px
){

  .appLayout{

    grid-template-columns:
      1fr;

  }


  .sidebar{

    position:
      relative;

  }


  .formGrid,
  .formGrid3{

    grid-template-columns:
      1fr;

  }


  .mainContent{

    padding:
      18px;

  }

}


@media(
  max-width:600px
){

  .topbar{

    padding:
      10px 14px;

    align-items:
      flex-start;

    gap:
      10px;

  }


  .brand{

    font-size:
      17px;

  }


  .userBox{

    align-items:
      flex-end;

    flex-direction:
      column;

  }


  .userText{

    display:none;

  }


  .loginCard{

    padding:
      27px 22px;

  }


  .questionText{

    font-size:
      20px;

  }


  .exerciseActionRow{

    grid-template-columns:
      1fr;

  }


  .exerciseActionRow button{

    width:
      100%;

    justify-self:
      stretch!important;

  }

}

/* ============================================================
   KIPS STUDENT WORD HELPER
   Click a word to hear it and learn its meaning
   ============================================================ */

.kipsWordHelpPopup{
  position:fixed;
  z-index:999999;

  width:min(360px, calc(100vw - 30px));

  background:#ffffff;

  border:
    3px solid
    #0876cf;

  border-radius:18px;

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

  padding:18px;

  display:none;
}


.kipsWordHelpPopup.show{
  display:block;
}


.kipsWordHelpTop{
  display:flex;

  justify-content:
    space-between;

  align-items:center;

  gap:12px;

  margin-bottom:12px;
}


.kipsWordHelpWord{
  color:#0876cf;

  font-size:25px;

  font-weight:900;

  line-height:1.2;

  word-break:break-word;
}


.kipsWordHelpClose{
  width:36px;
  height:36px;

  flex:0 0 36px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:0;

  border-radius:50%;

  background:#fee2e2;

  color:#b91c1c;

  font-size:20px;

  font-weight:900;

  cursor:pointer;
}


.kipsWordHelpMeaning{
  padding:13px;

  border-radius:12px;

  background:#eff6ff;

  color:#1e3a8a;

  font-size:16px;

  line-height:1.5;

  font-weight:700;
}


.kipsWordHelpLoading{
  color:#64748b;

  font-weight:700;
}


.kipsWordHelpButtons{
  display:flex;

  gap:9px;

  margin-top:14px;

  flex-wrap:wrap;
}


.kipsWordHelpSpeakButton{
  flex:1;

  min-width:135px;

  border:0;

  border-radius:11px;

  padding:11px 14px;

  background:#16a34a;

  color:#ffffff;

  font-weight:900;

  cursor:pointer;
}


.kipsWordHelpSpeakButton:hover{
  background:#15803d;
}


.kipsWordHelpHint{
  margin-top:10px;

  color:#64748b;

  font-size:12px;

  text-align:center;

  line-height:1.4;
}


.studentWordHelpEnabled
  .mainContent
  p,
.studentWordHelpEnabled
  .mainContent
  h1,
.studentWordHelpEnabled
  .mainContent
  h2,
.studentWordHelpEnabled
  .mainContent
  h3,
.studentWordHelpEnabled
  .mainContent
  h4,
.studentWordHelpEnabled
  .mainContent
  .questionText,
.studentWordHelpEnabled
  .mainContent
  .assignmentDescription,
.studentWordHelpEnabled
  .mainContent
  .assignmentMeta,
.studentWordHelpEnabled
  .mainContent
  .infoBox,
.studentWordHelpEnabled
  .mainContent
  .warningBox,
.studentWordHelpEnabled
  .mainContent
  .successBox{

  cursor:help;
}



/* ============================================================
   KIPS READ ALOUD BUTTON
   Separate from Sign Out so translation code cannot overwrite it.
   ============================================================ */
.kipsReadPageButton{
  border:1px solid rgba(255,255,255,.9);
  background:#ffffff;
  color:#075aa0;
  padding:9px 13px;
  border-radius:9px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:90px;
}
.kipsReadPageButton:hover{
  background:#eaf5ff;
}


/* ============================================================
   KIPS PROFESSIONAL ROLL CALL
   ============================================================ */
.rollCallToolbar{
  display:grid;
  grid-template-columns:minmax(150px,190px) minmax(170px,220px) minmax(260px,1fr) auto auto;
  gap:12px;
  align-items:end;
}
.rollCallToolbar label{margin-top:0;}
.rollCallTableCard{margin-top:16px;padding:0;overflow:hidden;}
.rollCallTableTop{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid #dbe4ee;
  background:linear-gradient(180deg,#fff,#f8fcff);
}
.rollCallCount{font-weight:900;color:#075aa0;}
.rollCallPageSize{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;}
.rollCallPageSize select{width:auto;padding:8px 32px 8px 10px;}
.rollCallScroll{overflow:auto;max-height:620px;}
.rollCallTable{width:100%;min-width:1750px;border-collapse:collapse;}
.rollCallTable thead th{
  position:sticky;top:0;z-index:3;background:#dff5fb;color:#07546d;
  border-bottom:1px solid #b8e4ef;padding:12px 10px;
  font-size:12px;text-transform:uppercase;letter-spacing:.35px;white-space:nowrap;
}
.rollCallTable td{padding:12px 10px;vertical-align:middle;}
.rollCallSort{
  border:0;background:transparent;color:inherit;font-weight:900;padding:0;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-transform:inherit;
}
.rollCallSortArrows{display:inline-flex;flex-direction:column;line-height:7px;font-size:8px;opacity:.35;}
.rollCallSort.active .rollCallSortArrows{opacity:1;color:#0876cf;}
.rollCallStatus{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  border-radius:999px;font-size:12px;font-weight:900;white-space:nowrap;
}
.rollCallStatus.present{background:#dcfce7;color:#166534;}
.rollCallStatus.absent{background:#f1f5f9;color:#475569;}
.rollCallStatus.left{background:#ffedd5;color:#9a3412;}
.rollCallStatus.other{background:#dbeafe;color:#1e40af;}
.rollCallSummaryBelow{margin-top:16px;}
.rollCallPager{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:14px 18px;border-top:1px solid #dbe4ee;background:#f8fafc;
}
.rollCallPagerButtons{display:flex;gap:7px;align-items:center;}
.rollCallPagerButtons button{min-width:38px;}
.rollCallRequestNumber{font-weight:900;text-align:center;}
@media(max-width:1050px){
  .rollCallToolbar{grid-template-columns:1fr 1fr;}
  .rollCallToolbar .rollCallSearchField{grid-column:1/-1;}
}
@media(max-width:650px){
  .rollCallToolbar{grid-template-columns:1fr;}
  .rollCallToolbar .rollCallSearchField{grid-column:auto;}
}


/* ============================================================
   KIPS PHASE 5 - PROFESSIONAL UI / UX DESIGN SYSTEM
   ============================================================ */

:root{
  --kips-primary:#0876cf;
  --kips-primary-dark:#075aa0;
  --kips-primary-soft:#eaf5ff;
  --kips-success:#16a34a;
  --kips-warning:#d97706;
  --kips-danger:#dc2626;
  --kips-surface:#ffffff;
  --kips-surface-soft:#f8fafc;
  --kips-page:#f4f7fb;
  --kips-border:#dbe4ee;
  --kips-text:#14213d;
  --kips-muted:#64748b;
  --kips-radius-sm:10px;
  --kips-radius:14px;
  --kips-radius-lg:20px;
  --kips-shadow-sm:0 4px 14px rgba(15,23,42,.06);
  --kips-shadow:0 10px 30px rgba(15,23,42,.09);
  --kips-shadow-lg:0 18px 55px rgba(15,23,42,.13);
}

body{
  background:
    radial-gradient(circle at top left,rgba(34,183,233,.10),transparent 34%),
    var(--kips-page);
  color:var(--kips-text);
}

.card{
  border:1px solid var(--kips-border);
  border-radius:var(--kips-radius);
  box-shadow:var(--kips-shadow-sm);
  background:var(--kips-surface);
}

.card:hover{
  box-shadow:var(--kips-shadow);
}

.topbar{
  box-shadow:0 4px 18px rgba(15,23,42,.10);
  border-bottom:1px solid rgba(255,255,255,.18);
}

.sidebar{
  box-shadow:4px 0 22px rgba(15,23,42,.07);
}

.sidebarButton{
  border-radius:11px;
  transition:
    transform .14s ease,
    background .14s ease,
    color .14s ease,
    box-shadow .14s ease;
}

.sidebarButton:hover{
  transform:translateX(2px);
}

.sidebarButton.active{
  box-shadow:0 5px 16px rgba(8,118,207,.16);
}

.primary,
.secondary,
.success,
.danger,
.warning,
.logoutButton,
.kipsReadPageButton{
  min-height:42px;
  border-radius:11px;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease,
    border-color .12s ease;
}

.primary:hover:not(:disabled),
.secondary:hover:not(:disabled),
.success:hover:not(:disabled),
.danger:hover:not(:disabled),
.warning:hover:not(:disabled),
.logoutButton:hover:not(:disabled),
.kipsReadPageButton:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 7px 18px rgba(15,23,42,.12);
}

.primary:active:not(:disabled),
.secondary:active:not(:disabled),
.success:active:not(:disabled),
.danger:active:not(:disabled),
.warning:active:not(:disabled){
  transform:translateY(0);
}

input,
select,
textarea{
  border-radius:11px;
  border:1px solid #cbd5e1;
  min-height:44px;
  transition:border-color .12s ease,box-shadow .12s ease;
}

input:hover,
select:hover,
textarea:hover{
  border-color:#94a3b8;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--kips-primary);
  box-shadow:0 0 0 4px rgba(8,118,207,.11);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible{
  outline:3px solid rgba(8,118,207,.28);
  outline-offset:2px;
}

h1,h2,h3,h4{
  letter-spacing:-.015em;
}

.pageHeader,
.headerCard{
  border-radius:var(--kips-radius-lg);
}

.statsGrid{
  gap:14px;
}

.statCard{
  border:1px solid var(--kips-border);
  border-radius:var(--kips-radius);
  box-shadow:var(--kips-shadow-sm);
  background:linear-gradient(180deg,#ffffff,#fbfdff);
}

.statCard:hover{
  transform:translateY(-1px);
  box-shadow:var(--kips-shadow);
}

table{
  background:white;
}

table thead th{
  font-weight:900;
  letter-spacing:.02em;
}

table tbody tr{
  transition:background .12s ease;
}

table tbody tr:hover{
  background:#f8fbff;
}

.badge,
.statusBadge,
.rollCallStatus{
  font-weight:900;
  letter-spacing:.01em;
}

.infoBox,
.feedback{
  border-radius:12px;
}

.modalBackdrop{
  backdrop-filter:blur(3px);
  background:rgba(15,23,42,.45);
}

.modal,
.modalCard{
  border-radius:20px;
  box-shadow:var(--kips-shadow-lg);
  border:1px solid rgba(255,255,255,.65);
}

/* Consistent section heading */
.kipsSectionTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
}

.kipsSectionTitle h2,
.kipsSectionTitle h3{
  margin:0;
}

/* Reusable polished empty state */
.kipsEmptyState{
  padding:34px 22px;
  text-align:center;
  border:1px dashed #cbd5e1;
  border-radius:16px;
  background:#f8fafc;
}

.kipsEmptyStateIcon{
  font-size:34px;
  margin-bottom:8px;
}

.kipsEmptyStateTitle{
  font-weight:900;
  color:#0f172a;
  margin-bottom:5px;
}

.kipsEmptyStateText{
  color:var(--kips-muted);
  font-size:14px;
}

/* Reusable polished loading state */
.kipsLoadingState{
  padding:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--kips-muted);
  font-weight:800;
}

.kipsSpinner{
  width:20px;
  height:20px;
  border:3px solid #dbeafe;
  border-top-color:var(--kips-primary);
  border-radius:50%;
  animation:kipsSpin .8s linear infinite;
}

@keyframes kipsSpin{
  to{transform:rotate(360deg);}
}

/* Toast notifications */
#kipsToastHost{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.kipsToast{
  min-width:260px;
  max-width:420px;
  padding:13px 15px;
  border-radius:13px;
  background:#0f172a;
  color:white;
  box-shadow:var(--kips-shadow-lg);
  font-weight:800;
  opacity:0;
  transform:translateY(10px);
  animation:kipsToastIn .18s ease forwards;
}

.kipsToast.success{background:#166534;}
.kipsToast.error{background:#991b1b;}
.kipsToast.warning{background:#92400e;}

@keyframes kipsToastIn{
  to{opacity:1;transform:translateY(0);}
}

/* Tables: consistent sticky header behavior */
.kipsProfessionalTableWrap{
  overflow:auto;
  border:1px solid var(--kips-border);
  border-radius:14px;
  background:white;
}

.kipsProfessionalTableWrap table{
  margin:0;
}

.kipsProfessionalTableWrap thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#eef8ff;
}

/* Compact utility row */
.kipsToolbar{
  display:flex;
  align-items:end;
  gap:12px;
  flex-wrap:wrap;
}

.kipsToolbar > *{
  min-width:160px;
}

.kipsToolbar .grow{
  flex:1 1 260px;
}

/* Better mobile rhythm */
@media(max-width:900px){
  .card{
    border-radius:13px;
  }

  .statsGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .kipsToolbar{
    align-items:stretch;
  }

  .kipsToolbar > *{
    min-width:0;
    flex:1 1 220px;
  }
}

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

  .primary,
  .secondary,
  .success,
  .danger,
  .warning{
    width:100%;
  }

  #kipsToastHost{
    left:12px;
    right:12px;
    bottom:12px;
  }

  .kipsToast{
    min-width:0;
    max-width:none;
    width:100%;
  }
}

/* Reduced-motion accessibility */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}


/* ============================================================
   KIPS PHASE 6 - MOBILE / TABLET / ACCESSIBILITY / ACCESS RELIABILITY
   ============================================================ */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  min-height:100dvh;
}

img,
video,
iframe{
  max-width:100%;
}

iframe{
  border:0;
}

button,
input,
select,
textarea{
  font:inherit;
}

button,
a,
input,
select,
textarea{
  touch-action:manipulation;
}

button,
.primary,
.secondary,
.success,
.warning,
.danger,
.logoutButton,
.kipsReadPageButton{
  min-height:44px;
  min-width:44px;
}

a{
  overflow-wrap:anywhere;
}

.kipsSkipLink{
  position:fixed;
  top:-100px;
  left:12px;
  z-index:100000;
  padding:10px 14px;
  border-radius:10px;
  background:#0f172a;
  color:#fff;
  font-weight:900;
  text-decoration:none;
  transition:top .15s ease;
}

.kipsSkipLink:focus{
  top:12px;
}

#mainContent{
  scroll-margin-top:90px;
}

.kipsSrOnly{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.kipsAccessBanner{
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid #bae6fd;
  border-radius:13px;
  background:#f0f9ff;
  color:#075985;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.kipsAccessBanner strong{
  display:block;
  margin-bottom:3px;
}

.kipsAccessBanner button{
  flex:0 0 auto;
}

.kipsMobileTableHint{
  display:none;
  font-size:12px;
  color:#64748b;
  margin:0 0 8px;
}

@media(max-width:900px){
  .topbar{
    gap:8px;
    flex-wrap:wrap;
    min-height:auto;
  }

  .topbar .right,
  .topbarRight{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .sidebar{
    max-width:min(86vw,320px);
  }

  .main,
  #mainContent{
    min-width:0;
  }

  .kipsMobileTableHint{
    display:block;
  }

  table{
    font-size:13px;
  }

  .modal,
  .modalCard{
    width:min(94vw,720px)!important;
    max-height:90dvh;
    overflow:auto;
  }
}

@media(max-width:680px){
  .topbar{
    padding:10px 12px;
  }

  .topbar select,
  .topbar button{
    max-width:100%;
  }

  .content,
  .mainContent,
  #mainContent{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .card{
    padding:14px;
  }

  .statsGrid{
    gap:10px;
  }

  .rollCallToolbar{
    grid-template-columns:1fr!important;
  }

  .rollCallToolbar .rollCallSearchField{
    grid-column:auto!important;
  }

  .rollCallTableTop,
  .rollCallPager{
    padding:12px;
  }
}

@media(max-width:430px){
  body{
    font-size:15px;
  }

  h1{font-size:1.55rem;}
  h2{font-size:1.3rem;}
  h3{font-size:1.12rem;}

  .topbar{
    align-items:flex-start;
  }

  .topbar select{
    width:100%;
  }

  .topbar button{
    flex:1 1 auto;
  }

  input,
  select,
  textarea{
    width:100%;
  }

  .rollCallScroll,
  .kipsProfessionalTableWrap{
    -webkit-overflow-scrolling:touch;
  }
}

/* High contrast / forced-colors support */
@media(forced-colors:active){
  button,
  input,
  select,
  textarea,
  .card{
    border:1px solid CanvasText;
  }

  .primary,
  .secondary,
  .success,
  .warning,
  .danger{
    forced-color-adjust:auto;
  }
}


/* ============================================================
   KIPS PHASE 8 - REPORTS / ANALYTICS / ROLL CALL
   ============================================================ */
.kipsAnalyticsGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:0 0 16px;
}

.kipsAnalyticsCard{
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid var(--kips-border,#dbe4ee);
  border-radius:15px;
  padding:16px;
  box-shadow:var(--kips-shadow-sm,0 4px 14px rgba(15,23,42,.06));
}

.kipsAnalyticsCardLabel{
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
}

.kipsAnalyticsCardValue{
  margin-top:5px;
  font-size:26px;
  font-weight:950;
  color:#0f172a;
}

.kipsAnalyticsCardSub{
  margin-top:4px;
  font-size:12px;
  color:#64748b;
}

.kipsReportToolbar{
  display:flex;
  gap:10px;
  align-items:end;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.kipsReportToolbar > *{
  min-width:160px;
}

.kipsReportToolbar .grow{
  flex:1 1 280px;
}

.kipsReportBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:#eff6ff;
  color:#1d4ed8;
}

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

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


/* ============================================================
   KIPS PHASE 9 - PERSONALIZED LEARNING UI
   ============================================================ */

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

.kipsRecommendationCard{
  border:1px solid var(--kips-border,#dbe4ee);
  border-radius:15px;
  padding:16px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:var(--kips-shadow-sm,0 4px 14px rgba(15,23,42,.06));
}

.kipsRecommendationAction{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:950;
  background:#e0f2fe;
  color:#075985;
  margin-bottom:8px;
}

.kipsRecommendationSkill{
  font-size:18px;
  font-weight:950;
  color:#0f172a;
  margin-bottom:6px;
}

.kipsRecommendationReason{
  color:#475569;
  line-height:1.5;
  font-size:14px;
}

.kipsRecommendationMeta{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
}

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


/* ============================================================
   KIPS PHASE 10 - FINAL PRODUCTION STATUS UI
   ============================================================ */
.kipsProductionStatus{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

.kipsProductionCheck{
  border:1px solid var(--kips-border,#dbe4ee);
  border-radius:13px;
  padding:13px;
  background:#fff;
}

.kipsProductionCheck.good{
  border-color:#bbf7d0;
  background:#f0fdf4;
}

.kipsProductionCheck.bad{
  border-color:#fecaca;
  background:#fef2f2;
}

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

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


/* KIPS V253: legacy in-site billing CSS retired. Standalone billing is now official. */

/* ============================================================
   KIPS 2026 STUDENT DASHBOARD REDESIGN
   Bright blue header + white navigation + highly visible mic.
   ============================================================ */

:root{
  --kips-navy:#07368f;
  --kips-blue:#0757c9;
  --kips-bright:#0d63e7;
  --kips-yellow:#ffd21e;
  --kips-green:#16a34a;
  --kips-bg:#f7faff;
  --kips-border:#dde8f5;
  --kips-text:#12233f;
  --kips-muted:#64748b;
}

body{
  background:var(--kips-bg);
}

.topbar{
  min-height:118px !important;
  padding:14px 26px !important;
  background:
    linear-gradient(105deg,#0647b8 0%,#0757c9 42%,#0b65df 100%) !important;
  box-shadow:0 4px 18px rgba(7,55,145,.18) !important;
  display:grid !important;
  grid-template-columns:minmax(250px,1fr) auto minmax(340px,1fr) !important;
  gap:22px !important;
  align-items:center !important;
}

.brand{
  gap:14px !important;
  min-width:0;
}

.brandIcon{
  width:64px !important;
  height:64px !important;
  border-radius:18px !important;
  background:#ffffff !important;
  color:#0757c9 !important;
  font-size:32px !important;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.brand span{
  display:block;
  font-size:28px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:.2px;
}

.brand span::after{
  content:'Knowledge Inspires Powerful Students';
  display:block;
  margin-top:6px;
  color:#ffd21e;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:15px;
  font-weight:800;
  letter-spacing:.2px;
}

.userBox{
  justify-content:flex-end;
  gap:10px !important;
  flex-wrap:wrap;
}

.userText{
  min-width:155px;
}

.userName{
  font-size:16px;
}

.userRole{
  font-size:12px;
}

#kipsTopLanguageSelect{
  border:1px solid rgba(255,255,255,.45) !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  min-width:140px !important;
  height:42px;
  border-radius:13px !important;
}

#kipsTopLanguageSelect option{
  color:#111827;
  background:#fff;
}

.kipsReadPageButton,
#kipsStopReadButton,
#kipsAssistanceTopButton{
  border:1px solid rgba(255,255,255,.45) !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  border-radius:11px !important;
  min-height:40px;
}

.logoutButton{
  border-radius:11px !important;
  min-height:40px;
}

.appLayout{
  grid-template-columns:310px minmax(0,1fr) !important;
  min-height:calc(100vh - 118px) !important;
  background:#fff;
}

.sidebar{
  background:#fff !important;
  color:var(--kips-text) !important;
  padding:20px 18px !important;
  border-right:1px solid #e5edf7;
  box-shadow:none !important;
}

.roleBadge{
  background:linear-gradient(145deg,#f8fbff,#eef5ff) !important;
  color:var(--kips-navy) !important;
  border:1px solid #dce8f7;
  border-radius:16px !important;
  padding:16px !important;
  font-weight:950 !important;
}

.menuGroupTitle{
  color:#7a8aa0 !important;
  margin-top:20px !important;
}

.menuButton,
.sidebarButton{
  color:#20324e !important;
  background:transparent !important;
  border-radius:12px !important;
  padding:13px 14px !important;
  margin-bottom:5px !important;
  font-size:15px;
  font-weight:800 !important;
}

.menuButton:hover,
.sidebarButton:hover{
  background:#f0f6ff !important;
  color:#0757c9 !important;
}

.menuButton.active,
.sidebarButton.active{
  background:linear-gradient(135deg,#e9f2ff,#f3f8ff) !important;
  color:#0757c9 !important;
  box-shadow:inset 4px 0 0 #0757c9;
}

.sidebarToggle{
  background:#0757c9 !important;
  border:4px solid #fff !important;
}

.mainContent{
  background:#fff;
  padding:28px 34px 42px !important;
}

.hero,
.card,
.headerCard{
  border:1px solid var(--kips-border);
  box-shadow:0 6px 20px rgba(15,23,42,.055) !important;
}

/* ----- STUDENT HOME ----- */
.kipsStudentHome{
  max-width:1500px;
  margin:0 auto;
}

.kipsStudentWelcome{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:18px;
  align-items:stretch;
  min-height:180px;
  background:
    linear-gradient(105deg,#f2f8ff 0%,#eef6ff 62%,#f8fbff 100%);
  border:1px solid #dce9f7;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 7px 24px rgba(15,23,42,.06);
}

.kipsStudentWelcomeText{
  padding:30px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.kipsStudentWelcomeText h1{
  margin:0;
  color:#0757c9;
  font-size:30px;
  line-height:1.15;
  font-weight:950;
}

.kipsStudentWelcomeText p{
  margin:13px 0 0;
  color:#475569;
  font-size:17px;
  line-height:1.55;
  max-width:720px;
}

.kipsStudentMascotBlock{
  min-height:180px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  padding:20px 18px 0;
  background:
    radial-gradient(circle at 70% 28%,rgba(255,210,30,.20),transparent 28%),
    radial-gradient(circle at 30% 72%,rgba(7,87,201,.10),transparent 34%);
  font-size:86px;
}

.kipsStudentStatGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
}

.kipsStudentStat{
  min-height:142px;
  padding:20px;
  border:1px solid #dce8f5;
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:16px;
  box-shadow:0 5px 18px rgba(15,23,42,.045);
}

.kipsStudentStat.blue{background:linear-gradient(145deg,#eef7ff,#f8fbff)}
.kipsStudentStat.green{background:linear-gradient(145deg,#effcf4,#f8fffb)}
.kipsStudentStat.gold{background:linear-gradient(145deg,#fff9e9,#fffdf7)}
.kipsStudentStat.purple{background:linear-gradient(145deg,#f7f1ff,#fcfaff)}

.kipsStudentStatIcon{
  width:66px;
  height:66px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:30px;
  flex:0 0 66px;
}

.blue .kipsStudentStatIcon{background:linear-gradient(145deg,#4d9cff,#0757c9)}
.green .kipsStudentStatIcon{background:linear-gradient(145deg,#32c76f,#159447)}
.gold .kipsStudentStatIcon{background:linear-gradient(145deg,#ffc936,#f59e0b)}
.purple .kipsStudentStatIcon{background:linear-gradient(145deg,#a66bff,#6d28d9)}

.kipsStudentStatNumber{
  font-size:31px;
  line-height:1;
  font-weight:950;
  color:#102a56;
}

.kipsStudentStatLabel{
  margin-top:8px;
  color:#334155;
  font-size:14px;
  font-weight:750;
}

.kipsStudentStatLink{
  margin-top:10px;
  color:#0757c9;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.kipsStudentTwoCol{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:22px;
}

.kipsStudentPanel{
  border:1px solid #dde8f5;
  border-radius:18px;
  background:#fff;
  padding:20px;
  box-shadow:0 6px 20px rgba(15,23,42,.05);
}

.kipsStudentPanel h2{
  margin:0 0 14px;
  color:#12233f;
  font-size:20px;
}

.kipsStudentQuick{
  display:grid;
  gap:10px;
}

.kipsStudentQuickItem{
  border:1px solid #e4ebf4;
  background:#fbfdff;
  border-radius:13px;
  padding:14px 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.kipsStudentQuickItem strong{
  color:#20324e;
}

.kipsStudentQuickItem button{
  border:0;
  border-radius:10px;
  padding:8px 13px;
  color:#0757c9;
  background:#edf5ff;
  font-weight:900;
  cursor:pointer;
}

#studentRecommendationArea{
  margin-top:0;
}

#studentRecommendationArea .card{
  margin-top:0 !important;
}

@media(max-width:1180px){
  .topbar{
    grid-template-columns:1fr auto !important;
  }
  .appLayout{
    grid-template-columns:250px minmax(0,1fr) !important;
  }
  .kipsStudentStatGrid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:780px){
  .topbar{
    display:flex !important;
    flex-wrap:wrap;
    min-height:auto !important;
  }
  .appLayout{
    grid-template-columns:1fr !important;
  }
  .sidebar{
    display:none;
  }
  .mainContent{
    padding:18px !important;
  }
  .kipsStudentWelcome,
  .kipsStudentTwoCol{
    grid-template-columns:1fr;
  }
  .kipsStudentStatGrid{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   KIPS FINAL SIDEBAR BEHAVIOR FIX
   The menu SLIDES away and the entire page expands into its space.
   This must stay LAST because the student redesign uses !important.
   ============================================================ */

.appLayout{
  grid-template-columns:310px minmax(0,1fr) !important;
  transition:grid-template-columns .32s cubic-bezier(.4,0,.2,1) !important;
  overflow:visible;
}

.sidebar{
  width:310px !important;
  min-width:310px !important;
  transform:translateX(0);
  opacity:1;
  transition:
    transform .32s cubic-bezier(.4,0,.2,1),
    opacity .20s ease !important;
  will-change:transform;
}

/* CLOSED: remove the sidebar column completely so main content moves left */
.appLayout.sidebarCollapsed{
  grid-template-columns:0 minmax(0,1fr) !important;
}

.appLayout.sidebarCollapsed .sidebar{
  width:310px !important;
  min-width:310px !important;
  transform:translateX(-105%) !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Do NOT hide the menu items first; the whole sidebar moves as one panel. */
.appLayout.sidebarCollapsed #roleBadge,
.appLayout.sidebarCollapsed #sidebarMenu{
  display:block !important;
}

/* Main page itself slides/expands with the menu */
.mainContent,
#mainContent{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  transition:
    padding .32s cubic-bezier(.4,0,.2,1),
    width .32s cubic-bezier(.4,0,.2,1) !important;
}

/* Student dashboard should use all available screen width. */
.kipsStudentHome{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

/* Keep a small, clean page gutter when the menu is hidden. */
.appLayout.sidebarCollapsed .mainContent,
.appLayout.sidebarCollapsed #mainContent{
  padding-left:28px !important;
  padding-right:28px !important;
}

/* Reopen button floats at the left edge only while menu is hidden. */
#kipsSidebarReopen{
  left:10px !important;
  top:125px !important;
}

@media(max-width:1180px) and (min-width:781px){
  .appLayout{
    grid-template-columns:250px minmax(0,1fr) !important;
  }

  .sidebar{
    width:250px !important;
    min-width:250px !important;
  }

  .appLayout.sidebarCollapsed{
    grid-template-columns:0 minmax(0,1fr) !important;
  }

  .appLayout.sidebarCollapsed .sidebar{
    width:250px !important;
    min-width:250px !important;
  }
}

@media(max-width:780px){
  /* Mobile keeps the existing compact mobile behavior. */
  .appLayout,
  .appLayout.sidebarCollapsed{
    grid-template-columns:1fr !important;
  }

  .sidebar{
    display:none !important;
  }

  #kipsSidebarReopen{
    display:none !important;
  }
}


/* ============================================================
   KIPS TOPBAR STUDENT CONTROLS — CENTERED
   Keeps the brand on the left, centers the student controls,
   and preserves open header space without changing functionality.
   ============================================================ */
@media (min-width: 901px){
  .topbar{
    position:sticky;
    display:grid;
    grid-template-columns:minmax(270px,1fr) auto minmax(270px,1fr);
    align-items:center;
    column-gap:22px;
  }

  .topbar > .brand{
    grid-column:1;
    justify-self:start;
  }

  .topbar > .userBox{
    grid-column:2;
    justify-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:nowrap;
    width:max-content;
    max-width:100%;
  }

  .topbar .userText{
    text-align:center;
    flex:0 0 auto;
  }

  .topbar .kipsReadPageButton,
  .topbar .logoutButton,
  .topbar .userBox button,
  .topbar .userBox select{
    flex:0 0 auto;
    white-space:nowrap;
  }
}



/* KIPS HEADER — TRUE CENTER OF SCREEN */
@media (min-width:901px){
  .topbar{
    position:sticky;
  }

  .topbar > .userBox{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    margin:0 !important;
    justify-self:auto !important;
    width:max-content !important;
    max-width:calc(100vw - 600px);
  }
}



/* KIPS: center controls in the open blue header area */
@media (min-width:901px){
  .topbar{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
  }
  .topbar > .brand{
    flex:0 0 auto !important;
    position:relative !important;
    z-index:2 !important;
  }
  .topbar > .userBox{
    position:absolute !important;
    top:50% !important;
    left:calc(50% + 150px) !important;
    transform:translate(-50%,-50%) !important;
    margin:0 !important;
    width:max-content !important;
    max-width:calc(100% - 390px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
  }
}



/* KIPS HEADER — SAFE CENTERED CONTROL GROUP */
@media (min-width:901px){
  .topbar{
    position:relative !important;
    overflow:visible !important;
  }

  .topbar > .userBox{
    position:absolute !important;
    top:50% !important;
    left:62% !important;
    right:auto !important;
    transform:translate(-50%,-50%) !important;
    width:max-content !important;
    max-width:none !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
  }
}



/* ============================================================
   KIPS ACADEMY 2026 — MODERN BRAND EXPERIENCE
   Visual-only override layer. Existing IDs/functions preserved.
   ============================================================ */

:root{
  --kips-navy:#0b1f3a;
  --kips-navy-2:#102a4c;
  --kips-blue:#0876cf;
  --kips-blue-2:#0b8de3;
  --kips-sky:#37c7f4;
  --kips-gold:#f7b928;
  --kips-gold-soft:#fff6d8;
  --kips-green:#18a957;
  --kips-red:#e83f5b;
  --kips-ink:#132238;
  --kips-muted:#66758a;
  --kips-page:#f4f9fd;
  --kips-card:#ffffff;
  --kips-border:#d9e8f3;
  --kips-shadow:0 14px 38px rgba(11,31,58,.10);
  --kips-shadow-lg:0 24px 65px rgba(11,31,58,.16);
}

html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at 8% 4%, rgba(55,199,244,.13), transparent 25%),
    radial-gradient(circle at 94% 14%, rgba(247,185,40,.10), transparent 26%),
    linear-gradient(180deg,#f8fcff 0%,#f3f8fc 100%);
  color:var(--kips-ink);
  letter-spacing:.002em;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.42;
  background-image:
    radial-gradient(circle at 20px 20px, rgba(8,118,207,.06) 2px, transparent 2.5px);
  background-size:34px 34px;
}

/* ---------- Login ---------- */
#loginScreen{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.26), transparent 20%),
    radial-gradient(circle at 88% 82%, rgba(247,185,40,.20), transparent 23%),
    linear-gradient(135deg,#071c35 0%,#075fa9 44%,#11a9e6 100%) !important;
}

#loginScreen::before,
#loginScreen::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
#loginScreen::before{
  width:360px;height:360px;
  left:-110px;top:-130px;
  border:44px solid rgba(255,255,255,.06);
}
#loginScreen::after{
  width:430px;height:430px;
  right:-150px;bottom:-170px;
  border:58px solid rgba(247,185,40,.10);
}

.loginCard{
  position:relative;
  z-index:2;
  max-width:485px !important;
  padding:34px 38px 38px !important;
  border-radius:30px !important;
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 34px 90px rgba(2,18,36,.30) !important;
  backdrop-filter:blur(14px);
  animation:kipsLoginRise .45s ease-out;
}
@keyframes kipsLoginRise{
  from{opacity:0;transform:translateY(18px) scale(.985);}
  to{opacity:1;transform:none;}
}

.loginBrand{
  margin-bottom:20px !important;
}
.loginLogoCircle{
  width:96px !important;
  height:96px !important;
  border-radius:28px !important;
  background:
    linear-gradient(145deg,#0c86df,#20c0ef) !important;
  border:4px solid #fff;
  box-shadow:
    0 12px 28px rgba(8,118,207,.28),
    inset 0 0 0 1px rgba(255,255,255,.25) !important;
  transform:rotate(-3deg);
}
.loginLogoCircle::after{
  content:"K";
  font-size:48px;
  font-weight:1000;
  color:#fff;
  transform:rotate(3deg);
}
.loginLogoCircle{
  font-size:0 !important;
}

.loginCard h1{
  font-size:34px !important;
  letter-spacing:-.035em;
  color:#0876cf !important;
}
.loginSubtitle{
  color:#65758b !important;
  font-size:15px;
}
.loginSubtitle::after{
  content:" • Learn • Grow • Shine";
  display:block;
  margin-top:6px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  color:#d99400;
  text-transform:uppercase;
}

.signInButton{
  min-height:54px !important;
  border-radius:15px !important;
  background:linear-gradient(135deg,#0876cf,#0b8de3) !important;
  box-shadow:0 12px 24px rgba(8,118,207,.24);
}
.signInButton:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(8,118,207,.30);
}

/* ---------- Top bar / Kips wordmark ---------- */
.topbar{
  min-height:78px !important;
  background:
    linear-gradient(100deg,#092747 0%,#075fa9 48%,#0b8de3 100%) !important;
  border-bottom:3px solid rgba(247,185,40,.9) !important;
  box-shadow:0 5px 22px rgba(11,31,58,.20) !important;
  padding:0 24px !important;
}

.brand{
  gap:11px !important;
  font-size:22px !important;
  letter-spacing:-.025em;
}
.brandIcon{
  width:48px !important;
  height:48px !important;
  border-radius:15px !important;
  background:linear-gradient(145deg,#fff,#e9f6ff) !important;
  color:#0876cf !important;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}
.brandIcon::after{
  content:"K";
  font-size:25px;
  font-weight:1000;
}
.brandIcon{
  font-size:0 !important;
}
.brand::after{
  content:"Knowledge Inspires Powerful Students";
  display:block;
  margin-left:4px;
  color:#d9efff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
}

.logoutButton,
.kipsReadPageButton{
  border-radius:12px !important;
  min-height:42px !important;
  backdrop-filter:blur(4px);
}

/* ---------- Layout / Sidebar ---------- */
.appLayout{
  grid-template-columns:278px minmax(0,1fr) !important;
}
.sidebar{
  width:278px !important;
  min-width:278px !important;
  padding:21px 15px 30px !important;
  background:
    linear-gradient(180deg,#0b1f3a 0%,#102a4c 58%,#0d213e 100%) !important;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:8px 0 30px rgba(11,31,58,.10);
}
.roleBadge{
  padding:16px 13px !important;
  background:
    linear-gradient(135deg,rgba(55,199,244,.15),rgba(255,255,255,.08)) !important;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px !important;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.menuGroupTitle{
  margin-top:21px !important;
  color:#80cdef !important;
  letter-spacing:.13em !important;
}
.menuButton,
.sidebarButton{
  min-height:45px;
  border-radius:13px !important;
  margin-bottom:5px !important;
  padding:12px 13px !important;
  font-weight:800 !important;
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease !important;
}
.menuButton:hover,
.sidebarButton:hover{
  background:rgba(55,199,244,.12) !important;
  transform:translateX(3px);
}
.menuButton.active,
.sidebarButton.active{
  background:linear-gradient(135deg,#0876cf,#0b8de3) !important;
  box-shadow:0 8px 18px rgba(8,118,207,.25);
}

.sidebarToggle{
  background:linear-gradient(135deg,#0876cf,#18a9eb) !important;
  border:3px solid #fff !important;
}

/* ---------- Main content ---------- */
.mainContent{
  padding:30px 32px 48px !important;
}
.hero,
.pageHeader,
.headerCard{
  position:relative;
  overflow:hidden;
  border:1px solid var(--kips-border) !important;
  border-radius:24px !important;
  background:
    linear-gradient(135deg,#ffffff 0%,#f8fcff 72%,#eef9ff 100%) !important;
  box-shadow:var(--kips-shadow) !important;
}
.hero::after,
.pageHeader::after,
.headerCard::after{
  content:"";
  position:absolute;
  width:160px;height:160px;
  right:-65px;top:-75px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(55,199,244,.20),rgba(55,199,244,0) 70%);
  pointer-events:none;
}
.hero h2,
.pageHeader h2,
.headerCard h2{
  color:#075fa9 !important;
  letter-spacing:-.03em;
}

/* ---------- Cards ---------- */
.cards{
  gap:18px !important;
}
.card,
.formCard,
.assignmentCard,
.videoCard,
.statCard{
  border:1px solid var(--kips-border) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 8px 24px rgba(11,31,58,.07) !important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.card:hover,
.assignmentCard:hover,
.videoCard:hover,
.statCard:hover{
  transform:translateY(-2px);
  border-color:#bad9ec !important;
  box-shadow:0 16px 34px rgba(11,31,58,.11) !important;
}
.bigNumber{
  color:#0876cf !important;
  letter-spacing:-.05em;
}

.assignmentCard{
  overflow:hidden;
}
.assignmentImage{
  height:190px !important;
  background:
    linear-gradient(135deg,#e9f7ff,#fff7dd) !important;
}
.assignmentBody{
  padding:20px 21px 22px !important;
}
.assignmentBody h3{
  color:#102a4c !important;
}
.assignmentMeta{
  background:#f4f9fd !important;
  border:1px solid #e2edf5;
}

/* ---------- Buttons ---------- */
.primary,
.success,
.danger,
.warning,
.secondary{
  border-radius:12px !important;
  min-height:43px;
  font-weight:850 !important;
}
.primary{
  background:linear-gradient(135deg,#0876cf,#0b8de3) !important;
  box-shadow:0 6px 14px rgba(8,118,207,.16);
}
.success{
  background:linear-gradient(135deg,#159b50,#20b866) !important;
}
.warning{
  background:linear-gradient(135deg,#f6aa0a,#ffc83b) !important;
  color:#342200 !important;
}
.danger{
  background:linear-gradient(135deg,#dc3653,#ee5871) !important;
}
.secondary{
  border:1px solid #c7dbea !important;
  background:linear-gradient(180deg,#fff,#f7fbfe) !important;
  color:#19324d !important;
}
.primary:hover:not(:disabled),
.success:hover:not(:disabled),
.warning:hover:not(:disabled),
.danger:hover:not(:disabled),
.secondary:hover:not(:disabled){
  transform:translateY(-1px);
}

/* ---------- Inputs ---------- */
input,
select,
textarea{
  border-radius:13px !important;
  border:1px solid #cbddea !important;
  background:#fff;
  min-height:46px;
}
input:focus,
select:focus,
textarea:focus{
  border-color:#0b8de3 !important;
  box-shadow:0 0 0 4px rgba(11,141,227,.11) !important;
}

/* ---------- Tables ---------- */
.tableWrap{
  border:1px solid var(--kips-border);
  border-radius:20px !important;
  box-shadow:var(--kips-shadow) !important;
}
table{
  background:#fff;
}
th{
  background:
    linear-gradient(180deg,#edf8ff,#e6f3fb) !important;
  color:#0d517c !important;
  font-weight:900 !important;
  letter-spacing:.015em;
}
td{
  color:#26394d;
}
tbody tr:hover{
  background:#f5fbff !important;
}

/* ---------- Status / info ---------- */
.statusBadge,
.badge,
.rollCallStatus{
  border-radius:999px !important;
}
.infoBox{
  background:#eef8ff !important;
  border-color:#b9def5 !important;
  color:#165681 !important;
}
.successBox{
  background:#eefbf3 !important;
}
.warningBox{
  background:#fff9e9 !important;
  border-color:#f5d77e !important;
}

/* ---------- Modals ---------- */
.modalOverlay,
.modalBackdrop{
  backdrop-filter:blur(5px);
}
.modalCard,
.modal{
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--kips-shadow-lg) !important;
}

/* ---------- Exercise / student work ---------- */
.exerciseHeader,
.questionPanel{
  border:1px solid var(--kips-border);
  border-radius:22px !important;
  box-shadow:var(--kips-shadow) !important;
}
.questionCount{
  color:#0876cf !important;
}
.questionTimer{
  background:#edf8ff !important;
  color:#075fa9;
}
.answerOption{
  border-radius:14px !important;
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
}
.answerOption:hover:not(:disabled){
  transform:translateX(2px);
  border-color:#48aee7 !important;
}
.answerOption.selected{
  background:#eaf6ff !important;
}
.questionNumberButton{
  border-radius:12px !important;
}

/* ---------- Help Queue ---------- */
.helpQueueHeader,
.liveHelpCard{
  border-radius:22px !important;
}
.liveHelpHeader{
  background:
    linear-gradient(135deg,#075fa9,#0b8de3) !important;
}
.helpQueueQuestionText{
  color:#102a4c;
}

/* ---------- Roll Call ---------- */
.rollCallToolbar{
  background:#fff;
  border:1px solid var(--kips-border);
  border-radius:18px;
  padding:15px;
  box-shadow:0 8px 22px rgba(11,31,58,.06);
}
.rollCallTableCard{
  border-radius:20px !important;
  border:1px solid var(--kips-border);
}
.rollCallTable thead th{
  background:linear-gradient(180deg,#e5f8ff,#dcf2fb) !important;
  color:#0d5678 !important;
}

/* ---------- Branded empty / loading states ---------- */
.kipsEmptyState{
  border:1px dashed #b9d8ea !important;
  background:
    linear-gradient(135deg,#f9fdff,#fffdf6) !important;
}
.kipsEmptyStateIcon{
  font-size:40px !important;
}
.kipsSpinner{
  border-top-color:#0b8de3 !important;
}

/* ---------- Student word helper ---------- */
.kipsWordHelpPopup{
  border-color:#0b8de3 !important;
  border-radius:20px !important;
  box-shadow:var(--kips-shadow-lg) !important;
}
.kipsWordHelpSpeakButton{
  background:linear-gradient(135deg,#159b50,#20b866) !important;
}

/* ---------- Mobile ---------- */
@media(max-width:900px){
  .appLayout{
    grid-template-columns:min(84vw,300px) minmax(0,1fr) !important;
  }
  .sidebar{
    width:min(84vw,300px) !important;
    min-width:min(84vw,300px) !important;
  }
  .mainContent{
    padding:22px 18px 40px !important;
  }
}
@media(max-width:600px){
  .loginCard{
    padding:28px 20px 30px !important;
    border-radius:24px !important;
  }
  .loginCard h1{
    font-size:29px !important;
  }
  .topbar{
    min-height:70px !important;
  }
  .brand::after{
    display:none;
  }
  .mainContent{
    padding:18px 13px 35px !important;
  }
  .hero,
  .pageHeader,
  .headerCard{
    border-radius:19px !important;
  }
  .card,
  .formCard,
  .assignmentCard{
    border-radius:17px !important;
  }
}



/* KIPS SIDEBAR READABILITY FIX */
.sidebar{
  color:#ffffff !important;
}
.sidebar .menuButton,
.sidebar .sidebarButton{
  color:#ffffff !important;
  font-size:16px !important;
  font-weight:900 !important;
  line-height:1.25 !important;
  letter-spacing:.01em !important;
  min-height:50px !important;
  padding:13px 15px !important;
}
.sidebar .menuButton *,
.sidebar .sidebarButton *{
  color:#ffffff !important;
}
.sidebar .menuGroupTitle{
  color:#ffffff !important;
  font-size:13px !important;
  font-weight:1000 !important;
  letter-spacing:.11em !important;
  opacity:.9 !important;
}
.sidebar .roleBadge,
.sidebar .roleBadge *{
  color:#ffffff !important;
}
.sidebar .roleBadge{
  font-size:15px !important;
  font-weight:900 !important;
}
.sidebar .menuButton:hover,
.sidebar .sidebarButton:hover{
  color:#ffffff !important;
  background:rgba(255,255,255,.13) !important;
}
.sidebar .menuButton.active,
.sidebar .sidebarButton.active{
  color:#ffffff !important;
  background:linear-gradient(135deg,#0876cf,#0b8de3) !important;
}



/* KIPS BRAND HEADER POSITION FIX
   Keep student name/role untouched on the right.
   Put academy tagline directly beneath Kips Academy only. */
.brand{
  display:grid !important;
  grid-template-columns:auto auto !important;
  grid-template-rows:auto auto !important;
  column-gap:11px !important;
  row-gap:0 !important;
  align-items:center !important;
}
.brandIcon{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
}
.brand::after{
  content:none !important;
  grid-column:2 !important;
  grid-row:2 !important;
  display:block !important;
  margin:1px 0 0 0 !important;
  color:#ffffff !important;
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  letter-spacing:.015em !important;
  white-space:nowrap !important;
  opacity:.92 !important;
}



/* KIPS TAGLINE FINAL READABILITY */
.brand::after{
  content:none !important;
  color:#ffffff !important;
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  opacity:1 !important;
  white-space:nowrap !important;
  text-shadow:0 1px 2px rgba(0,0,0,.28) !important;
  margin-top:3px !important;
}



/* REMOVE DUPLICATE HEADER TAGLINE */
.brand::after{
  content:none !important;
  display:none !important;
}



/* FINAL: remove duplicate white header tagline only */
.topbar .brand::after,
.topbar .brandTagline,
.topbar .brandSubtitle,
.topbar .kipsTagline,
.topbar [data-kips-tagline]{
  content:none !important;
  display:none !important;
}



/* ABSOLUTE FINAL HEADER DUPLICATE REMOVAL */
.topbar .brand span::after,
.topbar .brand::after{
  content:none !important;
  display:none !important;
}


/* ============================================================
   KIPS FULL AUDIT — STATE / NAVIGATION / SIDEBAR FIXES
   ============================================================ */
.appLayout.sidebarCollapsed{
  grid-template-columns:0 minmax(0,1fr) !important;
}
.appLayout.sidebarCollapsed .sidebar{
  width:278px !important;
  min-width:278px !important;
  transform:translateX(-110%) !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.appLayout.sidebarCollapsed .mainContent,
.appLayout.sidebarCollapsed #mainContent{
  width:100% !important;
  min-width:0 !important;
}
.sidebar .menuButton,
.sidebar .sidebarButton{
  color:#ffffff !important;
  font-size:16px !important;
  font-weight:900 !important;
}
.sidebar .menuGroupTitle,
.sidebar .roleBadge,
.sidebar .roleBadge *{
  color:#ffffff !important;
}
@media(max-width:900px){
  .appLayout.sidebarCollapsed{
    grid-template-columns:0 minmax(0,1fr) !important;
  }
  .appLayout.sidebarCollapsed .sidebar{
    transform:translateX(-110%) !important;
  }
}


/* KIPS TEST SUPER ACCOUNT */
body.kipsTestSuperAccount .topbar{
  border-bottom-color:#f7b928 !important;
}
body.kipsTestSuperAccount #topUserRole{
  color:#fff2b5 !important;
  font-weight:1000 !important;
  letter-spacing:.04em;
}
body.kipsTestSuperAccount .roleBadge::after{
  content:" • FULL ADMIN + STUDENT QA";
  color:#ffd95c;
  font-size:11px;
}
.kipsDiagramTools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 12px;
}


/* KIPS V220 — HD raster illustrated learning assets */
.kbV220HD{max-width:1100px!important}.kbV220HD img{image-rendering:auto}.kbV212HelpCard .kbV220HD{max-width:920px!important}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


/* ============================================================
   KIPS ACADEMY — ORIGINAL SUPER LEARNER LOGIN
   No third-party artwork or copyrighted characters.
   ============================================================ */

#loginScreen.kipsAdventureLogin{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr);
  padding:0 !important;
  background:#071f45 !important;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}

.kipsAdventureStage{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:60px clamp(42px,6vw,96px);
  color:#fff;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.14) 0 2px,transparent 3px),
    radial-gradient(circle at 70% 13%,rgba(255,222,95,.22) 0 3px,transparent 4px),
    linear-gradient(145deg,#082b66 0%,#0a5fae 48%,#19acd3 100%);
}

.kipsAdventureStage:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.38) 0 1.5px,transparent 1.8px),
    radial-gradient(circle,rgba(255,255,255,.22) 0 1px,transparent 1.4px);
  background-size:94px 94px,137px 137px;
  background-position:7px 11px,37px 61px;
  opacity:.55;
}

.kipsAdventureCopy{
  position:relative;
  z-index:7;
  max-width:650px;
  margin-top:-90px;
}

.kipsMiniBadge{
  width:max-content;
  padding:9px 15px;
  border-radius:999px;
  color:#573e00;
  background:linear-gradient(90deg,#ffe875,#ffc53d);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.13em;
  box-shadow:0 8px 22px rgba(0,0,0,.17);
}

.kipsAdventureCopy h2{
  margin:20px 0 14px;
  font-size:clamp(48px,5.4vw,84px);
  line-height:.94;
  letter-spacing:-.055em;
  font-weight:1000;
  text-shadow:0 7px 24px rgba(0,30,69,.28);
}

.kipsAdventureCopy h2 span{
  display:inline-block;
  color:#ffe24e;
  transform:rotate(-2deg);
  text-shadow:0 5px 0 rgba(128,85,0,.22);
}

.kipsAdventureCopy p{
  max-width:560px;
  margin:0;
  color:#dff7ff;
  font-size:18px;
  font-weight:750;
  line-height:1.55;
}

.kipsMissionRow{
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  margin-top:25px;
}

.kipsMissionCard{
  min-width:132px;
  padding:13px 16px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:19px;
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(0,34,75,.16);
  display:flex;
  align-items:center;
  gap:9px;
}

.kipsMissionCard b{font-size:25px}
.kipsMissionCard span{font-size:13px;font-weight:950;letter-spacing:.02em}

.kipsPlanet{
  position:absolute;
  z-index:5;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-weight:1000;
  color:#17355e;
  box-shadow:0 16px 36px rgba(0,25,70,.24), inset -11px -12px 0 rgba(0,0,0,.06);
  animation:kipsOrbitFloat 5.5s ease-in-out infinite;
}

.planetOne{
  width:104px;height:104px;right:11%;top:12%;
  background:linear-gradient(145deg,#fff3a0,#ffc943);
  transform:rotate(9deg);
}

.planetTwo{
  width:86px;height:86px;left:9%;bottom:18%;
  background:linear-gradient(145deg,#d8faff,#74dcf2);
  animation-delay:-2s;
}

.planetThree{
  width:66px;height:66px;right:28%;bottom:23%;
  background:linear-gradient(145deg,#efdfff,#bba4ff);
  font-size:30px;animation-delay:-3.1s;
}

.kipsRocket{
  position:absolute;
  right:9%;top:38%;
  z-index:6;
  font-size:64px;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.2));
  transform:rotate(-18deg);
  animation:kipsRocketFly 4.8s ease-in-out infinite;
}

.kipsHill{
  position:absolute;
  left:-8%;
  right:-10%;
  bottom:-230px;
  height:430px;
  border-radius:50% 50% 0 0 / 45% 45% 0 0;
  z-index:2;
}
.hillBack{background:#4bd39b;transform:rotate(2deg);bottom:-270px}
.hillFront{background:#22b779;transform:rotate(-2deg);bottom:-315px}

.kipsMascotBook{
  position:absolute;
  z-index:6;
  left:11%;
  bottom:5%;
  width:118px;height:92px;
  border-radius:14px 14px 22px 22px;
  background:linear-gradient(90deg,#ff6f61 0 48%,#ff8d68 49% 100%);
  border:5px solid #fff4de;
  box-shadow:0 17px 35px rgba(0,39,76,.22);
  transform:rotate(-6deg);
}

.kipsMascotBook:before,.kipsMascotBook:after{
  content:"";
  position:absolute;bottom:-24px;width:13px;height:30px;
  background:#183d68;border-radius:10px;
}
.kipsMascotBook:before{left:25px}.kipsMascotBook:after{right:25px}

.bookFace{
  text-align:center;
  color:white;
  font-weight:1000;
  font-size:27px;
  margin-top:17px;
  letter-spacing:4px;
}
.bookLabel{
  position:absolute;bottom:7px;left:0;right:0;text-align:center;
  color:#fff8c4;font-size:12px;font-weight:1000;letter-spacing:.15em;
}

.kipsMascotPencil{
  position:absolute;
  z-index:6;
  right:13%;
  bottom:6%;
  width:54px;height:145px;
  border-radius:15px 15px 8px 8px;
  background:linear-gradient(90deg,#ffd43b 0 65%,#f0b923 66%);
  border:4px solid #fff2a8;
  box-shadow:0 16px 32px rgba(0,39,76,.2);
  transform:rotate(10deg);
}
.pencilTip{
  position:absolute;top:-38px;left:4px;
  width:0;height:0;
  border-left:19px solid transparent;
  border-right:19px solid transparent;
  border-bottom:40px solid #f2d0a6;
  transform:rotate(180deg);
}
.pencilFace{
  color:#223e64;font-size:17px;font-weight:1000;text-align:center;margin-top:48px;
}

.kipsSkySpark{position:absolute;color:#fff3a1;font-weight:1000;z-index:4;animation:kipsTwinkle 2.2s ease-in-out infinite}
.s1{left:14%;top:12%;font-size:25px}.s2{right:39%;top:10%;font-size:16px;animation-delay:-1s}
.s3{right:15%;top:31%;font-size:22px;animation-delay:-.6s}.s4{left:42%;bottom:25%;font-size:18px;animation-delay:-1.4s}

.kipsLoginPanel{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px;
  background:
    radial-gradient(circle at 10% 10%,#e8f9ff 0 100px,transparent 101px),
    linear-gradient(180deg,#ffffff,#f3fbff);
  position:relative;
  z-index:10;
}

.loginCard.kipsLoginCard{
  width:min(100%,520px) !important;
  max-width:520px !important;
  padding:34px 38px 30px !important;
  border-radius:32px !important;
  background:#fff !important;
  border:1px solid #d9edf9 !important;
  box-shadow:0 28px 70px rgba(20,72,112,.16) !important;
}

.kipsLoginCard .loginBrand{
  text-align:left !important;
  margin-bottom:18px !important;
}

.kipsLogoBadge{
  width:68px;height:68px;
  display:grid;place-items:center;
  border-radius:22px;
  background:linear-gradient(145deg,#0698df,#21bee7);
  color:#fff;
  font-size:38px;
  font-weight:1000;
  box-shadow:0 10px 24px rgba(4,154,218,.25),0 0 0 7px #e9f8ff;
  transform:rotate(-3deg);
  margin-bottom:17px;
}

.kipsWelcome{
  color:#765300;
  background:#fff1a8;
  width:max-content;
  max-width:100%;
  padding:7px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.09em;
}

.kipsLoginCard .loginBrand h1{
  margin:8px 0 3px !important;
  font-size:36px !important;
  line-height:1 !important;
  color:#075fa9 !important;
  letter-spacing:-.04em;
}

.kipsLoginCard .loginSubtitle{
  color:#61738c !important;
  font-size:14px !important;
  line-height:1.4 !important;
}

.kipsLoginCard .kipsBrandRibbon{
  display:flex !important;
  justify-content:flex-start !important;
  gap:8px !important;
  flex-wrap:wrap;
  margin:13px 0 0 !important;
}

.kipsLoginCard .kipsBrandRibbon span{
  padding:7px 11px;
  border-radius:999px;
  background:#eef8ff;
  color:#096daf;
  font-size:10px;
  font-weight:1000;
}

.kipsLoginCard .kipsBrandRibbon span:nth-child(2){background:#fff5cf;color:#8a6300}
.kipsLoginCard .kipsBrandRibbon span:nth-child(3){background:#e9faf2;color:#147a48}

.kipsFormIntro{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:18px 0 18px;
  padding:14px 16px;
  background:linear-gradient(90deg,#eef8ff,#f4f1ff);
  border-radius:17px;
  border:1px dashed #beddf4;
}
.kipsFormIntro b{font-size:15px;color:#17314f}
.kipsFormIntro span{font-size:12px;color:#6e7c91}

.kipsFieldGroup{margin:0 0 14px}
.kipsFieldGroup label{
  display:block !important;
  margin:0 0 7px !important;
  font-size:13px !important;
  font-weight:950 !important;
  color:#1e3552 !important;
}

.kipsFieldGroup input,.kipsFieldGroup select{
  width:100% !important;
  min-height:52px !important;
  margin:0 !important;
  border:2px solid #d6e8f5 !important;
  border-radius:16px !important;
  background:#f8fcff !important;
  color:#1c2d44 !important;
  padding:0 15px !important;
  font-size:15px !important;
  outline:none !important;
  transition:.18s ease !important;
}

.kipsFieldGroup input:focus,.kipsFieldGroup select:focus{
  border-color:#18a7e3 !important;
  background:#fff !important;
  box-shadow:0 0 0 5px rgba(24,167,227,.12) !important;
  transform:translateY(-1px);
}

#loginButton.kipsAdventureButton{
  width:100% !important;
  min-height:58px !important;
  margin-top:5px !important;
  padding:0 18px !important;
  border:none !important;
  border-radius:18px !important;
  background:linear-gradient(100deg,#ffb91f 0%,#ffda49 47%,#ffbb1f 100%) !important;
  color:#553c00 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  font-size:14px !important;
  font-weight:1000 !important;
  letter-spacing:.05em;
  box-shadow:0 12px 26px rgba(204,141,0,.24) !important;
  transition:.18s ease !important;
}
#loginButton.kipsAdventureButton b{font-size:22px;transition:.18s ease}
#loginButton.kipsAdventureButton:hover{transform:translateY(-2px) scale(1.01)}
#loginButton.kipsAdventureButton:hover b{transform:translateX(4px)}
#loginButton.kipsAdventureButton:disabled{opacity:.68;transform:none}

#loginMessage{
  min-height:20px;
  margin-top:13px !important;
  text-align:center;
  font-size:13px;
}

.kipsSafeNote{
  margin-top:9px;
  text-align:center;
  color:#8a98a9;
  font-size:11px;
  font-weight:800;
}

@keyframes kipsOrbitFloat{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes kipsRocketFly{0%,100%{translate:0 0;rotate:-4deg}50%{translate:-10px -15px;rotate:4deg}}
@keyframes kipsTwinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

@media(max-width:1040px){
  #loginScreen.kipsAdventureLogin{grid-template-columns:1fr 480px}
  .kipsAdventureCopy h2{font-size:56px}
  .kipsMissionRow{max-width:330px}
}

@media(max-width:860px){
  #loginScreen.kipsAdventureLogin{display:block;background:linear-gradient(160deg,#0a5daa,#13a9d2)!important;padding:22px!important}
  .kipsAdventureStage{
    min-height:auto;
    border-radius:28px 28px 0 0;
    padding:33px 28px 85px;
  }
  .kipsAdventureCopy{margin:0;max-width:none;text-align:center}
  .kipsMiniBadge{margin:auto}
  .kipsAdventureCopy h2{font-size:46px}
  .kipsAdventureCopy p{margin:auto}
  .kipsMissionRow{justify-content:center;margin-left:auto;margin-right:auto}
  .planetOne{width:70px;height:70px;right:5%;top:8%}
  .planetTwo,.planetThree,.kipsRocket,.kipsMascotPencil{display:none}
  .kipsMascotBook{left:7%;bottom:14px;transform:scale(.72) rotate(-7deg)}
  .kipsLoginPanel{min-height:auto;padding:0;background:transparent}
  .loginCard.kipsLoginCard{
    margin-top:-35px !important;
    border-radius:28px !important;
    box-shadow:0 22px 55px rgba(0,36,76,.26) !important;
  }
}

@media(max-width:540px){
  #loginScreen.kipsAdventureLogin{padding:10px!important}
  .kipsAdventureStage{padding:25px 15px 70px;border-radius:22px 22px 0 0}
  .kipsAdventureCopy h2{font-size:39px}
  .kipsAdventureCopy p{font-size:14px}
  .kipsMissionCard{min-width:0;padding:9px 11px;border-radius:14px}
  .kipsMissionCard span{font-size:10px}
  .loginCard.kipsLoginCard{padding:27px 20px 24px!important}
  .kipsLoginCard .loginBrand h1{font-size:31px!important}
}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


/* KIPS V30 — compact, scalable My Courses bookshelf. Display only; workbook engines untouched. */
.kipsWorkbookLibraryGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(225px,1fr));
  gap:18px;
  align-items:stretch;
  margin:0 0 24px;
}
.kipsWorkbookLibraryGrid .kipsWorkbookShelf{margin:0;min-width:0;height:100%;}
.kipsWorkbookLibraryGrid .kipsWorkbookCover{
  min-height:260px;height:100%;
  padding:20px 18px 18px 34px;
  border-radius:22px;
  display:flex;flex-direction:column;
}
.kipsWorkbookLibraryGrid .kipsWorkbookSpine{width:16px;}
.kipsWorkbookLibraryGrid .kipsWorkbookTop{gap:10px;}
.kipsWorkbookLibraryGrid .kipsWorkbookK{width:44px;height:44px;border-radius:13px;font-size:26px;flex:0 0 auto;}
.kipsWorkbookLibraryGrid .kipsWorkbookEyebrow{font-size:9px;letter-spacing:.1em;}
.kipsWorkbookLibraryGrid .kipsWorkbookEdition{font-size:11px;line-height:1.2;}
.kipsWorkbookLibraryGrid .kipsWorkbookHero{margin:17px 0 12px;}
.kipsWorkbookLibraryGrid .kipsWorkbookBigTitle{font-size:30px;line-height:.98;letter-spacing:-.035em;}
.kipsWorkbookLibraryGrid .kipsWorkbookBigTitle span{display:block;margin-top:8px;font-size:17px;line-height:1.12;}
.kipsWorkbookLibraryGrid .kipsWorkbookTagline{margin-top:9px;font-size:8px;line-height:1.35;letter-spacing:.07em;}
.kipsWorkbookLibraryGrid .kipsWorkbookSubjects{gap:5px;}
.kipsWorkbookLibraryGrid .kipsWorkbookSubjects span{padding:5px 7px;font-size:8px;line-height:1.1;}
.kipsWorkbookLibraryGrid .kipsWorkbookBottom{margin-top:auto;padding-top:12px;gap:8px;align-items:flex-end;}
.kipsWorkbookLibraryGrid .kipsWorkbookBottom b{font-size:11px;line-height:1.2;}
.kipsWorkbookLibraryGrid .kipsWorkbookBottom small{font-size:9px;line-height:1.25;}
.kipsWorkbookLibraryGrid .kipsWorkbookBottom button{border-radius:11px;padding:9px 10px;font-size:9px;white-space:nowrap;}
.kipsWorkbookLibraryGrid .kipsWorkbookDoodle.d1{width:66px;height:66px;right:7%;top:20%;font-size:11px;}
.kipsWorkbookLibraryGrid .kipsWorkbookDoodle.d2{width:48px;height:48px;right:3%;bottom:12%;font-size:10px;}
.kipsWorkbookLibraryGrid .kipsWorkbookDoodle.d3{font-size:28px;right:18%;top:15%;}
@media (min-width:1200px){.kipsWorkbookLibraryGrid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:760px){
 .kipsWorkbookLibraryGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
 .kipsWorkbookLibraryGrid .kipsWorkbookCover{min-height:235px;padding:17px 13px 15px 28px;}
 .kipsWorkbookLibraryGrid .kipsWorkbookBigTitle{font-size:25px;}
 .kipsWorkbookLibraryGrid .kipsWorkbookBigTitle span{font-size:14px;}
 .kipsWorkbookLibraryGrid .kipsWorkbookSubjects{display:none;}
 .kipsWorkbookLibraryGrid .kipsWorkbookBottom{flex-direction:column;align-items:stretch;}
 .kipsWorkbookLibraryGrid .kipsWorkbookBottom button{width:100%;}
}
@media (max-width:430px){.kipsWorkbookLibraryGrid{grid-template-columns:1fr;}}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


.kipsWorkbookShelf{
  margin:0 0 24px;
}
.kipsWorkbookCover{
  position:relative;
  min-height:290px;
  padding:27px 30px 25px 48px;
  border-radius:28px;
  overflow:hidden;
  cursor:pointer;
  color:#fff;
  background:
    radial-gradient(circle at 86% 14%,rgba(255,235,111,.23) 0 80px,transparent 82px),
    linear-gradient(135deg,#064b91 0%,#087cc2 46%,#16b7ce 100%);
  border:3px solid #bceeff;
  box-shadow:0 18px 42px rgba(7,80,137,.22);
  transition:.2s ease;
}
.kipsWorkbookCover:hover{
  transform:translateY(-3px);
  box-shadow:0 23px 50px rgba(7,80,137,.28);
}
.kipsWorkbookSpine{
  position:absolute;left:0;top:0;bottom:0;width:24px;
  background:linear-gradient(#ffca32,#ff9f1c);
  box-shadow:inset -5px 0 10px rgba(114,61,0,.16);
}
.kipsWorkbookTop{display:flex;align-items:center;gap:14px;position:relative;z-index:3}
.kipsWorkbookK{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;
  background:#fff;color:#0879bf;font-size:34px;font-weight:1000;
  box-shadow:0 8px 20px rgba(0,44,86,.2);transform:rotate(-3deg)
}
.kipsWorkbookEyebrow{font-size:12px;font-weight:1000;letter-spacing:.13em;color:#dff8ff}
.kipsWorkbookEdition{font-size:17px;font-weight:1000;letter-spacing:.03em;color:#ffe364}
.kipsWorkbookHero{position:relative;z-index:3;margin:24px 0 18px}
.kipsWorkbookBigTitle{
  font-size:clamp(33px,4vw,55px);font-weight:1000;line-height:.94;letter-spacing:-.045em
}
.kipsWorkbookBigTitle span{color:#ffe059}
.kipsWorkbookTagline{margin-top:12px;font-size:11px;font-weight:1000;letter-spacing:.105em;color:#d7f7ff}
.kipsWorkbookSubjects{display:flex;gap:9px;flex-wrap:wrap;position:relative;z-index:3}
.kipsWorkbookSubjects span{
  padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);font-size:12px;font-weight:900
}
.kipsWorkbookBottom{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:18px;margin-top:22px;padding-top:17px;border-top:1px solid rgba(255,255,255,.2)
}
.kipsWorkbookBottom div{display:flex;flex-direction:column;gap:2px}
.kipsWorkbookBottom small{color:#d8f6ff}
.kipsWorkbookBottom button{
  border:0;border-radius:15px;padding:12px 16px;background:#ffd547;color:#594000;
  font-weight:1000;box-shadow:0 8px 18px rgba(76,48,0,.18)
}
.kipsWorkbookDoodle{
  position:absolute;z-index:1;display:grid;place-items:center;border-radius:50%;
  font-weight:1000;color:rgba(255,255,255,.75);border:3px dashed rgba(255,255,255,.2)
}
.kipsWorkbookDoodle.d1{width:105px;height:105px;right:12%;top:21%;transform:rotate(10deg)}
.kipsWorkbookDoodle.d2{width:76px;height:76px;right:4%;bottom:10%;transform:rotate(-8deg)}
.kipsWorkbookDoodle.d3{font-size:43px;right:31%;top:16%;border:0;color:#ffe05b}

.kipsWorkbookOverlay{
  position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  padding:22px;background:rgba(7,22,43,.72);backdrop-filter:blur(7px)
}
.kipsWorkbookOverlay.show{display:flex}
.kipsWorkbookModal{
  width:min(950px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:28px;
  border:3px solid #cfeeff;box-shadow:0 30px 80px rgba(0,20,50,.35)
}
.kipsWorkbookModalHead{
  position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;gap:18px;
  align-items:flex-start;padding:22px 24px;background:linear-gradient(110deg,#075fa9,#16aaca);
  color:#fff;border-radius:24px 24px 0 0
}
.kipsWorkbookMini{font-size:10px;font-weight:1000;letter-spacing:.14em;color:#ffe36a}
.kipsWorkbookModalHead h2{margin:4px 0 3px;font-size:29px}
.kipsWorkbookModalHead p{margin:0;color:#dff8ff}
.kipsWorkbookClose{
  width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#185179;
  font-size:27px;line-height:1;font-weight:500
}
#kipsWorkbookModalBody{padding:22px}
.kipsWorkbookSubjectGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kipsSubjectChoice{
  text-align:left;border:2px solid #dbeaf5;border-radius:22px;padding:22px;background:#fbfdff;
  color:#18324f;cursor:pointer;transition:.18s ease;display:flex;flex-direction:column;align-items:flex-start
}
.kipsSubjectChoice:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(31,84,121,.12)}
.kipsSubjectChoice.math{background:linear-gradient(145deg,#eff9ff,#f8fdff)}
.kipsSubjectChoice.ela{background:linear-gradient(145deg,#fff8e6,#fffdf8)}
.kipsSubjectIcon{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:30px;
  background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.08);margin-bottom:16px
}
.kipsSubjectChoice small{font-size:10px;font-weight:1000;letter-spacing:.11em;color:#758397}
.kipsSubjectChoice h3{font-size:25px;margin:5px 0 7px}
.kipsSubjectChoice p{margin:0 0 18px;color:#66758a;line-height:1.45}
.kipsSubjectChoice b{margin-top:auto;color:#0875b9;font-size:12px;letter-spacing:.03em}
.kipsWorkbookTip{
  margin-top:16px;padding:13px 15px;border-radius:14px;background:#fff6cf;color:#6b5200;font-size:12px
}
.kipsWorkbookLoading{padding:42px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.kipsWorkbookExerciseToolbar{
  display:flex;align-items:center;gap:15px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #e6eef5
}
.kipsWorkbookExerciseToolbar div{display:flex;flex-direction:column;gap:2px}
.kipsWorkbookExerciseToolbar span{font-size:11px;color:#728095}
.kipsWorkbookExerciseList{display:grid;gap:9px}
.kipsWorkbookExerciseRow{
  display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:14px;
  padding:12px 14px;border:1px solid #dce9f3;border-radius:17px;background:#fff
}
.kipsWorkbookExerciseRow.readyRow{border-left:5px solid #22b57c}
.kipsWorkbookExerciseRow.comingRow{opacity:.72;background:#f9fbfd}
.kipsExerciseNumber{
  width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:#eaf7ff;
  color:#0874b7;font-size:13px;font-weight:1000
}
.kipsExerciseInfo small{font-size:9px;font-weight:1000;letter-spacing:.1em;color:#8795a6}
.kipsExerciseInfo h3{font-size:15px;margin:2px 0 3px;color:#1a304c}
.kipsExerciseInfo p{font-size:11px;margin:0;color:#718095;line-height:1.35}
.kipsExerciseAction{display:flex;align-items:center;gap:9px}
.kipsReadyPill,.kipsComingPill{
  font-size:9px;font-weight:1000;padding:6px 8px;border-radius:999px;white-space:nowrap
}
.kipsReadyPill{background:#e5f8ef;color:#08754c}
.kipsComingPill{background:#eef2f6;color:#788596}
.kipsBeginButton{
  border:0;border-radius:12px;padding:9px 12px;background:#0e93d5;color:#fff;font-size:10px;font-weight:1000
}
.kipsBeginButton.locked{background:#d9e1e8;color:#778493}

@media(max-width:760px){
  .kipsWorkbookCover{padding:22px 20px 22px 38px}
  .kipsWorkbookBottom{align-items:flex-start;flex-direction:column}
  .kipsWorkbookSubjectGrid{grid-template-columns:1fr}
  .kipsWorkbookExerciseRow{grid-template-columns:44px 1fr}
  .kipsExerciseAction{grid-column:2;justify-content:flex-start}
  .kipsWorkbookDoodle{display:none}
}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


.kipsCourseDeleteOverlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(7,24,45,.68);
  backdrop-filter:blur(5px);
}
.kipsCourseDeleteOverlay.show{display:flex}
.kipsCourseDeleteCard{
  width:min(430px,94vw);
  padding:28px 26px;
  border-radius:24px;
  background:#fff;
  border:2px solid #d8edf9;
  box-shadow:0 28px 70px rgba(0,25,60,.3);
  text-align:center;
  color:#19324e;
}
.kipsCourseDeleteCard h3{
  margin:13px 0 8px;
  font-size:22px;
}
.kipsCourseDeleteCard p{
  margin:0 0 8px;
  color:#52687e;
  font-weight:750;
}
.kipsCourseDeleteCard small{
  color:#7b8998;
  line-height:1.4;
}
.kipsCourseDeleteSpinner{
  width:48px;
  height:48px;
  margin:auto;
  border-radius:50%;
  border:6px solid #dbeef8;
  border-top-color:#118dcf;
  animation:kipsCourseDeleteSpin .8s linear infinite;
}
@keyframes kipsCourseDeleteSpin{
  to{transform:rotate(360deg)}
}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


.kipsSuperExercisePage{
  max-width:1040px;margin:0 auto;padding:5px 0 35px;
}
.kipsSuperExerciseTop{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:18px 20px;border-radius:25px;
  background:linear-gradient(120deg,#075fa9,#0e99d4 56%,#6b54d8);
  color:white;box-shadow:0 16px 35px rgba(22,85,135,.22)
}
.kipsSuperBack{
  border:0;border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.16);
  color:white;font-weight:900
}
.kipsSuperChapterIdentity{display:flex;align-items:center;gap:13px}
.kipsSuperChapterIcon{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;
  background:white;font-size:30px;box-shadow:0 8px 20px rgba(0,0,0,.15)
}
.kipsSuperChapterIdentity small{font-size:9px;letter-spacing:.12em;font-weight:1000;color:#d7f5ff}
.kipsSuperChapterIdentity h2{margin:2px 0;font-size:22px}
.kipsSuperChapterIdentity p{margin:0;font-size:11px;color:#d7efff}
.kipsSuperStats{display:flex;gap:8px}
.kipsSuperStats div{
  min-width:74px;padding:8px 10px;border-radius:15px;background:rgba(255,255,255,.15);
  text-align:center
}
.kipsSuperStats b{display:block;font-size:17px}
.kipsSuperStats span{font-size:8px;font-weight:900}
.kipsSuperProgress{
  height:12px;margin:15px 4px;border-radius:999px;overflow:hidden;background:#d9e8f3
}
.kipsSuperProgress div{
  height:100%;border-radius:999px;background:linear-gradient(90deg,#ffd33d,#24bd7f);transition:.25s
}
.kipsSuperMissionCard{
  position:relative;overflow:hidden;background:#fff;border:2px solid #dcecf7;border-radius:28px;
  padding:25px;box-shadow:0 17px 38px rgba(36,78,109,.12)
}
.kipsSuperMissionCard:before{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  right:-115px;top:-125px;background:#e8f8ff
}
.kipsSuperMissionCard.boss{border-color:#f4cc44;background:linear-gradient(180deg,#fffdf4,#fff)}
.kipsSuperMissionCard.boss:before{background:#fff2b9}
.kipsSuperMissionHead{display:flex;align-items:center;gap:9px;position:relative;z-index:2}
.kipsSuperLevel,.kipsSuperSkill,.kipsSuperQNo{
  padding:7px 10px;border-radius:999px;font-size:9px;font-weight:1000;letter-spacing:.05em
}
.kipsSuperLevel{background:#fff0b8;color:#715100}
.kipsSuperSkill{background:#efeaff;color:#503aa9}
.kipsSuperQNo{margin-left:auto;background:#edf6fc;color:#4d6579}
.kipsSuperPrompt{
  position:relative;z-index:2;margin:23px 0 20px;
  font-size:clamp(21px,2.4vw,31px);line-height:1.35;font-weight:950;color:#17314e
}
.kipsSuperOptions{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.kipsSuperOption{
  min-height:64px;padding:12px 14px;border:2px solid #d9e8f4;border-radius:17px;
  background:#fbfdff;color:#1e3550;display:flex;align-items:center;gap:12px;
  text-align:left;cursor:pointer;transition:.16s
}
.kipsSuperOption:hover{transform:translateY(-2px);border-color:#8ac7eb;background:#f1faff}
.kipsSuperOption span{
  flex:0 0 34px;width:34px;height:34px;border-radius:11px;background:#e8f4fb;
  display:grid;place-items:center;font-weight:1000;color:#0873b6
}
.kipsSuperOption b{font-size:13px;line-height:1.25}
.kipsSuperOption.selected{border-color:#149be0;background:#eaf7ff}
.kipsSuperOption.correct{border-color:#1daf73;background:#e9faf3}
.kipsSuperOption.wrong{border-color:#e45454;background:#fff0f0}
.kipsSuperTools{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.kipsSuperTools button{
  border:0;border-radius:13px;padding:11px 14px;font-weight:950;background:#edf4f9;color:#25435e
}
.kipsSuperTools .check{background:#0d8fd2;color:white}
.kipsSuperTools .next{margin-left:auto;background:#17a873;color:white}
.kipsSuperTools button:disabled{opacity:.45;cursor:not-allowed}
.kipsSuperHintBox,.kipsSuperFeedback{
  display:none;margin-top:13px;padding:13px 15px;border-radius:15px;font-size:12px;line-height:1.45
}
.kipsSuperHintBox{background:#fff7d5;border:1px solid #f0da75;color:#665000}
.kipsSuperHintBox.show,.kipsSuperFeedback.show{display:block}
.kipsSuperFeedback.good{background:#e9faf3;border:1px solid #b6ead6;color:#155f46}
.kipsSuperFeedback.bad{background:#fff0ee;border:1px solid #ffd0ca;color:#8c3028}
.kipsSuperFooter{text-align:center;padding:14px 5px;color:#637589}
.kipsSuperFooter b{display:block;color:#0871b3;font-size:10px;letter-spacing:.1em}
.kipsSuperFooter span{font-size:9px}
.kipsSuperFinish{
  max-width:720px;margin:30px auto;padding:45px 28px;border-radius:30px;text-align:center;
  background:linear-gradient(145deg,#f0faff,#fff9dc);border:2px solid #d8ecf7;
  box-shadow:0 22px 55px rgba(31,87,126,.16)
}
.kipsSuperTrophy{font-size:78px}
.kipsSuperFinishBadge{
  display:inline-block;margin:10px 0;padding:7px 12px;border-radius:999px;background:#ffe475;
  color:#6d4c00;font-size:10px;font-weight:1000;letter-spacing:.12em
}
.kipsSuperFinish h1{font-size:45px;margin:5px 0;color:#075fa9}
.kipsSuperFinish h2{margin:0 0 8px;color:#503aa9}
.kipsSuperFinishStats{display:flex;justify-content:center;gap:12px;margin-top:22px}
.kipsSuperFinishStats div{
  min-width:120px;padding:13px;border-radius:17px;background:#fff;border:1px solid #e0eaf1
}
.kipsSuperFinishStats b{display:block;font-size:24px;color:#0875b8}
.kipsSuperFinishStats span{font-size:10px;color:#718096}
@media(max-width:760px){
  .kipsSuperExerciseTop{grid-template-columns:auto 1fr}
  .kipsSuperStats{grid-column:1/-1;justify-content:center}
  .kipsSuperOptions{grid-template-columns:1fr}
  .kipsSuperTools .next{margin-left:0}
  .kipsSuperFinishStats{flex-wrap:wrap}
}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


/* Kips child readability upgrade — larger, clearer text without changing the page design. */
html{font-size:17px;}
body{font-size:17px;line-height:1.5;}
.sidebar .menuButton{font-size:17px !important;line-height:1.25 !important;}
.sidebarSectionTitle,.sidebar h3{font-size:14px !important;letter-spacing:.06em;}
.userName{font-size:18px !important;}
.userRole{font-size:13px !important;}
.topbar button,.topbar select,.kipsReadPageButton{font-size:16px !important;min-height:46px;}
#mainContent button{font-size:16px;}
#mainContent input,#mainContent select,#mainContent textarea{font-size:16px;}
.card p,.card li,.card .muted{font-size:16px;line-height:1.55;}
.card h3{font-size:21px;}

/* Super Language Arts player */
.kipsSuperChapterIdentity small{font-size:12px !important;line-height:1.35;}
.kipsSuperChapterIdentity h2{font-size:27px !important;line-height:1.15;}
.kipsSuperChapterIdentity p{font-size:15px !important;line-height:1.35;}
.kipsSuperStats b{font-size:21px !important;}
.kipsSuperStats span{font-size:11px !important;line-height:1.2;}
.kipsSuperLevel,.kipsSuperSkill,.kipsSuperQNo{font-size:12px !important;padding:9px 12px !important;}
.kipsSuperPrompt{font-size:clamp(30px,3vw,39px) !important;line-height:1.28 !important;margin:27px 0 24px !important;}
.kipsSuperOptions{gap:14px !important;}
.kipsSuperOption{min-height:78px !important;padding:15px 17px !important;gap:14px !important;}
.kipsSuperOption span{flex-basis:42px !important;width:42px !important;height:42px !important;font-size:19px !important;}
.kipsSuperOption b{font-size:18px !important;line-height:1.35 !important;}
.kipsSuperTools{gap:11px !important;margin-top:20px !important;}
.kipsSuperTools button{font-size:17px !important;padding:14px 18px !important;min-height:50px;}
.kipsSuperHintBox,.kipsSuperFeedback{font-size:17px !important;line-height:1.55 !important;padding:16px 18px !important;}
.kipsSuperFooter b{font-size:13px !important;}
.kipsSuperFooter span{font-size:12px !important;}
.kipsSuperBack{font-size:16px !important;padding:12px 15px !important;}
@media(max-width:760px){
  html,body{font-size:16px;}
  .kipsSuperPrompt{font-size:clamp(26px,7vw,34px) !important;}
  .kipsSuperOption b{font-size:17px !important;}
  .kipsSuperLevel,.kipsSuperSkill,.kipsSuperQNo{font-size:11px !important;}
}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


/* KIPS SUPER READABILITY — designed for children, including children who wear glasses. */
html{font-size:20px !important;}
body{font-size:20px !important;line-height:1.6 !important;}
body,button,input,select,textarea{font-family:inherit;}

/* Never let essential child-facing text shrink into tiny print. */
.topbar .brand span{font-size:30px !important;line-height:1.1 !important;}
.userName{font-size:20px !important;line-height:1.15 !important;}
.userRole{font-size:15px !important;line-height:1.25 !important;}
.topbar button,.topbar select,.kipsReadPageButton{font-size:18px !important;min-height:50px !important;padding-top:10px !important;padding-bottom:10px !important;}
.sidebar .menuButton{font-size:20px !important;line-height:1.35 !important;min-height:52px !important;}
.sidebarSectionTitle,.sidebar h3{font-size:16px !important;line-height:1.35 !important;}
#mainContent{font-size:20px !important;}
#mainContent p,#mainContent li,#mainContent label,#mainContent .muted{font-size:19px !important;line-height:1.6 !important;}
#mainContent h1{font-size:36px !important;line-height:1.2 !important;}
#mainContent h2{font-size:30px !important;line-height:1.25 !important;}
#mainContent h3{font-size:24px !important;line-height:1.3 !important;}
#mainContent button{font-size:19px !important;line-height:1.25 !important;min-height:50px !important;}
#mainContent input,#mainContent select,#mainContent textarea{font-size:19px !important;min-height:48px !important;}
table,table th,table td{font-size:18px !important;line-height:1.45 !important;}
.card small,#mainContent small{font-size:15px !important;line-height:1.45 !important;}
.statusBadge,.pill,.badge{font-size:16px !important;}

/* Super Language Arts exercise player */
.kipsSuperExercisePage{max-width:1120px !important;}
.kipsSuperExerciseTop{padding:22px 24px !important;gap:22px !important;}
.kipsSuperBack{font-size:19px !important;padding:14px 18px !important;min-height:52px !important;}
.kipsSuperChapterIcon{width:66px !important;height:66px !important;font-size:34px !important;}
.kipsSuperChapterIdentity small{font-size:16px !important;line-height:1.4 !important;letter-spacing:.08em !important;}
.kipsSuperChapterIdentity h2{font-size:32px !important;line-height:1.15 !important;margin:4px 0 !important;}
.kipsSuperChapterIdentity p{font-size:19px !important;line-height:1.4 !important;}
.kipsSuperStats div{min-width:92px !important;padding:12px 14px !important;}
.kipsSuperStats b{font-size:27px !important;line-height:1.1 !important;}
.kipsSuperStats span{font-size:15px !important;line-height:1.3 !important;}
.kipsSuperProgress{height:14px !important;margin:18px 4px !important;}
.kipsSuperMissionCard{padding:30px !important;}
.kipsSuperMissionHead{gap:12px !important;flex-wrap:wrap !important;}
.kipsSuperLevel,.kipsSuperSkill,.kipsSuperQNo{font-size:16px !important;line-height:1.25 !important;padding:11px 15px !important;letter-spacing:.03em !important;}
.kipsSuperPrompt{font-size:clamp(36px,3.3vw,46px) !important;line-height:1.28 !important;margin:31px 0 28px !important;}
.kipsSuperOptions{gap:17px !important;}
.kipsSuperOption{min-height:92px !important;padding:18px 20px !important;gap:17px !important;border-width:3px !important;}
.kipsSuperOption span{flex:0 0 50px !important;width:50px !important;height:50px !important;font-size:23px !important;border-radius:14px !important;}
.kipsSuperOption b{font-size:22px !important;line-height:1.4 !important;}
.kipsSuperTools{gap:12px !important;margin-top:24px !important;align-items:center !important;}
.kipsSuperTools button{font-size:19px !important;padding:15px 19px !important;min-height:54px !important;}
.kipsSuperTools .previous{background:#e7f0f7 !important;color:#173b59 !important;}
.kipsSuperHintBox,.kipsSuperFeedback{font-size:19px !important;line-height:1.6 !important;padding:18px 20px !important;}
.kipsSuperFooter{padding:18px 5px !important;}
.kipsSuperFooter b{font-size:16px !important;line-height:1.4 !important;}
.kipsSuperFooter span{font-size:15px !important;line-height:1.4 !important;}

@media(max-width:900px){
  html,body{font-size:18px !important;}
  .kipsSuperPrompt{font-size:clamp(32px,6vw,40px) !important;}
  .kipsSuperOption b{font-size:20px !important;}
  .kipsSuperLevel,.kipsSuperSkill,.kipsSuperQNo{font-size:15px !important;}
}
@media(max-width:760px){
  .kipsSuperChapterIdentity small{font-size:14px !important;}
  .kipsSuperChapterIdentity h2{font-size:28px !important;}
  .kipsSuperChapterIdentity p{font-size:17px !important;}
  .kipsSuperStats span{font-size:14px !important;}
  .kipsSuperTools .next{margin-left:0 !important;}
}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


/* FINAL KIPS ACCESSIBILITY OVERRIDE — intentionally last so it wins */
html{font-size:18px !important;}
body{font-size:18px !important;line-height:1.45 !important;}
button,select,input,textarea{font-size:18px !important;}
.topbar .brand span{font-size:34px !important;line-height:1.1 !important;}
.userName{font-size:21px !important;line-height:1.15 !important;}
.userRole{font-size:15px !important;line-height:1.2 !important;}
#kipsReadPageButton,#kipsStopReadButton,.logoutButton,#kipsTopLanguageSelect{font-size:18px !important;min-height:48px !important;padding:10px 16px !important;}
.sidebar .menuButton,.sidebar .sidebarButton{font-size:19px !important;line-height:1.35 !important;padding:14px 16px !important;}
.sidebar .menuGroupTitle{font-size:16px !important;letter-spacing:.08em !important;}
.roleBadge,.roleBadge *{font-size:16px !important;line-height:1.35 !important;}
.card,.card p,.card span,.card div,.muted{font-size:18px !important;line-height:1.5 !important;}
.card h1{font-size:36px !important;}.card h2{font-size:31px !important;}.card h3{font-size:25px !important;}
table,th,td{font-size:17px !important;line-height:1.45 !important;} th,td{padding:12px 14px !important;}
label{font-size:18px !important;font-weight:800 !important;}

/* SUPER LANGUAGE ARTS EXERCISES */
.kipsSuperExercisePage{max-width:1120px !important;}
.kipsSuperExerciseTop{padding:22px 24px !important;gap:20px !important;}
.kipsSuperBack{font-size:19px !important;min-height:50px !important;padding:12px 18px !important;}
.kipsSuperChapterIdentity{gap:16px !important;}
.kipsSuperChapterIcon{width:58px !important;height:58px !important;font-size:27px !important;}
.kipsSuperChapterIdentity small{font-size:18px !important;line-height:1.35 !important;letter-spacing:.07em !important;}
.kipsSuperChapterIdentity h2{font-size:34px !important;line-height:1.12 !important;margin:3px 0 !important;}
.kipsSuperChapterIdentity p{font-size:20px !important;line-height:1.35 !important;margin-top:3px !important;}
.kipsSuperStats{gap:12px !important;}
.kipsSuperStats div{min-width:102px !important;padding:14px 16px !important;}
.kipsSuperStats b{font-size:29px !important;line-height:1 !important;}
.kipsSuperStats span{font-size:17px !important;line-height:1.3 !important;margin-top:7px !important;}
.kipsSuperMissionCard{padding:28px 28px 26px !important;}
.kipsSuperMissionHead{gap:12px !important;flex-wrap:wrap !important;}
.kipsSuperLevel,.kipsSuperSkill,.kipsSuperQNo{font-size:18px !important;line-height:1.25 !important;padding:10px 15px !important;}
.kipsSuperPrompt{font-size:40px !important;line-height:1.22 !important;margin:30px 0 25px !important;letter-spacing:.005em !important;}
.kipsSuperOptions{gap:14px !important;}
.kipsSuperOption{min-height:78px !important;padding:16px 18px !important;font-size:22px !important;line-height:1.35 !important;}
.kipsSuperOption span{font-size:22px !important;min-width:45px !important;min-height:45px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
.kipsSuperOption b{font-size:22px !important;line-height:1.35 !important;}
.kipsSuperTools{gap:12px !important;margin-top:24px !important;display:flex !important;flex-wrap:wrap !important;}
.kipsSuperTools button{font-size:20px !important;min-height:56px !important;padding:15px 20px !important;}
.kipsSuperTools .previous{display:inline-flex !important;visibility:visible !important;background:#e7f0f7 !important;color:#163954 !important;align-items:center !important;justify-content:center !important;}
.kipsSuperTools .next{margin-left:auto !important;}
.kipsSuperHintBox,.kipsSuperFeedback{font-size:20px !important;line-height:1.5 !important;}
.kipsSuperFooter,.kipsSuperFooter *{font-size:16px !important;line-height:1.4 !important;}

/* Standard exercise renderer */
.questionCount,.questionTimer{font-size:18px !important;}
.questionText{font-size:36px !important;line-height:1.28 !important;}
.answerOption{font-size:21px !important;line-height:1.4 !important;min-height:64px !important;padding:15px 18px !important;}
.exerciseActionRow button{font-size:19px !important;min-height:54px !important;padding:14px 18px !important;}
.feedback{font-size:19px !important;line-height:1.5 !important;}
.questionNumberButton{font-size:17px !important;min-width:43px !important;min-height:43px !important;}

@media(max-width:900px){
  .kipsSuperChapterIdentity small{font-size:16px !important;}
  .kipsSuperChapterIdentity h2{font-size:29px !important;}
  .kipsSuperChapterIdentity p{font-size:18px !important;}
  .kipsSuperStats span{font-size:15px !important;}
  .kipsSuperPrompt{font-size:34px !important;}
  .kipsSuperOption,.kipsSuperOption b{font-size:20px !important;}
  .kipsSuperTools .next{margin-left:0 !important;}
}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


.kipsCreativeLesson{border:2px solid #cfe7ff;border-radius:24px;background:linear-gradient(180deg,#fff,#f7fbff);padding:24px;margin:18px 0;box-shadow:0 10px 28px rgba(23,55,94,.08)}
.kipsCreativeLessonIntro{font-size:20px;line-height:1.55;color:#24415f;margin:0 0 18px}
.kipsCreativeSteps{display:grid;gap:12px;margin:18px 0}.kipsCreativeStep{display:flex;gap:12px;align-items:flex-start;background:#eef8ff;border-radius:16px;padding:14px 16px;font-size:19px;line-height:1.45}.kipsCreativeStep b{display:grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:#118bd0;color:#fff}
.kipsCreativeExample{background:#fff8dc;border:2px solid #f6d66d;border-radius:18px;padding:18px;margin:20px 0}.kipsCreativeExample h4{margin:0 0 10px;color:#7a5200;font-size:18px}.kipsCreativeExampleText{white-space:pre-wrap;font-size:18px;line-height:1.6;color:#20354d}
.kipsCreativeChecklist{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.kipsCreativeChecklist span{padding:9px 12px;border-radius:999px;background:#e7f8ef;color:#12603d;font-weight:800;font-size:15px}
.kipsCreativeContinue{display:flex;justify-content:flex-end;margin-top:20px}.kipsCreativeContinue button{font-size:20px;padding:14px 22px}
.kipsCreativeVisual{margin:14px auto 22px;max-width:760px;border-radius:22px;overflow:hidden;background:#f2f9ff;border:2px solid #d2e9fb}.kipsCreativeVisual svg{display:block;width:100%;height:auto}.kipsCreativeVisualCaption{padding:10px 16px;text-align:center;font-size:16px;font-weight:800;color:#38536f;background:#fff}
.kipsCreativeWriteWrap{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;margin-top:18px}.kipsCreativePaper{background:#fffdf6;border:2px solid #eadfb5;border-radius:22px;padding:18px;box-shadow:inset 0 0 0 6px #fffaf0}.kipsCreativeTextarea{width:100%;min-height:430px;resize:vertical;border:0;outline:0;background:repeating-linear-gradient(#fffdf6,#fffdf6 38px,#dce9f5 39px);font:600 19px/39px Georgia,serif;padding:5px 8px;color:#17375e}.kipsCreativePaperBar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px;font-weight:800;color:#3a5571}.kipsCreativePlan{background:#f2f9ff;border:2px solid #d7ebfa;border-radius:20px;padding:16px}.kipsCreativePlan h3{font-size:20px;margin:0 0 12px}.kipsCreativePlan label{font-size:14px;font-weight:900;color:#31516e}.kipsCreativePlan textarea{min-height:65px;margin-bottom:10px;font-size:15px}.kipsCreativeRequirements{margin:14px 0}.kipsCreativeRequirements div{margin:7px 0;padding:9px 11px;background:#eefaf4;border-radius:12px;font-size:15px;font-weight:750}.kipsCreativeSubmit{width:100%;font-size:21px;padding:15px;margin-top:12px}.kipsCreativeGrade{margin-top:20px;border:3px solid #c9e7db;background:#f6fffb;border-radius:22px;padding:20px}.kipsCreativeGradeTop{display:flex;align-items:center;gap:18px}.kipsCreativeGradeScore{display:grid;place-items:center;width:94px;height:94px;border-radius:50%;background:#118bd0;color:#fff;font-size:29px;font-weight:950}.kipsCreativeGrade h3{margin:0;font-size:25px}.kipsCreativeRubricGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.kipsCreativeRubricItem{background:#fff;border:1px solid #d7e7f2;border-radius:14px;padding:12px;font-size:15px;line-height:1.4}.kipsCreativeRubricItem b{display:block;color:#17375e;font-size:16px}.kipsCreativeRubricNote{margin-top:12px;font-size:13px;color:#5c6f82}.kipsCreativeMissionCard .kipsSuperPrompt{font-size:30px;line-height:1.28}
@media(max-width:900px){.kipsCreativeWriteWrap{grid-template-columns:1fr}.kipsCreativeRubricGrid{grid-template-columns:1fr}.kipsCreativeTextarea{min-height:360px}}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


#kipsHintImageAdminModalV15 .ql-toolbar.ql-snow{border:1px solid #cbd5e1;border-radius:10px 10px 0 0;background:#f8fafc;display:flex;flex-wrap:wrap;gap:2px;align-items:center}
#kipsHintImageAdminModalV15 .ql-container.ql-snow{border:1px solid #cbd5e1;border-top:0;border-radius:0 0 10px 10px;font-family:Arial,sans-serif;font-size:18px;min-height:160px}
#kipsHintImageAdminModalV15 .ql-editor{min-height:160px;resize:vertical;overflow:auto}
#kipsHintImageAdminModalV15 .ql-picker-label,#kipsHintImageAdminModalV15 .ql-picker-item{font-size:14px}
[data-kips-stage-hint-text-v166].ql-editor{padding:12px 14px}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


#kbV140 .kbMasterStatus{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
#kbV140 .kbMasterStatus span{background:#ede9fe;border:2px solid #8b5cf6;color:#4c1d95;border-radius:999px;padding:9px 14px;font-weight:900;font-size:13px;letter-spacing:.03em}
#kbV140 .kbMasterSubject{border:3px solid #c4b5fd!important;box-shadow:0 14px 32px rgba(76,29,149,.13)!important;position:relative;overflow:hidden}
#kbV140 .kbMasterSubject:before{content:'INFANTS 1 MASTER';position:absolute;right:10px;top:10px;background:#5b21b6;color:#fff;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:900}
#kbV140 .kbSubjectStats{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 8px}
#kbV140 .kbSubjectStats span{background:#eff6ff;border:1px solid #93c5fd;color:#1d4ed8;border-radius:10px;padding:6px 9px;font-size:12px;font-weight:900}
#kbV140 .kbMasterTopic{position:relative;padding-top:48px!important;border:2px solid #bfdbfe!important;box-shadow:0 9px 22px rgba(15,23,42,.08)!important}
#kbV140 .kbTopicNumber{position:absolute;top:12px;left:14px;background:linear-gradient(135deg,#5b21b6,#0ea5e9);color:#fff;border-radius:10px;padding:6px 10px;font-weight:1000;font-size:13px}
#kbV140 .kbQuestionMeta{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 18px}
#kbV140 .kbQuestionMeta span{background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3;border-radius:999px;padding:7px 11px;font-weight:900;font-size:12px}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


.kbAdminEditV230{background:#7c3aed!important;color:#fff!important;border-color:#6d28d9!important;font-weight:900!important}
#kbV230Editor{position:fixed;inset:0;z-index:2147483647;background:rgba(15,23,42,.68);display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box;font-family:Arial,sans-serif}
.kbV230Modal{width:min(960px,96vw);max-height:94vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 28px 90px rgba(0,0,0,.35);padding:22px;color:#172033}
.kbV230Head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid #e2e8f0;padding-bottom:12px;margin-bottom:16px}.kbV230Head h2{margin:4px 0}.kbV230Head>button{border:0;border-radius:999px;width:38px;height:38px;font-size:22px;cursor:pointer}
.kbV230Grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.kbV230Grid label{display:flex;flex-direction:column;gap:6px}.kbV230Grid input,.kbV230Grid textarea{width:100%;box-sizing:border-box;border:2px solid #cbd5e1;border-radius:11px;padding:11px;font:inherit}.kbV230Wide{grid-column:1/-1}.kbV230Upload{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.kbV230Upload input[type=file]{flex:1;min-width:220px}.kbV230Upload button,.kbV230Actions button{padding:10px 14px;border-radius:10px;border:1px solid #cbd5e1;cursor:pointer;font-weight:800}.kbV230Actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}.kbV230Actions .primary{background:#166534;color:#fff;border-color:#166534}
@media(max-width:700px){.kbV230Grid{grid-template-columns:1fr}.kbV230Wide{grid-column:auto}}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


.kipsCourseLevelSectionV246{margin-top:26px;padding-top:20px;border-top:2px solid #e2e8f0}.kipsCourseLevelSectionV246:first-of-type{margin-top:18px}
.kipsCourseLevelHeadV246{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:14px}.kipsCourseLevelHeadV246 h2{margin:0;font-size:25px}.kipsCourseLevelHeadV246 span{color:#64748b;font-weight:800}.kipsCourseLevelHeadV246>b{background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:7px 11px;font-size:12px;color:#1d4ed8}
.kipsCourseCoverGridV246{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start}.kipsCourseBookShellV246{min-width:0;background:#fff;border:1px solid #dbe7f4;border-radius:22px;padding:10px;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.kipsCourseRealCoverV246{width:100%!important;aspect-ratio:3/4!important;height:auto!important;min-height:0!important;box-sizing:border-box!important;margin:0!important;overflow:hidden!important}.kipsCourseRealCoverV246.kbCover,.kipsCourseRealCoverV246.kxRCover{display:flex!important;flex-direction:column!important}.kipsCourseRealCoverV246 .open,.kipsCourseRealCoverV246 .krOpen{margin-top:auto!important}
.kipsCourseBookInfoV246{padding:12px 4px 4px}.kipsCourseBookInfoV246 h3{font-size:17px;margin:0 0 5px}.kipsCourseBookInfoV246 p{margin:0 0 9px;color:#64748b;font-size:13px}.kipsCourseBookInfoV246 .buttonRow{display:grid;grid-template-columns:1fr;gap:7px}.kipsCourseBookInfoV246 button{width:100%}
.kipsCoursePickerBackdropV246{position:fixed;inset:0;z-index:999999;background:rgba(15,23,42,.58);display:grid;place-items:center;padding:20px}.kipsCoursePickerV246{position:relative;width:min(720px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:24px;padding:26px;box-shadow:0 28px 70px rgba(0,0,0,.28)}.kipsCoursePickerV246 h2{margin:0 42px 8px 0}.kipsCoursePickerV246 p{color:#475569}.kipsCoursePickerCloseV246{position:absolute;right:15px;top:13px;width:38px;height:38px;border:0;border-radius:50%;font-size:25px;cursor:pointer}.kipsCoursePickerGridV246{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.kipsCoursePickerGridV246 button{min-height:58px;font-size:15px;font-weight:900;border-radius:14px}
@media(max-width:1100px){.kipsCourseCoverGridV246{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.kipsCourseCoverGridV246{grid-template-columns:repeat(2,minmax(0,1fr))}.kipsCoursePickerGridV246{grid-template-columns:1fr}}@media(max-width:520px){.kipsCourseCoverGridV246{grid-template-columns:1fr}}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


@media (min-width:901px){
  .topbar > .userBox{
    left:60% !important;
  }
  .topbar .userText{
    transform:translateX(-10px) !important;
    text-align:left !important;
  }
}
#kipsReadPageButton{
  position:relative !important;
}
#kipsReadHoverTip{
  position:fixed;
  z-index:100050;
  max-width:360px;
  padding:10px 13px;
  border-radius:12px;
  background:#0f2947;
  color:#fff;
  font-size:15px !important;
  line-height:1.35;
  font-weight:800;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(5px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
}
#kipsReadHoverTip.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
#kipsHelpVoiceToast .kips-help-close{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  min-height:34px !important;
  padding:0 !important;
  border:0;
  border-radius:50%;
  background:#fee2e2;
  color:#991b1b;
  font-size:21px !important;
  font-weight:1000;
  line-height:34px;
  cursor:pointer;
}
#kipsHelpVoiceToast .kips-help-countdown{
  margin-top:8px;
  color:#b45309;
  font-size:14px !important;
  font-weight:1000;
}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


#kipsMeaningButton{
  white-space:nowrap !important;
  min-width:118px !important;
}
#kipsMeaningPopup{
  position:fixed;
  z-index:2147483647;
  width:min(420px,calc(100vw - 24px));
  max-height:min(360px,calc(100vh - 24px));
  overflow:auto;
  padding:18px 46px 18px 18px;
  border:2px solid #0b8ee8;
  border-radius:18px;
  background:#fff;
  color:#102a43;
  box-shadow:0 16px 42px rgba(15,41,71,.24);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .13s ease,transform .13s ease,visibility .13s ease;
}
#kipsMeaningPopup.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
#kipsMeaningPopup .kips-meaning-word{
  color:#0b67b2;
  font-size:24px !important;
  line-height:1.2;
  font-weight:1000;
  margin-bottom:10px;
}
#kipsMeaningPopup .kips-meaning-definition{
  font-size:18px !important;
  line-height:1.5;
  font-weight:750;
}
#kipsMeaningPopup .kips-meaning-help{
  margin-top:10px;
  color:#64748b;
  font-size:14px !important;
  line-height:1.4;
  font-weight:750;
}
#kipsMeaningPopup .kips-meaning-close{
  position:absolute;
  top:9px;
  right:9px;
  width:32px;
  height:32px;
  min-height:32px !important;
  padding:0 !important;
  border:0;
  border-radius:50%;
  background:#fee2e2;
  color:#991b1b;
  font-size:21px !important;
  line-height:32px;
  font-weight:1000;
  cursor:pointer;
}
@media(max-width:900px){
  #kipsMeaningButton{min-width:104px !important;}
}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


.kipsWmAutoHead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.kipsWmAutoGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:24px}
.kipsWmAutoCard{background:linear-gradient(145deg,#fff,#f7fbff);border:2px solid #bfdbfe;border-radius:18px;padding:16px;box-shadow:0 9px 24px rgba(15,23,42,.06)}
.kipsWmAutoCard h3{margin:6px 0;font-size:20px;color:#17375e}
.kipsWmAutoCard p{margin:4px 0;color:#64748b;font-size:14px}
.kipsWmAutoActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.kipsWmAutoActions button{padding:9px 11px;border-radius:10px;font-weight:900}
.kipsWmAutoDetected{display:inline-block;padding:4px 8px;border-radius:999px;background:#dcfce7;color:#166534;font-size:11px;font-weight:900}
.kipsWmAutoFuture{background:#fff7ed;color:#9a3412}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


.kipsWmWrap{max-width:1250px;margin:0 auto;padding-bottom:60px}
.kipsWmToolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0}
.kipsWmToolbar button{font-size:16px;font-weight:800}
.kipsWmGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.kipsWmCard{background:#fff;border:2px solid #dbeafe;border-radius:18px;padding:18px;box-shadow:0 10px 28px rgba(15,23,42,.07)}
.kipsWmCard h3{margin:5px 0 8px;font-size:22px}
.kipsWmCard p{margin:4px 0;color:#475569;font-size:15px}
.kipsWmActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.kipsWmActions button{padding:10px 13px;border-radius:10px;font-weight:800}
.kipsWmDanger{background:#fff1f2!important;color:#be123c!important;border:1px solid #fecdd3!important}
.kipsWmForm{background:#fff;border:2px solid #dbeafe;border-radius:20px;padding:22px;margin-top:18px}
.kipsWmForm label{display:block;font-weight:900;margin-top:13px;margin-bottom:6px;color:#17375e}
.kipsWmForm input,.kipsWmForm textarea,.kipsWmForm select{width:100%;font-size:16px;padding:12px;border:1px solid #cbd5e1;border-radius:10px;box-sizing:border-box}
.kipsWmForm textarea{min-height:90px;resize:vertical}
.kipsWmTwo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kipsWmFour{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kipsWmQuestionRow{background:#fff;border:1px solid #dbeafe;border-radius:14px;padding:14px;margin:10px 0}
.kipsWmQuestionRowTop{display:flex;gap:12px;justify-content:space-between;align-items:flex-start}
.kipsWmQuestionText{font-size:17px;font-weight:800;line-height:1.45;color:#17375e}
.kipsWmMeta{font-size:13px;color:#64748b;margin-top:7px}
.kipsWmBadge{display:inline-block;padding:5px 9px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-weight:800;font-size:12px}
.kipsWmAnswer{color:#15803d;font-weight:900}
@media(max-width:760px){.kipsWmTwo,.kipsWmFour{grid-template-columns:1fr}}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


/* ============================================================
   KIPS MATHEMATICS SUPER WORKBOOK
   ============================================================ */
.kipsMathDiagram{margin:18px auto 24px;max-width:760px;background:#fbfdff;border:2px solid #d8ebfb;border-radius:20px;padding:18px;text-align:center;overflow:auto}
.kipsMathDiagram svg{max-width:100%;height:auto;display:block;margin:auto}
.kipsMathAnswerWrap{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0 10px;flex-wrap:wrap}
.kipsMathAnswerInput{width:min(430px,90%);font-size:26px!important;font-weight:800;padding:16px 18px;border:3px solid #cfe3f6;border-radius:16px;outline:none;text-align:center;color:#17375e;background:#fff}
.kipsMathAnswerInput:focus{border-color:#1495d1;box-shadow:0 0 0 4px rgba(20,149,209,.13)}
.kipsMathUnit{font-size:23px;font-weight:900;color:#325678;min-width:48px;text-align:left}
.kipsMathTypeNote{font-size:14px;font-weight:800;color:#64748b;margin-top:7px}
.kipsWmSubjectTabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.kipsWmSubjectTabs button{font-size:17px;font-weight:900;padding:12px 18px;border-radius:12px}
.kipsWmSubjectTabs button.active{background:#078fd1;color:#fff;border-color:#078fd1}
.kipsWmJsonHelp{font-size:12px;color:#64748b;line-height:1.5;margin-top:5px}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


/* ============================================================
   KIPS LANGUAGE ARTS SUPER V2 - READING / EDITING VISUALS
   ============================================================ */
.kipsElaVisual{margin:18px auto 24px;max-width:820px;border:2px solid #d8ebfb;border-radius:20px;padding:20px 22px;background:#fbfdff;color:#17375e;text-align:left;box-shadow:0 8px 25px rgba(23,55,94,.05)}
.kipsElaPassageTitle{font-size:16px;font-weight:1000;letter-spacing:.05em;text-transform:uppercase;color:#078fd1;margin-bottom:10px}
.kipsElaPassage{font-size:21px!important;line-height:1.72;font-weight:650;color:#17375e;white-space:pre-wrap}
.kipsElaSentence{font-size:23px!important;line-height:1.55;font-weight:850;padding:15px 18px;border-left:6px solid #23b26d;background:#f2fff8;border-radius:12px}
.kipsElaWordBank{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:6px}
.kipsElaWordChip{font-size:19px;font-weight:900;padding:10px 15px;border:2px solid #cfe3f6;border-radius:999px;background:#fff;color:#17375e}
.kipsElaEditingLine{font-size:20px!important;line-height:1.55;font-weight:700;padding:10px 12px;margin:7px 0;border-radius:11px;background:#fff;border:1px solid #dbeafe}
.kipsElaEditingLine b{display:inline-block;min-width:36px;color:#078fd1}
.kipsElaTypeNote{font-size:16px!important;font-weight:850;color:#526b84;margin:9px auto 3px;max-width:760px;text-align:center;line-height:1.45}
.kipsElaExactNotice{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:900;background:#fff6d9;border:1px solid #f8d66d;color:#775800;padding:6px 10px;border-radius:999px;margin-top:7px}
.kipsWmStrictBox{margin-top:12px;padding:12px 14px;background:#fff9e9;border:1px solid #f5d873;border-radius:12px}
@media(max-width:700px){.kipsElaPassage{font-size:19px!important}.kipsElaSentence{font-size:20px!important}.kipsElaEditingLine{font-size:18px!important}}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


.kipsWorkbookBigTitle{font-size:clamp(40px,4.2vw,68px)!important;line-height:.98!important}
.kipsWorkbookBigTitle span{font-size:.72em}
.kipsWorkbookSubjects{flex-wrap:wrap}
.kipsWorkbookSubjectGrid.kipsThreeSubjects{grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:18px}
.kipsSubjectChoice.creative{border-color:#d7c3ff;background:linear-gradient(145deg,#fff 0%,#fbf7ff 100%)}
.kipsSubjectChoice.creative .kipsSubjectIcon{background:#f0e7ff;color:#7138b8}
.kipsCreativeEmpty{margin:24px 0;padding:42px 28px;border:2px dashed #c8dff0;border-radius:24px;text-align:center;background:#fbfdff}
.kipsCreativeEmptyIcon{font-size:62px;margin-bottom:8px}.kipsCreativeEmpty h2{font-size:30px;margin:8px 0}.kipsCreativeEmpty p{font-size:19px;line-height:1.6;max-width:720px;margin:0 auto}
@media(max-width:760px){.kipsWorkbookBigTitle{font-size:42px!important}.kipsWorkbookSubjectGrid.kipsThreeSubjects{grid-template-columns:1fr}}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


.kipsCreativeWriteWrap{grid-template-columns:minmax(0,1fr) 320px!important;gap:24px!important;align-items:start!important}
.kipsCreativePaper{min-width:0!important;padding:24px!important;border-radius:24px!important}
.kipsCreativeTextarea{display:block!important;width:100%!important;min-height:700px!important;height:700px!important;max-height:none!important;box-sizing:border-box!important;resize:vertical!important;font-size:22px!important;line-height:42px!important;padding:14px 18px!important;background:repeating-linear-gradient(#fffdf6,#fffdf6 41px,#cfddea 42px)!important}
.kipsCreativePaperBar{font-size:19px!important;margin-bottom:14px!important}
.kipsCreativePlan{position:sticky;top:96px!important;max-height:760px;overflow:auto}
.kipsCreativePlan label,.kipsCreativeRequirements div,.kipsCreativeRubricNote{font-size:16px!important;line-height:1.45!important}
.kipsCreativePlan textarea{font-size:17px!important;min-height:82px!important}
.kipsCreativeSubmit{font-size:22px!important;min-height:58px!important}
@media(max-width:900px){.kipsCreativeWriteWrap{grid-template-columns:1fr!important}.kipsCreativePlan{position:static;max-height:none}.kipsCreativeTextarea{min-height:600px!important;height:600px!important}}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


.kipsSuperTools{display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important}
.kipsSuperTools #kipsSuperRetry,.kipsSuperTools .retry{background:#f59e0b!important;color:white!important;border:0!important;border-radius:14px!important;padding:14px 22px!important;font-weight:900!important;box-shadow:0 6px 0 #b45309!important;cursor:pointer!important;order:3!important}
.kipsSuperTools #kipsSuperCheck{order:2!important}.kipsSuperTools #kipsSuperNext{order:4!important}.kipsSuperTools #kipsSuperPrevious{order:0!important}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


/* KIPS V32 — three-level workbook library. Workbook engines remain untouched. */
.kipsLevelLibrary{margin-top:16px}
.kipsLevelTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 20px}
.kipsLevelTab{appearance:none;border:2px solid #d9e7f4;background:#fff;border-radius:20px;padding:15px 16px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;text-align:left;column-gap:11px;cursor:pointer;box-shadow:0 7px 20px rgba(17,63,103,.07);transition:.18s ease;color:#15324d}
.kipsLevelTab>span{grid-row:1/3;font-size:30px;align-self:center}
.kipsLevelTab b{font-size:16px;letter-spacing:.04em;line-height:1.15}
.kipsLevelTab small{font-size:11px;color:#6b7f92;margin-top:3px}
.kipsLevelTab:hover{transform:translateY(-2px);box-shadow:0 11px 26px rgba(17,63,103,.12)}
.kipsLevelTab.active{border-color:#1479e8;background:linear-gradient(135deg,#eef7ff,#fff);box-shadow:0 0 0 3px rgba(20,121,232,.08),0 10px 25px rgba(17,63,103,.12)}
.kipsLevelPanel{display:none}
.kipsLevelPanel.active{display:block}
.kipsLevelIntro{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#f7fbff,#fff);border:1px solid #dceaf6;border-radius:20px;padding:16px 19px;margin-bottom:18px}
.kipsLevelIcon{width:54px;height:54px;border-radius:17px;background:#fff;display:grid;place-items:center;font-size:30px;box-shadow:0 6px 16px rgba(17,63,103,.09)}
.kipsLevelIntro small{font-size:10px;font-weight:900;letter-spacing:.12em;color:#66809a}
.kipsLevelIntro h2{margin:2px 0 3px;font-size:25px;color:#0b3158}
.kipsLevelIntro p{margin:0;color:#62788d;font-size:13px}
.kipsLevelEmpty{min-height:150px;border:2px dashed #cfe0ee;border-radius:22px;background:#fbfdff;display:flex;align-items:center;justify-content:center;gap:15px;text-align:left;padding:25px;color:#38546d}
.kipsLevelEmpty>span{font-size:40px}.kipsLevelEmpty b{display:block;font-size:16px}.kipsLevelEmpty small{display:block;margin-top:5px;color:#7a8fa2}
/* V31 cards: exactly three across on desktop, equal dimensions. */
.kipsLevelPanel .kipsWorkbookLibraryGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px}
@media(max-width:900px){.kipsLevelTabs{grid-template-columns:1fr}.kipsLevelPanel .kipsWorkbookLibraryGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.kipsLevelPanel .kipsWorkbookLibraryGrid{grid-template-columns:1fr!important}.kipsLevelIntro{align-items:flex-start}.kipsLevelTab{padding:13px 14px}}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


/* KIPS V39 — ADVANCED COLLECTION COVER-ONLY REBRAND — CLEAN CHARACTER ARTWORK.
   IMPORTANT: this changes ONLY the Advanced My Courses cover cards.
   Workbook engines, topics, questions, Read, Meaning, Stop, Hint and mastery logic are untouched. */
.kipsLevelPanel[data-kips-level-panel="advanced"] .kipsWorkbookLibraryGrid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  align-items:stretch!important;
}
.kipsRebrandShelf{margin:0!important;min-width:0!important;width:100%!important;display:block!important}
.kipsRebrandBook{
  --kr-accent:#16a34a;--kr-deep:#075985;--kr-soft:#e0f2fe;
  position:relative!important;isolation:isolate;overflow:hidden!important;
  min-height:395px!important;height:100%!important;width:100%!important;
  border-radius:26px!important;border:3px solid rgba(255,255,255,.94)!important;
  outline:3px solid color-mix(in srgb,var(--kr-accent) 70%,#ffffff 30%);
  background:
    radial-gradient(circle at 12% 12%,rgba(255,255,255,.42) 0 3px,transparent 4px),
    radial-gradient(circle at 84% 18%,rgba(255,255,255,.34) 0 5px,transparent 6px),
    linear-gradient(150deg,var(--kr-soft) 0%,#fff 48%,color-mix(in srgb,var(--kr-accent) 18%,#fff 82%) 100%)!important;
  box-shadow:0 18px 38px rgba(11,49,88,.16)!important;
  padding:19px 18px 17px!important;cursor:pointer!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
  display:flex!important;flex-direction:column!important;
}
.kipsRebrandBook:hover{transform:translateY(-5px)!important;box-shadow:0 25px 48px rgba(11,49,88,.23)!important}
.kipsRebrandBook:focus-visible{outline:5px solid #facc15!important;outline-offset:3px!important}
.kipsRebrandBook:before{content:"";position:absolute;inset:auto -80px -115px auto;width:260px;height:260px;border-radius:50%;background:color-mix(in srgb,var(--kr-accent) 17%,transparent);z-index:-1}
.kipsRebrandBook:after{content:"★  ★  ★";position:absolute;right:17px;top:16px;color:color-mix(in srgb,var(--kr-accent) 68%,#fff 32%);font:900 13px/1 system-ui;letter-spacing:6px;opacity:.75;z-index:0}
.krBrand{position:relative;z-index:4;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:#0b3158;color:#fff;border-radius:999px;padding:7px 11px;font:900 10px/1 system-ui;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 5px 0 rgba(2,21,40,.15)}
.krBrand b{color:#facc15}.krCollection{display:block;margin-top:8px;position:relative;z-index:4;color:var(--kr-deep);font:900 10px/1.1 system-ui;letter-spacing:.13em;text-transform:uppercase}
.krGrade{position:relative;z-index:4;margin:10px 0 3px;max-width:68%;font:1000 clamp(35px,3.5vw,52px)/.9 Arial Black,Impact,system-ui,sans-serif;letter-spacing:-.045em;text-transform:uppercase;color:var(--kr-deep);text-shadow:0 2px 0 rgba(255,255,255,.95)}
.krSubject{position:relative;z-index:4;margin:5px 0 8px;max-width:68%;font:1000 clamp(23px,2.4vw,34px)/.92 Arial Black,Impact,system-ui,sans-serif;text-transform:uppercase;color:var(--kr-accent);letter-spacing:-.025em;text-shadow:0 2px 0 #fff}
.krSubject.krCoreSubject{font-size:clamp(19px,1.75vw,26px);line-height:1.02;text-transform:none;letter-spacing:-.02em}
.krTopicCount{position:relative;z-index:4;display:inline-flex;align-items:center;align-self:flex-start;background:var(--kr-accent);color:#fff;border-radius:10px;padding:6px 9px;font:1000 11px/1 system-ui;letter-spacing:.04em;box-shadow:0 5px 0 color-mix(in srgb,var(--kr-accent) 72%,#000 28%)}
.krTopicList{position:relative;z-index:4;margin:11px 0 11px;max-width:61%;font:800 11px/1.38 system-ui;color:#24425f;min-height:49px}
.krTopicList span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.krTopicList span:before{content:"★ ";color:var(--kr-accent)}
.krMascot{position:absolute!important;z-index:2!important;right:-13px!important;bottom:52px!important;width:47%!important;max-height:70%!important;object-fit:contain!important;object-position:right bottom!important;filter:drop-shadow(0 10px 9px rgba(6,28,50,.20))!important;pointer-events:none!important}
.krMascot.krLeft{right:auto!important;left:-7px!important;transform:scaleX(1)!important}
.krMascot.krLeft~.krBottom{}
.krQuestionBadge{position:relative;z-index:5;margin-top:auto;align-self:flex-start;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;background:rgba(255,255,255,.94);border:2px solid color-mix(in srgb,var(--kr-accent) 35%,#fff 65%);border-radius:15px;padding:8px 10px;box-shadow:0 7px 16px rgba(13,49,78,.10);max-width:62%}
.krQuestionBadge strong{font:1000 27px/.85 Arial Black,Impact,sans-serif;color:var(--kr-accent)}
.krQuestionBadge span{font:900 9px/1.12 system-ui;color:#17344e;text-transform:uppercase;letter-spacing:.03em}
.krOpen{position:relative;z-index:7;width:100%;margin-top:12px!important;border:0!important;border-radius:15px!important;background:linear-gradient(180deg,#ffe86a,#facc15)!important;color:#172033!important;padding:12px 14px!important;font:1000 15px/1 system-ui!important;box-shadow:0 6px 0 #d59b08!important;cursor:pointer!important;white-space:nowrap!important;text-align:center!important}
.krOpen:hover{filter:brightness(1.04)}
.krCoreBook .krTopicList{font-size:12px;line-height:1.45;max-width:59%;min-height:65px}.krCoreBook .krQuestionBadge{max-width:58%}
/* Grade/subject themes */
.krTheme0{--kr-accent:#16a34a;--kr-deep:#14532d;--kr-soft:#d1fae5}.krTheme1{--kr-accent:#db2777;--kr-deep:#831843;--kr-soft:#fce7f3}.krTheme2{--kr-accent:#1479e8;--kr-deep:#123d77;--kr-soft:#dbeafe}.krTheme3{--kr-accent:#0f9f91;--kr-deep:#115e59;--kr-soft:#ccfbf1}.krTheme4{--kr-accent:#f97316;--kr-deep:#9a3412;--kr-soft:#ffedd5}.krTheme5{--kr-accent:#7c3aed;--kr-deep:#4c1d95;--kr-soft:#ede9fe}.krTheme6{--kr-accent:#dc2626;--kr-deep:#7f1d1d;--kr-soft:#fee2e2}
@media(max-width:1000px){.kipsLevelPanel[data-kips-level-panel="advanced"] .kipsWorkbookLibraryGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.krGrade,.krSubject{max-width:70%}}
@media(max-width:620px){.kipsLevelPanel[data-kips-level-panel="advanced"] .kipsWorkbookLibraryGrid{grid-template-columns:1fr!important}.kipsRebrandBook{min-height:390px!important}.krMascot{width:43%!important}.krGrade{font-size:45px}.krSubject{font-size:29px}}

/* KIPS V139 — Advanced covers use the same slim/tall website frame as the Explorers covers.
   Display sizing only: workbook content, questions, APIs and engines are unchanged. */
.kipsLevelPanel[data-kips-level-panel="advanced"] .kipsWorkbookShelf.kipsRebrandShelf{
  aspect-ratio:3 / 4!important;
  height:auto!important;
}
.kipsLevelPanel[data-kips-level-panel="advanced"] .kipsRebrandBook{
  aspect-ratio:3 / 4!important;
  min-height:0!important;
  height:auto!important;
}
.kipsLevelPanel[data-kips-level-panel="advanced"] .kipsRebrandBook.kipsCoverCustomizedV122 .kipsCoverImageLayerV122{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
@media(max-width:620px){
  .kipsLevelPanel[data-kips-level-panel="advanced"] .kipsRebrandBook{min-height:0!important;height:auto!important;aspect-ratio:3 / 4!important}
}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


.kbV218HD svg,.kbV219HD svg{width:100%;max-width:980px;min-height:390px;filter:saturate(1.18) contrast(1.04)}
.kbV218HD,.kbV219HD{background:linear-gradient(180deg,#ffffff,#edfaff);border:2px solid #bfe7fb;border-radius:30px;padding:12px;box-shadow:0 16px 40px rgba(15,76,117,.16);overflow:hidden}
.kbPrev{background:#eef6ff!important;color:#164e63!important;border:2px solid #93c5fd!important;font-weight:900!important}
.kbPrev:disabled{opacity:.42!important;cursor:not-allowed!important}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


/* KIPS V177 — GLOBAL FEEDBACK AUTO-FIT
   Feedback boxes must grow with their content in every workbook engine. */
.feedback,
.kipsSuperFeedback,
.k33feedback,
.k40feedback,
.kxRfeedback,
.k111feedback,
.kipsInf1Feedback,
.kipsInf2Feedback,
.kipsStd1Feedback,
.kipsStd2Feedback,
.kipsStd3Feedback,
.kipsStd4Feedback,
.kipsStd5Feedback,
[id$="Feedback"] > .feedback,
[id$="feedback"] > .feedback {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.5 !important;
}
.feedback.bad, .feedback.good,
.kipsSuperFeedback.bad, .kipsSuperFeedback.good,
.k33feedback.bad, .k33feedback.ok,
.k40feedback.k40bad, .k40feedback.k40ok,
.kxRfeedback.bad, .kxRfeedback.good {
  padding: 14px 16px !important;
  height: auto !important;
  min-height: fit-content !important;
  max-height: none !important;
  overflow: visible !important;
}
/* Feedback host containers must also be allowed to grow. */
#kipsInf1Feedback,#kipsInf2Feedback,#kipsStd1Feedback,#kipsStd2Feedback,
#kipsStd3Feedback,#kipsStd4Feedback,#kipsStd5Feedback,#kipsSuperFeedback,
#k33feedback,#k40feedback,#kxRfeedback,#k111feedback {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


/* KIPS V178 — feedback boxes hug their text instead of spanning the workbook. */
.feedback,
.kipsSuperFeedback,
.k33feedback,
.k40feedback,
.kxRfeedback,
.k111feedback,
.kipsInf1Feedback,
.kipsInf2Feedback,
.kipsStd1Feedback,
.kipsStd2Feedback,
.kipsStd3Feedback,
.kipsStd4Feedback,
.kipsStd5Feedback,
[id$="Feedback"] > .feedback,
[id$="feedback"] > .feedback {
  display: block !important;
  width: fit-content !important;
  width: -moz-fit-content !important;
  max-width: min(100%, 760px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin-right: auto !important;
  padding: 10px 14px !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.4 !important;
}
/* Keep empty host elements from becoming full-width coloured bars. */
#kipsInf1Feedback,#kipsInf2Feedback,#kipsStd1Feedback,#kipsStd2Feedback,
#kipsStd3Feedback,#kipsStd4Feedback,#kipsStd5Feedback,#kipsSuperFeedback,
#k33feedback,#k40feedback,#kxRfeedback,#k111feedback {
  width: fit-content !important;
  max-width: 100% !important;
  margin-right: auto !important;
}
@media (max-width: 640px) {
  .feedback,.kipsSuperFeedback,.k33feedback,.k40feedback,.kxRfeedback,.k111feedback {
    max-width: 100% !important;
  }
}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


#kipsMeaningPopupV181{position:fixed;z-index:2147483647;display:none;width:min(430px,calc(100vw - 24px));background:#fff;border:2px solid #f4bf19;border-radius:18px;box-shadow:0 18px 55px rgba(15,23,42,.28);padding:16px 18px;color:#172033;font-family:Arial,sans-serif;box-sizing:border-box}
#kipsMeaningPopupV181.show{display:block}
#kipsMeaningPopupV181 .kipsM181Head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
#kipsMeaningPopupV181 .kipsM181Word{font-size:20px;font-weight:900;color:#5d4300;overflow-wrap:anywhere}
#kipsMeaningPopupV181 .kipsM181Close{border:0;background:#f4f4f5;border-radius:999px;width:32px;height:32px;font-size:20px;font-weight:900;cursor:pointer}
#kipsMeaningPopupV181 .kipsM181Def{font-size:16px;line-height:1.5;font-weight:650}
#kipsMeaningPopupV181 .kipsM181Note{margin-top:10px;font-size:12px;color:#64748b}


/* ===== KIPS V260 EXTRACTED STYLE BLOCK ===== */


/* V215: learner toolbar contains controls only. Main workbook/topic headings remain in the page body. */
#kbV140 .kbTop > b,
#kxROverlay .kxRbar > b,
#k111overlay .k111bar > b,
#k33overlay .k33bar > b,
#k40overlay .k40bar > b { display:none !important; }
#kxROverlay .kxRbar::after,
#k111overlay .k111bar::after,
#k33overlay .k33bar::after,
#k40overlay .k40bar::after { content:''; flex:1 1 auto; }


/* ============================================================
   KIPS V267 — ARABIC RTL LANGUAGE SUPPORT
   ============================================================ */
html[dir="rtl"] body{
  direction:rtl;
}
html[dir="rtl"] #mainContent,
html[dir="rtl"] .card,
html[dir="rtl"] .modal,
html[dir="rtl"] .modalContent,
html[dir="rtl"] .kipsQuestion,
html[dir="rtl"] .kipsQuestionText,
html[dir="rtl"] .kipsHelpContent,
html[dir="rtl"] #kipsWordHelpPopup{
  text-align:right;
}
html[dir="rtl"] input,
html[dir="rtl"] textarea{
  direction:rtl;
  text-align:right;
}
html[dir="rtl"] .topbar,
html[dir="rtl"] .sidebar{
  direction:rtl;
}


/* ============================================================
   KIPS V268 — MULTISCRIPT TEXT SAFETY
   ============================================================ */
html[lang^="ja"] body,
html[lang^="ko"] body,
html[lang^="zh"] body,
html[lang^="th"] body,
html[lang^="ta"] body,
html[lang^="te"] body,
html[lang^="ml"] body{
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans",Arial,sans-serif;
}


/* ============================================================
   KIPS V269 — EUROPEAN LANGUAGE TEXT SAFETY
   ============================================================ */
html[lang^="it"] body,
html[lang^="nl"] body,
html[lang^="pl"] body,
html[lang^="sv"] body,
html[lang^="da"] body,
html[lang^="no"] body,
html[lang^="tr"] body{
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans",Arial,sans-serif;
}


/* ============================================================
   KIPS V290 — LOCALIZED BOOK COVERS
   Artwork/background remains language-neutral; wording is HTML.
   ============================================================ */
.kipsCoursesRegistryV290{
  container-type:inline-size;
}
.kipsCourseRegistryHeadV290{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.kipsCourseRegistryHeadV290 h2{
  margin:0;
}
.kipsCourseRegistryHeadV290 p{
  margin:6px 0 0;
  max-width:760px;
}
.kipsCourseRegistryHeadV290>b{
  color:#166534;
  white-space:nowrap;
}
.kipsCourseCoverGridV246{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
  gap:22px!important;
}
.kipsCourseBookShellV246{
  min-width:0!important;
  width:100%!important;
  max-width:420px;
  justify-self:stretch;
}
.kipsCourseRealCoverV246{
  position:relative!important;
  min-width:0!important;
  overflow:hidden!important;
}
.kipsCourseCoverTextLayerV290{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  min-width:0;
  max-width:100%;
}
.kipsCourseCoverTextLayerV290 h2,
.kipsCourseCoverTextLayerV290 h3,
.kipsCourseCoverTextLayerV290 small,
.kipsCourseCoverTextLayerV290 .meta,
.kipsCourseCoverTextLayerV290 .krBrand,
.kipsCourseCoverTextLayerV290 .krCollection,
.kipsCourseCoverTextLayerV290 .krGrade,
.kipsCourseCoverTextLayerV290 .krSubject,
.kipsCourseCoverTextLayerV290 .krTopicList,
.kipsCourseCoverTextLayerV290 .krQuestionBadge{
  max-width:100%;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}
.kipsCourseCoverTextLayerV290 h2{
  font-size:clamp(24px,2.2vw,34px)!important;
  line-height:1.08!important;
}
.kipsCourseCoverTextLayerV290 h3{
  font-size:clamp(15px,1.3vw,19px)!important;
  line-height:1.25!important;
}
.kipsCourseCoverTextLayerV290 .meta{
  font-size:clamp(11px,1vw,14px)!important;
  line-height:1.4!important;
}
.kipsCourseBookInfoV246 h3{
  font-size:clamp(16px,1.3vw,19px)!important;
  line-height:1.25!important;
  overflow-wrap:break-word;
}
.kipsCourseBookInfoV246 p{
  line-height:1.35!important;
}
.kipsCourseBookInfoV246 .buttonRow{
  grid-template-columns:1fr!important;
}
@media (min-width:1180px){
  .kipsCourseCoverGridV246{
    grid-template-columns:repeat(3,minmax(280px,1fr))!important;
  }
}
@media (max-width:760px){
  .kipsCourseCoverGridV246{
    grid-template-columns:repeat(2,minmax(220px,1fr))!important;
  }
}
@media (max-width:520px){
  .kipsCourseCoverGridV246{
    grid-template-columns:1fr!important;
  }
  .kipsCourseBookShellV246{
    max-width:none;
  }
}


/* ============================================================
   KIPS V291 — COVER RENDER STABILIZATION
   ============================================================ */
.kipsLocalizedCoverV290{
  isolation:isolate;
}
.kipsLocalizedCoverV290::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.82));
  pointer-events:none;
}
.kipsLocalizedCoverV290 .kipsCourseCoverTextLayerV290{
  position:relative!important;
  z-index:3!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  flex:1 1 auto!important;
  overflow:visible!important;
}
.kipsLocalizedCoverV290 .kipsCourseCoverTextLayerV290>*{
  position:relative!important;
  z-index:3!important;
  opacity:1!important;
  visibility:visible!important;
}
.kipsLocalizedCoverV290 .kipsCourseCoverTextLayerV290 small{
  font-size:12px!important;
  line-height:1.3!important;
  letter-spacing:.03em!important;
  white-space:normal!important;
}
.kipsLocalizedCoverV290 .kipsCourseCoverTextLayerV290 h2{
  font-size:clamp(24px,2.3vw,34px)!important;
  line-height:1.08!important;
  margin:0!important;
}
.kipsLocalizedCoverV290 .kipsCourseCoverTextLayerV290 h3{
  font-size:17px!important;
  line-height:1.25!important;
  margin:0!important;
}
.kipsLocalizedCoverV290 .kipsCourseCoverTextLayerV290 .meta{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:4px!important;
  font-size:12px!important;
  line-height:1.25!important;
}
.kipsLocalizedCoverV290 .open,
.kipsLocalizedCoverV290 .krOpen{
  position:relative!important;
  z-index:4!important;
  width:100%!important;
  min-height:42px!important;
  margin-top:auto!important;
  white-space:normal!important;
  line-height:1.2!important;
}

/* Advanced gets a clean dedicated layout instead of reusing legacy text geometry. */
.kipsAdvancedCoverV291{
  display:flex!important;
  flex-direction:column!important;
  padding:18px!important;
  border:2px solid #36a56a!important;
  border-radius:22px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(240,253,244,.95))!important;
  color:#17324d!important;
}
.kipsAdvancedCoverV291::before{
  background:none!important;
}
.kipsAdvancedCoverV291 .kipsCourseCoverTextLayerV290{
  gap:12px!important;
}
.kipsAdvancedCoverBrandV291{
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
  color:#64748b!important;
}
.kipsAdvancedCoverCollectionV291{
  font-size:14px!important;
  font-weight:1000!important;
  color:#0b5ea8!important;
  text-transform:uppercase!important;
}
.kipsAdvancedCoverGradeV291{
  font-size:clamp(28px,2.7vw,40px)!important;
  color:#0b5ea8!important;
  margin:0!important;
}
.kipsAdvancedCoverSubjectsV291{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.2!important;
  color:#16834f!important;
}
.kipsAdvancedCoverBadgeV291{
  margin-top:auto!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px 10px!important;
  border-radius:12px!important;
  background:#ecfdf5!important;
  border:1px solid #86efac!important;
  color:#166534!important;
}
.kipsAdvancedCoverBadgeV291 strong{
  font-size:22px!important;
}

/* Wider/stable card widths; prevent one-character-per-line collapse. */
.kipsCourseCoverGridV246{
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;
}
.kipsCourseBookShellV246{
  max-width:460px!important;
  min-width:260px!important;
}
.kipsCourseBookInfoV291 h3,
.kipsCourseBookInfoV291 p,
.kipsCourseBookInfoV291 button{
  word-break:normal!important;
  overflow-wrap:break-word!important;
  white-space:normal!important;
}
@media(max-width:760px){
  .kipsCourseCoverGridV246{
    grid-template-columns:1fr!important;
  }
  .kipsCourseBookShellV246{
    min-width:0!important;
    max-width:none!important;
  }
}


/* ============================================================
   KIPS V292 — MULTILINGUAL UPLOADED COVER OVERLAY
   ============================================================ */
.kipsMultilingualImageCoverV292{
  position:relative!important;
  overflow:hidden!important;
}
.kipsCoverLanguageOverlayV292{
  position:absolute!important;
  inset:0!important;
  z-index:15!important;
  pointer-events:none!important;
  font-family:Inter,Arial,"Trebuchet MS",sans-serif!important;
  color:#fff!important;
}

/* Header mask covers the baked BEGINNERS/grade wording while leaving
   the outer underwater/character artwork visible. */
.kipsCoverTitleMaskV292{
  position:absolute!important;
  left:8%!important;
  right:8%!important;
  top:4%!important;
  min-height:28%!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:4px!important;
  padding:10px 12px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(12,69,151,.97),rgba(18,103,188,.94))!important;
  border:2px solid rgba(255,255,255,.82)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.24)!important;
  text-align:center!important;
}
.kipsCoverLevelNameV292{
  font-size:clamp(20px,2.3vw,34px)!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.02em!important;
  text-shadow:0 2px 3px rgba(0,0,0,.35)!important;
}
.kipsCoverLevelMetaV292{
  font-size:clamp(9px,.9vw,13px)!important;
  line-height:1.1!important;
  font-weight:900!important;
  color:#fff7ad!important;
}
.kipsCoverGradeV292{
  margin-top:1px!important;
  font-size:clamp(22px,2.6vw,38px)!important;
  line-height:1!important;
  font-weight:1000!important;
  color:#fff!important;
  text-shadow:0 2px 3px rgba(0,0,0,.34)!important;
}

/* Subject mask covers the baked English labels on the RIGHT side.
   The mascot/character and left-side subject icons remain visible. */
.kipsCoverSubjectsMaskV292{
  position:absolute!important;
  left:50%!important;
  right:7%!important;
  top:36%!important;
  bottom:16%!important;
  display:grid!important;
  grid-template-rows:repeat(7,1fr)!important;
  gap:2px!important;
}
.kipsCoverSubjectRowV292{
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:2px 5px!important;
  border-radius:7px!important;
  border:1px solid rgba(255,255,255,.75)!important;
  box-shadow:0 2px 5px rgba(0,0,0,.18)!important;
  text-align:center!important;
  overflow:hidden!important;
}
.kipsCoverSubjectRowV292 span{
  display:block!important;
  width:100%!important;
  font-size:clamp(7px,.72vw,11px)!important;
  line-height:1.02!important;
  font-weight:1000!important;
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.45)!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
.kipsCoverSubjectRowV292-1{background:rgba(18,86,177,.97)!important}
.kipsCoverSubjectRowV292-2{background:rgba(111,25,162,.97)!important}
.kipsCoverSubjectRowV292-3{background:rgba(230,92,10,.97)!important}
.kipsCoverSubjectRowV292-4{background:rgba(25,141,70,.97)!important}
.kipsCoverSubjectRowV292-5{background:rgba(190,24,24,.97)!important}
.kipsCoverSubjectRowV292-6{background:rgba(31,93,185,.97)!important}
.kipsCoverSubjectRowV292-7{background:rgba(37,128,52,.97)!important}

/* Development uses a purple-blue header; Advanced a green-navy header. */
.kipsCoverLanguageOverlayV292-development .kipsCoverTitleMaskV292{
  background:linear-gradient(180deg,rgba(78,35,151,.97),rgba(30,109,180,.95))!important;
}
.kipsCoverLanguageOverlayV292-advanced .kipsCoverTitleMaskV292{
  background:linear-gradient(180deg,rgba(8,89,93,.97),rgba(13,68,117,.96))!important;
}

/* Keep the real clickable Open control above the mask. */
.kipsMultilingualImageCoverV292 > .open,
.kipsMultilingualImageCoverV292 > .krOpen,
.kipsMultilingualImageCoverV292 > .k33open,
.kipsMultilingualImageCoverV292 > button{
  z-index:25!important;
}

@media(max-width:520px){
  .kipsCoverTitleMaskV292{
    left:7%!important;
    right:7%!important;
    top:4%!important;
  }
  .kipsCoverSubjectsMaskV292{
    left:48%!important;
    right:5%!important;
  }
}


/* ============================================================
   KIPS V293 — LAYERED EDITABLE COVER ENGINE
   This fully covers baked English text zones and redraws them as HTML.
   ============================================================ */
.kipsLayeredEditableCoverV293{
  position:relative!important;
  overflow:hidden!important;
}
.kipsEditableCoverLayerV293{
  position:absolute!important;
  inset:0!important;
  z-index:18!important;
  pointer-events:none!important;
  font-family:Inter,Arial,"Trebuchet MS",sans-serif!important;
}

/* FULL HEADER REPLACEMENT.
   The opaque panel intentionally covers the baked BEGINNERS / LEVEL / GRADE pixels. */
.kipsEditableCoverHeaderV293{
  position:absolute!important;
  left:4.5%!important;
  right:4.5%!important;
  top:3.5%!important;
  height:31.5%!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  padding:8px 10px!important;
  border-radius:20px!important;
  background:
    linear-gradient(180deg,#0758b9 0%,#063d92 52%,#0c77c8 100%)!important;
  border:3px solid rgba(255,255,255,.94)!important;
  box-shadow:inset 0 0 18px rgba(5,25,75,.3),0 5px 14px rgba(0,0,0,.24)!important;
}
.kipsEditableCoverLevelV293{
  color:#ffd83d!important;
  font-size:clamp(24px,2.5vw,38px)!important;
  line-height:.95!important;
  font-weight:1000!important;
  letter-spacing:.01em!important;
  text-shadow:
    -2px -2px 0 #1f215d,
     2px -2px 0 #1f215d,
    -2px  2px 0 #1f215d,
     2px  2px 0 #1f215d,
     0 4px 3px rgba(0,0,0,.35)!important;
}
.kipsEditableCoverRibbonV293{
  margin:5px 0 3px!important;
  min-width:70%!important;
  padding:4px 10px!important;
  border-radius:999px!important;
  background:#137239!important;
  color:#fff!important;
  border:2px solid #f7d83d!important;
  font-size:clamp(9px,.85vw,13px)!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.04em!important;
}
.kipsEditableCoverGradeV293{
  color:#fff!important;
  font-size:clamp(27px,3vw,44px)!important;
  line-height:.95!important;
  font-weight:1000!important;
  text-shadow:
    -2px -2px 0 #092d6d,
     2px -2px 0 #092d6d,
    -2px  2px 0 #092d6d,
     2px  2px 0 #092d6d,
     0 4px 3px rgba(0,0,0,.4)!important;
}

/* FULL SUBJECT-LABEL REPLACEMENT.
   Starts at the existing subject area so mascot artwork on the left remains visible. */
.kipsEditableCoverSubjectsV293{
  position:absolute!important;
  left:45.5%!important;
  right:4.5%!important;
  top:36.5%!important;
  bottom:11.5%!important;
  display:grid!important;
  grid-template-rows:repeat(7,minmax(0,1fr))!important;
  gap:3px!important;
}
.kipsEditableCoverSubjectV293{
  display:grid!important;
  grid-template-columns:22px minmax(0,1fr) 28px!important;
  align-items:center!important;
  gap:3px!important;
  min-width:0!important;
  padding:2px 5px!important;
  border-radius:7px!important;
  border:1px solid rgba(255,255,255,.82)!important;
  box-shadow:0 2px 5px rgba(0,0,0,.22)!important;
  color:#fff!important;
  overflow:hidden!important;
}
.kipsEditableCoverIconV293{
  font-size:12px!important;
  line-height:1!important;
  text-align:center!important;
}
.kipsEditableCoverSubjectTextV293{
  min-width:0!important;
  color:#fff!important;
  font-size:clamp(6.8px,.66vw,10.5px)!important;
  line-height:1!important;
  font-weight:1000!important;
  text-align:left!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  text-shadow:0 1px 2px rgba(0,0,0,.42)!important;
}
.kipsEditableCoverCountV293{
  font-size:clamp(10px,.85vw,14px)!important;
  line-height:1!important;
  font-weight:1000!important;
  text-align:right!important;
  color:#fff!important;
}
.kipsEditableCoverSubjectV293.math{background:#1265b7!important}
.kipsEditableCoverSubjectV293.ela{background:#6617a6!important}
.kipsEditableCoverSubjectV293.writing{background:#e96d05!important}
.kipsEditableCoverSubjectV293.social{background:#188b46!important}
.kipsEditableCoverSubjectV293.vcce{background:#bc1515!important}
.kipsEditableCoverSubjectV293.science{background:#2363b6!important}
.kipsEditableCoverSubjectV293.agri{background:#258236!important}

.kipsEditableCoverOpenV293{
  z-index:30!important;
  font-size:clamp(12px,1vw,16px)!important;
  line-height:1.1!important;
  font-weight:1000!important;
  white-space:normal!important;
  text-align:center!important;
}

/* Level-specific header treatments. */
.kipsEditableCoverLayerV293-development .kipsEditableCoverHeaderV293{
  background:linear-gradient(180deg,#6231ad 0%,#45349b 48%,#1678bd 100%)!important;
}
.kipsEditableCoverLayerV293-advanced .kipsEditableCoverHeaderV293{
  background:linear-gradient(180deg,#0a756c 0%,#07546d 50%,#113d70 100%)!important;
}

@media(max-width:520px){
  .kipsEditableCoverSubjectsV293{
    left:44%!important;
    right:3.8%!important;
  }
  .kipsEditableCoverSubjectV293{
    grid-template-columns:18px minmax(0,1fr) 24px!important;
    padding:2px 4px!important;
  }
}

/* KIPS V294 WEBSITE EDITABLE COVER RUNTIME */
.kipsLayeredEditableCoverV293 .kipsEditableCoverHeaderV293{left:3.8%!important;right:3.8%!important;top:3.2%!important;height:32.5%!important;background:linear-gradient(180deg,#0758b9,#073a8f 54%,#0f78c6)!important;z-index:25!important}
.kipsLayeredEditableCoverV293 .kipsEditableCoverSubjectsV293{left:43.5%!important;right:3.8%!important;top:36%!important;bottom:11%!important;z-index:25!important}
.kipsLayeredEditableCoverV293 .kipsEditableCoverSubjectV293{border:2px solid rgba(255,255,255,.92)!important}
.kipsLayeredEditableCoverV293 .kipsEditableCoverOpenV293{z-index:40!important;background:#07578e!important;color:#fff!important}