/* Final user-facing visual layer. Loaded after page templates so legacy inline CSS cannot
   reintroduce gradients, glass panels, or oversized decorative treatment. */
body.glass-bg,
body.glass-bg .app-main,
body.glass-bg .container {
  background: #f7f8fa !important;
  background-image: none !important;
}

body.glass-bg .dash-hero,
body.glass-bg .dash-kpi,
body.glass-bg .dash-focus,
body.glass-bg .streak-board,
body.glass-bg .dash-action-card,
body.glass-bg .catalog-hero,
body.glass-bg .tryout-hero,
body.glass-bg .guide-hero,
body.glass-bg .result-hero,
body.glass-bg .tryout-card-shell,
body.glass-bg .guide-block,
body.glass-bg .guide-camera-card,
body.glass-bg .guide-form-card,
body.glass-bg .result-kpi,
body.glass-bg .result-sub-card,
body.glass-bg .result-table-card,
body.glass-bg .result-insight-card,
body.glass-bg .result-discussion-card,
body.glass-bg .product-card,
body.glass-bg .product-hero,
body.glass-bg .checkout-card,
body.glass-bg .tracker-panel-card,
body.glass-bg .quiz-page,
body.glass-bg .quiz-item,
body.glass-bg .quiz-start-card,
body.glass-bg .quiz-question,
body.glass-bg .quiz-result-head,
body.glass-bg .quiz-stat,
body.glass-bg .quiz-result-question {
  background: #fff !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
  border-color: #e4e7ec !important;
  border-radius: 10px !important;
}

body.glass-bg .btn-primary,
body.glass-bg .btn-primary:hover,
body.glass-bg .btn-soft,
body.glass-bg .tryout-exam-submit,
body.glass-bg .tryout-submit-btn {
  background: #ff5f6d !important;
  background-image: none !important;
  border-color: #ff5f6d !important;
  box-shadow: none !important;
}

body.glass-bg .btn-ghost,
body.glass-bg .btn-soft,
body.glass-bg .pill,
body.glass-bg .tag,
body.glass-bg .tryout-chip,
body.glass-bg .tryout-meta-pill,
body.glass-bg .result-chip,
body.glass-bg .result-score-chip,
body.glass-bg .status-badge {
  border-radius: 6px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

body.glass-bg .dash-eyebrow::before,
body.glass-bg .tryout-eyebrow::before,
body.glass-bg .guide-eyebrow::before,
body.glass-bg .result-eyebrow::before,
body.glass-bg .catalog-eyebrow::before,
body.glass-bg .status-dot,
body.glass-bg .online-dot {
  display: none !important;
}

body.glass-bg .bottom-nav,
body.glass-bg .bottom-nav .nav-grid,
body.glass-bg .modal-card,
body.glass-bg .modal-card.narrow,
body.glass-bg .promo-modal,
body.glass-bg .promo-modal-backdrop,
body.glass-bg .guide-camera-card,
body.glass-bg .guide-form-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.glass-bg .bottom-nav,
body.glass-bg .bottom-nav .nav-grid {
  background: #fff !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12) !important;
  border-radius: 10px !important;
}

body.glass-bg .bottom-nav a,
body.glass-bg .bottom-nav a.active {
  border-radius: 8px !important;
}

body.glass-bg .bottom-nav a.active {
  background: #fff1f3 !important;
  color: #c01048 !important;
  box-shadow: none !important;
}

body.glass-bg :focus-visible {
  outline: 3px solid rgba(255, 95, 109, .35) !important;
  outline-offset: 2px !important;
}

.support-bar {
  width: min(100% - 32px, 1180px);
  margin: 8px auto 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  color: #475467;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.support-bar-copy,
.support-actions,
.support-link {
  display: flex;
  align-items: center;
}

.support-bar-copy {
  gap: 10px;
  min-width: 0;
}

.support-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #c01048;
  background: #fff1f3;
  border: 1px solid #fecdca;
  border-radius: 8px;
}

.support-copy-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}

.support-copy-text strong {
  color: #101828;
  font-size: .86rem;
}

.support-copy-text small {
  color: #667085;
  font-size: .74rem;
}

