/* =========================== QUADRANT QUIZ =========================== */
.class_TheAbs.CQCont {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.class_RelFlex.CQSecTop {
    width: 100%;
    height: 50px;
}
.class_RelFlex.CQSecTopA {
    font-family: var(--fontFamilyRoboto);
    justify-content: start;
    align-items: center;
    width: 100%;
    height: 50px;  
    padding-left: 5px;
    padding-right: 5px;
    
    font-size: 24px;
    font-weight: 500;
    color: white;
    background: #0e131a;                            
}
.class_RelFlex.CQSecTopB {
    font-family: var(--fontFamilyArvo);
    width: 100%;
    height: 50px;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    
    background: linear-gradient(135deg, #FFD700 0%, #FFEB3B 50%, #FFF59D 100%);  /* eggyolk gradient */
    
    font-size: 24px;
    letter-spacing: 0.5px;
    text-align: center;
    color: black;
    font-weight: 700;
    text-shadow: none;                            
}

.class_TheRel.CQSecBody {
    width: 100%;
    height: calc(100% - 50px);                
    border: 4px solid black;
}

.class_TheRel.CQBoxBody {
    width: 50%;
    height: 100%;                    
}
.class_RelFlex.CQLenSection {
    width: 100%;
    height: 40px;
    
    font-size: 18px;
    font-weight: 500;
    color: black;
}
.class_TheRel.CQTopicSection {
    width: 100%;
    height: calc(100% - 40px);                     
    overflow: auto;
    
    font-size: 18px;
    font-weight: 500;
    color: black;
}

.class_RelFlex.CQLabel {
    font-size: 18px;
    font-weight: 500;
    color: black;
}


.class_RelFlex.CQTopicLine {
    font-family: var(--fontFamilyRoboto);
    width: 100%;
    height: 40px;   
    border-top: 2px groove white;
    
    font-size: 18px;
    text-align: center;
    color: black;
    font-weight: 500;
    text-shadow: none;              
}

.class_GrammarBB.CQTextArea {
    width: 100%;
    height: 100%;

    border: none;
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
    
    padding: 20px;

    font-size: 34px;
    font-weight: 500;
    color: #1e3a8a;
    
    resize: none;
    outline: none;
}






/* =========================== QUADRANT QUIZ =========================== */
.class_TheAbs.GrammarQuadWrap.Loading {
    width: 100%;
    height: 100%;
    
}
.class_TheAbs.GrammarQuadWrap {
    width: 100%;
    height: 100%;
}
.class_TheRel.BoxQuizQuadrant {
    width: 50%;
    height: 50%;
    border-radius: 0;
    background: #e6efff;
    border: 4px solid transparent;
}
#id_BoxQuizQuadrant-0 {border-right: none; border-bottom: none;}
#id_BoxQuizQuadrant-1 {border-bottom: none;}
#id_BoxQuizQuadrant-2 {border-right: none;}
#id_BoxQuizQuadrant-3 {}

.class_GrammarBB.QuizQuadrant {
    width: 100%;
    height: 100%;

    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
    
    padding: 24px;

    font-size: 34px;
    font-weight: 500;
    color: #1e3a8a;
    
    resize: none;
    outline: none;
}
#id_Quadrant-1 {padding-right: 70px !important;}
.class_GrammarBB.QuizQuadrant:hover {
    box-shadow: 0 18px 40px rgba(30, 64, 175, 0.15);
    background: linear-gradient(180deg, #ffffff 0%, #eaf1ff 100%);
}



.class_Watermark.QuadrantQuiz {
    background: transparent;
    background: linear-gradient(135deg, rgba(255,0,128,0.3), rgba(255,140,0,0.3), rgba(0,255,128,0.3), rgba(0,128,255,0.3));    /* rainbow */
}
.class_FixedBottomRight.QuizHiddenAnswer {
    width: auto;
    height: auto;
    padding: 10px;
    font-size: 16px;
    border: none;
    color: #1e3a8a;
}
/* =========================== QUADRANT QUIZ =========================== */


.class_RelFlexSpanLeft.SpanCountWordsLines {
    width: auto;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    
    font-family: 'Century Gothic', sans-serif;
    font-family: var(--fontFamilyOpenSans);
    
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    
    background: transparent;                 
}

.class_Watermark.FoundGrammar {
    background: linear-gradient(135deg, rgba(255,0,128,0.2), rgba(255,140,0,0.2), rgba(0,255,128,0.2), rgba(0,128,255,0.2));    /* rainbow */
    background: linear-gradient(135deg, rgba(168,85,247,0.6), rgba(59,130,246,0.6));                                            /* Purple → Blue Glow */
    background: linear-gradient(135deg, rgba(211,211,211,0.8), rgba(211,211,211,0.6), rgba(211,211,211,0.2));                   /* white gradient */
}
/* ===========================
   Dynamic Tense Buttons
=========================== */
.TenseButtonContainer {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px;
    justify-content: center;
    height: 70px;               
    background: linear-gradient(to right, #5c5c5c, #3b3b3b);
}
.TenseButton {
    box-sizing: border-box;
    font-family: var(--fontFamilyArvo);
    min-width: 220px;
    height: 50px;
    padding: 10px 20px;

    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 9999px;

    font-size: 16px;
    font-weight: 500;
    color: #0f172a;

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

    cursor: pointer;
    transition: all 0.25s ease;
}
.TenseButton:hover {
    background: rgba(255,255,255,0.95);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 
        0 12px 30px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.9);
}




/*********************************** ConvertPDF ************************************/
.class_TheAbs.ContPDF {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.class_RelFlex.SecHeaderPDF {
    flex-wrap: wrap;
    width: 100%;
    height: 200px;
}
.class_TheRel.SecBodyPDF {
    width: 100%;
    height: calc(100% - 200px);
}
/* ===== FULL GLASS OVERLAY ===== */
.ContPDFGlass {
    box-sizing: border-box;
    inset: 0;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.PDFHeaderGlass {
    box-sizing: border-box;
    height: 80px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #0e131a, #2c3e50);
    color: white;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);         
}

.PDFTitle {
    font-size: 20px;
    font-weight: 600;
    margin-right: 15px;
}



/* ===== PREVIEW PAPER ===== */
.PDFPreviewPaper {
    box-sizing: border-box;
    width: 800px;
    max-width: 100%;
    background: white;
    padding: 30px;
    padding-top: 10px;
    font-family: 'Poppins','Noto Sans JP','Noto Sans KR','Noto Sans TC','Noto Serif SC', sans-serif;
    color: #111;
    border-radius: 6px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    line-height: 1.6;
    text-align: left;
    word-break: break-word;                             
    margin-bottom: 60px;
}

/* ===== INPUTS ===== */
.PDFSelect,
.PDFInput {
    height: 36px;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.25);
    color: white;
    font-size: 14px;
    backdrop-filter: blur(10px);
}

.PDFInput {
    width: 140px;
    padding: 0;
    text-align: center;
}

/* ===== BUTTONS ===== */
.PDFButtonPrimary {
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    border: none;
    padding: 8px 18px;
    border-radius: 999px;
    color: white;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.PDFButtonPrimary:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(255,65,108,0.4);
}

.PDFButtonSecondary {
    background: rgba(255,255,255,0.2);
    border: none;
    padding: 8px 18px;
    border-radius: 999px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.PDFButtonSecondary:hover {
    background: rgba(255,255,255,0.35);
}

.PDFquestion-block {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 15px;
}

.PDFanswer-break {
    page-break-before: always;
    break-before: page;
    margin-top: 10px;
    font-weight: 600;
}
.pdf-page {
    page-break-after: always;
    break-after: page;
}

.pdf-force-break {
    page-break-before: always;
    break-before: page;
}
.PDFPreviewPaper{
    background:white;
    padding:40px;
    margin:auto;
    width:80%;
    min-height:500px;
    box-shadow:0 0 20px rgba(0,0,0,0.2);
}
.pdf-force-break{
    page-break-before: always;
}




/* =========================================
   BODY CONTAINER
========================================= */
.PDFBodyGlass {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: 40px;
    overflow: auto;
    scroll-behavior: smooth;
}

/* =========================================
   EDITOR WRAPPER
========================================= */
#PDFEditorWrapper {
    width: 900px;
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* =========================================
   PDF PREVIEW
========================================= */
#id_PDFPreview {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4 !important;
    width: 794px;
    margin: 0 auto;
}

#id_PDFPreview p,
#id_PDFPreview h1,
#id_PDFPreview h2,
#id_PDFPreview h3 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

#id_PDFPreview .ql-editor {
    line-height: 1.4 !important;
}

/* =========================================
   TOOLBAR (COMPACT)
========================================= */
#PDFEditorWrapper .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0 0;
    background: lightgray;

    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    padding: 4px 8px !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
}

#PDFEditorWrapper .ql-toolbar.ql-snow .ql-formats {
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
}

