/* Global: Remove browser autofill background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: inherit;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px transparent;
}
/* =========================================================
   NEW LEXY DESIGN - EXACT MOCKUP MATCH
   ========================================================= */
   @import url("https://fonts.googleapis.com/css2?family=Monoton&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

   * {
       box-sizing: border-box;
   }
   
   body {
       margin: 0;
       padding: 0;
       font-family: 'Rubik', sans-serif !important;
       background: #F3ECF7;
       color: #231E41;
   }
   
   .lexy-new-body {
       margin: 0;
       padding: 0;
       font-family: 'Rubik', sans-serif;
       background: #F3ECF7;
       color: #231E41;
       position: relative;
   }
   
   /* HEADER */
   .new-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 16px 40px 12px 40px;
       margin-top: 4px;
       min-height: 76px;
       position: relative;
       z-index: 100;
   }
   
   .new-header-left {
       display: flex;
       align-items: center;
       gap: 15px;
   }
   
   .new-logo {
       height: 32px;
       width: auto;
   }
   
   /* SEARCH BAR - LIKE AUDIO PLAYER WITH DROPDOWN */
   .new-search-wrapper {
       display: flex;
       align-items: center;
       background: #ECE2F7;
       border: 1px solid rgba(215, 197, 250, 0.6);
       border-radius: 50px;
       padding: 13px 13px 13px 27px;
       width: 100%;
       max-width: 500px;
       transition: background 0.2s ease;
   }
   
   .new-search-wrapper {
       position: relative;
       display: flex;
       align-items: center;
       width: 500px;
   }
   
   .new-search-wrapper:hover {
       background: transparent;
   }
   
   .new-search-type {
       border: none;
       background: transparent;
       font-family: "Rubik", sans-serif;
       font-size: 14px;
       font-weight: 400;
       color: #231E41;
       padding-right: 4px;
       margin-right: 4px;
       cursor: pointer;
       appearance: none;
   }
   
   .new-search-type:focus {
       outline: none;
   }
   
   .new-search-type-arrow {
       width: 12px;
       height: 12px;
       color: #6F6F87;
       margin-right: 12px;
       fill: none;
       stroke: currentColor;
       stroke-width: 4;
       stroke-linecap: round;
       stroke-linejoin: round;
   }
   
   .new-nav-arrow {
       width: 14px;
       height: 14px;
       margin-left: 4px;
       fill: none;
       stroke: currentColor;
       stroke-width: 4;
       stroke-linecap: round;
       stroke-linejoin: round;
   }
   
   .new-search-input {
       flex: 1;
       border: none;
       background: transparent;
       font-family: "Rubik", sans-serif;
       font-size: 15px;
       color: #231E41;
       padding: 10px 0;
       padding-left: 0;
       order: 1;
   }
   
   .new-search-input::placeholder {
       color: #6F6F87;
   }
   
   .new-search-input:focus {
       outline: none;
   }
   
   .new-search-btn {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: #231E41;
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-left: 8px;
       transition: background 0.2s;
   }
   
   .new-search-btn:hover {
       background: #3A3560;
   }
   
   .new-search-btn svg {
       stroke-width: 2.5;
   }
   
   .new-search-type-label,
   .explore-search-type-label {
       margin-left: auto;
       display: flex;
       align-items: center;
       cursor: pointer;
       order: 2;
   }
   
   .new-search-clear,
   .explore-search-clear {
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background: transparent;
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       margin-left: 4px;
       margin-right: 4px;
       color: #6F6F87;
       transition: all 0.2s;
       order: 3;
   }
   
   .new-search-clear:hover,
   .explore-search-clear:hover {
       background: rgba(111, 111, 135, 0.1);
       color: #231E41;
   }
   
   /* NAV - RIGHT OF SEARCH */
   .new-nav {
       display: flex;
       gap: 33px;
       align-items: center;
       margin-left: 33px;
   }
   
   .new-nav-link {
       color: #231E41;
       text-decoration: none;
       font-size: 15px;
       font-weight: 400;
       display: flex;
       align-items: center;
       gap: 4px;
   }
   
   .new-nav-link:hover {
       color: #8D75E6;
   }
   
   .new-nav-dropdown {
       position: relative;
   }
   
   .new-nav-dropdown:hover .new-dropdown-menu {
       display: block;
   }
   
   .new-dropdown-menu {
       display: none;
       position: absolute;
       top: 100%;
       left: 0;
       background: #F3ECF7;
       border: 1px solid #F2F3F5;
       border-radius: 8px;
       box-shadow: 0 4px 12px rgba(35, 30, 65, 0.1);
       min-width: 160px;
       padding: 8px 0;
       margin-top: 8px;
       z-index: 1000;
   }
   
   .new-dropdown-menu a {
       display: block;
       padding: 10px 16px;
       color: #231E41;
       text-decoration: none;
       font-size: 14px;
   }
   
   .new-dropdown-menu a:hover {
       background: #F9FAFC;
       color: #F5C332;
   }
   
   /* HEADER RIGHT */
   .new-header-right {
       display: flex;
       align-items: center;
       gap: 16px;
   }
   
   .new-create-btn {
       background: #8D75E6;
       border: 1px solid #8D75E6;
       border-radius: 6px;
       padding: 12px 24px;
       font-family: "Rubik", sans-serif;
       font-size: 14px;
       font-weight: 500;
       color: #fff;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       line-height: 1;
   }
   
   .new-create-btn .create-btn-icon {
       width: 16px;
       height: 16px;
       flex-shrink: 0;
       display: block;
   }
   
   .new-create-btn:hover {
       background: #7D65D6;
   }
   
   .new-user-dropdown {
       position: relative;
   }
   
   .new-user-dropdown:hover .new-user-menu {
       display: block;
   }
   
   .new-user-menu:hover {
       display: block;
   }
   
   .new-user-circle {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: #ECE2F7;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 600;
       font-size: 13px;
       color: #7F69CE;
       cursor: pointer;
   }
   
   .new-user-menu {
       display: none;
       position: absolute;
       top: 100%;
       right: 0;
       background: #F3ECF7;
       border: 1px solid #F2F3F5;
       border-radius: 8px;
       box-shadow: 0 4px 12px rgba(35, 30, 65, 0.1);
       min-width: 180px;
       padding: 8px 0;
       margin-top: 0px;
       z-index: 1000;
   }
   
   .new-user-menu-header {
       padding: 10px 16px;
       border-bottom: 1px solid #F2F3F5;
       margin-bottom: 4px;
   }
   
   .new-user-name {
       font-size: 14px;
       font-weight: 500;
       color: #231E41;
   }
   
   
   
   /* MAIN CONTENT */
   .new-main {
       padding: 32px 40px;
       max-width: 100%;
       position: relative;
       z-index: 10;
   }
   
   /* PAGE TITLE */
   .new-page-title h1 {
       font-size: 32px;
       font-weight: 600;
       margin: 0 0 8px 0;
       color: #231E41;
       letter-spacing: -0.5px;
   }
   
   .new-page-title-row {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 24px;
   }
   
   .new-page-title-left {
       flex: 1;
   }
   
   .new-page-meta {
       font-size: 13px;
       color: #6F6F87;
       margin: 0 0 24px 0;
   }
   
   /* FILTER BAR */
   /* Filter bar container - wraps form and action button */
   .new-filter-bar-container {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 20px;
   }
   
   .new-filter-bar-container .new-filter-bar {
       flex: 1;
       margin-bottom: 0; /* Remove bottom margin when in container */
   }
   
   .new-filter-bar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 40px;
   }
   

   
   .new-filters-left {
       display: flex;
       gap: 8px;
       align-items: center;
   }
   
   .new-filter-icon-btn {
       width: 30px;
       height: 30px;
       border: 1px solid rgba(215, 197, 250, 0.6);
       border-radius: 6px;
       background: #ECE2F7;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       color: #6F6F87;
   }
   
   .new-filter-icon-btn svg {
       width: 16px;
       height: 16px;
   }
   
   .new-filter-icon-btn:hover {
    background-color: #F5EBFF;
   }
   
   .new-filter-pill {
       position: relative;
       display: flex;
       align-items: center;
       gap: 4px;
       background: #ECE2F7;
       border: 1px solid rgba(215, 197, 250, 0.6);
       padding: 0;
       border-radius: 6px;
       height: 30px;
   }
   
   .new-filter-pill:hover {
    background: #F5EBFF;
    }
   
   /* Base styles for both select and button */
   .new-filter-select {
       border: none;
       background: transparent;
       font-family: "Rubik", sans-serif;
       font-size: 13px;
       color: #231E41;
       font-weight: 400;
       cursor: pointer;
       line-height: 1;
   }
   
   /* Styles specific to SELECT elements only */
   select.new-filter-select {
       padding: 0 26px 0 10px;
       appearance: none;
       -webkit-appearance: none;
       -moz-appearance: none;
       width: 100%;
       height: 100%;
   }
   
   .new-filter-select:focus {
       outline: none;
   }
   
   /* Arrow positioning */
   .new-filter-arrow {
       color: #6F6F87;
       opacity: 0.8;
       width: 12px;
       height: 12px;
       fill: none;
       stroke: currentColor;
       stroke-width: 4;
       stroke-linecap: round;
       stroke-linejoin: round;
   }
   
   /* Arrows inside pills (next to select elements) - absolute positioning */
   .new-filter-pill > .new-filter-arrow {
       position: absolute;
       right: 8px;
       top: 50%;
       transform: translateY(-50%);
       pointer-events: none;
       z-index: 1;
   }
   
   /* Arrows inside buttons - relative positioning, flex handles layout */
   .new-filter-dropdown-btn .new-filter-arrow {
       position: relative;
       flex-shrink: 0;
       margin-left: 8px;
   }
       stroke: currentColor;
       stroke-width: 4;
       stroke-linecap: round;
       stroke-linejoin: round;
   }
   
   .new-add-btn {
       background: #F5C332;
       border: none;
       padding: 6px 14px;
       border-radius: 6px;
       font-family: "Rubik", sans-serif;
       font-size: 13px;
       font-weight: 600;
       color: #231E41;
       cursor: pointer;
       height: 30px;
   }
   
   .new-add-btn:hover {
       opacity: 0.9;
   }
   
   /* TABLE */
   .new-table {
       width: 100%;
       border-collapse: collapse;
       font-family: "Rubik", sans-serif;
   }
   
   .new-table thead th {
       text-align: left;
       padding: 12px;
       font-size: 11px;
       font-weight: 600;
       color: #6F6F87;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       border-bottom: 1px solid rgba(215, 197, 250, 0.6);
       background: #F3ECF7;
   }
   
   /* Column widths */
   .new-table thead th:nth-child(1) { width: 40px; }   /* # */
   .new-table thead th:nth-child(2) { width: 80px; }   /* ID */
   .new-table thead th:nth-child(3) { width: 100px; }  /* STATUS */
   .new-table thead th:nth-child(4) { width: 40%; }    /* QUESTION */
   .new-table thead th:nth-child(5) { width: 30%; }    /* ANSWERS */
   .new-table thead th:nth-child(6) { width: 100px; }  /* UPDATED */
   .new-table thead th:nth-child(7) { width: 100px; text-align: right; }  /* ACTIONS */
   
   /* Align actions column to the right */
   .new-table tbody td:nth-child(7) {
       text-align: right;
   }
   
   /* Column widths for question bank (8 columns) */
   body.quiz-questions .new-table thead th:nth-child(1) { width: 80px; }   /* ID */
   body.quiz-questions .new-table thead th:nth-child(2) { width: 100px; }  /* STATUS */
   body.quiz-questions .new-table thead th:nth-child(3) { width: 100px; }  /* LANGUAGE */
   body.quiz-questions .new-table thead th:nth-child(4) { width: 120px; }  /* CATEGORY */
   body.quiz-questions .new-table thead th:nth-child(5) { width: 30%; }    /* QUESTION */
   body.quiz-questions .new-table thead th:nth-child(6) { width: 18%; }    /* ANSWER */
   body.quiz-questions .new-table thead th:nth-child(7) { width: 120px; }  /* UPDATED */
   body.quiz-questions .new-table thead th:nth-child(8) { width: 140px; }  /* ACTIONS */
   
   .new-table tbody td {
       padding: 16px 12px;
       font-size: 14px;
       color: #231E41;
       vertical-align: top;
       border-bottom: 1px solid rgba(215, 197, 250, 0.4);
   }
   
   .new-table tbody tr:hover {
       background: transparent;
   }
   
   .new-empty {
       text-align: center;
       color: #6F6F87;
       padding: 60px 20px !important;
   }
   
   /* ORDER INPUT */
   .new-order-input {
       width: 50px;
       padding: 6px 8px;
       border: 1px solid rgba(215, 197, 250, 0.6);
       border-radius: 4px;
       background: #ECE2F7;
       text-align: center;
       font-family: "Rubik", sans-serif;
       font-size: 13px;
   }
   
   /* STATUS BADGE */
   .new-status-badge {
       display: inline-block;
       padding: 4px 12px;
       border-radius: 12px;
       font-size: 11px;
       font-weight: 600;
   }
   
   .new-status-active {
       background: #E8F5E9;
       color: #2E7D32;
   }
   
   .new-status-inactive {
       background: #FFEBEE;
       color: #C62828;
   }
   
   .new-status-draft {
       background: #FFF3E0;
       color: #E65100;
   }
   
   /* QUESTION CELL */
   .new-question-cell {
       max-width: 500px;
   }
   
   .new-question-text {
       margin-bottom: 10px;
       line-height: 1.5;
   }
   
   /* ANSWERS */
   .new-answer {
       font-size: 13px;
       padding: 6px 8px;
       margin: 2px 0;
       border-radius: 4px;
       border-left: 3px solid transparent;
   }
   
   /* Answer 1 - Light neutral */
   .new-answer:nth-child(1) {
       background: #F5F5F7;
       color: #6F6F87;
       border-left-color: #D7D8DB;
   }
   
   /* Answer 2 - Light neutral */
   .new-answer:nth-child(2) {
       background: #F5F5F7;
       color: #6F6F87;
       border-left-color: #D7D8DB;
   }
   
   /* Answer 3 - Light neutral */
   .new-answer:nth-child(3) {
       background: #F5F5F7;
       color: #6F6F87;
       border-left-color: #D7D8DB;
   }
   
   .new-answer-correct {
       background: #D4EAD9 !important;
       color: #5ABE89 !important;
       border-left-color: #5ABE89 !important;
       font-weight: 500;
   }
   
   .new-answer-correct-label {
       font-size: 12px;
       color: #6F6F87;
       margin-top: 8px;
       padding-left: 0;
   }
   
   /* UPDATE TIME */
   .new-time {
       font-size: 11px;
       color: #9E9E9E;
       margin-top: 2px;
   }
   
   /* ACTION BUTTONS */
   .new-action-btns {
       display: flex;
       flex-direction: column;
       gap: 2px;
   }
   
   .new-action-btn {
       background: transparent;
       border: 1px solid #E0E0E0;
       padding: 6px 12px;
       border-radius: 4px;
       font-family: "Rubik", sans-serif;
       font-size: 12px;
       font-weight: 500;
       color: #231E41;
       cursor: pointer;
       width: 80px;
       text-align: center;
   }
   
   .new-action-btn:hover {
       background: #F9FAFC;
   }
   
   .new-action-btn.new-remove {
       color: #D32F2F;
       border-color: #FFD4D4;
   }
   
   .new-action-btn.new-remove:hover {
       background: #FFEBEE;
   }
   
   /* PAGINATION */
   .new-pagination-wrapper {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 24px;
       margin-top: 32px;
       margin-bottom: 32px;
   }
   
   .new-pagination {
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .new-pagination-prev,
   .new-pagination-next {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 8px 16px;
       border: none;
       border-radius: 8px;
       text-decoration: none;
       color: #231E41;
       font-size: 14px;
       font-weight: 500;
       background: transparent;
       transition: all 0.2s ease;
       height: 40px;
   }
   
   .new-pagination-prev:hover,
   .new-pagination-next:hover {
    color:#7F69CE   
    }
   
   .new-pagination-prev.disabled,
   .new-pagination-next.disabled {
       color: #C0C0C0;
       cursor: not-allowed;
       pointer-events: none;
   }
   
   .new-pagination-num {
       width: 40px;
       height: 40px;
       padding: 0;
       border: none;
       border-radius: 50%;
       text-decoration: none;
       color: #231E41;
       font-size: 14px;
       font-weight: 500;
       display: flex;
       align-items: center;
       justify-content: center;
       background: transparent;
       transition: all 0.2s ease;
   }
   
   .new-pagination-num:hover {
    color: #7F69CE;
   }
   
   .new-pagination-num.active {
       background: #ECE2F7;
       box-shadow: 0 0 0 1px rgba(123, 133, 244, 0.3);
       color: #231E41;
       font-weight: 600;
   }
   
   .new-pagination-ellipsis {
       color: #6F6F87;
       font-size: 14px;
       padding: 0 4px;
   }
   
   .new-pagination-results {
       color: #6F6F87;
       font-size: 14px;
       font-weight: 400;
   }
   
   .new-pagination span {
       color: #6F6F87;
       font-size: 14px;
       padding: 0 8px;
   }
   
   /* FOOTER */
   .new-footer {
       margin-top: 0;
       padding: 60px 40px 32px 40px;
       background: #F7F1F6;
       color: #231E41;
       position: relative;
       border-top: 1px solid #EBE3F7;
   }
   
   .new-footer-content {
       margin: 0 auto;
   }
   
   .new-footer-grid {
       display: grid;
       grid-template-columns: 1fr 3fr 1fr 1fr;
       gap: 60px;
       margin-bottom: 40px;
   }
   
   .new-footer-brand {
       max-width: 320px;
   }
   
   .new-footer-logo {
       margin-bottom: 16px;
   }
   
   .new-footer-logo img,
   .footer-logo-img {
       height: 32px;
       width: auto;
   }
   
   .new-footer-description {
       font-size: 14px;
       line-height: 1.6;
       color: #6F6F87;
       margin: 0;
       font-family: 'Rubik', sans-serif;
   }
   
   .new-footer-column {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }
   
   .new-footer-categories {
       grid-column: span 1;
   }
   
   .footer-categories-grid {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       gap: 12px 20px;
   }
   
   .new-footer-column-title {
       font-size: 16px;
       font-weight: 600;
       color: #231E41;
       margin: 0 0 8px 0;
       font-family: 'Rubik', sans-serif;
   }
   
   .new-footer-link {
       color: #6F6F87;
       text-decoration: none;
       font-size: 14px;
       font-weight: 400;
       font-family: 'Rubik', sans-serif;
       transition: color 0.2s ease;
   }
   
   .new-footer-link:hover {
       color: #7F69CE;
   }
   
   .footer-phone {
       font-weight: 400;
       color: #231E41;
   }
   
   .footer-phone span {
       color: #7F69CE;
       font-weight: 500;
   }
   
   .new-footer-credit {
       font-size: 14px;
       color: #6F6F87;
       margin: 8px 0 0 0;
       font-family: 'Rubik', sans-serif;
   }
   
   .new-footer-bottom {
       padding-top: 24px;
   }
   
   .new-footer-copyright {
       color: #6F6F87;
       font-size: 14px;
       text-align: center;
       font-family: 'Rubik', sans-serif;
   }
   
   @media (max-width: 1024px) {
       .footer-categories-grid {
           grid-template-columns: 1fr 1fr;
       }
   }
   
   @media (max-width: 768px) {
       .new-footer-grid {
           grid-template-columns: 1fr;
           gap: 40px;
       }
       
       .new-footer-brand {
           max-width: 100%;
       }
       
       .footer-categories-grid {
           grid-template-columns: 1fr;
       }
   }
   
   .new-footer-nav {
       display: flex;
       gap: 33px;
       margin-bottom: 20px;
       justify-content: center;
       align-items: center;
   }
   
   /* SUPPORT PAGE STYLES */
   .support-container {
       max-width: 900px;
       margin: 0 auto;
       padding: 60px 40px;
   }
   
   .support-title {
       font-size: 48px;
       font-weight: 700;
       color: #231E41;
       margin-bottom: 60px;
       font-family: 'Rubik', sans-serif;
   }
   
   .faq-section {
       margin-bottom: 60px;
   }
   
   .faq-category-title {
       font-size: 28px;
       font-weight: 600;
       color: #231E41;
       margin-bottom: 30px;
       font-family: 'Rubik', sans-serif;
   }
   
   .faq-item {
       border-bottom: 1px solid #E0E0E0;
       padding: 20px 0;
   }
   
   .faq-question {
       display: flex;
       justify-content: space-between;
       align-items: center;
       cursor: pointer;
       font-size: 18px;
       font-weight: 500;
       color: #231E41;
       font-family: 'Rubik', sans-serif;
       transition: color 0.2s ease;
   }
   
   .faq-question:hover {
       color: #7F69CE;
   }
   
   .faq-icon {
       font-size: 24px;
       color: #7F69CE;
       transition: transform 0.3s ease;
       font-weight: 300;
   }
   
   .faq-answer {
       display: none;
       padding-top: 15px;
       font-size: 16px;
       line-height: 1.6;
       color: #6F6F87;
       font-family: 'Rubik', sans-serif;
   }
   
   .faq-item.active .faq-answer {
       display: block;
   }
   
   .faq-item.active .faq-icon {
       transform: rotate(45deg);
   }
   
   /* EXPLORE PAGE CONTENT */
   
   /* HERO SECTION */
   .explore-hero {
       background: #F3ECF7;
       padding: 40px 50px;
   }
   
   .explore-hero-content {
       max-width: none;
       width: 100%;
       margin: 0 auto;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 60px;
   }
   
   .explore-hero-left {
       flex: 1;
   }
   
   .explore-hero-title {
       font-size: 62px;
       font-weight: 600;
       line-height: 1.0;
       letter-spacing: -3px;
       color: #231E41;
       margin-bottom: 16px;
   }
   
   .explore-hero-subtitle {
       font-size: 18px;
       color: #6F6F87;
       margin-bottom: 32px;
       line-height: 1.5;
   }
   
   /* SEARCH BAR IN HERO */
   .explore-search-wrapper {
       display: flex;
       align-items: center;
       background: #ECE2F7;
       border: 1px solid rgba(215, 197, 250, 0.6);
       border-radius: 50px;
       padding: 13px 13px 13px 27px;
       max-width: 550px;
       transition: background 0.2s ease;
   }
   
   .explore-search-wrapper:hover {
    background-color: #F5EBFF;
   }
   
   .explore-search-type {
       border: none;
       background: transparent;
       font-family: "Rubik", sans-serif;
       font-size: 14px;
       font-weight: 400;
       color: #231E41;
       padding-right: 4px;
       margin-right: 4px;
       margin-left: auto;
       cursor: pointer;
       appearance: none;
       text-align: right;
   }
   
   .explore-search-type-label {
       margin-left: auto;
       display: flex;
       align-items: center;
       cursor: pointer;
   }
   
   .explore-search-arrow {
       width: 12px;
       height: 12px;
       color: #6F6F87;
       margin-right: 12px;
       margin-left: 4px;
       fill: none;
       stroke: currentColor;
       stroke-width: 4;
       stroke-linecap: round;
       stroke-linejoin: round;
   }
   
   .explore-search-input {
       flex: 1;
       border: none;
       background: transparent;
       font-family: "Rubik", sans-serif;
       font-size: 15px;
       color: #231E41;
       padding: 10px 0;
       padding-left: 0;
       order: 1;
   }
   
   .explore-search-input::placeholder {
       color: #6F6F87;
   }
   
   .explore-search-input:focus {
       outline: none;
   }
   
   .explore-search-btn {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: #231E41;
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-left: 8px;
       transition: background 0.2s;
       order: 4;
   }
   
   .explore-search-btn:hover {
       background: #3A3560;
   }
   

   
   /* Hide outer decorative circles */
   .sb-decor-circle-1,
   .sb-decor-circle-2,
   .sb-decor-circle-3 {
     display: none;
   }
   
   .explore-hero-right {
       flex-shrink: 0;
       position: relative;
       width: 45%;
       max-width: 500px;
   }

   .hero-icons-svg {
       width: 450px;
       height: auto;
       display: block;
   }
   
   /* CATEGORIES GRID */
   .explore-categories {
       padding: 20px 50px 60px 50px;
       width: 100%;
   }
   
   .explore-categories-container {
       max-width: none;
       width: 100%;
       margin: 0 auto;
       padding: 0;
   }
   
   .explore-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 24px;
   }
   
   /* Tablet: 3 columns */
   @media (max-width: 1023px) {
       .explore-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }
   
   /* Mobile: 1 column (vertical stack) */
   @media (max-width: 767px) {
       .explore-grid {
           grid-template-columns: 1fr;
           gap: 16px;
       }
   }
   
   .explore-card {
       border-radius: 16px;
       padding: 32px 24px;
       color: #fff;
       display: flex;
       flex-direction: column;
       transition: filter 0.2s ease;
   }
   
   .explore-card:hover {
       filter: brightness(1.06);
   }
   
   .explore-card-icon {
       width: 64px;
       height: 64px;
       margin-bottom: 16px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-top: -15px;
   }
   
   .category-icon {
       width: 48px;
       height: 48px;
       filter: brightness(0) invert(1);
   }
   
   .explore-card-title {
       font-size: 20px;
       font-weight: 600;
       margin-bottom: 8px;
       color: #fff;
   }
   
   .explore-card-description {
       font-size: 14px;
       line-height: 1.5;
       margin-bottom: 20px;
       opacity: 0.95;
       flex-grow: 1;
   }
   
   .explore-card-meta {
       display: flex;
       flex-direction: column;
       gap: 6px;
       margin-bottom: 20px;
       font-size: 13px;
       opacity: 0.9;
   }
   
   .explore-card-count,
   .explore-card-creator {
       display: flex;
       align-items: center;
       gap: 6px;
   }
   
   .explore-card-count svg,
   .explore-card-creator svg {
       flex-shrink: 0;
       stroke: white;
   }
   
   .explore-card-btn {
       background: #8D75E6;
       border: none;
       border-radius: 8px;
       padding: 12px 20px;
       font-family: "Rubik", sans-serif;
       font-size: 15px;
       font-weight: 600;
       color: #fff;
       cursor: pointer;
       transition: opacity 0.2s;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
   }
   
   .explore-card-btn svg {
       flex-shrink: 0;
   }
   
   .explore-card-btn:hover {
       opacity: 0.9;
   }
   
   /* EXPLORE CARD MENU */
   .explore-card-wrapper {
       position: relative;
   }
   
   .explore-card-menu {
       position: absolute;
       top: 12px;
       right: 12px;
       z-index: 10;
   }
   
   .explore-menu-btn {
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background: transparent;
       border: none;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.2s;
       color: white;
   }
   
   .explore-menu-btn:hover {
       background: rgba(255, 255, 255, 0.2);
   }
   
   .explore-menu-dropdown {
       position: absolute;
       top: 100%;
       right: 0;
       margin-top: 4px;
       background: #F3ECF7;
       border: 1px solid #ECE2F7;
       border-radius: 12px;
       box-shadow: 0 4px 12px rgba(35, 30, 65, 0.1);
       min-width: 200px;
       opacity: 0;
       visibility: hidden;
       transform: translateY(-10px);
       transition: all 0.2s;
       z-index: 100;
   }
   
   .explore-menu-dropdown.show {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }
   
   .explore-menu-item {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 12px 16px;
       font-size: 14px;
       color: #231E41;
       text-decoration: none;
       border: none;
       background: none;
       width: 100%;
       text-align: left;
       cursor: pointer;
       transition: background 0.2s;
       font-family: "Rubik", sans-serif;
   }
   
   .explore-menu-item:first-child {
       border-radius: 12px 12px 0 0;
   }
   
   .explore-menu-item:last-child {
       border-radius: 0 0 12px 12px;
   }
   
   .explore-menu-item:hover {
       text-decoration: underline;
   }
   
   .explore-menu-item svg {
       flex-shrink: 0;
       color: #6F6F87;
   }
   
   /* GAME MODAL */
   .game-modal {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.7);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 1000;
       animation: fadeIn 0.2s ease;
   }
   
   @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
   }
   
   .game-modal-content {
       background: #F3ECF7;
       border-radius: 16px;
       width: 90%;
       max-width: 400px;
       overflow: hidden;
       animation: slideUp 0.3s ease;
   }
   
   @keyframes slideUp {
       from { transform: translateY(20px); opacity: 0; }
       to { transform: translateY(0); opacity: 1; }
   }
   
   .game-modal-header {
       padding: 48px 24px;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .game-modal-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 120px;
       height: 120px;
       border-radius: 50%;
   }
   
   .modal-category-icon {
       width: 80px;
       height: 80px;
       filter: brightness(0) invert(1);
   }
   
   .game-modal-close {
       position: absolute;
       top: 16px;
       right: 16px;
       width: 32px;
       height: 32px;
       border-radius: 50%;
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       background: none;

   }
   
   .game-modal-close svg {
       stroke: rgba(255, 255, 255, 1); 
   }
   
   .game-modal-close:hover {
       background: rgba(35, 30, 65, 0.1);
   }
   
   .game-modal-body {
       padding: 32px 24px;
       text-align: center;
   }
   
   .game-modal-title {
       font-size: 24px;
       font-weight: 600;
       color: #231E41;
       margin-bottom: 8px;
   }
   
   .game-modal-subtitle {
       font-size: 14px;
       color: #6F6F87;
       margin-bottom: 24px;
   }
   
   .game-modal-primary-btn {
       width: 100%;
       background: var(--game-color, #7F69CE);
       border: none;
       border-radius: 8px;
       padding: 14px 20px;
       font-family: "Rubik", sans-serif;
       font-size: 15px;
       font-weight: 600;
       color: #fff;
       cursor: pointer;
       margin-bottom: 12px;
       transition: opacity 0.2s;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
   }
   
   .game-modal-primary-btn svg {
       flex-shrink: 0;
       stroke: #fff;
   }
   
   .game-modal-primary-btn:hover {
       opacity: 0.9;
   }
   
   .game-modal-secondary-btn {
       width: 100%;
       background: var(--game-color, #7F69CE);
       border: none;
       border-radius: 8px;
       padding: 14px 20px;
       font-family: "Rubik", sans-serif;
       font-size: 15px;
       font-weight: 500;
       color: #FFFFFF;
       cursor: pointer;
       margin-bottom: 16px;
       transition: filter 0.2s;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
   }
   
   .game-modal-secondary-btn svg {
       flex-shrink: 0;
       stroke: #FFFFFF;
   }
   
   .game-modal-secondary-btn:hover {
       filter: brightness(0.9);
   }
   
   .game-modal-phone {
       font-size: 13px;
       color: #6F6F87;
   }
   
   /* MODAL STATES */
   .game-modal-spinner {
       width: 60px;
       height: 60px;
       border: 4px solid #E0E0E0;
       border-top-color: var(--game-color, #7F69CE);
       border-radius: 50%;
       margin: 0 auto 24px;
       animation: spin 0.8s linear infinite;
   }
   
   @keyframes spin {
       to { transform: rotate(360deg); }
   }
   
   .game-modal-status {
       font-size: 20px;
       font-weight: 600;
       color: #231E41;
       margin-bottom: 12px;
   }
   
   .game-modal-message {
       font-size: 14px;
       color: #6F6F87;
       line-height: 1.5;
   }
   
   .game-modal-success {
       margin: 0 auto 24px;
       width: 80px;
       height: 80px;
       border-radius: 50%;
       background: var(--game-color, #7F69CE);
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .game-modal-checkmark {
       width: 48px;
       height: 48px;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .game-modal-checkmark svg circle {
       stroke: #FFFFFF;
       stroke-width: 2;
   }
   
   .game-modal-checkmark svg path {
       stroke: #FFFFFF;
       stroke-width: 2;
       stroke-linecap: round;
       stroke-linejoin: round;
   }
   
   /* RESPONSIVE */
   @media (max-width: 1024px) {
       .explore-hero-content {
           flex-direction: column;
           gap: 40px;
       }
       
       .explore-hero-image {
           width: 300px;
       }
   }
   
   @media (max-width: 768px) {
       .explore-header {
           padding: 12px 20px;
       }
       
       .explore-nav {
           display: none;
       }
       
       .explore-hero {
           padding: 40px 20px;
       }
       
       .explore-hero-title {
           font-size: 48px;
       }
       
       .explore-categories {
           padding: 40px 20px;
       }
   }
   
   /* HERO ILLUSTRATION ANIMATIONS */
   @keyframes anima1 {
     0% { transform: translateY(0) scale(1); }
     50% { transform: translateY(-5px) scale(1.05); }
     100% { transform: translateY(0) scale(1); }
   }
   
   @keyframes anima2 {
     0% { transform: translateY(0) scale(1) rotate(0); }
     25% { transform: translateY(-5px) scale(1.1) rotate(-5deg); }
     75% { transform: translateY(-5px) scale(1.1) rotate(5deg); }
     100% { transform: translateY(0) scale(1) rotate(0); }
   }
   
   @keyframes anima3 {
     0% { transform: translateY(0); }
     25% { transform: translateY(-5px); }
     75% { transform: translateY(5px); }
     100% { transform: translateY(0); }
   }
   
   @keyframes message {
     0% {
       opacity: 0;
       transform: translateX(30px);
     }
     100% {
       opacity: 1;
       transform: translateX(0);
     }
   }
   
   @keyframes zoom {
     0% { transform: scale(1); }
     50% { transform: scale(1.2); }
     100% { transform: scale(1); }
   }
   
   /* ILLUSTRATION 1 - HERO */
   .sb-illustration-1 {
     position: relative;
     width: 360px;
     max-height: 500px;
   }
   
   .sb-illustration-1 .sb-girl {
     width: 100%;
     height: auto;
     display: block;
   }
   
   .sb-illustration-1 .sb-cirkle-1 {
     position: absolute;
     height: 140px;
     width: 140px;
     border-radius: 50%;
     border: solid 25px #F5C332;
     right: 10%;
     bottom: 15%;
     box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09), 0 3px 6px 0 rgba(0,0,0,.09);
     animation: anima3 3s 1s infinite ease-in-out;
   }
   
   .sb-illustration-1 .sb-cirkle-2 {
     position: absolute;
     top: 40%;
     right: 20%;
     height: 25px;
     width: 25px;
     background-color: #FF6B6B;
     border-radius: 50%;
     box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
     animation: anima1 2s 3s infinite ease-in-out;
   }
   
   .sb-illustration-1 .sb-cirkle-3 {
     position: absolute;
     bottom: 10%;
     left: 8%;
     width: 55px;
     height: 55px;
     background-color: #FF6B6B;
     border-radius: 50%;
     box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
     animation: anima1 3s infinite ease-in-out;
   }
   
   .sb-illustration-1 .sb-cirkle-4 {
     position: absolute;
     top: 15%;
     right: 30%;
     width: 15px;
     height: 15px;
     background-color: #FF6B6B;
     border-radius: 50%;
     box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
     animation: anima1 3s 4s infinite ease-in-out;
   }
   
   .sb-illustration-1 .sb-cirkle-5 {
     position: absolute;
     height: 40px;
     width: 40px;
     border-radius: 50%;
     border: solid 10px #F5C332;
     left: 28%;
     bottom: 45%;
     box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09), 0 3px 6px 0 rgba(0,0,0,.09);
     animation: anima3 3s 1.5s infinite ease-in-out;
   }
   
   .sb-illustration-1 .sb-illu-dialog-1 {
     position: absolute;
     top: 10%;
     right: 10%;
     animation: message 0.4s ease-in-out;
     animation-fill-mode: forwards;
     animation-delay: 2s;
   }
   
   .sb-illustration-1 .sb-illu-dialog-2 {
     position: absolute;
     bottom: 20%;
     left: 15%;
     animation: message 0.4s ease-in-out;
     animation-fill-mode: forwards;
     animation-delay: 1s;
   }
   
   .sb-illustration-1 .sb-illu-dialog-1,
   .sb-illustration-1 .sb-illu-dialog-2 {
     white-space: nowrap;
     opacity: 0;
     background-color: #FFFFFF;
     display: block;
     padding: 5px 30px 10px;
     position: absolute;
     font-weight: 500;
     font-size: 16px;
     letter-spacing: 0;
     border-radius: 20px;
     box-shadow: 0 2px 46px 0 rgba(0,0,0,0.36);
     z-index: 10;
   }
   
   .sb-illustration-1 .sb-illu-dialog-1 span,
   .sb-illustration-1 .sb-illu-dialog-2 span {
     display: inline-block;
     margin-right: 15px;
     font-size: 26px;
     transform: translateY(5px);
   }
   
   .sb-illustration-1 .sb-illu-dialog-1:after,
   .sb-illustration-1 .sb-illu-dialog-2:after {
     transform: rotate(45deg);
     content: '';
     position: absolute;
     z-index: 9;
     bottom: -5px;
     right: 30px;
     background-color: #FFFFFF;
     height: 10px;
     width: 10px;
   }
 /*  
   @media (max-width: 600px) {
     .sb-illustration-1 {
       width: 380px;
     }
*/

   
   @media (max-width: 400px) {
     .sb-illustration-1 {
     }
 
   }
   
   /* OUTER DECORATIVE CIRCLES */
   .sb-decor-circle-1 {
     position: absolute;
     width: 50px;
     height: 50px;
     background-color: #F5C332;
     border-radius: 50%;
     top: 50px;
     left: 20px;
     z-index: 5;
     animation: anima1 3s 1s infinite ease-in-out;
   }
   
   .sb-decor-circle-2 {
     position: absolute;
     width: 100px;
     height: 100px;
     background-color: #FF9B9B;
     border-radius: 50%;
     bottom: 80px;
     left: -20px;
     z-index: 5;
     animation: anima1 3s 2s infinite ease-in-out;
   }
   
   .sb-decor-circle-3 {
     position: absolute;
     width: 140px;
     height: 140px;
     background-color: #F5C332;
     border-radius: 50%;
     bottom: -30px;
     right: -30px;
     z-index: 5;
     animation: anima1 3s infinite ease-in-out;
   }
   
   @media (max-width: 768px) {
     .sb-decor-circle-1,
     .sb-decor-circle-2,
     .sb-decor-circle-3 {
       display: none;
     }
   }
   
   /* EXPLORE FILTERS */
   
   
   /* AUDIO PLAYER STYLES - Original Design */
   .audio-player {
       display: inline-block;
   }
   
   .audio-waveform {
       display: inline-flex;
       align-items: center;
       gap: 12px;
       padding: 8px 16px 8px 8px;
       background: #E5D9F6;
       border: 1px solid #CFBAF7;
       border-radius: 24px;
       min-width: 240px;
       justify-content: space-between;
       position: relative;
       cursor: pointer;
       overflow: hidden;
   }
   
   .audio-progress {
       position: absolute;
       left: 0;
       top: 0;
       height: 100%;
       background: #ECE2F7;
       border-radius: 24px;
       width: 0%;
       transition: width 0.1s linear;
       pointer-events: none;
       z-index: 1;
   }
   
   .audio-play-btn {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       background: #7F69CE;
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       transition: background 0.2s;
       padding: 0;
       position: relative;
       z-index: 2;
   }
   
   .audio-play-btn:hover {
       background: #6B59B3;
   }
   
   .audio-play-btn svg,
   .audio-play-btn .play-icon,
   .audio-play-btn .pause-icon {
       width: 12px;
       height: 12px;
       fill: white;
   }
   
   .audio-play-btn .play-icon {
       margin-left: 1px;
   }
   
   .audio-time {
       font-size: 13px;
       color: #7F69CE;
       font-weight: 600;
       letter-spacing: 0;
       margin-left: auto;
       z-index: 2;
       position: relative;
   }
   
   /* USER MENU EMAIL */
   .new-user-email {
       font-size: 12px;
       color: #6F6F87;
       margin-top: 2px;
   }
   
   /* ACTION DROPDOWN */
   .action-dropdown {
       position: relative;
       display: inline-block;
   }
   
   .action-dropdown-btn {
       background: transparent;
       border: none;
       border-radius: 50%;
       padding: 8px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background 0.2s;
       width: 32px;
       height: 32px;
   }
   
   .action-dropdown-btn:hover {
       background: #F0F0F0;
   }
   
   .action-dropdown-btn svg,
   .action-dropdown-btn img {
       width: 16px;
       height: 16px;
   }
   
   .action-dropdown-menu {
       display: none;
       position: absolute;
       right: 0;
       top: 100%;
       background: #F3ECF7;
       border: 1px solid #E0E0E0;
       border-radius: 6px;
       box-shadow: 0 4px 12px rgba(35, 30, 65, 0.1);
       min-width: 160px;
       padding: 4px 0;
       margin-top: 4px;
       z-index: 1000;
   }
   
   .action-dropdown.active .action-dropdown-menu {
       display: block;
   }
   
   .action-dropdown-menu button,
   .action-dropdown-menu a {
       display: block;
       width: 100%;
       padding: 8px 12px;
       background: none;
       border: none;
       text-align: left;
       font-family: "Rubik", sans-serif;
       font-size: 13px;
       color: #231E41;
       cursor: pointer;
       text-decoration: none;
   }
   
   .action-dropdown-menu button:hover,
   .action-dropdown-menu a:hover {
       background: #F9FAFC;
   }
   
   .action-dropdown-menu .action-divider {
       height: 1px;
       background: #E0E0E0;
       margin: 4px 0;
   }
   
   /* Category Badge for Quiz Set Cards */
   .category-badge {
       background-color: rgba(255, 255, 255, 0.25);
       color: white;
       padding: 4px 10px;
       border-radius: 12px;
       font-size: 11px;
       font-weight: 500;
       display: inline-block;
       margin-bottom: 8px;
       text-transform: capitalize;
       width: fit-content;
       max-width: 100%;
       white-space: nowrap;
   }
 
/* Drawer overlay */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

/* Main drawer container - MUST BE FLEX COLUMN */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100vh; /* Full viewport height */
    background: white;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden; /* Prevent drawer itself from scrolling */
}

/* Mobile: Full screen */
@media (max-width: 640px) {
    .drawer {
        max-width: 100%;
        width: 100%;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* NEW: Drawer Header - Compact with icon badge */
.drawer-header {
    padding: 15px 15px 0px 15px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: white;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* NEW: Top row with icon badge and close button */
.drawer-header-top {
    display: flex;
    align-items: center; /* Center X button vertically with icon badge */
    justify-content: space-between;
    margin-bottom: 12px;
}

/* NEW: Gradient icon badge */
.drawer-icon-badge {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.drawer-icon-badge svg {
    width: 20px;
    height: 20px;
    color: white;
    stroke: currentColor;
    fill: none;
}

/* NEW: Close button (X icon) - Override old style */
.drawer-close,
#drawer-close-btn {
    background: transparent !important;
    border: none;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.2s;

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

    font-size: 20px;
    line-height: 1;

    width: 28px;
    height: 28px;

    padding: 0;
    margin-top: 0;
}


.drawer-close:hover,
#drawer-close-btn:hover {
    color: #8D75E6;
    background: transparent !important;
}

.drawer-close svg,
#drawer-close-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

/* Hide old H3 title in header */
.drawer-header h3 {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin: 0 0 8px 0;
}

/* Drawer title and subtitle */
.drawer-form-title {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin: 0 0 8px 0;
}

.drawer-form-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 0px 0px 20px;
    line-height: 1.5;
}

/* Drawer body - MUST BE FLEX AND SCROLLABLE */
.drawer-body {
    flex: 1; /* Take remaining space */
    overflow-y: auto; /* Scrollable */
    overflow-x: hidden;
    padding: 20px; /* Reduced from 24px */
    background: white;
    display: flex;
    flex-direction: column;
}

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 8px;
    font-family: 'Rubik', sans-serif;
}

/* Form inputs with light background and purple focus */
.form-input,
.form-select {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    font-family: 'Rubik', sans-serif;
    color: #111827;
    background: #f9fafb;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* Purple focus states */
.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #e9d5ff; /* purple-200 */
    box-shadow: 0 0 0 2px #f3e8ff; /* purple-100 ring */
    background: white;
}

.form-input:disabled,
.form-select:disabled {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Textarea specific styles */
textarea.form-input {
    height: auto;
    padding: 12px 16px;
    resize: none;
    line-height: 1.5;
}

/* Helper text */
.form-help {
    color: #6b7280;
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.5;
    font-family: 'Rubik', sans-serif;
}

/* Label with ID/metadata on the right */
.form-label-with-id {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.form-label-id {
    font-size: 12px;
    font-weight: 400;
    color: #9CA3AF;
}

/* Answer options section specific styling */
.answer-options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Number selection buttons - 4 column grid */
.widget-number-toggle {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.widget-number-btn {
    height: 48px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-number-btn:hover:not(.active):not(:disabled) {
    border-color: #d1d5db;
    background: #f9fafb;
}

/* Purple active state */
.widget-number-btn.active {
    border-color: #8D75E6;
    background: #faf5ff;
    color: #8D75E6;
}

.widget-number-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.widget-number-btn.active:disabled {
    border-color: #8D75E6;
    background: #faf5ff;
    color: #8D75E6;
    opacity: 1;
}

/* CRITICAL: Sticky footer - position at bottom of drawer-body */
.drawer-actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    margin-top: auto; /* Push to bottom */
    z-index: 10;
}

/* Primary button with purple background */
.btn-primary {
    flex: 1;
    height: 44px;
    padding: 0 24px;
    background: #8D75E6;
    color: white;
    border: 1px solid #8D75E6;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.btn-primary:hover:not(:disabled) {
    background: #7D65D6;
}

.btn-primary:disabled {
    background: #c4b5f3;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-primary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Ghost button with outline style */
.btn-ghost {
    height: 44px;
    padding: 0 24px;
    background: transparent;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    cursor: pointer; /* Add pointer cursor */
    transition: all 0.2s;
}

.btn-ghost:hover {
    background: #f3f4f6;
}

/* Loading/Success State Screens */
.drawer-state-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.drawer-state-content {
    text-align: center;
    padding: 40px 20px;
    max-width: 400px;
}

.drawer-state-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 24px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent; /* No background */
}

.drawer-state-icon.success {
    background: transparent; /* No background */
}

.drawer-state-icon.loading {
    background: transparent; /* No background */
}

.drawer-state-icon img {
    width: 80px; /* Larger icon */
    height: 80px;
}

.drawer-state-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
}

.drawer-state-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Widget builder additional styles */
.widget-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.widget-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #111827;
    font-family: 'Rubik', sans-serif;
}

.widget-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.widget-checkbox-margin {
    margin-top: 12px;
}

.widget-color-row {
    margin-bottom: 8px;
}

.widget-color-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
    display: block;
    font-family: 'Rubik', sans-serif;
}

.widget-color-inputs {
    display: flex;
    gap: 8px;
}

.widget-color-inputs input[type="color"] {
    width: 60px;
    height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
}

.widget-color-hex {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #111827;
    background: white;
}

.widget-color-hex:focus {
    outline: none;
    border-color: #e9d5ff;
    box-shadow: 0 0 0 2px #f3e8ff;
}

.widget-embed-code {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    color: #111827;
    background: #f9fafb;
    resize: vertical;
}

.widget-embed-code:focus {
    outline: none;
    border-color: #9333ea;
    box-shadow: 0 0 0 2px #f3e8ff;
}

.widget-copy-btn,
.widget-preview-btn {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    background: white;
    color: #111827;
}

.widget-copy-btn {
    margin-top: 12px;
}

.widget-copy-btn:hover,
.widget-preview-btn:hover {
    background: #f9fafb;
    border-color: #9333ea;
}

.widget-copy-btn.success {
    background: #d1fae5;
    border-color: #5abe89;
    color: #2e7d53;
}

.widget-copy-btn svg,
.widget-preview-btn svg {
    opacity: 0.7;
}

/* Empty state - comprehensive */
.empty-state {
    background: #F7F1F6;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
}

.empty-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #E9D5FF 0%, #DDD6FE 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon svg {
    width: 60px;
    height: 60px;
    color: #7F69CE;
}

.empty-title {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.empty-description {
    font-size: 16px;
    color: #6B7280;
    margin-bottom: 8px;
    line-height: 1.6;
}

.empty-subdescription {
    font-size: 14px;
    color: #9CA3AF;
    margin-bottom: 32px;
    line-height: 1.5;
}

.empty-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

@media (min-width: 640px) {
    .empty-actions {
        flex-direction: row;
        justify-content: center;
    }
}

.primary-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #7F69CE;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
}

.primary-action-btn:hover {
    background-color: #6952B8;
    color: white;
}

.secondary-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    color: #7F69CE;
    border: 2px solid #7F69CE;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.secondary-action-btn:hover {
    background-color: #F3ECF7;
    color: #7F69CE;
}

.features-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .features-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.feature-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.feature-icon {
    width: 40px;
    height: 40px;
    background-color: #F3ECF7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon svg {
    width: 20px;
    height: 20px;
    color: #7F69CE;
}

.feature-content {
    flex: 1;
}

.feature-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.feature-description {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.4;
}



   
   /* About Page Styles */
   .about-hero {
       /*background: #F8F7F4;*/
       padding: 80px 40px;
       text-align: center;
   
   }
   
   .about-hero-content {
       max-width: 900px;
       margin: 0 auto;
   }
   
   .about-hero-title {
       font-size: 48px;
       font-weight: 700;
       margin-bottom: 20px;
       line-height: 1.2;
   }
   
   .about-hero-subtitle {
       font-size: 18px;
       line-height: 1.6;
       opacity: 0.8;
   }
   
   .about-founder {
       padding: 80px 40px;
       /*background: white;*/
   }
   
   .about-founder-container {
       max-width: 1200px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 60px;
       align-items: center;
   }
   
   .about-founder-image img {
       width: 100%;
       border-radius: 12px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   }
   
   .about-founder-content h2 {
       font-size: 32px;
       font-weight: 600;
       color: #231E41;
       margin-bottom: 20px;
   }
   
   .about-founder-content p {
       font-size: 16px;
       line-height: 1.8;
       color: #231E41;
       margin-bottom: 20px;
   }
   
   .about-timeline {
       padding: 80px 40px;
       /*background: white;*/
   }
   
   .about-timeline-container {
       max-width: 1400px;
       margin: 0 auto;
   }
   
   .about-timeline-heading {
       font-size: 40px;
       font-weight: 700;
       color: #231E41;
       text-align: center;
       margin-bottom: 20px;
   }
   
   .about-timeline-subtitle {
       font-size: 18px;
       color: #6F6F87;
       text-align: center;
       margin-bottom: 60px;
   }
   
   .year-badge {
       background-color: #E8E8F0;
       color: #6F6F87;
       padding: 4px 12px;
       border-radius: 12px;
       font-size: 12px;
       font-weight: 700;
       display: inline-block;
       margin-bottom: 12px;
       letter-spacing: 0.5px;
   }
   
   .timeline-description {
       font-size: 14px;
       line-height: 1.6;
       color: #6F6F87;
       margin: 12px 0 0 0;
   }
   
   @media (max-width: 768px) {
       .about-founder-container {
           grid-template-columns: 1fr;
           gap: 40px;
       }
       
       .about-hero-title {
           font-size: 36px;
       }
       
       .about-timeline-heading {
           font-size: 32px;
       }
   }
   
   /* Timeline cards specific styling */
   .about-timeline .explore-card {
       background-color: #F8F7F4 !important;
   }
   
   .about-timeline .explore-card-title,
   .about-timeline .timeline-description {
       color: #231E41;
   }
   
   .about-timeline .year-badge {
       font-size: 32px;
       font-weight: 700;
       background-color: transparent;
       color: #231E41;
       padding: 20px 0;
       margin-bottom: 16px;
       display: block;
   }
   
   /* Explore and MyGames table column widths */
   /* EXPLORE AND MYGAMES PAGES - SHARED 11 COLUMNS WITH TOPIC */
   body.explore-page .new-table thead th:nth-child(1),
   body.mygames-page .new-table thead th:nth-child(1) { 
       width: 60px;    /* ID */
   }
   
   body.explore-page .new-table thead th:nth-child(2),
   body.mygames-page .new-table thead th:nth-child(2) { 
       width: 80px;    /* STATUS */
   }
   
   body.explore-page .new-table thead th:nth-child(3),
   body.mygames-page .new-table thead th:nth-child(3) { 
       width: 80px;    /* LANGUAGE */
   }
   
   body.explore-page .new-table thead th:nth-child(4),
   body.mygames-page .new-table thead th:nth-child(4) { 
       width: 150px;   /* CATEGORY */
   }
   
   body.explore-page .new-table thead th:nth-child(5),
   body.mygames-page .new-table thead th:nth-child(5) { 
       width: 110px;   /* TOPIC - narrow */
   }
   
   body.explore-page .new-table thead th:nth-child(6),
   body.mygames-page .new-table thead th:nth-child(6) { 
       width: auto;    /* TITLE - takes remaining space */
       min-width: 200px;
   }
   
   body.explore-page .new-table thead th:nth-child(7),
   body.mygames-page .new-table thead th:nth-child(7) { 
       width: 120px;   /* CREATOR */
       text-align: left;
   }
   
   body.explore-page .new-table tbody td:nth-child(7),
   body.mygames-page .new-table tbody td:nth-child(7) { 
       text-align: left;
   }
   
   body.explore-page .new-table thead th:nth-child(8),
   body.mygames-page .new-table thead th:nth-child(8) { 
       width: 100px;   /* # OF QUESTIONS */
   }
   
   body.explore-page .new-table thead th:nth-child(9),
   body.mygames-page .new-table thead th:nth-child(9) { 
       width: 100px;   /* CREATED */
   }
   
   body.explore-page .new-table thead th:nth-child(10),
   body.mygames-page .new-table thead th:nth-child(10) { 
       width: 100px;   /* UPDATED */
   }
   
   body.explore-page .new-table thead th:nth-child(11),
   body.mygames-page .new-table thead th:nth-child(11) { 
       width: 140px;   /* ACTIONS */
   }
   
   /* Prevent text wrapping in specific columns */
   body.explore-page .new-table tbody td:nth-child(4),
   body.mygames-page .new-table tbody td:nth-child(4),
   body.explore-page .new-table tbody td:nth-child(5),
   body.mygames-page .new-table tbody td:nth-child(5),
   body.explore-page .new-table tbody td:nth-child(8),
   body.mygames-page .new-table tbody td:nth-child(8) {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   
   /* SPLIT ACTION BUTTON */
   .split-action-btn {
       display: inline-flex;
       position: relative;
   }
   
   .split-action-primary {
       background: #D6EDD9;
       border: 1px #D4F8CC;
       color: #1F7A58;
       border: none;
       border-radius: 6px 0 0 6px;
       padding: 8px 16px;
       font-family: "Rubik", sans-serif;
       font-size: 13px;
       font-weight: 500;
       cursor: pointer;
       transition: background 0.2s;
       white-space: nowrap;
   }
   
   .split-action-primary:hover {
       background: #C6DCC9;
   }
   
   .split-action-toggle {
       background: #D6EDD9;
       color: #1F7A58;
       border: none;
       border-radius: 0 6px 6px 0;
       padding: 8px 10px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background 0.2s;
   }
   
   .split-action-toggle:hover {
       background: #C6DCC9;
   }
   
   .split-action-toggle svg {
       width: 12px;
       height: 12px;
   }
   
   .split-action-menu {
       display: none;
       position: absolute;
       right: 0;
       top: 100%;
       background: #D6EDD9;
       border: 1px solid #C6DCC9;
       border-radius: 6px;
       box-shadow: 0 4px 12px rgba(35, 30, 65, 0.1);
       min-width: 160px;
       padding: 4px 0;
       margin-top: 4px;
       z-index: 1000;
   }
   
   .split-action-btn.active .split-action-menu {
       display: block;
   }
   
   .split-action-menu button,
   .split-action-menu a {
       display: block;
       width: 100%;
       padding: 8px 12px;
       background: none;
       border: none;
       text-align: left;
       font-family: "Rubik", sans-serif;
       font-size: 13px;
       color: #1F7A58;
       cursor: pointer;
       text-decoration: none;
   }
   
   .split-action-menu button:hover,
   .split-action-menu a:hover {
       font-weight: 500;
   }
   
   .split-action-menu .action-divider {
       height: 1px;
       background: #C6DCC9;
       margin: 4px 0;
   }
   
   /* GREEN SPLIT ACTION BUTTON VARIANT */
   .split-action-btn-green .split-action-primary {
       background: #5ABE89;
       color: #FFFFFF;
   }
   
   .split-action-btn-green .split-action-primary:hover {
       background: #4AAD79;
   }
   
   .split-action-btn-green .split-action-toggle {
       background: #5ABE89;
       color: #FFFFFF;
   }
   
   .split-action-btn-green .split-action-toggle:hover {
       background: #4AAD79;
   }
   
   .split-action-btn-green .split-action-menu {
       background: #5ABE89;
       border: 1px solid #4AAD79;
   }
   
   .split-action-btn-green .split-action-menu button,
   .split-action-btn-green .split-action-menu a {
       color: #FFFFFF;
   }
   
   .split-action-btn-green .split-action-menu button:hover,
   .split-action-btn-green .split-action-menu a:hover {
       background: #4AAD79;
   }
   
   .split-action-btn-green .split-action-menu .action-divider {
       background: #4AAD79;
   }
   
   /* Column widths for Explore and My Games pages (10 columns) */
   /* EXPLORE AND MYGAMES PAGES - PERCENTAGE-BASED WIDTHS FOR 11 COLUMNS */
   body.explore-page .new-table thead th:nth-child(1),
   body.mygames-page .new-table thead th:nth-child(1) { width: 5%; min-width: 60px; }   /* ID */
   
   body.explore-page .new-table thead th:nth-child(2),
   body.mygames-page .new-table thead th:nth-child(2) { width: 6%; min-width: 80px; }   /* STATUS */
   
   body.explore-page .new-table thead th:nth-child(3),
   body.mygames-page .new-table thead th:nth-child(3) { width: 6%; min-width: 80px; }   /* LANGUAGE */
   
   body.explore-page .new-table thead th:nth-child(4),
   body.mygames-page .new-table thead th:nth-child(4) { width: 11%; min-width: 150px; }  /* CATEGORY */
   
   body.explore-page .new-table thead th:nth-child(5),
   body.mygames-page .new-table thead th:nth-child(5) { width: 8%; min-width: 110px; }  /* TOPIC */
   
   body.explore-page .new-table thead th:nth-child(6),
   body.mygames-page .new-table thead th:nth-child(6) { width: 25%; min-width: 200px; }  /* TITLE - more space */
   
   body.explore-page .new-table thead th:nth-child(7),
   body.mygames-page .new-table thead th:nth-child(7) { width: 9%; min-width: 120px; text-align: left; }  /* CREATOR */
   
   body.explore-page .new-table thead th:nth-child(8),
   body.mygames-page .new-table thead th:nth-child(8) { width: 7%; min-width: 100px; }   /* # OF QUESTIONS */
   
   body.explore-page .new-table thead th:nth-child(9),
   body.mygames-page .new-table thead th:nth-child(9) { width: 8%; min-width: 100px; }  /* CREATED */
   
   body.explore-page .new-table thead th:nth-child(10),
   body.mygames-page .new-table thead th:nth-child(10) { width: 8%; min-width: 100px; }  /* UPDATED */
   
   body.explore-page .new-table thead th:nth-child(11),
   body.mygames-page .new-table thead th:nth-child(11) { width: 7%; min-width: 140px; } /* ACTIONS */
   
   /* Override default right-alignment for Creator column (7th) in tbody */
   body.explore-page .new-table tbody td:nth-child(7),
   body.mygames-page .new-table tbody td:nth-child(7) { text-align: left; }
   
   .new-badge {
       display: inline-block;
       padding: 4px 10px;
       border-radius: 4px;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       color: white;
       font-size: 12px;
       font-weight: 600;
   }
   
   .new-badge-gray {
       background: #e2e8f0;
       color: #718096;
   }
   /* CAROUSEL SECTION */
   .carousel-section {
       padding: 40px;
       background: #F3ECF7;
   }
   
   .carousel-container {
       margin-bottom: 60px;
   }
   
   .carousel-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       margin-bottom: 24px;
       padding: 0 8px;
   }
   
   .carousel-header-left {
       flex: 1;
   }
   
   .carousel-title {
       font-size: 28px;
       font-weight: 700;
       color: #231E41;
       margin: 0 0 8px 0;
   }
   
   .carousel-description {
       font-size: 15px;
       color: #6F6F87;
       margin: 0;
   }
   
   .carousel-view-all {
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 15px;
       font-weight: 500;
       color: #7C3AED;
       text-decoration: none;
       transition: color 0.2s;
   }
   
   .carousel-view-all:hover {
       color: #6B21A8;
   }
   
   .carousel-view-all svg {
       width: 16px;
       height: 16px;
   }
   
   .carousel-track-wrapper {
       position: relative;
       display: flex;
       align-items: center;
       gap: 16px;
   }
   
   .carousel-track {
       display: flex;
       gap: 20px;
       overflow-x: auto;
       scroll-behavior: smooth;
       scrollbar-width: none;
       -ms-overflow-style: none;
       padding: 8px;
   }
   
   .carousel-track::-webkit-scrollbar {
       display: none;
   }
   
   .carousel-card {
       flex: 0 0 calc(25% - 15px);
       min-width: 280px;
       background: #F3ECF7;
       border-radius: 16px;
       padding: 24px;
       display: flex;
       flex-direction: column;
       gap: 16px;
       transition: transform 0.2s, box-shadow 0.2s;
       cursor: default;
   }
   
   .carousel-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
   }
   
   .carousel-card-icon {
       width: 64px;
       height: 64px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 4px;
   }
   
   .carousel-card-icon img {
       width: 36px;
       height: 36px;
       object-fit: contain;
   }
   
   .carousel-card-badges {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
   }
   
   .carousel-badge {
       background: rgba(255, 255, 255, 0.3);
       color: #fff;
       font-size: 11px;
       font-weight: 500;
       padding: 4px 10px;
       border-radius: 12px;
       white-space: nowrap;
   }
   
   .carousel-card-title {
       font-size: 18px;
       font-weight: 600;
       color: #fff;
       margin: 0;
       line-height: 1.3;
       flex: 1;
   }
   
   .carousel-card-meta {
       display: flex;
       flex-direction: column;
       gap: 6px;
       font-size: 13px;
       color: rgba(255, 255, 255, 0.9);
   }
   
   .carousel-card-meta span {
       display: flex;
       align-items: center;
       gap: 6px;
   }
   
   .carousel-card-meta svg {
       width: 14px;
       height: 14px;
       stroke: currentColor;
   }
   
   .carousel-card-btn {
       width: 100%;
       background: #FFD60A;
       color: #231E41;
       border: none;
       border-radius: 8px;
       padding: 12px 20px;
       font-family: 'Rubik', sans-serif;
       font-size: 15px;
       font-weight: 600;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       cursor: pointer;
       transition: background 0.2s, transform 0.1s;
   }
   
   .carousel-card-btn:hover {
       background: #7D65D6;
       transform: scale(1.02);
   }
   
   .carousel-card-btn:active {
       transform: scale(0.98);
   }
   
   .carousel-card-btn svg {
       width: 16px;
       height: 16px;
       stroke: currentColor;
   }
   
   .carousel-view-all-card {
       flex: 0 0 calc(25% - 15px);
       min-width: 280px;
       height: 100%;
       min-height: 360px;
       background: #F2F3F5;
       border-radius: 16px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 16px;
       text-decoration: none;
       transition: background 0.2s, transform 0.2s;
   }
   
   .carousel-view-all-card:hover {
       background: #E5E7EB;
       transform: translateY(-4px);
   }
   
   .carousel-view-all-circle {
       width: 72px;
       height: 72px;
       background: #F3ECF7;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
   
   .carousel-view-all-circle svg {
       width: 32px;
       height: 32px;
       stroke: #7C3AED;
   }
   
   .carousel-view-all-card p {
       font-size: 16px;
       font-weight: 600;
       color: #231E41;
       margin: 0;
   }
   
   .carousel-nav {
       flex: 0 0 40px;
       width: 40px;
       height: 40px;
       background: #F3ECF7;
       border: 1px solid #E5E7EB;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.2s;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
   
   .carousel-nav:hover {
       background: #F9FAFB;
       border-color: #D1D5DB;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
   }
   
   .carousel-nav svg {
       width: 24px;
       height: 24px;
       stroke: #231E41;
   }
   
   .carousel-nav:disabled {
       opacity: 0.3;
       cursor: not-allowed;
   }
   
   .carousel-nav:disabled:hover {
       background: #F3ECF7;
       border-color: #E5E7EB;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
   /* ========================================
      RESPONSIVE HEADER & MOBILE MENU
      ======================================== */
   
   /* Hamburger Menu Button */
   .hamburger-menu-btn {
       display: none;
       background: none;
       border: none;
       padding: 8px;
       cursor: pointer;
       color: #231E41;
   }
   
   .hamburger-menu-btn:hover {
       color: #7F69CE;
   }
   
   /* Wrapper for search - hidden on mobile */
   .hide-mobile-search {
       display: flex;
   }
   
   /* Mobile Menu Overlay */
   .mobile-menu-overlay {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.5);
       z-index: 9998;
       opacity: 0;
       transition: opacity 0.3s ease;
   }
   
   .mobile-menu-overlay.open {
       display: block;
       opacity: 1;
   }
   
   /* Mobile Menu Drawer */
   .mobile-menu-drawer {
       position: fixed;
       top: 0;
       right: -100%;
       width: 320px;
       max-width: 85vw;
       height: 100vh;
       background: white;
       z-index: 9999;
       transition: right 0.3s ease;
       overflow-y: auto;
       box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
   }
   
   .mobile-menu-drawer.open {
       right: 0;
   }
   
   /* Mobile Menu Header */
   .mobile-menu-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 20px;
       border-bottom: 1px solid #E8E9EB;
   }
   
   .mobile-menu-logo {
       height: 32px;
   }
   
   .mobile-menu-close {
       background: none;
       border: none;
       padding: 8px;
       cursor: pointer;
       color: #231E41;
   }
   
   .mobile-menu-close:hover {
       color: #7F69CE;
   }
   
   /* Mobile Menu Content */
   .mobile-menu-content {
       padding: 20px;
   }
   
   /* Mobile Search - HIDDEN */
   .mobile-search {
       display: none;
   }
   
   /* Mobile Navigation */
   .mobile-nav {
       display: flex;
       flex-direction: column;
       gap: 4px;
       margin-bottom: 24px;
   }
   
   .mobile-nav-link {
       padding: 12px 16px;
       color: #231E41;
       text-decoration: none;
       font-size: 16px;
       font-weight: 500;
       border-radius: 8px;
       transition: color 0.2s;
   }
   
   .mobile-nav-link:hover {
       color: #7F69CE;
   }
   
   .new-user-menu a {
       display: block;
       padding: 10px 16px;
       color: #231E41;
       text-decoration: none;
       font-size: 14px;
       transition: color 0.2s;
   }
   
   .new-user-menu a:hover {
       color: #7F69CE;
   }
   
   /* Mobile Actions */
   .mobile-menu-actions {
       margin-bottom: 24px;
   }
   
   .mobile-create-btn {
       width: 100%;
       background: #7F69CE;
       color: white;
       border: none;
       border-radius: 8px;
       padding: 12px 20px;
       font-size: 15px;
       font-weight: 500;
       cursor: pointer;
       transition: background 0.2s;
   }
   
   .mobile-create-btn:hover {
       background: #6B59B3;
   }
   
   /* Mobile User Section */
   .mobile-user-section {
       background: #F7F1F6;
       border-radius: 12px;
       padding: 16px;
       margin-top: 24px;
   }
   
   .mobile-user-info {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 16px;
   }
   
   .mobile-user-circle {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       background: #ECE2F7;
       color: #7F69CE;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 600;
       font-size: 16px;
   }
   
   .mobile-user-name {
       font-size: 16px;
       font-weight: 600;
       color: #231E41;
   }
   
   .mobile-user-email {
       font-size: 13px;
       color: #6F6F87;
       margin-top: 2px;
   }
   
   .mobile-user-links {
       display: flex;
       flex-direction: column;
       gap: 4px;
   }
   
   .mobile-user-links a {
       padding: 10px 16px;
       color: #231E41;
       text-decoration: none;
       font-size: 15px;
       border-radius: 8px;
       transition: color 0.2s;
   }
   
   .mobile-user-links a:hover {
       color: #7F69CE;
   }
   
   /* Desktop Only */
   .desktop-only {
       display: flex;
   }
   
   /* ===============================================
      TABLET BREAKPOINT (max-width: 1400px)
      - Nav items go to hamburger
      - Search stays visible
      - Create button stays visible
      - User dropdown goes to hamburger
      =============================================== */
   @media (max-width: 1400px) {
       /* Show hamburger */
       .hamburger-menu-btn {
           display: block;
       }
       
       /* Hide desktop nav and user dropdown */
       .new-nav.desktop-only {
           display: none !important;
       }

        /* Hide hero graphic */
        .explore-hero-right.desktop-only {
            display: none !important;
        }
       
       .new-user-dropdown.desktop-only {
           display: none !important;
       }
   }
   
   /* ===============================================
      MOBILE BREAKPOINT (max-width: 768px)
      - Search hides
      - Create button hides
      - Full hamburger mode (like current mobile)
      =============================================== */
   @media (max-width: 768px) {
       /* Hide search on mobile */
       .hide-mobile-search {
           display: none !important;
       }
       
       /* Hide create button on mobile */
       .new-create-btn {
           display: none !important;
       }
       
       /* Adjust header */
       .new-header {
           padding: 12px 16px;
       }
       
       .new-header-left {
           flex: 1;
       }
       
       /* Smaller drawer on mobile */
       .mobile-menu-drawer {
           width: 280px;
       }
   }
   
   /* ===============================
      QUIZ SET ADD – SLIDER
   ================================ */
   
   .quizset-range-wrap {
       display: flex;
       align-items: center;
       gap: 12px;
       position: relative;
   }
   
   .quizset-range {
       flex: 1;
       appearance: none;
       height: 26px;
       background: transparent;
       cursor: pointer;
       pointer-events: auto;
       touch-action: pan-y;
   }
   
   .quizset-range:focus {
       outline: none;
   }
   
   .quizset-range::-webkit-slider-runnable-track {
       height: 6px;
       border-radius: 999px;
       background: linear-gradient(
           to right,
           #6F56D9 0%,
           #6F56D9 var(--fillPercent, 0%),
           #E9EAEE var(--fillPercent, 0%),
           #E9EAEE 100%
       );
   }
   
   .quizset-range::-webkit-slider-thumb {
       appearance: none;
       width: 18px;
       height: 18px;
       border-radius: 50%;
       background: #6F56D9;
       border: 4px solid #FFFFFF;
       box-shadow: 0 8px 18px rgba(17,24,39,0.18);
       margin-top: -6px;
   }
   
   .quizset-range::-moz-range-track {
       height: 6px;
       border-radius: 999px;
       background: #E9EAEE;
   }
   
   .quizset-range::-moz-range-progress {
       height: 6px;
       border-radius: 999px;
       background: #6F56D9;
   }
   
   .quizset-range::-moz-range-thumb {
       width: 18px;
       height: 18px;
       border-radius: 50%;
       background: #6F56D9;
       border: 4px solid #FFFFFF;
       box-shadow: 0 8px 18px rgba(17,24,39,0.18);
   }
   
   .quizset-range-pill {
       min-width: 36px;
       padding: 6px 10px;
       border-radius: 10px;
       background: rgba(111,86,217,0.15);
       color: #6F56D9;
       font-weight: 700;
       font-size: 13px;
       text-align: center;
   }
   
   .quizset-range-minmax {
       display: flex;
       justify-content: space-between;
       font-size: 12px;
       color: #6F6F87;
       margin-top: 4px;
   }
   
   /* ===============================
      PRIMARY ACTION BUTTON
   ================================ */
   
   .quizset-primary-btn {
       height: 44px;
       padding: 0 18px;
       border-radius: 12px;
       background: #6F56D9;
       color: #FFFFFF;
       font-weight: 800;
       font-size: 14px;
       border: none;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
   }
   
   .quizset-primary-btn:hover {
       opacity: 0.95;
   }
   
   .quizset-btn-icon {
       width: 18px;
       height: 18px;
       display: block;
   }
   
   
   /* ========================================
      DRAWER STATE SCREENS (LOADING/SUCCESS)
      ======================================== */
   
   .drawer-state-screen {
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 400px;
       padding: 40px 20px;
   }
   
   .drawer-state-content {
       text-align: center;
       max-width: 320px;
   }
   
   .drawer-state-icon {
       width: 120px;
       height: 120px;
       margin: 0 auto 24px;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .drawer-state-icon.success {
       background: rgba(90, 190, 137, 0.1);
       border-radius: 50%;
   }
   
   .loading-spinner {
       width: 80px;
       height: 80px;
       animation: spin 1s linear infinite;
   }
   
   @keyframes spin {
       from {
           transform: rotate(0deg);
       }
       to {
           transform: rotate(360deg);
       }
   }
   
   .success-checkmark {
       width: 64px;
       height: 64px;
   }
   
   .drawer-state-title {
       font-family: "Rubik", sans-serif;
       font-size: 20px;
       font-weight: 600;
       color: #231E41;
       margin: 0 0 8px 0;
   }
   
   .drawer-state-subtitle {
       font-family: "Rubik", sans-serif;
       font-size: 15px;
       font-weight: 400;
       color: #6F6F87;
       margin: 0;
   }
   
   /* ========================================
      QUESTION COUNT BOX SELECTION
      ======================================== */
   
   .question-count-group {
       margin-bottom: 24px;
   }
   
   .question-count-boxes {
       display: flex;
       gap: 8px;
       margin-top: 12px;
   }
   
   .question-count-box {
       flex: 1;
       padding: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: white;
       border: 1px solid #E0DDE6;
       border-radius: 8px;
       font-family: 'Rubik', sans-serif;
       font-size: 14px;
       font-weight: 500;
       color: #6F6F87;
       cursor: pointer;
       transition: all 0.2s ease;
   }
   
   .question-count-box:hover {
       border-color: #D7C5FA;
       background: #F3ECF7;
   }
   
   .question-count-box:hover .question-count-number {
       color: #7F69CE;
   }
   
   .question-count-box.active {
       background: #7F69CE;
       border-color: #7F69CE;
       color: white;
   }
   
   .question-count-number {
       font-size: 28px;
       font-weight: 600;
       color: inherit;
       transition: color 0.2s ease;
   }
   
   .question-count-box.active .question-count-number {
       color: white;
   }
   
   /* ========================================
      TOPICS PAGE
      ======================================== */
   
   .topics-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
   }
   
   .topics-header-left {
       flex: 1;
   }
   
   .topics-header-count {
       text-align: right;
       color: #6F6F87;
       font-size: 14px;
   }
   
   .topics-count-number {
       font-weight: 600;
       color: #231E41;
       font-size: 24px;
       margin-bottom: 4px;
   }
   
   .topics-count-label {
       font-size: 14px;
       color: #6F6F87;
   }
   
   .topics-grid {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 20px;
       margin-bottom: 40px;
   }
   
   @media (max-width: 1400px) {
       .topics-grid {
           grid-template-columns: repeat(4, 1fr);
       }
   }
   
   @media (max-width: 1100px) {
       .topics-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }
   
   @media (max-width: 768px) {
       .topics-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   @media (max-width: 500px) {
       .topics-grid {
           grid-template-columns: 1fr;
       }
   }
   
   .topic-card-link {
       text-decoration: none;
       color: inherit;
       display: block;
       height: 100%;
   }
   
   .topic-card {
       background: #F7F1F6;
       border: 1px solid #ECE2F7;
       border-radius: 12px;
       padding: 28px;
       display: flex;
       flex-direction: column;
       gap: 12px;
       transition: filter 0.2s ease;
       cursor: pointer;
       height: 100%;
   }
   
   .topic-card:hover {
       filter: brightness(1.02);
   }
   
   .topic-card-icon {
       width: 65px;
       height: 65px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 8px;
   }
   
   .topic-icon-img {
       width: 32px;
       height: 32px;
       filter: brightness(0) invert(1);
   }
   
   .topic-card-games {
       display: flex;
       align-items: center;
       gap: 4px;
       font-size: 13px;
       color: #6F6F87;
       font-weight: 500;
   }
   
   .topic-card-games svg {
       color: #9F9FB0;
   }
   
   .topic-card-title {
       font-size: 16px;
       font-weight: 600;
       color: #231E41;
       margin: 0;
       line-height: 1.3;
   }
   
   .topic-card-description {
       font-size: 13px;
       color: #6F6F87;
       line-height: 1.5;
       margin: 0;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   
   /* TOPIC CARD MENU */
   .topic-card-wrapper {
       position: relative;
   }
   
   .topic-card-menu {
       position: absolute;
       top: 12px;
       right: 12px;
       z-index: 10;
       margin-top: 10px;
   }
   
   .topic-menu-btn {
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background: transparent;
       border: none;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.2s;
       color: #F3ECF7;
   
   }
   
   .topic-menu-btn:hover {
       filter: brightness(1.04);
       transition: filter 0.2s ease;
       color: #F3ECF7;
   }
   
   .topic-menu-dropdown {
       position: absolute;
       top: 100%;
       right: 0;
       margin-top: 4px;
       background: #F3ECF7;
       border: 1px solid #ECE2F7;
       border-radius: 12px;
       box-shadow: 0 4px 12px rgba(35, 30, 65, 0.1);
       min-width: 200px;
       opacity: 0;
       visibility: hidden;
       transform: translateY(-10px);
       transition: all 0.2s;
       z-index: 100;
   }
   
   .topic-menu-dropdown.show {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }
   
   .topic-menu-item {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 12px 16px;
       font-size: 14px;
       color: #231E41;
       text-decoration: none;
       border: none;
       background: none;
       width: 100%;
       text-align: left;
       cursor: pointer;
       transition: background 0.2s;
       font-family: "Rubik", sans-serif;
   }
   
   .topic-menu-item:first-child {
       border-radius: 12px 12px 0 0;
   }
   
   .topic-menu-item:last-child {
       border-radius: 0 0 12px 12px;
   }
   
   .topic-menu-item:hover, .topic-menu-item svg:hover {
       color: #7D65D6;
   }
   
   .topic-menu-item svg {
       flex-shrink: 0;
       color: #6F6F87;
   }
   /* Keep header search the same width even when nav links are present */
   .new-header-left {
     flex: 1 1 auto;
     min-width: 0;
   }
   
   .new-header-left .explore-search-wrapper {
     width: 500px !important;
     max-width: 500px !important;
     flex: 0 0 500px !important;
     flex-shrink: 0 !important;
   }
   
   /* Let nav take the squeeze instead of the search */
   .new-header-left .new-nav {
     flex: 1 1 auto;
     min-width: 0;
   }
   
   /* Force header to match height when search bar is present */
   .new-header {
     min-height: 96px; /* height when search exists */
     align-items: center;
   }
   
   /* ========================================
      FILTER DROPDOWN ENHANCEMENTS
      ======================================== */
   
   /* Filter pill dropdown wrapper */
   .new-filter-pill-dropdown {
       position: relative;
   }
   
   /* Dropdown button styling */
   .new-filter-dropdown-btn {
       width: 100%;
       height: 100%;
       background: transparent;
       border: none;
       padding: 0 10px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       cursor: pointer;
       font-family: inherit;
       font-size: inherit;
       color: inherit;
   }
   
   .new-filter-dropdown-btn .filter-selected-value {
       flex: 1;
       text-align: left;
   }
   
   /* Dropdown menu container */
   .new-filter-dropdown-menu {
       position: absolute;
       top: calc(100% + 8px);
       left: 0;
       min-width: 180px;
       width: auto;
       background: white;
       border-radius: 12px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
       z-index: 1000;
       display: none;
       max-height: 400px;
       overflow: hidden;
   }
   
   .new-filter-dropdown-menu.active {
       display: block;
   }
   
   /* Dropdown header */
   .new-filter-dropdown-header {
       padding: 16px 20px 12px;
       font-weight: 600;
       font-size: 14px;
       color: #333;
       border-bottom: 1px solid #ECE2F7;
   }
   
   /* Search input container */
   .new-filter-dropdown-search {
       padding: 12px 16px;
       border-bottom: 1px solid #ECE2F7;
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .new-filter-dropdown-search svg {
       color: #999;
       flex-shrink: 0;
   }
   
   .filter-search-input {
       flex: 1;
       border: none;
       outline: none;
       font-size: 14px;
       font-family: inherit;
       padding: 0;
       background: transparent;
   }
   
   .filter-search-input::placeholder {
       color: #999;
   }
   
   /* Dropdown list */
   .new-filter-dropdown-list {
       max-height: 280px;
       overflow-y: auto;
       padding: 8px 0;
   }
   
   /* Dropdown items */
   .new-filter-dropdown-item {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 10px 20px;
       cursor: pointer;
       transition: color 0.2s ease;
       font-size: 13px;
       color: #333;
   }
   
   .new-filter-dropdown-item:hover {
       color: #7F69CE !important;
       background-color: transparent !important;
   }
   
   .new-filter-dropdown-item input[type="radio"] {
       display: none;
   }
   
   .new-filter-dropdown-item input[type="radio"]:checked + span {
       font-weight: 600;
       color: #7F69CE;
   }
   
   .new-filter-dropdown-item span {
       flex: 1;
   }
   
   /* Ensure selected value text matches dropdown text size */
   .new-filter-dropdown-btn .filter-selected-value {
       font-size: 13px;
       font-weight: 400;
   }
   
   /* ========================================
      POPULAR TOPICS SECTION
      ======================================== */
   
   .popular-topics-section {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-top: 15px;
       margin-left: 20px;
   }
   
   .popular-label {
       font-size: 13px;
       font-weight: 500;
       color: #666;
       white-space: nowrap;
   }
   
   .popular-topics-pills {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
   }
   
   .popular-topic-pill {
       display: inline-flex;
       align-items: center;
       padding: 6px 16px;
       background: transparent;
       border: 1px solid #D7D8DB;
       border-radius: 20px;
       font-size: 13px;
       font-weight: 400;
       color: #6F6F87;
       text-decoration: none;
       transition: all 0.2s ease;
       height: 30px;
       white-space: nowrap;
   }
   
   .popular-topic-pill:hover {
       border-color: #7F69CE;
       color: #7F69CE;
   }
   
   /* ========================================
      PROMO BANNER
      ======================================== */
   
   .promo-banner {
       background: #F7F1F6;
       border: 1px solid #ECE2F7 ;
       border-radius: 12px;
       padding: 20px 32px;
       margin-bottom: 32px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 24px;
   }
   
   .promo-banner-content {
       flex: 1;
       order: 2;
   }
   
   .promo-banner-text {
       color: #6F6F87;
       font-size: 14px;
       margin: 0;
       line-height: 1.5;
   }
   
   .promo-banner-button {
       background: #5ABE89;
       color: white;
       border: none;
       padding: 12px 24px;
       border-radius: 8px;
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       white-space: nowrap;
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       transition: all 0.2s ease;
       order: 1;
   }
   
   .promo-banner-button:hover {
       background: #4CAE79;
   }
   
   /* ========================================
      FIXED HEIGHT TOPIC CARDS
      ======================================== */
   
   .explore-card-wrapper {
       min-height: 280px;
       height: auto;
       display: flex;
       flex-direction: column;
   }
   
   .explore-card {
       flex: 1;
       display: flex;
       flex-direction: column;
       height: 100%;
       min-height: 0;
   }
   
   .explore-card-title {
       flex: 0 0 auto;
       overflow: hidden;
       text-overflow: ellipsis;
       max-height: 2.8em;
       line-height: 1.4em;
   }
   
   /* Keep description as the flexible area and clamp it */
   .explore-card-description {
       flex: 1 1 auto;
       min-height: 0;
       overflow: hidden;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
   }
   
   .explore-card-meta {
       margin-top: auto;
   }
   
   .explore-card-btn {
       margin-top: 12px;
   }
   
   /* ========================================
      RESPONSIVE ADJUSTMENTS
      ======================================== */
   
   @media (max-width: 768px) {
       .popular-topics-section {
           flex-direction: column;
           align-items: flex-start;
       }
       
       /* Note: Filter bar dropdown mobile styles are in the mobile fixes section below */
       
       .promo-banner {
           flex-direction: column;
           text-align: center;
           padding: 20px;
       }
       
       .promo-banner-content {
           order: 1;
       }
       
       .promo-banner-button {
           width: 100%;
           order: 2;
       }
       
       .explore-card-wrapper {
           height: auto;
           min-height: 240px;
       }
   }
   
   /* Clear filters button */
   .new-clear-filters-btn {
       width: 30px;
       height: 30px;
       border: 1px solid rgba(215, 197, 250, 0.6);
       border-radius: 6px;
       background: #ECE2F7;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       color: #6F6F87;
       transition: all 0.2s ease;
       margin-left: 8px;
   }
   
   .new-clear-filters-btn:hover {
       background: #F7F1F6;
       color: #7F69CE;
   }
   
   .new-clear-filters-btn svg {
       width: 14px;
       height: 14px;
   }
   
   /* ========================================
      LOGIN PAGE STYLES
      ======================================== */
   
   body.lexy-admin {
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 100vh;
       background: #F3ECF7;
       position: relative;
       overflow: hidden;
       font-family: 'Rubik', sans-serif;
   }
   
   .login-container {
       background: transparent;
       border-radius: 16px;
       padding: 48px;
       width: 100%;
       max-width: 420px;
       position: relative;
       z-index: 10;
   }
   
   .login-header {
       text-align: center;
       margin-bottom: 36px;
   }
   
   .login-header img {
       height: 60px;
       margin-bottom: 16px;
   }
   
   .login-header h1 {
       margin: 0 0 8px 0;
       font-size: 28px;
       font-weight: 600;
       color: #231E41;
   }
   
   .login-header p {
       margin: 0;
       font-size: 14px;
       color: #666;
   }
   
   .tab-buttons {
       display: flex;
       gap: 8px;
       margin-bottom: 24px;
       border-bottom: 2px solid #f0f0f0;
   }
   
   .tab-button {
       flex: 1;
       padding: 12px;
       border: none;
       background: none;
       font-size: 15px;
       font-weight: 500;
       color: #666;
       cursor: pointer;
       border-bottom: 3px solid transparent;
       margin-bottom: -2px;
       transition: all 0.2s ease;
       font-family: 'Rubik', sans-serif;
   }
   
   .tab-button:hover {
       color: #333;
   }
   
   .tab-button.active {
       color: #7F69CE;
       border-bottom-color: #7F69CE;
   }
   
   .tab-content {
       display: none;
   }
   
   .tab-content.active {
       display: block;
   }
   
   .login-form {
       display: flex;
       flex-direction: column;
       gap: 20px;
   }
   
   .form-group {
       display: flex;
       flex-direction: column;
       gap: 8px;
   }
   
   .form-group label {
       font-size: 14px;
       font-weight: 500;
       color: #333;
   }
   
   .form-group input {
       font-family: 'Rubik', sans-serif;
       font-size: 15px;
       padding: 12px 16px;
       border-radius: 8px;
       border: 1px solid #e0e0e0;
       background: #fff;
       transition: all 0.2s ease;
   }
   
   .form-group input:focus {
       outline: none;
       border-color: #7F69CE;
       box-shadow: 0 0 0 3px rgba(127, 105, 206, 0.1);
   }
   
   .form-group small {
       font-size: 12px;
       color: #888;
   }
   
   .login-button {
       margin-top: 12px;
       padding: 14px;
       font-size: 16px;
       font-weight: 600;
       background: #7F69CE;
       border: none;
       border-radius: 8px;
       color: #fff;
       cursor: pointer;
       transition: all 0.2s ease;
       font-family: 'Rubik', sans-serif;
   }
   
   .login-button:hover {
       background: #8D75E6;
   }
   
   .login-button:active {
       transform: translateY(0);
   }
   
   .error-message {
       background: #fee;
       border: 1px solid #fcc;
       color: #c33;
       padding: 12px 16px;
       border-radius: 8px;
       font-size: 14px;
       margin-bottom: 16px;
   }
   
   .success-message {
       background: #efe;
       border: 1px solid #cfc;
       color: #3c3;
       padding: 12px 16px;
       border-radius: 8px;
       font-size: 14px;
       margin-bottom: 16px;
   }
   
   .forgot-password {
       text-align: right;
       margin-top: -8px;
   }
   
   .forgot-password a {
       font-size: 13px;
       color: #7F69CE;
       text-decoration: none;
   }
   
   .forgot-password a:hover {
       text-decoration: underline;
   }
   
   .login-footer {
       margin-top: 24px;
       text-align: center;
       font-size: 13px;
       color: #888;
   }
   
   /* ========================================
      BACKGROUND PATTERN WITH ICONS
      ======================================== */
   
   .background-pattern {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       opacity: 0.04;
       overflow: hidden;
       z-index: 0;
       pointer-events: none;
   }
   
   .pattern-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, 24px);
       grid-auto-rows: 24px;
       gap: 4px;
       width: 100%;
       height: 100%;
   }
   
   .pattern-cell {
       width: 24px;
       height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .pattern-cell svg {
       width: 17px;
       height: 17px;
       color: #475569;
   }
   
/* WIDGET PREVIEW IN DRAWER */
.drawer-back-link {
    margin-bottom: 20px;
}

.btn-link {
    background: none;
    border: none;
    color: #8B5CF6;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-link:hover {
    color: #8B5CF6;
}

.btn-link svg {
    flex-shrink: 0;
}

.widget-preview-container {
    padding: 20px 0;
}

.widget-preview-heading {
    font-size: 20px;
    font-weight: 600;
    color: #1E1338;
    margin: 0 0 8px 0;
    font-family: 'Rubik', sans-serif;
}

.widget-preview-description {
    font-size: 14px;
    color: #6B5894;
    margin: 0 0 20px 0;
}

.widget-preview-frame {
    background: #FFFFFF;
    border: 1px solid #E0DDE6;
    border-radius: 12px;
    padding: 24px;
    min-height: 200px;
}

/* LOADING ANIMATION */

.spinner {
    animation: rotate 2s linear infinite;
}

.spinner .path {
    stroke: #8B5CF6;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* CHECKMARK ANIMATION */
.checkmark {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: #8B5CF6;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #8B5CF6;
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: #8B5CF6;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #8B5CF6;
    stroke-width: 3;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #8B5CF6;
    }
}

/* ================================================================
   PROFILE PAGE STYLES
   ================================================================ */

   .profile-container {
    max-width: 900px;
    padding: 24px;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.profile-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 4px 0;
}

.profile-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.profile-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 0;
    overflow: hidden;
}

.profile-form {
    padding: 0;
}

.profile-section {
    padding: 32px;
    border-bottom: 1px solid #e2e8f0;
}

.profile-section:last-of-type {
    border-bottom: none;
}

.profile-section-readonly {
    background-color: #f8fafc;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 8px 0;
}

.section-description {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}

.label-help {
    cursor: help;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
}

.label-help:hover {
    color: #64748b;
}

.form-input,
.form-select {
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Rubik', sans-serif;
    transition: all 0.2s;
    background-color: white;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #8d75e6;
    box-shadow: 0 0 0 3px rgba(141, 117, 230, 0.1);
}

.form-hint {
    font-size: 12px;
    color: #94a3b8;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

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

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 15px;
    font-weight: 500;
    color: #1a202c;
}

.profile-actions {
    padding: 24px 32px;
    background-color: #f8fafc;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary {
    background-color: #8d75e6;
    color: white;
}


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

.btn-secondary {
    background-color: white;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.btn-secondary:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
}

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.alert svg {
    flex-shrink: 0;
}

.alert-error {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-success {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* Language select specific styling */
.language-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    appearance: none;
}

/* ================================================================
   ACTIVE FILTER STATE STYLES
   ================================================================ */

/* Active state for dropdowns (language, category, topic, creator, status) */
/* Subtle highlight - entire pill changes, no purple, no bold */

/* Active pill when select has value */
.new-filter-pill:has(select:not([value=""])) {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Active pill with filter-active class */
.new-filter-pill.filter-active {
    background-color: #F5EBFF;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Active dropdown pill */
.new-filter-pill-dropdown.filter-active {
    background-color: #F5EBFF;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Keep select background transparent so pill color shows through */
.new-filter-pill.filter-active .new-filter-select,
.new-filter-pill:has(select:not([value=""])) .new-filter-select,
.new-filter-pill-dropdown.filter-active .new-filter-select {
    background-color: transparent;
    color: inherit;
    font-weight: normal;
}

/* Arrow color stays normal */
.new-filter-pill.filter-active .new-filter-arrow,
.new-filter-pill:has(select:not([value=""])) .new-filter-arrow,
.new-filter-pill-dropdown.filter-active .new-filter-arrow {
    color: #64748b;
}

/* Ensure clear button is visible when filters are active */
.new-clear-filters-btn {
    background-color: #fee2e2;
    color: #991b1b;
}

.new-clear-filters-btn:hover {
    background-color: #fecaca;
}

/* Mobile responsiveness for profile */
@media (max-width: 768px) {
    .profile-container {
        padding: 16px;
    }
    
    .profile-section {
        padding: 24px 20px;
    }
    
    .profile-actions {
        padding: 20px;
        flex-direction: column-reverse;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   SEARCH DROPDOWN POSITIONING
   ======================================== */

.explore-search-type-dropdown {
    position: relative;
    order: 2;
    margin-left: auto;
}

.explore-search-type-dropdown .new-filter-dropdown-menu {
    right: 0;
    left: auto;
}

/* ========================================
   GAME PAGE STYLES
   ======================================== */

/* Breadcrumb */
.breadcrumb {
    margin-bottom: 24px;
}

.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6F6F87;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: color 0.2s;
}

.breadcrumb-link:hover, .breadcrumb-link svg {
    color: #7F69CE;
}

.breadcrumb-link svg {
    width: 15px;
    height: 15px;
}

/* Game Header */
.game-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.game-header-left {
    flex: 1;
}


.game-header-title {
    font-size: 32px;
    font-weight: 700;
    color: #231E41;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.game-header-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: #6F6F87;
}

.game-meta-item {
    white-space: nowrap;
}

.game-meta-separator {
    color: #D1D1D8;
}

.game-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: #231E41;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: hand;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.btn-secondary svg {
    width: 16px;
    height: 16px;
}


.btn-primary svg {
    width: 16px;
    height: 16px;
}

/* Questions Grid */
.questions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
    margin-bottom: 45px;
}

@media (max-width: 1400px) {
    .questions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .questions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Question Card */
.question-card {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.2s;
}

.question-card:hover {
    border-color: #D1D5DB;
}

.question-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.question-card-number {
    width: 32px;
    height: 32px;
    background: #F5EBFF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #8D75E6;
}

.question-card-edit {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: top;
    justify-content: center;
    cursor: pointer;
    color: #9CA3AF;
    transition: all 0.2s;
}

.question-card-edit:hover {
    color: #7F69CE;
}

.question-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.question-card-question {
    font-size: 16px;
    font-weight: 400;
    color: #111827;
    margin: 0;
    line-height: 1.5;
    min-height: 45px;
}

.question-card-answers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.answer-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    color: #374151;
    transition: all 0.2s;
}

.answer-option-correct {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.answer-check {
    flex-shrink: 0;
    color: #4ade80;
}

.answer-text {
    flex: 1;
    line-height: 1.4;
}






/* Responsive adjustments for game header */
@media (max-width: 768px) {
    .game-header {
        flex-direction: column;
    }
    
    .game-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .btn-primary,
    .btn-secondary {
        flex: 1;
        justify-content: center;
    }
}

/* Audio player in question cards - full width at bottom */
.question-card .audio-player {
    width: 100%;
    margin-top: auto;
    display: block;
}

.question-card .audio-waveform {
    width: 100%;
    display: flex;
    min-width: 0;
}
/* ========================================
   ANSWER CARDS FOR EDIT QUESTION DRAWER
   Add to lexy-new-design.css
   ======================================== */

/* Question textarea variant - uses standard form-input with larger min-height */
textarea.question-textarea {
    min-height: 80px;
    line-height: 1.6;
}

/* Answer card container */
.answer-card {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.answer-card:hover {
    border-color: #d1d5db;
}

/* Answer card inner content layout */
.answer-card-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Active answer card (correct answer) */
.answer-card-active {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.answer-card-active:hover {
    border-color: #86efac;
}

/* Answer input inside card - pill style */
.answer-input {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 10px 16px;
    width: 100%;
    font-size: 14px;
    font-family: 'Rubik', sans-serif;
    transition: all 0.2s ease;
}

.answer-input:focus {
    outline: none;
    background: white;
    border-color: #8D75E6;
    box-shadow: 0 0 0 3px rgba(141, 117, 230, 0.1);
}

.answer-input:disabled {
    background: #F9FAFB;
    color: #6B7280;
    cursor: not-allowed;
}

/* When answer card is active, input maintains white background */
.answer-card-active .answer-input {
    background: white;
    border-color: #D1D5DB;
}

.answer-card-active .answer-input:focus {
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}

/* Answer number circle */
.answer-number {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

/* Active number (correct answer) */
.answer-number-active {
    background: #4ade80;
    color: white;
    border: none;
}

/* Checkmark container */
.answer-checkmark {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: #D1D5DB;
    opacity: 0;
}

/* Show checkmark on hover for inactive cards */
.answer-card:hover .answer-checkmark {
    opacity: 1;
}

/* Active checkmark (correct answer) */
.answer-checkmark-active {
    background: #4ade80;
    opacity: 1 !important;
}

/* Prevent text selection during clicking */
.answer-card {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Allow text selection in inputs */
.answer-input {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Disabled state for answer cards */
.answer-card[onclick=""] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ========================================
   SEARCH COMPONENT STYLES
   Uses unique classes (explore-search-*) to avoid 
   conflicts with page-level dropdown handlers
   ======================================== */

/* Search Dropdown Button */
.explore-search-dropdown-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: #231E41;
    border-radius: 20px;
    transition: background 0.2s;
    white-space: nowrap;
}

.explore-search-dropdown-btn:hover {
    background: rgba(141, 117, 230, 0.1);
}

.explore-search-arrow {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #6F6F87;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s;
}

.explore-search-dropdown-menu.active + .explore-search-dropdown-btn .explore-search-arrow,
.explore-search-dropdown-btn:focus + .explore-search-dropdown-menu.active ~ .explore-search-arrow {
    transform: rotate(180deg);
}

/* Search Dropdown Menu */
.explore-search-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.explore-search-dropdown-menu.active {
    display: block;
}

.explore-search-dropdown-list {
    padding: 8px 0;
}

.explore-search-dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: background 0.15s, color 0.15s;
}

.explore-search-dropdown-item:hover {
    color: #7D65D6;
}

.explore-search-dropdown-item input[type="radio"] {
    display: none;
}

.explore-search-dropdown-item input[type="radio"]:checked + span {
    font-weight: 600;
    color: #7D65D6;
}

/* Search Mode Section - at bottom of dropdown */
.explore-search-mode-section {
    border-top: 1px solid #ECE2F7;
    padding: 12px 16px;
    margin-top: 4px;
}

.explore-search-mode-label {
    font-size: 10px;
    font-weight: 600;
    color: #6F6F87;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Search Mode Toggle - Pill shaped */
.explore-search-mode-toggle {
    display: flex;
    align-items: center;
    background: #ECE2F7;
    border-radius: 50px;
    padding: 4px;
}

.explore-search-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 50px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #6F6F87;
    transition: all 0.2s ease;
}

.explore-search-mode-btn:hover {
    color: #7D65D6;
}

/* Active mode - purple background with white text */
.explore-search-mode-btn.active {
    background: #fff;
    color: #7D65D6;
    box-shadow: 0 2px 4px rgba(125, 101, 214, 0.3);
}

.explore-search-mode-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.explore-search-mode-btn .mic-icon {
    fill: currentColor;
}

.explore-search-mode-btn .keyboard-icon {
    stroke: currentColor;
    fill: none;
}

.explore-search-mode-btn span {
    line-height: 1;
}

/* Submit button icons */
.explore-search-btn .mic-icon,
.explore-search-btn .search-icon {
    width: 22px;
    height: 22px;
}

/* Listening state for submit button - Lexy purple */
.explore-search-btn.listening {
    background: #7D65D6 !important;
    animation: explore-search-pulse 1.5s infinite;
}

/* Listening state for input */
.explore-search-input.listening {
    color: #7D65D6;
}

/* Listening state for wrapper */
.explore-search-wrapper.listening {
    border-color: #7D65D6 !important;
    box-shadow: 0 0 0 3px rgba(125, 101, 214, 0.2) !important;
}

@keyframes explore-search-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(125, 101, 214, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(125, 101, 214, 0);
    }
}

/* Ensure search type dropdown container has position */
.explore-search-type-dropdown {
    position: relative;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .explore-search-mode-section {
        padding: 10px 12px;
    }
    
    .explore-search-mode-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* ========================================
   GAME CARDS - List View
   Card-based game results layout
   ======================================== */

.games-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
}

.game-card {
    background: #F7F1F6;
    border: 1px solid #ECE2F7;
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.game-card:hover {
    filter: brightness(1.02);
    z-index: 10;
}

.game-card-main {
    padding: 16px 20px;
    overflow: visible;
}

.game-card-content {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: visible;
}

/* Mobile: Stack card content vertically */
@media (max-width: 639px) {
    .game-card-content {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .game-info {
        align-items: flex-start;
    }
    
    .game-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    
    .game-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .game-actions .unified-action-menu,
    .game-actions > div {
        width: 100%;
    }
    
    .game-actions .unified-action-btn {
        width: 100%;
        justify-content: space-between;
    }
    
    .game-actions .unified-action-btn span {
        flex: 1;
        text-align: left;
    }
    
    /* More Details button: text left, chevron right */
    .game-mobile-details-btn {
        justify-content: space-between;
    }
    
    .game-mobile-details-btn span {
        flex: 1;
        text-align: left;
    }
}

.game-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: visible;
}

/* Topic circle icon */
.game-topic-circle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8D75E6; /* Default purple */
}

.game-topic-circle img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

/* Game title and meta section */
.game-title-section {
    flex: 1;
    min-width: 0;
}

.game-title {
    font-size: 15px;
    font-weight: 600;
    color: #231E41;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.game-title a:hover {
    color: #8D75E6;
}

.game-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6B7280;
    flex-wrap: wrap;
}

.game-meta-divider {
    color: #D1D5DB;
}

/* Pills container - hidden on mobile */
.game-pills {
    display: none;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .game-pills {
        display: flex;
    }
}

/* Category and topic pills */
.game-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 9999px;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s;
}

.game-pill-category {
    color: #6B7280;
    background: #F0EAEF;
}

.game-pill-category:hover {
    background-color: #FFF5FD;
}

.game-pill-topic {
    background-color: #E0F2FE;
      color: #075985;
}

.game-pill-topic:hover {
    background-color: #BAE6FD;
}

/* Game actions - right side */
.game-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    overflow: visible;
    position: relative;
}

/* Details toggle button - hidden on mobile */
.game-details-btn {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
    color: #6B7280;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    font-family: 'Rubik', sans-serif;
}

@media (min-width: 640px) {
    .game-details-btn {
        display: flex;
    }
}

.game-details-btn:hover {
    color: #8D75E6;
}

.game-details-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}

.game-details-btn.expanded svg {
    transform: rotate(180deg);
}

/* Mobile details toggle */
.game-mobile-details {
    display: flex;
    margin-top: 8px;
    padding-top: 0;
    border-top: none;
}

@media (min-width: 640px) {
    .game-mobile-details {
        display: none;
    }
}

.game-mobile-details-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 8px;
    font-size: 13px;
    color: #6B7280;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Rubik', sans-serif;
}

.game-mobile-details-btn:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.game-mobile-details-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}

.game-mobile-details-btn.expanded svg {
    transform: rotate(180deg);
}

/* Expanded details section */
.game-card-expanded {
    display: none;
    background: #F0EAEF;
    border-top: 1px solid #E5E7EB;
    padding: 16px 20px;
    border-radius: 0 0 12px 12px;
}

.game-card-expanded.show {
    display: block;
}

.game-expanded-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}

@media (min-width: 640px) {
    .game-expanded-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .game-expanded-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.game-expanded-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.game-expanded-label {
    font-size: 11px;
    font-weight: 500;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

.game-expanded-value {
    font-size: 13px;
    color: #231E41;
}

/* Hide certain expanded items on larger screens where pills show them */
@media (min-width: 1024px) {
    .game-expanded-item.hide-lg {
        display: none;
    }
}

/* Empty state */
.games-empty {
    text-align: center;
    padding: 48px 24px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}

.games-empty p {
    color: #6B7280;
    font-size: 15px;
    margin: 0;
}

/* Ensure action menu dropdowns appear above other cards */
.game-card:has(.action-menu.open),
.game-card:has(.unified-action-dropdown.show),
.game-card:has(.unified-action-menu:focus-within) {
    z-index: 100;
}

.game-actions .unified-action-dropdown,
.game-actions .action-dropdown {
    z-index: 9999;
}

/* ========================================
   MOBILE FIXES & HORIZONTAL SCROLL
   
   INSTRUCTIONS:
   1. First, REMOVE the CSS block I previously gave you (lines 6166-6296)
   2. Then add this CSS to the END of lexy-new-design.css
   ======================================== */

/* -----------------------------------------
   FIX: Hero section mobile layout
   Ensures content stays within viewport
   ----------------------------------------- */

   @media (max-width: 768px) {
    .explore-hero {
        overflow-x: hidden;
    }
    
    .explore-hero-content {
        max-width: 100%;
        overflow: hidden;
    }
    
    .explore-hero-left {
        max-width: 100%;
        overflow: hidden;
    }
    
    .explore-hero-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Search wrapper needs to be responsive on mobile */
    .explore-hero .explore-search-wrapper {
        width: 100%;
        max-width: 100%;
    }
}

/* -----------------------------------------
   1. POPULAR TOPICS PILLS - Horizontal Scroll
   ----------------------------------------- */

@media (max-width: 768px) {
    .popular-topics-section {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin-left: 15px;
        max-width: 100%;
    }
    
    .popular-label {
        flex-shrink: 0;
    }
    
    .popular-topics-pills {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
        margin-bottom: -4px;
    }
    
    .popular-topics-pills::-webkit-scrollbar {
        display: none;
    }
    
    .popular-topic-pill {
        flex-shrink: 0;
    }
}

/* -----------------------------------------
   2. FILTER BAR PILLS - Horizontal Scroll
   ----------------------------------------- */

@media (max-width: 768px) {
    /* Horizontal scroll for filter pills */
    .new-filter-bar .new-filters-left {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
        margin-bottom: -4px;
        margin-right: -20px;
    }
    
    .new-filter-bar .new-filters-left::-webkit-scrollbar {
        display: none;
    }
    
    .new-filter-bar .new-filter-pill,
    .new-filter-bar .new-filter-icon-btn,
    .new-filter-bar .new-clear-filters-btn {
        flex-shrink: 0;
    }
    
    /* Mobile dropdown - when moved to body */
    .new-filter-dropdown-menu.active {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 40px) !important;
        max-width: 360px !important;
        min-width: 280px !important;
        max-height: 70vh;
        z-index: 100000 !important;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }
}

/* Mobile dropdown backdrop */
.filter-dropdown-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
}

.filter-dropdown-backdrop.active {
    display: block;
}

/* -----------------------------------------
   3. EXPLORE GRID - Mobile Carousel
   Shows partial next card as swipe hint
   ----------------------------------------- */

@media (max-width: 767px) {
    .explore-categories .explore-grid {
        display: flex;
        flex-wrap: nowrap;
        grid-template-columns: unset;
        gap: 16px;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        /* Extend to viewport edges */
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .explore-categories .explore-grid::-webkit-scrollbar {
        display: none;
    }
    
    .explore-categories .explore-grid > .explore-card-wrapper,
    .explore-categories .explore-grid > .explore-card-wrapper.home-card {
        flex: 0 0 85%;
        min-width: 85%;
        max-width: 85%;
        scroll-snap-align: start;
        height: auto;
        min-height: 260px;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .explore-categories .explore-grid > .explore-card-wrapper,
    .explore-categories .explore-grid > .explore-card-wrapper.home-card {
        flex: 0 0 75%;
        min-width: 75%;
        max-width: 75%;
    }
}

@media (max-width: 380px) {
    .explore-categories .explore-grid > .explore-card-wrapper,
    .explore-categories .explore-grid > .explore-card-wrapper.home-card {
        flex: 0 0 90%;
        min-width: 90%;
        max-width: 90%;
    }
}