.support-actions {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.support-link {
  gap: 7px;
  min-height: 36px;
  padding: 7px 10px;
  color: #c01048;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 650;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #fecdca;
  border-radius: 7px;
  transition: background-color .15s ease, border-color .15s ease;
}

.support-link:hover {
  background: #fff1f3;
  border-color: #f9a8b0;
}

.support-label {
  color: #475467;
}

.auth-help {
  margin: -4px 0 14px !important;
  text-align: right;
  font-size: .86rem;
}

.auth-form .alert.success,
.alert.success {
  background: #ecfdf3;
  border-color: #abefc6;
  color: #067647;
}

.quiz-question-stem p,
.quiz-question-stem .docx-stimulus-table,
.quiz-result-stem p,
.quiz-result-stem .docx-stimulus-table,
.quiz-question-explanation p,
.quiz-question-explanation .docx-stimulus-table,
.quiz-explanation p,
.quiz-explanation .docx-stimulus-table {
  margin-top: 0;
  margin-bottom: 10px;
}

.quiz-question-stem img,
.quiz-result-stem img,
.quiz-question-explanation img,
.quiz-explanation img,
.quiz-option img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}

.docx-stimulus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}

.docx-stimulus-table td,
.docx-stimulus-table th {
  border: 1px solid #d0d5dd;
  padding: 8px 10px;
  vertical-align: top;
}

/* Word formatting is emitted as safe inline styles plus these semantic
   structures. Keep the browser equivalent close to the original document. */
.quiz-question-stem .docx-paragraph,
.quiz-result-stem .docx-paragraph,
.quiz-question-explanation .docx-paragraph,
.quiz-explanation .docx-paragraph,
.quiz-option .docx-paragraph {
  overflow-wrap: anywhere;
}

.quiz-question-stem .docx-list,
.quiz-result-stem .docx-list,
.quiz-question-explanation .docx-list,
.quiz-explanation .docx-list,
.quiz-option .docx-list {
  margin: 0 0 10px;
  padding-left: 2.1rem;
}

.quiz-question-stem .docx-list li,
.quiz-result-stem .docx-list li,
.quiz-question-explanation .docx-list li,
.quiz-explanation .docx-list li,
.quiz-option .docx-list li {
  margin: 0 0 6px !important;
  text-indent: 0 !important;
  padding-left: 2px;
}

.docx-stimulus-table p.docx-paragraph,
.docx-stimulus-table .docx-list {
  margin-bottom: 4px;
}

.docx-page-break {
  height: 1.25rem;
  break-after: page;
}

.docx-math {
  white-space: normal;
}

/* Shared mobile-safe search layout for Kuis and Kelas. */
.quiz-search,
.classes-search,
.class-material-search {
  min-width: 0;
}

.quiz-search input,
.classes-search input,
.class-material-search input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}