#PDFEditorWrapper .ql-toolbar.ql-snow button {
    padding: 2px 4px !important;
    height: 24px !important;
    line-height: 24px !important;
}

#PDFEditorWrapper .ql-toolbar.ql-snow .ql-picker {
    height: 24px !important;
}

#PDFEditorWrapper .ql-toolbar.ql-snow .ql-picker-label {
    padding: 2px 4px !important;
    height: 24px !important;
    line-height: 24px !important;
}

#PDFEditorWrapper .ql-toolbar.ql-snow svg {
    width: 14px !important;
    height: 14px !important;
}

#PDFEditorWrapper .ql-toolbar.ql-snow * {
    vertical-align: middle !important;
}

/* =========================================
   EDITOR BODY
========================================= */
#PDFEditorWrapper .ql-container {
    min-height: 750px;              /* fixed stable height */
    border-radius: 0 0 8px 8px;
}

#PDFEditorWrapper .ql-editor {
    height: 100%;
    padding: 10px !important;
    line-height: 1.4 !important;
}







/*********************************** GrammarQuiz ************************************/
.class_RelFlexSpanLeft.SpanNumberQuiz {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    margin-left: 10px;

    font-family: 'Century Gothic', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.6);
    background: linear-gradient(135deg, #6c757d, #495057);    /* Gray */
    transition: all 0.4s ease;                                          
}
.class_RelFlexSpanLeft.SpanNumberQuiz:hover {
    background: linear-gradient(135deg, #1a1a1a, #3a3a3a);
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
}
/*********************************** GridPics ************************************/
.class_TheAbs.FoundContGrid {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
}
.class_RelFlex.FoundSecTopGrid {
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    border-bottom: 2px groove white;
    background: linear-gradient(135deg, #b8bdc7, #6f7480); /* cool-tone gray */
}
.class_RelFlex.FoundSecTopA, .class_RelFlex.FoundSecTopB {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    flex-wrap: wrap;
    width: 100%;
    height: 40px;
    font-size: 24px;
    font-weight: normal;
    color: white;
    overflow: auto;
}
.class_RelFlex.FoundSecTopB {
    width: 100%;
    height: 75px;
    padding-left: 70px;
    padding-right: 70px;
    border-bottom: 1px solid darkgray;  
}
.class_RelFlex.FoundSecBottomGrid {
    width: 100%;
    height: 0;
    display: none;
}
.class_TheRel.FoundSecBodyGrid {
    flex-wrap: wrap;
    width: 100%;
    height: calc(100% - 120px);
    padding: 10px;
    border: none;
    overflow: auto;         
}

/* ------------------------------------------------------ */
/*           ADDED: Wrapper for image + delete icon       */
/* ------------------------------------------------------ */
.class_FoundPicWrap {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  margin: 0;
  margin-right: 10px;
}

/* ghost image during drag (optional style) */
.class_FoundSortGhost {
  opacity: 0.4;
}
/* Reorder instructions */
.class_FoundReorderNote {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 24px;
  padding: 6px;
  opacity: 0.85;
  user-select: none;
}

.class_FoundDeletePic {
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.55);
  color: white;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 28px;
  cursor: pointer;
  user-select: none;
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.class_FoundPicWrap:hover .class_DeletePic {
  opacity: 1;
  background: rgba(0,0,0,0.75);
}

.class_RelImage.FoundPicGrid {
  width: 250px;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  cursor: pointer;
  /* margin removed (now handled by .picWrap) */
  border: 6px solid transparent;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.class_RelImage.FoundPicGrid.Selected {
  border: 6px solid blue;
}
/* Desktop 1600px+ */
@media only screen and (min-width: 1600px) {
  .class_RelImage.FoundPicGrid { width: 347px; }
  .class_RelImage.FoundPicGrid.FoundReorder { width: 160px !important; }
}

/* Laptop large (1280px–1599px) */
@media only screen and (max-width: 1599px) and (min-width: 1200px) {
  .class_RelImage.FoundPicGrid { width: 280px; }
  .class_RelImage.FoundPicGrid.FoundReorder { width: 160px !important; }
}

/* Tablet landscape (992px–1199px) */
@media only screen and (max-width: 1199px) and (min-width: 992px) {
  .class_RelImage.FoundPicGrid { width: 220px; }
  .class_RelImage.FoundPicGrid.FoundReorder { width: 160px !important; }
}

/* Tablet portrait (768px–991px) */
@media only screen and (max-width: 991px) and (min-width: 768px) {
  .class_RelImage.FoundPicGrid { width: 180px; }
  .class_RelImage.FoundPicGrid.FoundReorder { width: 160px !important; }
}

/* Mobile large (600px–767px) */
@media only screen and (max-width: 767px) and (min-width: 600px) {
  .class_RelImage.FoundPicGrid { width: 150px; }
  .class_RelImage.FoundPicGrid.FoundReorder { width: 160px !important; }
}

/* Mobile small (<600px) */
@media only screen and (max-width: 599px) {
  .class_RelImage.FoundPicGrid { width: 120px; }
  .class_RelImage.FoundPicGrid.FoundReorder { width: 160px !important; }
}

.class_RelImage.FoundPicGrid:hover {
  transform: scale(1.03);
  box-shadow:
  0 8px 20px rgba(122, 87, 255, 0.7),
  0 12px 32px rgba(122, 87, 255, 0.4);
}


.paginationEllipsis {
  min-width: 36px;
  cursor: pointer;
}

.pageFoundPickerMenu {
  z-index: 9999;
  max-height: 260px;
  width: 200px;
  overflow: auto;
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  background: #fff;
}

.pageFoundPickerItem {
  display: inline-block;
  margin: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #f9f9f9;
  cursor: pointer;
}
.pageFoundPickerItem:hover {
    background: darkgray;
    color: white;
}
.pageFoundPickerItem.active {
  font-weight: 600;
  border-color: #999;
}

.pageFoundPickerJump {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.pageFoundPickerJump input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.pageFoundPickerJump button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #f3f3f3;
}

.class_FoundPageButton, .class_FoundPrevNextButton {
  box-sizing: border-box;
  font-family: 'Poppins', 'Century Gothic', sans-serif;
  width: 40px;
  height: 40px;
  margin: 1px;
  margin-left: 2px;
  margin-right: 2px;
  border-radius: 1px;
  cursor: pointer;
  font-size: 16px;
  font-weight: normal;
  transition: background-color 0.2s, transform 0.2s;
}
.class_FoundPageButton {
    border: 1px solid white;
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.class_FoundPrevNextButton {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    width: 80px;
    height: 40px;
    border: 1px solid white;
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.class_FoundPageButton:hover, .class_FoundPrevNextButton:hover {
  background-color: rgba(255,255,255,0.9);
  transform: scale(1.05);
}

.class_FoundPageButton {
  width: 60px !important;
  margin: 2px;
  padding: 5px 10px;
  cursor: pointer;
}
.class_FoundWideButton {
  width: 117px !important;
  margin: 2px;
  padding: 5px 10px;
  cursor: pointer;
}
.class_FoundPageButton.active {
  background-color: deeppink;
  color: white;
  font-weight: bold;
  border-color: lavender;
}

/*********************************** GridPics ************************************/


/*********************************** FoundOnePic ************************************/
.class_TheAbs.FoundContPic {
    border: 2px groove white;
    background: lightgray;
}
.class_TheRel.SecTop.FoundPicTop {
    flex-wrap: wrap;
    padding: 10px;
    width: 60px;
    height: 100%;
    background: linear-gradient(150deg, #000000, #444444); /* black gradient */
    border-left: 2px groove white;
}
.class_TheRel.FoundSecBodyPic {
    display: block;
    width: calc(100% - 60px);
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}
.class_TheRel.FoundSecBodyPic.dragging {
  cursor: pointer !important;
}
.class_RelFlexSpanLeft.FoundSpanTextForPic {
    font-family: 'Century Gothic', sans-serif;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    width: calc(100% - 480px);
    height: 100%;
    padding: 0;
    padding-left: 10px;
    margin: 0;
    color: white;
    font-size: 16px;    
    font-weight: 500;               
}
.class_FixedBottomRight.FoundTubePicOne {
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;     
}
.class_FixedBottomRight.FoundTubePicOne:hover, .class_FixedBottomRight.FoundTubePicOne:focus, .class_FixedBottomRight.FoundTubePicOne:active {
    background: transparent;
}
.class_TheRel.FoundPicOneWrapper {
    width: 100%;
    height: 100%;                 
    overflow: overflow;
}
.class_RelFoundPicOne {
    box-sizing: border-box;
    position: relative;
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    cursor: pointer;

    object-fit: fill;  

    overflow: hidden;
}
/*********************************** FoundOnePic ************************************/



/********************************** Grammar-Topics ********************************/
.class_AbsFlexCenter.ContGrammar {
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.88),
        rgba(245,247,250,0.85)
    );
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
}
.class_AbsFlexCenter.ContGrammar::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(
        ellipse at center,
        rgba(0,0,0,0.18) 0%,
        rgba(0,0,0,0.28) 55%,
        rgba(0,0,0,0.38) 100%
    );

    pointer-events: none;
    z-index: 0;
}

.class_RelFlex.SecBodyGrammar {
    flex-wrap: wrap;
    width: 1008px;
    min-width: 400px;
    max-width: 100%;
    height: auto;
    max-height: 100%;     
    padding-bottom: 20px;
    overflow: auto;
}
.class_RelFlex.HeaderGrammar {
    font-family: var(--fontFamilyArvo);
    width: 100%;
    height: auto;
    padding-bottom: 10px;

    font-size: clamp(36px, 2vw, 48px);
    font-weight: 700;
    color: whitesmoke;

    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.class_RelFlex.TopicsBody {
    flex-wrap: wrap;
    width: auto;
    height: auto;
}
.class_RelFlex.SecSettingTube {
    flex-wrap: wrap;
    width: 100%;
    height: 70px;            
}
.class_TheRel.WordInput {
    font-family: var(--fontFamilyArvo);
    width: 200px;
    height: 50px;   
    
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    color: whitesmoke;
    text-align: center;
    
    /* Glass effect */
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow:
        0 4px 15px rgba(0,0,0,0.25),
        inset 0 1px 1px rgba(255,255,255,0.2);
    outline: none;
    transition: all 0.25s ease;
}



.class_TheAbs.OverGrammarImage {
    background: rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.class_RelFlex.GrammarTopics {
    font-family: var(--fontFamilyArvo);
    flex-wrap: wrap;
    width: 180px;
    height: 70px;
    margin: 3px;
    padding: 4px;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.9),
        rgba(255,255,255,0.75)
    );

    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 14px;

    box-shadow:
        0 6px 20px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.7);

    font-size: clamp(12px, 2vw, 16px);
    font-weight: 400;
    color: #111;

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        border 0.25s ease,
        transform 0.25s ease;
}
.class_RelFlex.GrammarTopics:hover {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,1),
        rgba(255,255,255,0.95)
    );

    box-shadow:
        0 10px 30px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.8);

    border: 1px solid rgba(255,255,255,0.7);

    transform: translateY(-2px);
}

