body {
	font-family: 'Proxima Nova Bold',"Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;
  /* font-size:14px; */
}

:root {

    --v2-student-color:#ffd05b;
    --v2-teacher-color:#84dbff;
    --v2-headmaster-color:#fd8469;

    --v2-primary-color: #cdf8f9;
    --v2-secondary-color: #59bdc1;
    --v2-gradient-top-color:#024d51;
    --v2-gradient-bottom-color: #59bdc1;

    --v2-google-color: #4285f4;
    --v2-google-hover-color: #2f6acb;

    --v2-notes-color: #8CAD60;
    --v2-practices-color: #C49A6C;
    --v2-assignments-color: #00B6AD;
    --v2-reports-color: #EF5A8E;

    --v2-logo-white: url('img/logo/i-learn-ace_white.png');
    --v2-logo-black: url('img/logo/i-learn-ace_black.png');
    --v2-logo-coloured: url('img/logo/i-learn-ace_coloured.png');

    --v2-icon-notes: url('img/icons/icon-notes.png');
    --v2-icon-practices: url('img/icons/icon-practices.png');
    --v2-icon-assignments: url('img/icons/icon-assignments.png');
    --v2-icon-reports: url('img/icons/icon-reports.png');

    --v2-icon-is-answered: url('/css/student/images/icon-isanswered.png');
    --v2-icon-is-correct: url('/css/student/images/icon-correct.png');
    --v2-icon-is-wrong: url('/css/student/images/icon-wrong.png');  
        
    --v2-subject-color-SKBM: #8DC63F;
    --v2-subject-color-SKBM-2: #A7E35C;
    --v2-subject-color-SKBI: #00AEEF;
    --v2-subject-color-SKBI-2: #4CCFFF;
    --v2-subject-color-SKSA: #EE4C9B;
    --v2-subject-color-SKSA-2: #FF84B9;
    --v2-subject-color-SKMA: #00B6AD;
    --v2-subject-color-SKMA-2: #58E2DA;

    --v2-subject-color-SJKCBM: #8DC63F;
    --v2-subject-color-SJKCBM-2: #A7E35C;
    --v2-subject-color-SJKCBI: #00AEEF;
    --v2-subject-color-SJKCBI-2: #4CCFFF;
    --v2-subject-color-SJKCSA: #00B6AD;
    --v2-subject-color-SJKCSA-2: #58E2DA;
    --v2-subject-color-SJKCMA: #EE4C9B;
    --v2-subject-color-SJKCMA-2: #FF84B9;
    --v2-subject-color-SJKCBC: #EF4030;
    --v2-subject-color-SJKCBC-2: #FF7466;

    --v2-subject-color-SMKBM: #8DC63F;
    --v2-subject-color-SMKBM-2: #A7E35C;
    --v2-subject-color-SMKBI: #00AEEF;
    --v2-subject-color-SMKBI-2: #4CCFFF;
    --v2-subject-color-SMKSA: #EE4C9B;
    --v2-subject-color-SMKSA-2: #FF84B9;
    --v2-subject-color-SMKMA: #00B6AD;
    --v2-subject-color-SMKMA-2: #58E2DA;
    --v2-subject-color-SMKSE: #867267;
    --v2-subject-color-SMKSE-2: #B29FA3;
    --v2-subject-color-SMKGE: #FEC232;
    --v2-subject-color-SMKGE-2: #FFD96B;

    --v2-subject-color-SPMBM: #8CC63F;
    --v2-subject-color-SPMBM-2: #A7E35C;
    --v2-subject-color-SPMBI: #00AEEF;
    --v2-subject-color-SPMBI-2: #4CCFFF;
    --v2-subject-color-SPMSA: #EE4C9B;
    --v2-subject-color-SPMSA-2: #FF84B9;
    --v2-subject-color-SPMMA: #00B6AD;
    --v2-subject-color-SPMMA-2: #58E2DA;
    --v2-subject-color-SPMSE: #867267;
    --v2-subject-color-SPMSE-2: #B29FA3;
    --v2-subject-color-SPMPM: #6C8CC8;
    --v2-subject-color-SPMPM-2: #90A8E3;
    --v2-subject-color-SPMPI: #72A581;
    --v2-subject-color-SPMPI-2: #94C8A2;
    --v2-subject-color-SPMPE: #E4AB6C;
    --v2-subject-color-SPMPE-2: #FFD09B;
    --v2-subject-color-SPMPA: #F05A67;
    --v2-subject-color-SPMPA-2: #FF8B96;
    --v2-subject-color-SPMEA: #A7A9AC;
    --v2-subject-color-SPMEA-2: #C8CACD;
    --v2-subject-color-SPMBY: #95937A;
    --v2-subject-color-SPMBY-2: #BEBB9F;
    --v2-subject-color-SPMFI: #927786;
    --v2-subject-color-SPMFI-2: #B99DAA;
    --v2-subject-color-SPMKM: #849DAA;
    --v2-subject-color-SPMKM-2: #A7C1CE;
    --v2-subject-color-SPMMT: #4A889E;
    --v2-subject-color-SPMMT-2: #6DAFC6;
    --v2-subject-color-SPMGE: #FEC232;
    --v2-subject-color-SPMGE-2: #FFD96B;
    --v2-subject-color-SMKKH: #9D85BE;
    --v2-subject-color-SMKKH-2: #BBA4DD;

    --v2-subject-color-KSSMBM: #8DC63F;
    --v2-subject-color-KSSMBM-2: #A7E35C;
    --v2-subject-color-KSSMBI: #00AEEF;
    --v2-subject-color-KSSMBI-2: #4CCFFF;
    --v2-subject-color-KSSMSA: #EE4C9B;
    --v2-subject-color-KSSMSA-2: #FF84B9;
    --v2-subject-color-KSSMMA: #00B6AD;
    --v2-subject-color-KSSMMA-2: #58E2DA;
    --v2-subject-color-KSSMSE: #867267;
    --v2-subject-color-KSSMSE-2: #B29FA3;
    --v2-subject-color-KSSMGE: #FEC232;
    --v2-subject-color-KSSMGE-2: #FFD96B;
    --v2-subject-color-KSSMEK: #A7A9AC;
    --v2-subject-color-KSSMEK-2: #C8CACD;
    --v2-subject-color-KSSMPA: #F05A67;
    --v2-subject-color-KSSMPA-2: #FF8B96;
    --v2-subject-color-KSSMPN: #A7A9AC;
    --v2-subject-color-KSSMPN-2: #C8CACD;

    --v2-subject-color-KSSRSKBM: #8DC63F;
    --v2-subject-color-KSSRSKBM-2: #A7E35C;
    --v2-subject-color-KSSRSKBI: #00AEEF;
    --v2-subject-color-KSSRSKBI-2: #4CCFFF;
    --v2-subject-color-KSSRSKSA: #EE4C9B;
    --v2-subject-color-KSSRSKSA-2: #FF84B9;
    --v2-subject-color-KSSRSKMA: #00B6AD;
    --v2-subject-color-KSSRSKMA-2: #58E2DA;

    --v2-subject-color-KSSRSJKCBM: #8DC63F;
    --v2-subject-color-KSSRSJKCBM-2: #A7E35C;    
    --v2-subject-color-KSSRSJKCBI: #00AEEF;
    --v2-subject-color-KSSRSJKCBI-2: #4CCFFF;    
    --v2-subject-color-KSSRSJKCSA: #EE4C9B;
    --v2-subject-color-KSSRSJKCSA-2: #FF84B9;
    --v2-subject-color-KSSRSJKCMA: #00B6AD;
    --v2-subject-color-KSSRSJKCMA-2: #58E2DA;
    --v2-subject-color-KSSRSJKCBC: #EF4030;
    --v2-subject-color-KSSRSJKCBC-2: #FF7466;
    
    --v2-subject-color-SPMKSSMBM: #8CC63F;
    --v2-subject-color-SPMKSSMBM-2: #A7E35C;
    --v2-subject-color-SPMKSSMBI: #00AEEF;
    --v2-subject-color-SPMKSSMBI-2: #4CCFFF;
    --v2-subject-color-SPMKSSMSA: #EE4C9B;
    --v2-subject-color-SPMKSSMSA-2: #FF84B9;
    --v2-subject-color-SPMKSSMMA: #00B6AD;
    --v2-subject-color-SPMKSSMMA-2: #58E2DA;
    --v2-subject-color-SPMKSSMSEJ: #867267;
    --v2-subject-color-SPMKSSMSEJ-2: #B29FA3;
    --v2-subject-color-SPMKSSMBIO: #95937A;
    --v2-subject-color-SPMKSSMBIO-2: #BEBB9F;
    --v2-subject-color-SPMKSSMFIZ: #927786;
    --v2-subject-color-SPMKSSMFIZ-2: #B99DAA;
    --v2-subject-color-SPMKSSMKIM: #849DAA;
    --v2-subject-color-SPMKSSMKIM-2: #A7C1CE;
    --v2-subject-color-SPMKSSMMT: #4A889E;
    --v2-subject-color-SPMKSSMMT-2: #6DAFC6;
    --v2-subject-color-SPMKSSMPM: #6C8CC8;
    --v2-subject-color-SPMKSSMPM-2: #90A8E3;
    --v2-subject-color-SPMKSSMPI: #72A581;
    --v2-subject-color-SPMKSSMPI-2: #94C8A2;
    
    --v2-subject-color-KSSMSADLP: #EE4C9B;
    --v2-subject-color-KSSMSADLP-2: #FF84B9;
    --v2-subject-color-KSSMMADLP: #00B6AD;
    --v2-subject-color-KSSMMADLP-2: #58E2DA;
    --v2-subject-color-SPMKSSMSADLP: #EE4C9B;
    --v2-subject-color-SPMKSSMSADLP-2: #FF84B9;
    --v2-subject-color-SPMKSSMMADLP: #00B6AD;
    --v2-subject-color-SPMKSSMMADLP-2: #58E2DA;
    --v2-subject-color-SPMKSSMBIODLP: #95937A;
    --v2-subject-color-SPMKSSMBIODLP-2: #BEBB9F;
    --v2-subject-color-SPMKSSMFIZDLP: #927786;
    --v2-subject-color-SPMKSSMFIZDLP-2: #B99DAA;
    --v2-subject-color-SPMKSSMKIMDLP: #849DAA;
    --v2-subject-color-SPMKSSMKIMDLP-2: #A7C1CE;
    --v2-subject-color-SPMKSSMMTDLP: #4A889E;
    --v2-subject-color-SPMKSSMMTDLP-2: #6DAFC6;
    --v2-subject-color-KSSRSKSE: #867267;
    --v2-subject-color-KSSRSKSE-2: #B29FA3;
    --v2-subject-color-KSSRSJKCSE: #867267;
    --v2-subject-color-KSSRSJKCSE-2: #B29FA3;
    --v2-subject-color-KSSRSKSADLP: #EE4C9B;
    --v2-subject-color-KSSRSKSADLP-2: #FF84B9;
    --v2-subject-color-KSSRSKMADLP: #00B6AD;
    --v2-subject-color-KSSRSKMADLP-2: #58E2DA;

    --v2-sidepanel-primary-color: #10e1a5;
    --v2-sidepanel-secondary-color: #0f1941;
    --v2-sidepanel-tertiary-color: #3d58c5;

    --v2-widget-color: #000107;
    
    --v2-zIndex-stickynotes: 7000;
    --v2-zIndex-widgets: 7500;
    --v2-zIndex-idic: 7500;
    --v2-zIndex-snipping-selection: 7600;
    --v2-zIndex-overlay: 8000;
    --v2-zIndex-quicktest: 9000;
    --v2-zIndex-editor: 9000;
    --v2-zIndex-modal: 9000;
    --v2-zIndex-modal-popup: 9100;
    --v2-zIndex-level-up-popup: 9150;
    --v2-zIndex-level-up-particles: 9155;
    --v2-zIndex-ai-acebot: 9200;
    --v2-zIndex-ai-sidepanel: 9300;

    --v2-stickynote-blue: #DAF6FA;
    --v2-stickynote-green: #D1FECB;
    --v2-stickynote-pink: #F6D0F6;
    --v2-stickynote-purple: #E1D6F5;
    --v2-stickynote-white: #FDFDFD;
    --v2-stickynote-yellow: #FCFCCB;    

    --v2-stickynote-header-blue: #40C8F4;
    --v2-stickynote-header-green: #A3D063;
    --v2-stickynote-header-pink: #F287B7;
    --v2-stickynote-header-purple: #8781BD;
    --v2-stickynote-header-white: #E0E0E0;
    --v2-stickynote-header-yellow: #FECC4E;

}