.quiz-search button,
.classes-search button,
.class-material-search button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .quiz-search,
  .classes-search,
  .class-material-search {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .quiz-search button,
  .classes-search button,
  .class-material-search button {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  .support-bar {
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }

  .support-bar-copy {
    align-items: flex-start;
  }

  .support-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .support-link {
    justify-content: flex-start;
    width: 100%;
  }

  .support-link span {
    overflow-wrap: anywhere;
  }
}

/* Final responsive pass for the main user surfaces. */
@media (max-width: 1024px) {
  .app-main .container {
    width: 100%;
    max-width: 100%;
  }

  .main-content {
    min-width: 0;
  }

  .dash-hero-actions,
  .tryout-hero-actions,
  .tryout-card-actions,
  .tracker-hero-actions,
  .study-room-actions {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .app-main .container {
    padding: 12px 10px 24px;
  }

  .main-content {
    padding-top: 8px;
    gap: 12px;
  }

  .quiz-header {
    align-items: stretch !important;
    gap: 14px !important;
  }

  .quiz-header > div,
  .quiz-item > div,
  .class-detail-head > div {
    min-width: 0;
  }

  .quiz-item {
    padding: 14px !important;
  }

  .quiz-item h3 {
    font-size: 15px;
    line-height: 1.35;
  }

  .quiz-section-title {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 4px !important;
  }

  .dash-hero-actions,
  .tryout-hero-actions,
  .tryout-card-actions,
  .tracker-hero-actions,
  .study-room-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dash-hero-actions > *,
  .tryout-hero-actions > *,
  .tryout-card-actions > *,
  .tracker-hero-actions > *,
  .study-room-actions > * {
    width: 100% !important;
    max-width: none !important;
  }

  .tryout-card-top,
  .tryout-card-footer,
  .class-detail-head {
    min-width: 0;
  }

  .study-room-frame iframe {
    min-height: 420px;
    height: 62vh;
  }

  .docx-stimulus-table {
    display: block;
    overflow-x: auto;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.glass-bg *,
  body.glass-bg *::before,
  body.glass-bg *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Product-wide responsive QA layer. Keep every surface inside the viewport and
   let page-specific layouts choose their desktop proportions. */
html {
  overflow-x: hidden;
}

body.glass-bg,
.app-shell,
.app-main,
.main-content,
.app-main .container,
.card,
.dash-page-grid,
.catalog-page,
.checkout-page,
.profile-page,
.study-room-page,
.tracker-shell,
.lb-page,
.tryout-hub {
  min-width: 0;
}

.app-main .container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(14px, 2.4vw, 32px);
}

.main-content {
  width: 100%;
}

.side-nav {
  flex: 0 0 240px;
  width: 240px;
}

.main-content > *,
.dash-page-grid > *,
.catalog-grid > *,
.checkout-grid > *,
.profile-grid > *,
.study-room-layout > *,
.tracker-app-grid > *,
.tracker-kpis > *,
.tracker-summary-strip > *,
.quiz-list > *,
.tryout-board > *,
.lb-tryout-grid > * {
  min-width: 0;
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content p,
.main-content .muted,
.main-content .strong {
  overflow-wrap: anywhere;
}

.main-content input,
.main-content select,
.main-content textarea,
.main-content button {
  max-width: 100%;
  font: inherit;
}

.main-content input,
.main-content select,
.main-content textarea {
  min-height: 44px;
}

.main-content textarea {
  resize: vertical;
}

.main-content .btn-primary,
.main-content .btn-ghost,
.main-content .btn-soft {
  width: auto;
  max-width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

.dash-hero,
.tryout-hero,
.tracker-hero,
.catalog-hero,
.checkout-hero,
.profile-card-head,
.study-room-top,
.quiz-header,
.tryout-card-top,
.tryout-card-footer,
.tracker-nav-head,
.section-head,
.lb-panel-head {
  min-width: 0;
}

.dash-hero-actions,
.tryout-hero-actions,
.tryout-card-actions,
.tracker-hero-actions,
.study-room-actions,
.product-actions,
.checkout-hero-actions,
.checkout-submit-row,
.profile-submit-row,
.cta-row {
  min-width: 0;
}

.dash-hero-actions > *,
.tryout-hero-actions > *,
.tryout-card-actions > *,
.tracker-hero-actions > *,
.study-room-actions > *,
.product-actions > *,
.checkout-hero-actions > *,
.checkout-submit-row > *,
.profile-submit-row > *,
.cta-row > * {
  max-width: 100%;
}

.table-wrap,
.tracker-chart-box,
.docx-stimulus-table {
  max-width: 100%;
  overflow-x: auto;
}

.table-wrap table,
.tracker-table {
  min-width: 560px;
}

.study-room-frame {
  min-width: 0;
  overflow: hidden;
}

.study-room-frame iframe {
  width: 100%;
  min-height: 520px;
  border: 0;
  border-radius: 8px;
}

.class-material-row {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.class-material-row > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.accordion-header > div:first-child,
.accordion-title-wrap {
  min-width: 0;
}

.accordion-title {
  overflow-wrap: anywhere;
}

.tracker-nav-wrap,
.subtest-tabs {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1024px) {
  .app-main .container {
    max-width: 100%;
  }

  .topbar {
    margin-inline: 10px;
  }

  .side-nav {
    width: min(288px, 88vw);
    flex-basis: auto;
  }
}

@media (max-width: 768px) {
  .app-main .container {
    padding: 12px 10px 24px;
  }

  .main-content {
    gap: 12px;
  }

  .card,
  .dash-hero,
  .tryout-hero,
  .tracker-hero,
  .catalog-hero,
  .checkout-hero,
  .profile-card-head,
  .study-room-top {
    padding: 16px !important;
    border-radius: 10px !important;
  }

  .dash-page-grid,
  .catalog-grid,
  .checkout-grid,
  .profile-grid,
  .study-room-layout,
  .tracker-app-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dash-kpis,
  .tracker-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dash-action-grid,
  .tryout-board,
  .lb-tryout-grid,
  .quiz-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dash-hero-top,
  .tryout-hero-top,
  .tracker-hero,
  .study-room-top,
  .quiz-header,
  .checkout-hero-actions,
  .profile-card-head {
    align-items: stretch !important;
  }

  .dash-hero-actions,
  .tryout-hero-actions,
  .tryout-card-actions,
  .tracker-hero-actions,
  .study-room-actions,
  .product-actions,
  .checkout-hero-actions,
  .checkout-submit-row,
  .profile-submit-row,
  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .dash-hero-actions > *,
  .tryout-hero-actions > *,
  .tryout-card-actions > *,
  .tracker-hero-actions > *,
  .study-room-actions > *,
  .product-actions > *,
  .checkout-hero-actions > *,
  .checkout-submit-row > *,
  .profile-submit-row > *,
  .cta-row > *,
  .main-content .btn-primary,
  .main-content .btn-ghost,
  .main-content .btn-soft {
    width: 100% !important;
    max-width: none;
  }

  .class-material-row {
    flex-direction: column;
  }

  .class-material-row .btn-primary,
  .class-material-row .btn-ghost {
    width: 100% !important;
  }

  .accordion-header {
    gap: 10px;
    padding: 14px 16px !important;
  }

  .accordion-content {
    padding-inline: 16px !important;
  }

  .tracker-nav-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .tracker-nav,
  .subtest-tabs {
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
  }

  .tracker-nav a,
  .subtest-tabs button {
    flex: 0 0 auto;
  }

  .study-room-frame iframe {
    min-height: 420px;
    height: 62vh;
  }

  .modal-card,
  .modal-card.narrow {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
}

@media (max-width: 420px) {
  .dash-kpis,
  .tracker-kpis {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .topbar {
    margin-inline: 8px;
  }

  .app-main .container {
    padding-inline: 8px;
  }

  .support-bar {
    width: calc(100% - 16px);
  }
}

/* Replace legacy text symbols with simple CSS shapes until the template icon
   markup is migrated everywhere. */
.folder-icon {
  font-size: 0 !important;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c2410c;
}

.folder-icon::before {
  content: '';
  width: 16px;
  height: 11px;
  display: block;
  border: 1.7px solid currentColor;
  border-radius: 2px;
  transform: translateY(2px);
  clip-path: polygon(0 18%, 35% 18%, 46% 0, 100% 0, 100% 100%, 0 100%);
}

.chevron {
  font-size: 0 !important;
}

.chevron::before {
  content: '';
  width: 7px;
  height: 7px;
  display: block;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

/* Dashboard rhythm and streak card containment. */
.dash-page-grid {
  gap: 24px !important;
}

.dash-main-col,
.dash-side-col {
  gap: 20px !important;
}

.dash-side-col {
  position: static !important;
  top: auto !important;
  min-width: 0;
}

.dash-hero {
  gap: 20px !important;
  padding: 24px !important;
}

.dash-kpis,
.dash-action-grid {
  gap: 16px !important;
}

.dash-kpi {
  min-height: 82px;
}

.dash-action-card {
  min-height: 168px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dash-action-card .cta-row {
  margin-top: auto !important;
  padding-top: 16px;
}

.streak-board {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  width: 100%;
  min-width: 0;
  padding: 20px !important;
}

.streak-main {
  margin-bottom: 16px !important;
  text-align: left !important;
}

.streak-flame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 0 12px !important;
  border-radius: 12px;
  background: #fff1f3;
  color: #c01048;
}

.streak-badges {
  gap: 10px !important;
  min-width: 0;
}

.streak-badge {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dash-focus {
  margin-top: 0 !important;
}

/* Spacing pass for Streak Belajar and Latihan Soal. */
.streak-board {
  margin-top: 14px !important;
}

.quiz-page {
  padding: 24px !important;
  gap: 24px !important;
}

.quiz-section {
  gap: 14px !important;
}

.quiz-section + .quiz-section {
  margin-top: 4px;
}

.quiz-list {
  gap: 16px !important;
}

.quiz-item {
  padding: 20px !important;
}

.quiz-empty,
.quiz-alert {
  margin-top: 4px;
}

@media (max-width: 768px) {
  .dash-page-grid,
  .dash-main-col,
  .dash-side-col {
    gap: 16px !important;
  }

  .dash-hero {
    padding: 18px !important;
  }

  .dash-action-grid,
  .dash-kpis {
    gap: 12px !important;
  }

  .dash-action-card {
    min-height: 0;
  }

  .streak-board {
    margin-top: 8px !important;
  }

  .quiz-page {
    padding: 16px !important;
    gap: 18px !important;
  }

  .quiz-section {
    gap: 10px !important;
  }

  .quiz-list {
    gap: 12px !important;
  }

  .quiz-item {
    padding: 16px !important;
  }
}

/* Quiz radios must keep a fixed square box. The generic form rule above
   gives every input a 44px minimum height, which turns radios into ovals. */
.quiz-package-page .quiz-mode-option input[type="radio"],
.quiz-exam-page .quiz-option input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  place-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  flex: 0 0 22px !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #98a2b3 !important;
  border-radius: 50% !important;
  background: #fff !important;
}

.quiz-package-page .quiz-mode-option input[type="radio"]::after,
.quiz-exam-page .quiz-option input[type="radio"]::after {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  transform: scale(0) !important;
  transition: transform .12s ease !important;
}

.quiz-package-page .quiz-mode-option input[type="radio"]:checked,
.quiz-exam-page .quiz-option input[type="radio"]:checked {
  border-color: var(--accent) !important;
}

.quiz-package-page .quiz-mode-option input[type="radio"]:checked::after,
.quiz-exam-page .quiz-option input[type="radio"]:checked::after {
  transform: scale(1) !important;
}