.class_RelFlex.GrammarMainTopic {
    font-family: var(--fontFamilyArvo);
    flex-wrap: wrap;
    width: 220px;
    height: 90px;
    margin: 5px;
    padding: 10px;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.9),
        rgba(255,255,255,0.75)
    );

    border: 1px solid rgba(255,255,255,0.30);
    border-radius: 9999px;
    box-shadow:
        0 4px 14px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.6);

    transform: scale(0.96);

    font-size: clamp(16px, 2vw, 24px);
    font-weight: 400;
    color: #111;

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        border 0.25s ease,
        transform 0.25s ease;
}
.class_RelFlex.GrammarMainTopic:hover {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,1),
        rgba(255,255,255,0.95)
    );

    box-shadow:
        0 10px 30px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.8);

    border: 1px solid rgba(255,255,255,0.7);

    transform: translateY(-2px);
}
.class_RelFlex.GrammarSubtopics {
    font-family: var(--fontFamilyArvo);

    width: 240px;
    height: 90px;
    margin: 8px;
    padding: 15px;

    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;

    box-shadow: 
        0 8px 22px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);

    font-size: clamp(16px, 2vw, 22px);
    font-weight: 500;
    color: #0f172a;

    transition: all 0.25s ease;
}
.class_RelFlex.GrammarSubtopics:hover {
    background: rgba(255, 255, 255, 0.85);

    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    transform: translateY(-3px) scale(1.02);

    border: 1px solid rgba(255, 255, 255, 0.9);
}