.v2-sn-blue-scrollbar::-webkit-scrollbar-track { background-color: var(--v2-stickynote-blue); }
.v2-sn-green-scrollbar::-webkit-scrollbar-track { background-color: var(--v2-stickynote-green); }
.v2-sn-pink-scrollbar::-webkit-scrollbar-track { background-color: var(--v2-stickynote-pink); }
.v2-sn-purple-scrollbar::-webkit-scrollbar-track { background-color: var(--v2-stickynote-purple); }
.v2-sn-white-scrollbar::-webkit-scrollbar-track { background-color: var(--v2-stickynote-white); }
.v2-sn-yellow-scrollbar::-webkit-scrollbar-track { background-color: var(--v2-stickynote-yellow); }

input[type="range"]::-webkit-slider-thumb {
  @apply bg-red-500 h-4 w-4 rounded-full shadow-md cursor-pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  @apply bg-gray-300 h-2 rounded-full;
}
input[type="range"]::-moz-range-thumb {
  @apply bg-blue-500 h-4 w-4 rounded-full shadow-md cursor-pointer;
}
input[type="range"]::-moz-range-track {
  @apply bg-gray-300 h-2 rounded-full;
}

.swal2-container {
  z-index: 99999 !important;
}

.v2-header-logo{
    background-image: var(--v2-logo-white);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.stickynotes.stickynotes-active{
	border:4px solid #ff006a;
	animation: pulseBorder 2s infinite;
}

@keyframes pulseBorder{
  0%   { border-color: #ff006a; }
  25%  { border-color: #990b3a; }
  50%  { border-color: #ff006a; }
  75%  { border-color: #990b3a; }
  100% { border-color: #ff006a; }
}

@keyframes shine {
  0% {
      left: -100%;
      opacity: 0;
  }
  20% {
      opacity: 0.5;
  }
  50% {
      opacity: 0.8;
      left: 100%;
  }
  100% {
      left: 100%;
      opacity: 0;
  }
}

/* SHINY BUTTON */
.shiny-button {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shiny-button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  animation: shine 3s infinite;
}

/* SUNBURST ANIMATIONS */
@keyframes rotate-sunburst {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse-glow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.6; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes burst {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-rotate-sunburst { animation: rotate-sunburst 25s linear infinite; }
.animate-rotate-sunburst-reverse { animation: rotate-sunburst 40s linear infinite reverse; }
.animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-burst { animation: burst 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

/* GAIN POINTS POPUP */
@keyframes gainPointsPopupAnimation {
  0% {
      opacity: 0;
      transform: translateY(0) scale(0.5);
  }
  20% {
      opacity: 1;
      transform: translateY(0) scale(.85);
  }
  75%{
      opacity: 1;
  }
  100% {
      opacity: 0;
      transform: translateY(0) scale(1);
  }
}

.gain-points-popup {
  animation: gainPointsPopupAnimation 2s ease-out forwards;
}

/* GAIN POINTS NOTIFICATION */
@keyframes gainPointsNotificationAnimation {
  0% {
    right: -240px;
  }
  25% {
    right: -240px;
  }
  50% {
      right: 8px;
  }
}

.gain-points-notification {
  animation: gainPointsNotificationAnimation 1.5s ease-out forwards;
}

/* GRADIENT ANIMATION */
@keyframes gradient-xy {
  0%, 100% {
      background-size: 400% 400%;
      background-position: left center;
  }
  50% {
      background-size: 200% 200%;
      background-position: right center;
  }
}
.animate-gradient {
  animation: gradient-xy 3s ease infinite;
}

/* SUBJECT BGCOLOR */
.v2-subject-bgcolor{ background-color: #FFFFFF; }
.v2-subject-bgcolor.SKBM{ background-color: #8DC63F; }
.v2-subject-bgcolor.SKBI{ background-color: #00AEEF; }
.v2-subject-bgcolor.SKSA{ background-color: #EE4C9B; }
.v2-subject-bgcolor.SKMA{ background-color: #00B6AD; }
.v2-subject-bgcolor.SJKCBM{ background-color: #8DC63F; }
.v2-subject-bgcolor.SJKCBI{ background-color: #00AEEF; }
.v2-subject-bgcolor.SJKCSA{ background-color: #00B6AD; }
.v2-subject-bgcolor.SJKCMA{ background-color: #EE4C9B; }
.v2-subject-bgcolor.SJKCBC{ background-color: #EF4030; }
.v2-subject-bgcolor.SMKBM{ background-color: #8DC63F; }
.v2-subject-bgcolor.SMKBI{ background-color: #00AEEF; }
.v2-subject-bgcolor.SMKSA{ background-color: #EE4C9B; }
.v2-subject-bgcolor.SMKMA{ background-color: #00B6AD; }
.v2-subject-bgcolor.SMKSE{ background-color: #867267; } 
.v2-subject-bgcolor.SMKGE{ background-color: #FEC232; }
.v2-subject-bgcolor.SPMBM{ background-color: #8CC63F; }
.v2-subject-bgcolor.SPMBI{ background-color: #00AEEF; }
.v2-subject-bgcolor.SPMSA{ background-color: #EE4C9B; }
.v2-subject-bgcolor.SPMMA{ background-color: #00B6AD; }
.v2-subject-bgcolor.SPMSE{ background-color: #867267; }
.v2-subject-bgcolor.SPMPM{ background-color: #6C8CC8; }
.v2-subject-bgcolor.SPMPI{ background-color: #72A581; }
.v2-subject-bgcolor.SPMPE{ background-color: #E4AB6C; }
.v2-subject-bgcolor.SPMPA{ background-color: #F05A67; }
.v2-subject-bgcolor.SPMEA{ background-color: #A7A9AC; }
.v2-subject-bgcolor.SPMBY{ background-color: #95937A; }
.v2-subject-bgcolor.SPMFI{ background-color: #927786; }
.v2-subject-bgcolor.SPMKM{ background-color: #849DAA; }
.v2-subject-bgcolor.SPMMT{ background-color: #4A889E; }
.v2-subject-bgcolor.SPMMT{ background-color: #4A889E; }
.v2-subject-bgcolor.SMKKH{ background-color: #9D85BE; }

.v2-subject-bgcolor.KSSMBM{ background-color: #8DC63F; }
.v2-subject-bgcolor.KSSMBI{ background-color: #00AEEF; }
.v2-subject-bgcolor.KSSMSA{ background-color: #EE4C9B; }
.v2-subject-bgcolor.KSSMMA{ background-color: #00B6AD; }
.v2-subject-bgcolor.KSSMSE{ background-color: #867267; }
.v2-subject-bgcolor.KSSMGE{ background-color: #FEC232; }
.v2-subject-bgcolor.KSSMEK{ background-color: #A7A9AC; }
.v2-subject-bgcolor.KSSMPA{ background-color: #F05A67; }
.v2-subject-bgcolor.KSSMPN{ background-color: #A7A9AC; }
.v2-subject-bgcolor.KSSRSKBM{ background-color: #8DC63F; }
.v2-subject-bgcolor.KSSRSKBI{ background-color: #00AEEF; }
.v2-subject-bgcolor.KSSRSKSA{ background-color: #EE4C9B; }
.v2-subject-bgcolor.KSSRSKMA{ background-color: #00B6AD; }
.v2-subject-bgcolor.KSSRSJKCBM{ background-color: #8DC63F; }
.v2-subject-bgcolor.KSSRSJKCBI{ background-color: #00AEEF; }
.v2-subject-bgcolor.KSSRSJKCSA{ background-color: #EE4C9B; }
.v2-subject-bgcolor.KSSRSJKCMA{ background-color: #00B6AD; }
.v2-subject-bgcolor.KSSRSJKCBC{ background-color: #EF4030; }
.v2-subject-bgcolor.SPMKSSMBM{ background-color: #8CC63F; }
.v2-subject-bgcolor.SPMKSSMBI{ background-color: #00AEEF; }
.v2-subject-bgcolor.SPMKSSMSA{ background-color: #EE4C9B; }
.v2-subject-bgcolor.SPMKSSMMA{ background-color: #00B6AD; }
.v2-subject-bgcolor.SPMKSSMSEJ{ background-color: #867267; }
.v2-subject-bgcolor.SPMKSSMBIO{ background-color: #95937A; }
.v2-subject-bgcolor.SPMKSSMFIZ{ background-color: #927786; }
.v2-subject-bgcolor.SPMKSSMKIM{ background-color: #849DAA; }
.v2-subject-bgcolor.SPMKSSMMT{ background-color: #4A889E; }
.v2-subject-bgcolor.SPMKSSMPM{ background-color: #6C8CC8; }
.v2-subject-bgcolor.SPMKSSMPI{ background-color: #72A581; }

.v2-subject-bgcolor.KSSMSADLP{ background-color: #EE4C9B; }
.v2-subject-bgcolor.KSSMMADLP{ background-color: #00B6AD; }
.v2-subject-bgcolor.SPMKSSMSADLP{ background-color: #EE4C9B; }
.v2-subject-bgcolor.SPMKSSMMADLP{ background-color: #00B6AD; }
.v2-subject-bgcolor.SPMKSSMBIODLP{ background-color: #95937A; }
.v2-subject-bgcolor.SPMKSSMFIZDLP{ background-color: #927786; }
.v2-subject-bgcolor.SPMKSSMKIMDLP{ background-color: #849DAA; }
.v2-subject-bgcolor.SPMKSSMMTDLP{ background-color: #4A889E; }
.v2-subject-bgcolor.KSSRSKSE{ background-color: #867267; }
.v2-subject-bgcolor.KSSRSJKCSE{ background-color: #867267; }
.v2-subject-bgcolor.KSSRSKSADLP{ background-color: #EE4C9B; }
.v2-subject-bgcolor.KSSRSKMADLP{ background-color: #00B6AD; }

.kbat { background-color: black;color: white;padding: 3px;border-radius: 5px;font-size: 7px;font-family: arial;font-weight: bold;}
.ithink { background-color: #F15A29;color: white;padding: 3px;border-radius: 5px;font-size: 7px;font-family: arial;font-weight: bold;}
.math-number, .nowrap  { white-space: nowrap;}
.kbat.green { background-color:#00a851; color: black;}
.klonPT3 { background-color: red;color: white;padding: 3px;border-radius: 5px;font-size: 7px;font-family: arial;font-weight: bold;}
.klon { background-color:#CFF; color: black;padding: 3px;border-radius: 5px;font-size: 7px;font-family: arial;font-weight: bold; }

/* Expandable Description */
.v2-description-text {
	transition: all 0.3s ease;
	overflow: hidden;
}

.v2-description-collapsed {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	line-clamp: 4;
	overflow: hidden;
	text-overflow: ellipsis;
}

.v2-description-expanded {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

/* AI COACH BOT IMG */
.ai-coach-bot-img {
  width: 200px;
  height: 200px;
  opacity: 0;
  transform: translate(-200px, 100vh) scale(0.5);
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease-out;
  position: fixed;
  left: calc(50% + 50px);
  top: calc(50vh - 200px);
}

/* Active state: centered and visible */
.ai-coach-bot-img.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* STAGE */
:root {
  --holo-blue: #0ea5e9;
  --holo-glow: rgba(14, 165, 233, 0.3);
  /* Changed to a light holographic glass background */
  --glass-bg: rgba(255, 255, 255, 1);
}

/* 600x600 Hologram Stage */
.stage {
  width: 690px;
  height: 430px;
  margin-top: 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  
  /* Glassmorphism / Hologram Look - Darkened */
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(14, 165, 233, 0.4);
  border-radius: 20px;
  box-shadow: 
      0 0 50px rgba(0, 0, 0, 0.3),
      0 0 30px var(--holo-glow),
      inset 0 0 20px rgba(14, 165, 233, 0.2); 
  
  /* Monitor Startup Animation (Dot to Screen) */
  opacity: 0;
  transform: scale(0.001, 0.001);
  animation: monitorStartup 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  perspective: 1000px;
}

/* Scanline / Grid Effect Overlay */

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(14, 165, 233, 0.08) 50%, transparent 50%);
  background-size: 100% 4px;
  pointer-events: none;
  border-radius: 20px;
  z-index: 1;
}

.stage:after {
  content: '';
  position: absolute;
  top: -22px;
  right: calc(50% - 30px);
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 20px solid var(--holo-blue);
}

@keyframes monitorStartup {
  0% {
      opacity: 0;
      transform: scale(0.01, 0.01);
      filter: brightness(5);
  }
  40% {
      opacity: 1;
      transform: scale(1, 0.005);
      filter: brightness(2);
  }
  100% {
      opacity: 1;
      transform: scale(1, 1);
      filter: brightness(1);
  }
}

/* Digital Floating Orb */
.orb-container {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  z-index: 2;
}

.orb-inner {
  width: 70px;
  height: 70px;
  background: var(--holo-blue);
  border-radius: 50%;
  box-shadow: 
      0 0 20px var(--holo-blue),
      0 0 40px var(--holo-blue),
      0 0 60px var(--holo-blue);
  animation: pulseCore 2s infinite ease-in-out;
}

.ring {
  position: absolute;
  border: 2px solid var(--holo-blue);
  border-radius: 50%;
  opacity: 0.4;
}

.ring-1 { width: 100px; height: 100px; border-style: dashed; animation: rotate 10s linear infinite; }
.ring-2 { width: 140px; height: 140px; border-width: 1px; border-style: dotted; animation: rotate 15s linear reverse infinite; }

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

@keyframes pulseCore {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.1); filter: brightness(1.3); }
}

/* Text Styling - Changed to White/Light Blue for Dark Background */
.speech-text {
  color: var(--holo-blue);
  font-weight: 800;
  z-index: 2;
  /* text-shadow: 0 0 5px rgba(14, 165, 233, 0.8); */
  font-variant-numeric: tabular-nums;
}

.cursor {
  display: inline-block;
  width: 4px;
  height: 30px;
  background-color: var(--holo-blue);
  margin-left: 4px;
  vertical-align: middle;
  animation: blink 0.8s infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* Buttons Container */
.button-group {
  margin-top: 5px;
  display: flex;
  gap: 20px;
  z-index: 2;
}

.holo-btn {
  background: rgba(12, 115, 163, 0.75);
  border: 1px solid rgba(14, 165, 233, 0.5);
  color: #daeff8;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.holo-btn:hover {
  background: rgba(14, 165, 233, 0.95);
  border-color: var(--holo-blue);
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
  transform: translateY(-2px);
}

.holo-btn:active {
  transform: translateY(0);
}

.btn-fade-enter-active {
  transition: all 0.6s ease-out;
}
.btn-fade-enter-from {
  opacity: 0;
  transform: translateY(10px);
}


.holo-label {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 0.7rem;
  color: var(--holo-blue);
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.9;
  z-index: 2;
}

.corners {
  position: absolute;
  inset: 10px;
  border: 2px solid transparent;
  pointer-events: none;
}
/* Tech corner brackets */
.corners::before, .corners::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--holo-blue);
  border-style: solid;
}
.corners::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.corners::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

#v2-print-error-container, .v2-print-error-container{
  display: none;
}

@media print{
  #v2-notes-container-wrap,  #v2-container-wrap, #question-list,
  #classic-mode .testrecord,
  #v2-notes-widget, #idic-widget,#v2-practice-objective-widget{
    display: none;
  }
  #v2-print-error-container, .v2-print-error-container{
    display: block;
  }
}