/********************************** Grammar-Subtopics ********************************/
.class_AbsFlexCenter.BackSubtopics {
    align-content: start;
    width: 100%;
    height: 100%;
    padding: 50px;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.18),
        rgba(245,247,250,0.65)
    );
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.class_RelFlex.RectSubtopics {
    flex-wrap: wrap;
    width: auto;
    height: auto;
    max-width: 900px;
    background: transparent;
}
.class_TheAbs.SecBodySubtopic, .class_TheAbs.SecBodyMainTopic {
    width: 100%;
    height: 100%;
    
    font-size: 80px;
    color: white;

    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.68),
        rgba(245,247,250,0.65)
    );
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.class_RelFlex.SubtopicHeader, .class_RelFlex.BarMainTopicHeader {
    font-family: var(--fontFamilyRoboto);
    justify-content: start;
    align-items: center;
    width: 100%;
    height: 50px;  
    font-size: 24px;
    font-weight: 500;
    color: white;
    background: #0e131a;
}
.class_RelFlex.BarMainTopicHeader {
    background: darkgray;
}
.class_RelFlex.HeaderBoldMain {
    width: 100%;
    height: 50px;   
}
.HeaderBoldMain, .HeaderBoldSub, .SpanBoldMain {
    font-family: var(--fontFamilyArvo);
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #FFD700 0%, #FFEB3B 50%, #FFF59D 100%);  /* eggyolk gradient */
    
    
    font-size: 24px;
    letter-spacing: 0.5px;
    text-align: center;
    color: black;
    font-weight: 700;
    text-shadow: none;
}
.HeaderBoldMain {
    background: linear-gradient(135deg, #FFD700 0%, #FFEB3B 50%, #FFF59D 100%);  /* eggyolk gradient */
    color: #7A3E1D;
}
.HeaderBoldSub {
    background: linear-gradient(135deg, #1E90FF 0%, #3399FF 50%, #66B2FF 100%); /* DodgerBlue gradient */
    color: white;
}
.SpanBoldMain {
    width: auto;
    height: 100%;
    background: transparent;
    color: black;
}

/****************** Accordion *************************/
.class_RelFlex.TubeAccordion {
    width: auto;
    height: 100%;
}
.class_RelFlex.WrapDropdownAccordion {
    width: auto;
    height: 100%;
}
/* ===============================
   ACCORDION DROPDOWN STYLES
=================================*/

/* Wrapper container */
.class_RelFlex.WrapDropdownAccordion {
    margin-left: 10px;
    width: auto;
    height: 100%;
    max-width: 420px;
}
/* Main select element */
.AccordionSegmentSelect {
    font-family: var(--fontFamilyOpenSans);
    width: 100%;
    padding: 10px 14px;
    padding-right: 36px; /* space for custom arrow */

    font-size: 14px;

    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background-color: linear-gradient(145deg, #ffffff, #e6e6e6);
    color: #333;
    opacity: 0.8;

    cursor: pointer;
    transition: all 0.2s ease;

    /* Remove default arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Custom arrow */
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}
/* Hover */
.AccordionSegmentSelect:hover {
    border-color: #999;
}
/* Focus */
.AccordionSegmentSelect:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}


.class_RelFlex.SpanAccordionLevel {
    width: 38px;
    height: 38px;
    margin-left: 8px;

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

    font-size: 16px;
    font-weight: 700;

    border-radius: 10px;
    cursor: pointer;
    user-select: none;

    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    border: 1px solid #c9c9c9;

    color: #333;

    box-shadow:
        2px 2px 6px rgba(0,0,0,0.08),
        inset 0 0 0 rgba(0,0,0,0);

    transition: all 0.18s ease;
    opacity: 0.8;
}
/* Hover */
.class_RelFlex.SpanAccordionLevel:hover {
    background: linear-gradient(145deg, #fefefe, #dcdcdc);
    transform: translateY(-2px);
    box-shadow:
        4px 4px 10px rgba(0,0,0,0.12);
}
/* Active / Selected */
.class_RelFlex.SpanAccordionLevel.active {
    background: linear-gradient(145deg, #ff9a3c, #ff5e00);
    border: 1px solid #e65c00;
    color: #fff;

    box-shadow:
        0 4px 14px rgba(255, 94, 0, 0.45);
}
/* Click press effect */
.class_RelFlex.SpanAccordionLevel:active {
    transform: scale(0.96);
}


.class_RelFlex.SubtopicHeader {
    background: #0e131a;
}
.class_TheRel.MainTopicBody {
    width: 100%;
    height: calc(100% - 100px);                
    border: 4px solid #1111;
}
.class_TheRel.SubtopicBody {
    width: 100%;
    height: calc(100% - 100px);                
    border: 4px solid DodgerBlue;
}
.ShadowImage {
    
}
.ShadowImage:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0px 8px 10px rgba(0,0,0,0.5));
}
.class_GrammarBB.SubtopicTextArea, .class_GrammarBB.MainTopicTextArea {
    width: 100%;
    height: 100%;
    background: transparent;
    backdrop-filter: blur(2px) ;
    -webkit-backdrop-filter: blur(2px) ;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.6);
    padding: 16px;
    font-family: inherit;
    font-size: 60px;
    color: #0f172a;
    resize: none;
    outline: none;
    scroll-behavior: smooth;
}
.MainTopicTextArea.Half {
    width: 50%;
}
.SubtopicTextArea.Half {
    width: 50%;
}
.class_GrammarBB.SubtopicTextArea:focus, .class_GrammarBB.MainTopicTextArea:focus {
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.42),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
}
.class_RelFlex.RectX {
    width: 100%;
    height: auto;
    padding: 20px;
}
.SubtopicClose {
    box-sizing: border-box;
    position: relative;
    display: inline;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: black;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
    box-shadow:
        0 6px 16px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.7);
    transition: all 0.25s ease;              
}
.CornerClose, .CornerClose2 {
    box-sizing: border-box;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    cursor: pointer;
    box-shadow:
        0 6px 16px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.7);
    transition: all 0.25s ease;
}
.CornerClose2 {
    top: 25px;
    right: 25px;
    background: black;
    color: white;
}
.SubtopicClose:hover, .MainTopicClose:hover {
    background: linear-gradient(
        145deg,
        rgba(255,255,255,1),
        rgba(255,255,255,0.85)
    );
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.9);
    transform: translateY(-2px) scale(1.02);
}


.class_TubeRight.TubeQuiz {
    width: auto;
    height: auto;
}
.class_RelFlex.TextQuadCheck {
    width: 50px;
    height: 50px;
    
    font-size: 36px !important;
}
.class_AbsFlexCenter.TipQuadCheck {
    width: 100%;
    height: 100%;
    font-size: 11px;
    color: white;
    background: rgba(0,0,0,0.6);
}
.font-18 { font-size: 18px !important; }
.font-24 { font-size: 24px !important; }
.font-30 { font-size: 30px !important; }
.font-36 { font-size: 36px !important; }
.quizFontPulse {
    transform: scale(1.15);
    transition: transform 0.18s ease;
}

/********************************** Subtopic-Buttons ********************************/
.class_RelFlex.SubtopicButton {
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
    margin-left: 6px;
    width: 100px;
    height: 35px;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    letter-spacing: 0.5px;
    color: white;
    
    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.25);
    transition: all 0.4s ease;
}
.class_RelFlex.SubtopicButton:hover {
    background: linear-gradient(145deg, #808080, #a9a9a9); /* Subtle inverse */
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.class_RelFlex.SubtopicButton.Subtopics {
    background: linear-gradient(135deg, #7b2ff7, #b245f5);  /* Violet */
}
.class_RelFlex.SubtopicButton.Subtopics:hover {
    background: linear-gradient(135deg, #b245f5, #7b2ff7);
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(123, 47, 247, 0.5);
}
.class_RelFlex.SubtopicButton.Explain {
    background: linear-gradient(135deg, #00bfff, #1e90ff);  /* DodgerBlue */
}
.class_RelFlex.SubtopicButton.Explain:hover {
    background: linear-gradient(135deg, #1e90ff, #00bfff);
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(0, 191, 255, 0.4);
}
.class_RelFlex.SubtopicButton.Examples {
    background: linear-gradient(135deg, #28a745, #43c767);  /* Green */
}
.class_RelFlex.SubtopicButton.Examples:hover {
    background: linear-gradient(135deg, #43c767, #28a745);
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4);
}
.class_RelFlex.SubtopicButton.Quiz {
    background: linear-gradient(135deg, #dc3545, #ff6b81);  /* SoftRed */
}
.class_RelFlex.SubtopicButton.Quiz:hover {
    background: linear-gradient(135deg, #ff6b81, #dc3545);
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(220, 53, 69, 0.4);
}
.class_RelFlex.SubtopicButton.Pictures {
  background: linear-gradient(135deg, #6c757d, #495057);    /* Gray */
}
.class_RelFlex.SubtopicButton.Pictures:hover {
  background: linear-gradient(135deg, #495057, #6c757d);
  transform: scale(1.07);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
}

.class_RelFlex.SubtopicButton.Round {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6c757d, #495057);    /* Gray */
}
.class_RelFlex.SubtopicButton.Round:hover {
  background: linear-gradient(135deg, #1a1a1a, #3a3a3a);
  transform: scale(1.07);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);       
}
/********************************** Subtopic-Buttons ********************************/


/********************************** MainTopic-Buttons ********************************/
.class_RelFlex.MainTopicButton {
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
    margin-left: 6px;
    width: 100px;
    height: 35px;
    cursor: pointer;
    
    font-size: 14px;
    letter-spacing: 0.5px;
    color: white;
    font-weight: 500;
    text-shadow: none;
    
    transition: all 0.4s ease;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
}
.class_RelFlex.MainTopicButton:hover {
    background: linear-gradient(135deg, #0d3b8e, #3a6cff); /* bright navy blue */
    transform: translateY(-2px);
}
.class_RelFlex.MainTopicButton.MainTopic {
    background: linear-gradient(135deg, #7a2e0e, #e36414); /* orange */
}
.class_RelFlex.MainTopicButton.MainTopic:hover {
    background: linear-gradient(135deg, #ff8c00, #ff6a00); /* orange gradient */
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(255, 140, 0, 0.6); /* orange glow */
}
.MainTopicButton.Active {
    background: linear-gradient(135deg, #0f2a5f, #1f5cb8);
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(31, 92, 184, 0.6);
}


/********************************** MainTopic-Buttons ********************************/



.class_GrammarBB {
    font-family: var(--fontFamilyArvo);
    box-sizing: border-box;
    position: relative;
    display: inline;
    float: left;
    cursor: cursor;
    overflow: auto;
    background: #D7DDE5;
    box-shadow: var(--shadowIndent);
    border-top: 20px solid; 
    border-width: 20px;
    border-image-slice: 1;
    border-image: linear-gradient(45deg, turquoise, greenyellow) 1;
    border-radius: 0;
    user-select: none;  
    top: 0;
    left: 0;
    margin: 0;
    padding: 10px;
    padding-right: 50px;
    width: 100%;
    height: 100%;  
    font-size: 34px;
    font-weight: 500;
    text-align: left;
    color: black;
    outline: none;
    resize: none;
    background: white;
    background: linear-gradient(to bottom, #f9f9f9, #eaeaea);
    box-shadow: inset 0 4px 12px rgba(0,0,0,0.1);   
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
.class_GrammarBB:hover, .class_GrammarBB:focus, .class_GrammarBB:active {
    outline: none;
}