/* ============================================
   Jnanayoga Foundation Workbook (single column)
   No sidebars, no fixed panels, spacing not borders
   ============================================ */

*,
.smq-dashboard * {
  box-sizing: border-box;
}

.smq-dashboard button,
.smq-dashboard [type="button"],
.smq-dashboard [type="submit"],
.smq-app-shell button,
.smq-app-shell [type="button"],
.smq-app-shell [type="submit"] {
  font: inherit;
  line-height: 1.2;
  letter-spacing: inherit;
  text-transform: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  background-image: none;
  -webkit-appearance: none;
  appearance: none;
}

.is-hidden {
  display: none !important;
}

/* ---- Dashboard: single column, full width ---- */
.smq-dashboard.smq-workbook {
  width: 100%;
  max-width: none;
  height: 100%;;
  padding: 0;
  background: #f5f7fa;
  border: none;
  border-radius: 0;
}

/* Visual segmentation: flat color blocks */
.smq-section {
  margin-bottom: 0;
  padding: 1.1rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e8ecef;
}

.smq-section:last-child {
  border-bottom: none;
}

.smq-section-courses {
  background: #f6f9fd;
}

.smq-section-days {
  background: #f8fbff;
}

.smq-section-questions {
  background: #ffffff;
  min-height: 20rem;
}

.smq-dashboard.smq-workbook.is-days-view .smq-section-courses {
  display: none;
}

.smq-dashboard.smq-workbook.is-courses-view .smq-section-days {
  display: none;
}

.smq-section-questions.is-idle {
  display: none;
}

.smq-section-courses .smq-section-scroll,
.smq-section-days .smq-section-scroll {
  overflow: visible;
  padding: 0;
}

.smq-learning-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.72rem;
  margin-bottom: 0.95rem;
}

.smq-learning-view-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #11243d;
}

.smq-learning-view-subtitle {
  margin: 0.25rem 0 0;
  color: #5f6f86;
  font-size: 0.84rem;
  line-height: 1.45;
}

.smq-days-back-btn {
  border: 1px solid #cfdae8;
  border-radius: 999px;
  background: #ffffff;
  color: #26415f;
  padding: 0.65rem 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.smq-days-back-btn span[aria-hidden="true"] {
  font-size: 1rem;
  line-height: 1;
}

.smq-days-view-meta {
  min-width: 0;
}

/* ---- Section 1: Courses — responsive card grid ---- */
.smq-courses-row,
.smq-day-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.smq-courses-row .smq-list-item,
.smq-day-list .smq-list-item {
  width: 100%;
  min-height: 8rem;
  display: flex;
  padding: 0.9rem 0.7rem;
  border-radius: 18px;
  margin-bottom: 0px!important;
  border: 1px solid #d7e0eb;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.smq-course-groups-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.smq-course-groups-row .smq-list-item {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 1rem 1rem 0.95rem;
  border-radius: 18px;
  border: 1px solid #d9e4f1;
  background:
    radial-gradient(circle at top right, var(--smq-card-tint, rgba(59, 130, 246, 0.1)), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.96));
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
  min-height: 100%;
}

.smq-course-groups-row .smq-list-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--smq-card-accent, #3b82f6), transparent 88%);
  opacity: 0.9;
  pointer-events: none;
}

@media (min-width: 900px) {
  .smq-course-groups-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Clickable card structure */
.smq-clickable-card {
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.smq-clickable-card li{
  margin-bottom:0px;
}

.smq-clickable-card:hover:not(.is-locked) {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.smq-clickable-card:active:not(.is-locked) {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
  filter: brightness(0.985);
}

.smq-clickable-card.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.smq-card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 100%;
  text-align: center;
}

.smq-course-group-card .smq-card-content {
  align-items: stretch;
  text-align: left;
  gap: 0.65rem;
  min-height: 0;
  width: 100%;
  position: relative;
  z-index: 1;
}

.smq-course-group-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.95rem;
  width: 100%;
}

.smq-course-group-card__heading {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
}

.smq-course-group-card__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.smq-course-group-card__desc {
  margin: 0;
  color: #65748a;
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 600;
  max-width: 28ch;
}

.smq-course-group-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 0.4rem;
  min-height: 1.85rem;
  margin-top: 0.35rem;
  padding: 0.36rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--smq-card-accent, #3b82f6) 42%, #dbe7fb);
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--smq-card-accent, #3b82f6) 12%, #ffffff), color-mix(in srgb, var(--smq-card-accent, #3b82f6) 7%, #ffffff));
  color: var(--smq-card-accent, #3b82f6);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 5px 12px rgba(59, 130, 246, 0.08);
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.smq-course-group-card__cta::after {
  content: "→";
  font-size: 0.95rem;
  line-height: 1;
  color: var(--smq-card-accent, #3b82f6);
}

.smq-course-group-card__cta::after {
  content: "\2192";
  font-size: 0.95rem;
  line-height: 1;
  color: currentColor;
  transition: transform 0.16s ease;
}

.smq-course-groups-row .smq-course-group-card.smq-clickable-card:hover:not(.is-locked) .smq-course-group-card__cta {
  background: color-mix(in srgb, var(--smq-card-accent, #3b82f6) 14%, #ffffff);
  border-color: color-mix(in srgb, var(--smq-card-accent, #3b82f6) 52%, #dbe7fb);
}

.smq-course-groups-row .smq-course-group-card.smq-clickable-card:hover:not(.is-locked) .smq-course-group-card__cta::after {
  transform: translateX(2px);
}

.smq-course-groups-row .smq-course-group-card.smq-clickable-card:active:not(.is-locked) .smq-course-group-card__cta {
  transform: scale(0.98);
}

.smq-course-group-card .smq-item-title {
  font-size: 1.02rem;
  font-weight: 850;
  color: #11243d;
  line-height: 1.18;
  letter-spacing: -0.018em;
}

.smq-course-group-card .smq-status-badge {
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.4rem 0.68rem;
  border-radius: 999px;
  border: 1px solid transparent;
  letter-spacing: 0.08em;
}

.smq-course-group-card__chevron {
  color: var(--smq-card-accent, #3b82f6);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  margin-top: -0.05rem;
  transition: transform 0.2s ease;
}

.smq-course-group-card .smq-badge-available {
  background: #e8f7ef;
  color: #15724a;
  border-color: #c7ead8;
}

.smq-course-group-card .smq-badge-locked {
  background: #eef2f7;
  color: #67768a;
  border-color: #d8e0ea;
}

.smq-courses-row .smq-course-group-card.smq-clickable-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.smq-course-groups-row .smq-list-item {
  height: 100%;
}

.smq-courses-row .smq-course-group-card.is-locked {
  opacity: 0.84;
  cursor: pointer;
  --smq-card-accent: #c1c8d3;
  --smq-card-tint: rgba(148, 163, 184, 0.07);
  background:
    radial-gradient(circle at top right, rgba(148, 163, 184, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(249, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.smq-courses-row .smq-course-group-card.is-locked:hover {
  cursor: pointer;
}

.smq-courses-row .smq-course-group-card.is-active {
  border-color: #bfd0ff;
  --smq-card-accent: #3b82f6;
  --smq-card-tint: rgba(59, 130, 246, 0.08);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(255, 255, 255, 1));
  box-shadow: 0 14px 30px rgba(59, 130, 246, 0.07);
}

.smq-courses-row .smq-course-group-card.is-active:hover {
  border-color: #9fb8ff;
  box-shadow: 0 18px 36px rgba(59, 130, 246, 0.12);
}

.smq-course-groups-row .smq-list-item:nth-child(4n + 1) {
  --smq-card-accent: #3b82f6;
  --smq-card-tint: rgba(59, 130, 246, 0.08);
}

.smq-course-groups-row .smq-list-item:nth-child(4n + 2) {
  --smq-card-accent: #8b5cf6;
  --smq-card-tint: rgba(139, 92, 246, 0.08);
}

.smq-course-groups-row .smq-list-item:nth-child(4n + 3) {
  --smq-card-accent: #0f9d8d;
  --smq-card-tint: rgba(15, 157, 141, 0.08);
}

.smq-course-groups-row .smq-list-item:nth-child(4n + 4) {
  --smq-card-accent: #f59e0b;
  --smq-card-tint: rgba(245, 158, 11, 0.08);
}

.smq-course-groups-row .smq-course-group-card.smq-clickable-card:hover:not(.is-locked) {
  border-color: var(--smq-card-accent, #bfd0ff);
}

.smq-course-groups-row .smq-course-group-card.smq-clickable-card:hover:not(.is-locked) .smq-course-group-card__chevron {
  transform: translateX(2px);
}

.smq-course-groups-row .smq-course-group-card.smq-clickable-card:active:not(.is-locked) {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(243, 248, 255, 0.98), rgba(255, 255, 255, 1));
}

.smq-courses-row .smq-list-item.is-selected {
  border-color: #1a73e8;
  background: #e8f0fe;
  box-shadow: 0 14px 26px rgba(26, 115, 232, 0.14);
}

.smq-courses-row .smq-list-item.is-locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.smq-courses-row .smq-item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* Status badges */
.smq-status-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.smq-badge-start {
  background: #e8f0fe;
  color: #1a73e8;
}

.smq-badge-continue {
  background: #e6f7f6;
  color: #0d9488;
}

.smq-badge-completed {
  background: #e8f5e9;
  color: #2e7d32;
}

.smq-badge-retest {
  background: #fff4e5;
  color: #b45309;
}

.smq-badge-cooldown {
  background: #fff8e1;
  color: #8a6d1a;
}

.smq-badge-locked {
  background: #f0f0f0;
  color: #757575;
}

.smq-badge-no_questions {
  background: #f0f0f0;
  color: #757575;
}

/* ---- Section 2: Days — responsive card grid, status badges ---- */

.smq-day-list .smq-list-item.complete {
  border-color: #c8e6c9;
  background: #f1f8f4;
}

.smq-day-list .smq-list-item.has-cooldown {
  border-color: #f8d98d;
  background: #fffdf4;
}

.smq-day-list .smq-list-item.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.smq-day-list .smq-list-item.no-questions {
  border-color: #e2e8f0;
  background: #f8fafc;
}

.smq-day-list .smq-item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a1a;
}

.smq-placeholder--loading {
  padding: 1.6rem 0;
}

.smq-cooldown-timer {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #8a6d1a;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}

.smq-course-days-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #f8fafc;
  color: #334155;
}

.smq-course-days-notice--cooldown {
  border-color: #fbd38d;
  background: #fff7ed;
  color: #9a3412;
}

.smq-course-days-notice--error {
  border-color: #f5c2c7;
  background: #fef2f2;
  color: #991b1b;
}

/* ---- Section 3: Questions — full width, centered ---- */
.smq-section-questions {
  min-height: 12rem;
}

.smq-test-inner {
  max-width: 36rem;
  margin: 0 auto;
}

.smq-placeholder {
  margin: 0;
  padding: 2rem 0;
  text-align: center;
  color: #757575;
  font-size: 0.9375rem;
}

@media (min-width: 900px) {

  .smq-courses-row,
  .smq-day-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---- Test: single column, question + nav + footer ---- */
.smq-test.smq-test-single {
  width: 100%;
  padding: 0;
}

.smq-test-single .smq-timer-wrap {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}
 .smq-test-answer-timer {
    display: flex;
    flex-direction: row !important;
    justify-content: center;
    width: 100%;
  }
.smq-test-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  align-items: start;
}

/* Question panel: vertical format */
.smq-question-panel {
  width: 100%;
}

.smq-question-slide {
  padding: 0;
  height: 100%;
}

.smq-question-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  height: 100%;
}

.smq-question-type {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* Nav grid: question number pills - left column */
.smq-number-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-content: flex-start;
  max-height: 20rem;
  overflow-y: auto;
}

.smq-number-grid .smq-nav-btn {
  min-width: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #e0e0e0;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
}

.smq-number-grid .smq-nav-btn:hover {
  border-color: #bdbdbd;
  background: #f5f5f5;
}

.smq-number-grid .smq-nav-btn.active {
  border-color: #1a73e8;
  background: #fff;
  color: #1a73e8;
}

.smq-number-grid .smq-nav-btn.answered {
  background: #e8f5e9;
  border-color: #c8e6c9;
  color: #2e7d32;
}

.smq-question-slide {
  padding: 0;
}

.smq-question-type {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* Abacus / vertical math display (e.g. Subtraction 10 -5 4) */
.smq-abacus-display {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0em;
  font-weight: 600;
  font-size: 1.25rem;
  font-size: 1.25rem;
  text-align: right;
  align-items: flex-end;
}

.smq-abacus-line {
  line-height: 1.4;
  text-align: right;
}

.smq-answer-wrap {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid #e8ecef;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.smq-answer-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #495057;
  text-align: right;
}

.smq-answer {
  width: 100%;
  max-width: 12rem;
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
  box-shadow: none;
  transition: border-color 0.2s ease;
  text-align: right;
}

.smq-answer:focus {
  outline: none;
  border-color: #1a73e8;
}

.smq-mcq-answer-hint {
  font-size: 0.875rem;
  color: #6c757d;
  font-style: italic;
  padding: 0.5rem 0;
}

/* MCQ options */
.smq-mcq-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.smq-mcq-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9375rem;
  cursor: pointer;
}

.smq-mcq-label input {
  margin: 0;
}

/* Nav grid styles moved above - now in left column */

/* Footer: Previous, Next, Submit — flat, rounded, equal height */
.smq-test-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  padding-top: 1rem;
}

.smq-btn {
  min-height: 2.5rem;
  padding: 0 1.25rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
}

.smq-btn:hover {
  border-color: #bdbdbd;
  background: #f5f5f5;
}

.smq-btn-primary {
  border-color: #1a73e8 !important;
  background: #1a73e8 !important;
  color: #fff !important;
}

.smq-btn-primary:hover {
  background: #1557b0 !important;
  border-color: #1557b0 !important;
  color: #fff !important;
}

.smq-result {
  padding: 0;
  display: flex;
  justify-content: center;
}

/* Result cards */
.smq-result-card {
  width: 100%;
  max-width: 32rem;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.smq-submission-card {
  background: linear-gradient(135deg, #e8f0fe 0%, #ffffff 100%);
  border-color: #1a73e8;
}

.smq-result-title {
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}

.smq-result-meta {
  display: flex;
  justify-content: center;
  margin: -0.45rem 0 1rem;
}

.smq-result-meta-item {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.38rem 0.72rem;
  border: 1px solid #dbe6f2;
  border-radius: 999px;
  background: #f8fbff;
  color: #475569;
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: center;
}

.smq-result-meta-label {
  font-weight: 700;
  color: #1d4ed8;
}

.smq-result-meta-value {
  font-weight: 600;
}

.smq-result-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.smq-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.smq-stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.smq-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a73e8;
}

.smq-review-card .smq-stat-value {
  color: #2e7d32;
}

.smq-submission-card .smq-stat-value {
  color: #1a73e8;
}

/* Review view question display */
.smq-review .smq-result-card {
  margin-bottom: 2rem;
}

.smq-review .smq-result-card+div {
  margin-top: 1.5rem;
}

.smq-review div[style*="border:1px solid"] {
  border: 1px solid #e8ecef !important;
  padding: 1rem !important;
  margin: 0.75rem 0 !important;
  border-radius: 8px;
  background: #f8f9fa;
}

.smq-review div[style*="border:1px solid"] strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  color: #1a1a1a;
}

.smq-review div[style*="border:1px solid"] p {
  margin: 0.5rem 0 !important;
  font-size: 0.9375rem;
}

/* ---- Auth tabs: centered, symmetric, flat modern design ---- */
.smq-auth-dashboard .smq-section-auth {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 2rem 1rem;
  background: #f8f9fa;
}

.smq-auth-dashboard .smq-section-auth .smq-auth-tabs {
  background: #fff;
}

.smq-auth-tabs {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  border: none;
  border-radius: 12px;
  background: #fff;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.smq-auth-tabs * {
  box-sizing: border-box;
}

.smq-auth-tab-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border: 2px solid #d6d6d6;
}

.smq-auth-tab-btn {
  border: 2px solid #e0e0e0;
  background: #fff;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #495057;
  transition: all 0.2s ease;
  box-shadow: none;
}

.smq-auth-tab-btn:hover {
  border-color: #1a73e8;
  color: #1a73e8;
}

.smq-auth-tab-btn.is-active {
  border-color: #1a73e8;
  background: #1a73e8;
  color: #fff;
}

.smq-auth-tab-panel {
  display: none;
}

.smq-register-form input,
.smq-forgot-password-form input,
#smq-login-form input[type="text"],
#smq-login-form input[type="password"],
#smq-login-form input[type="email"],
#smq-login-form input[type="tel"] {
  width: 100%;
  max-width: 100%;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  box-sizing: border-box;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

.smq-register-form input:focus,
.smq-forgot-password-form input:focus,
#smq-login-form input[type="text"]:focus,
#smq-login-form input[type="password"]:focus,
#smq-login-form input[type="email"]:focus,
#smq-login-form input[type="tel"]:focus {
  outline: none;
  border-color: #1a73e8;
}

.smq-register-form input::placeholder,
.smq-forgot-password-form input::placeholder,
#smq-login-form input::placeholder {
  color: #adb5bd;
}

.smq-register-form label,
.smq-forgot-password-form label,
#smq-login-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: #495057;
}

.smq-register-form p,
.smq-forgot-password-form p,
#smq-login-form p {
  margin: 0rem;
}

.smq-register-form p:last-child,
.smq-forgot-password-form p:last-child,
#smq-login-form p:last-child {
  margin-bottom: 0;
  margin-top: 0.5rem;
}

.smq-register-form button,
.smq-forgot-password-form button[type="submit"],
#smq-login-form .button,
.smq-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 2.75rem !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 8px !important;
  border: 1px solid #1a73e8 !important;
  background: #1a73e8 !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease;
  box-shadow: none !important;
  background-image: none !important;
  text-shadow: none !important;
}

.smq-register-form button:hover,
.smq-forgot-password-form button[type="submit"]:hover,
#smq-login-form .button:hover,
.smq-btn-primary:hover {
  background: #1557b0 !important;
}

.smq-auth-tabs form {
  width: 100%;
  margin: 0;
}

.smq-auth-message {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
}

.smq-auth-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.smq-error {
  color: #dc3545;
  font-size: 0.875rem;
  margin: 0;
}

/* ---- Shared student page layout ---- */
.smq-student-page {
  gap: 1rem;
}

.smq-student-page .smq-section {
  background: #fff;
  border: 1px solid #e8ecef;
  border-radius: 12px;
  padding: 1.25rem;
}

.smq-student-page .smq-section+.smq-section {
  margin-top: 1rem;
}

.smq-section-summary,
.smq-section-progress,
.smq-section-profile {
  background: #fff;
}

.smq-app-logout-btn {
  padding: 1rem !important;
}

/* Message cards for pending/rejected status */
.smq-section-message {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20rem;
  padding: 2rem 1.25rem;
}

.smq-message-card {
  max-width: 32rem;
  width: 100%;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  text-align: center;
}

.smq-message-card h3 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
}

.smq-message-card p {
  margin: 0.75rem 0;
  font-size: 0.9375rem;
  color: #495057;
  line-height: 1.6;
}

.smq-message-pending {
  background: linear-gradient(135deg, #fff3cd 0%, #ffffff 100%);
  border-color: #ffc107;
}

.smq-message-pending h3 {
  color: #856404;
}

.smq-message-rejected {
  background: linear-gradient(135deg, #f8d7da 0%, #ffffff 100%);
  border-color: #dc3545;
}

.smq-message-rejected h3 {
  color: #721c24;
}

/* ---- Progress Snapshot ---- */
.smq-section-progress {
  background: #f8f9fa;
}

.smq-progress-snapshot {
  width: 100%;
}

.smq-section-title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.smq-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.smq-progress-card {
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #e8ecef;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.smq-progress-label {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.smq-progress-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a73e8;
}

/* ---- Profile Management ---- */
.smq-section-profile {
  background: #fff;
}

.smq-profile-card {
  max-width: 32rem;
  margin: 0 auto;
}

.smq-profile-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.smq-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.smq-form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
}

.smq-form-group label small {
  font-weight: 400;
  color: #6c757d;
}

.smq-form-group input {
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease;
}

.smq-form-group input:focus {
  outline: none;
  border-color: #1a73e8;
}

.smq-profile-message {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.smq-profile-message.smq-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.smq-profile-message.smq-error {
  background: #fdecea;
  color: #b42318;
  border: 1px solid #f5c2c7;
}

/* ---- Student Progress Timeline ---- */
.smq-student-progress {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: 0rem;
}

.smq-progress-header {
  margin-bottom: 2rem;
  text-align: center;
}

.smq-progress-header h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
}

.smq-total-time {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #e8f0fe;
  border-radius: 8px;
}

.smq-time-label {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.smq-time-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a73e8;
}

.smq-progress-timeline {
  position: relative;
  padding-left: 2rem;
}

.smq-progress-timeline::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

.smq-timeline-item {
  position: relative;
  margin-bottom: 2rem;
}

.smq-timeline-marker {
  position: absolute;
  left: -1.75rem;
  top: 0.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #1a73e8;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #1a73e8;
}

.smq-timeline-content {
  background: #fff;
  padding: 1.25rem;
  border-radius: 8px;
  border: 1px solid #e8ecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.smq-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e8ecef;
}

.smq-timeline-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
}

.smq-timeline-date {
  font-size: 0.75rem;
  color: #6c757d;
}

.smq-timeline-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.smq-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.smq-stat-label {
  font-size: 0.75rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.smq-stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a73e8;
}

.smq-timeline-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}

/* ---- Course accordion timeline ---- */
.smq-progress-accordions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.smq-course-accordion {
  border: 1px solid #e1e7ee;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.smq-course-accordion-head {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  font-weight: 600;
  color: #1f2937;
}

.smq-course-accordion-head::-webkit-details-marker {
  display: none;
}

.smq-course-accordion-count {
  font-size: 0.75rem;
  color: #6c757d;
  background: #f3f6fa;
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  font-weight: 600;
}

.smq-course-accordion-body {
  border-top: 1px solid #edf1f5;
  padding: 0.75rem;
}

.smq-course-accordion .smq-progress-timeline {
  padding-left: 0;
}

.smq-course-accordion .smq-progress-timeline::before,
.smq-course-accordion .smq-timeline-marker {
  display: none;
}

.smq-course-accordion .smq-timeline-item {
  margin-bottom: 0.75rem;
}

.smq-course-accordion .smq-timeline-item:last-child {
  margin-bottom: 0;
}

/* ---- Student Summary ---- */
.smq-student-summary {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.smq-student-summary h2 {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}

.smq-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.smq-summary-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #e8ecef;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.smq-summary-label {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.smq-summary-value {
  font-size: 2rem;
  font-weight: 700;
  color: #1a73e8;
  margin-bottom: 0.25rem;
}

.smq-summary-sublabel {
  font-size: 0.75rem;
  color: #adb5bd;
}

/* ---- Achievements ---- */
.smq-achievements-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e8ecef;
}

.smq-achievements-section h3 {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}

.smq-achievements-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.smq-achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #fff;
  border-radius: 12px;
  border: 2px solid #e8ecef;
  min-width: 120px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.smq-achievement-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.smq-badge-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.smq-badge-icon .dashicons {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
  line-height: 1;
}

.smq-badge-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
}

.smq-achievement-badge.achievement-first {
  border-color: #ffc107;
  background: #fffbf0;
}

.smq-achievement-badge.achievement-perfect {
  border-color: #ffd700;
  background: #fffef5;
}

.smq-achievement-badge.achievement-consistency {
  border-color: #ff6b6b;
  background: #fff5f5;
}

/* ---- App tabs ---- */
.smq-app-shell {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f4f6f8;
  overflow: hidden;
}

.smq-app-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  background: #ffffff;
  border-bottom: 1px solid #e8ecef;
}

.smq-app-logo {
  min-width: 0;
  min-height: 2.5rem;
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.smq-app-logo img {
  display: block;
  width: 150px !important;
  height: 100%;
  max-width: min(10.5rem, 48vw);
  object-fit: contain;
}

.smq-app-utility-btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  background: #f8fbff;
  color: #1a73e8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
}

.smq-app-utility-btn:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

.smq-app-install-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin: 4.45rem 0.5rem 0.2rem;
  padding: 0.72rem 0.84rem;
  border: 1px solid #d7e4f7;
  border-radius: 16px;
  background: #eef5ff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
}

.smq-app-install-banner[hidden] {
  display: none !important;
}

.smq-app-install-banner__copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.smq-app-install-banner__copy strong {
  color: #1d4ed8;
  font-size: 0.88rem;
  line-height: 1.2;
}

.smq-app-install-banner__copy span {
  color: #475569;
  font-size: 0.75rem;
  line-height: 1.35;
}

.smq-app-install-banner__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.smq-app-install-action,
.smq-app-install-dismiss {
  min-height: 2.1rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid #c9d7ea;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.smq-app-install-action {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
}

.smq-app-install-dismiss {
  background: #ffffff;
  color: #475569;
}

.smq-app-panels {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4.5rem 0.5rem 6rem;
}

.smq-app-tab-panel {
  display: none;
  min-height: calc(100vh - 10rem);
}

.smq-app-tab-panel.is-active {
  display: block;
}

.smq-app-install-banner:not([hidden])+.smq-app-panels {
  padding-top: 0.5rem;
}

.smq-app-tab-panel>.smq-dashboard,
.smq-app-tab-panel>.smq-student-page {
  margin: 0;
}

.smq-app-tab-panel .smq-section,
.smq-app-links-screen {
  background: transparent;
  padding: 0.8rem 0rem;
}

.smq-app-links-screen {
  display: grid;
  gap: 1rem;
}

.smq-app-links-group {
  display: grid;
  gap: 0.8rem;
  padding: 0.9rem;
  border: 1px solid #dde4ee;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.smq-app-links-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.smq-app-links-group__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: #10233f;
}

.smq-app-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  background: #ffffff;
  border-top: 1px solid #e8ecef;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0rem;
}

.smq-app-tab-btn {
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 0.2rem 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: #6c757d;
  cursor: pointer;
}

.smq-app-tab-btn.is-active {
  background: #eef4ff;
  color: #1a73e8;
}

.smq-app-tab-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 0px;
  padding: 0.08rem;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.smq-app-tab-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
}

.smq-app-tab-label {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
}

.smq-app-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.smq-app-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 0.75rem;
  gap: 0.65rem;
  min-height: 6.4rem;
  border: 1px solid #dbe3ec;
  border-radius: 16px;
  background: #f8fbff;
  text-decoration: none;
  color: #1f2937;
  font-weight: 600;
  text-align: center;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.smq-app-link-card:hover,
.smq-app-link-card:focus-visible {
  border-color: #bfd3f5;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(26, 115, 232, 0.12);
  transform: translateY(-1px);
}

.smq-app-shell .smq-app-link-icon {
  --smq-link-icon-glyph-size: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  background: #edf4ff;
  color: #1a73e8;
  box-sizing: border-box;
}

.smq-app-shell .smq-app-link-icon>.dashicons {
  width: var(--smq-link-icon-glyph-size);
  height: var(--smq-link-icon-glyph-size);
  line-height: var(--smq-link-icon-glyph-size);
  font-size: var(--smq-link-icon-glyph-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.smq-app-shell .smq-app-link-icon>svg {
  width: var(--smq-link-icon-glyph-size);
  height: var(--smq-link-icon-glyph-size);
  flex: 0 0 var(--smq-link-icon-glyph-size);
  display: block;
  fill: currentColor;
}

.smq-app-shell .smq-app-link-icon--website {
  background: #eaf2ff;
  color: #2f78e8;
}

.smq-app-shell .smq-app-link-icon--about {
  background: #eef3ff;
  color: #4664d9;
}

.smq-app-shell .smq-app-link-icon--courses {
  background: #eaf3ff;
  color: #245fbc;
}

.smq-app-shell .smq-app-link-icon--memory,
.smq-app-shell .smq-app-link-icon--mind {
  background: #f1ecff;
  color: #6f42c1;
}

.smq-app-shell .smq-app-link-icon--handwriting {
  background: #eef7ff;
  color: #2b6cb0;
}

.smq-app-shell .smq-app-link-icon--abacus {
  background: #e8f6ff;
  color: #0c7dbb;
}

.smq-app-shell .smq-app-link-icon--competition {
  background: #fff5de;
  color: #c98308;
}

.smq-app-shell .smq-app-link-icon--gallery {
  background: #fff2f7;
  color: #c23b7c;
}

.smq-app-shell .smq-app-link-icon--contact {
  background: #ecf6ff;
  color: #1f6eb8;
}

.smq-app-shell .smq-app-link-icon--enroll {
  background: #edf7f2;
  color: #1f8b4c;
}

.smq-app-shell .smq-app-link-icon--whatsapp {
  background: #e8faef;
  color: #25d366;
}

.smq-app-shell .smq-app-link-icon--facebook {
  background: #ebf2ff;
  color: #1877f2;
}

.smq-app-shell .smq-app-link-icon--instagram {
  background: #fff0f6;
  color: #e1306c;
}

.smq-app-shell .smq-app-link-icon--youtube {
  background: #ffefef;
  color: #ff0033;
}

.smq-app-utility-btn .dashicons {
  width: auto;
  height: auto;
  line-height: 1;
  font-size: 1.2rem;
}

.smq-app-link-label {
  font-size: 0.83rem;
  line-height: 1.35;
}

.smq-app-profile-actions {
  margin-top: 0.75rem;
  padding: 0.5rem 0.25rem 0;
  justify-self: center;
}

.smq-app-logout-btn {
  width: 100px;
  border: 1px solid #f0c2c7;
  background: #fff5f6;
  color: #b42334;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  margin: auto;
  max-width: 100%;
}

/* ---- Responsive: same structure on desktop and mobile ---- */
@media (max-width: 640px) {
  .smq-section {
    padding: 1rem 0.75rem;
  }

  .smq-learning-view-head {
    flex-direction: column;
    align-items: stretch;
  }

  .smq-days-back-btn {
    justify-content: center;
  }

  .smq-result-stats {
    grid-template-columns: 1fr;
  }

  .smq-message-card {
    padding: 1.5rem;
  }

  .smq-progress-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .smq-app-links-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .smq-app-link-card {
    min-height: 5.4rem;
    padding: 0.7rem 0.45rem;
    gap: 0.45rem;
  }

  .smq-app-shell .smq-app-link-icon {
    --smq-link-icon-glyph-size: 1.5rem;
    width: 2.2rem;
    height: 2.2rem;
    flex-basis: 2.2rem;
  }

  .smq-app-link-label {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .smq-timeline-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .smq-summary-cards {
    grid-template-columns: 1fr;
  }

  .smq-progress-timeline {
    padding-left: 1.5rem;
  }

  .smq-timeline-marker {
    left: -1.25rem;
  }
}

@media (max-width: 640px) {

  /* Stack question layout vertically on mobile */
  .smq-test-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .smq-number-grid {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
    justify-content: center;
    overflow-y: visible;
  }

  .smq-number-grid .smq-nav-btn {
    min-width: 2.25rem;
    width: auto;
    padding: 0 0.5rem;
  }

  .smq-test-footer {
    flex-direction: row;
    justify-content: center;
  }

  .smq-btn {
    flex: 1;
    min-width: 0;
  }
}

/* Review UI Styles */
.smq-review-section {
  padding-top: 1.5rem;
}

.smq-review-section h3 {
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 1.25rem;
  color: #1a1a1a;
}

.smq-review-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.smq-review-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.25rem;
}

.smq-review-q-num {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.smq-review-text {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.smq-review-abacus-hint {
  font-family: monospace;
  background: #f8f9fa;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.smq-review-result-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.smq-review-answer {
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid transparent;
}

.smq-review-answer .smq-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.25rem;
  opacity: 0.8;
}

.smq-review-answer .smq-val {
  font-size: 1rem;
  font-weight: 700;
}

/* Correct Answer (Student) - Green */
.smq-review-answer.is-correct {
  background: #e6f4ea;
  border-color: #ceead6;
  color: #1e8e3e;
}

/* Wrong Answer (Student) - Red */
.smq-review-answer.is-wrong {
  background: #fce8e6;
  border-color: #fad2cf;
  color: #d93025;
}

/* Correct Reference (When student is wrong) - Green */
.smq-review-answer.is-correct-ref {
  background: #e6f4ea;
  border-color: #ceead6;
  color: #1e8e3e;
}

/* ==========================================================
   Quiz Interface Refresh (UI only)
   ========================================================== */
.smq-dashboard {
  --smq-primary: #3059d8;
  --smq-primary-soft: #edf2ff;
  --smq-success: #1f8b4c;
  --smq-success-soft: #eaf8ef;
  --smq-danger: #c0392b;
  --smq-danger-soft: #fdeeed;
  --smq-muted: #6b7280;
  --smq-neutral-bg: #f6f8fc;
  --smq-card-bg: #ffffff;
  --smq-border: #e2e8f0;
  --smq-radius: 12px;
  --smq-transition: all 0.2s ease;
}

.smq-test.smq-test-single,
.smq-test.smq-review,
.smq-result {
  font-family: "Manrope", "Segoe UI Variable", "Segoe UI", sans-serif;
}

.smq-test-inner {
  max-width: 64rem;
}

.smq-test.smq-test-single {
  max-width: 58rem;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 1.75rem);
}

.smq-test-single{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #d4dcf0;
  background: #f5f7fd;
  color: #334155;
}
 .smq-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 105px;
  gap: 0.4rem; 
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #d4dcf0;
  background: #f5f7fd;
  color: #334155;
}

.smq-test-layout {
  grid-template-columns: minmax(72px, 84px) 1fr;
  gap: 1.5rem;
}

.smq-number-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
  max-height: 30rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.smq-number-grid .smq-nav-btn {
  width: 100%;
  min-width: 0;
  font-weight: bold;
  height: 2.35rem;
  border-radius: 10px;
  border-color: var(--smq-border);
  color: #334155;
  transition: var(--smq-transition);
}

.smq-number-grid .smq-nav-btn:hover {
  border-color: #c5d2f8;
  background: #f7f9ff;
}

.smq-number-grid .smq-nav-btn.active {
  border-color: var(--smq-primary);
  color: var(--smq-primary);
  background: var(--smq-primary-soft);
}

.smq-number-grid .smq-nav-btn.answered {
  border-color: #ddd;
  color: #abb3bc;
  background: #f8f9fa;
  font-weight: normal;
}

.smq-question-panel {
  border: 1px solid var(--smq-border);
  border-radius: var(--smq-radius);
  padding: clamp(1rem, 2vw, 1.4rem);
  background: var(--smq-neutral-bg);
}

.smq-question-type {
  margin: 0 0 0.85rem;
  font-size: 1.08rem;
  line-height: 1.5;
  color: #0f172a;
}

.smq-mcq-options {
  display: grid;
  gap: 0.75rem;
}

.smq-mcq-label {
  gap: 0.7rem;
  padding: 0.82rem 0.95rem;
  border: 1px solid var(--smq-border);
  border-radius: 12px;
  background: #fff;
  transition: var(--smq-transition);
}

.smq-mcq-label:hover {
  border-color: #cad5f8;
  background: #f7f9ff;
}

.smq-mcq-label input {
  margin-top: 0.1rem;
  accent-color: var(--smq-primary);
}

.smq-mcq-label:has(input:checked) {
  border-color: var(--smq-primary);
  background: var(--smq-primary-soft);
  box-shadow: 0 0 0 3px rgba(48, 89, 216, 0.12);
}

.smq-answer-wrap {
  border-top: 1px solid var(--smq-border);
  padding-top: 1.1rem;
}

.smq-answer {
  border-color: #d6dce9;
  border-radius: 12px;
  caret-color: transparent;
  cursor: pointer;
}

.smq-answer:focus {
  border-color: var(--smq-primary);
  box-shadow: 0 0 0 3px rgba(48, 89, 216, 0.12);
}

.smq-answer[readonly] {
  user-select: none;
  -webkit-user-select: none;
}

.smq-test-footer {
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
}

.smq-test-single .smq-btn {
  width: auto;
  min-width: 7.25rem;
  min-height: 2.65rem;
  border-radius: 12px;
  border-color: var(--smq-border);
  color: #1f2937;
  transition: var(--smq-transition);
}

.smq-test-single .smq-btn:hover {
  border-color: #c5d2f8;
  background: #f7f9ff;
}

.smq-test-single .smq-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.smq-test-single .smq-test-footer .smq-btn-primary {
  width: auto;
  border-color: var(--smq-primary);
  background: var(--smq-primary);
  color: #fff;
}

.smq-test-single .smq-test-footer .smq-btn-primary:hover {
  border-color: #2647af;
  background: #2647af;
}

.smq-result {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.1rem;
}

.smq-result-card {
  max-width: none;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--smq-border);
  border-radius: 14px;
  background: #fff;
}

.smq-submission-card {
  background: #fff;
  border-color: #d8e2ff;
}

.smq-review-card {
  background: #fbfcff;
  border-color: #d9e2f4;
}

.smq-review-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 0.75rem;
}

.smq-review-back-btn {
  width: auto;
  min-height: 2.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
}

.smq-result-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
}

.smq-result-title::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.smq-submission-card .smq-result-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233059d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M6 21h12'/%3E%3Cpath d='M9 14l3 2 3-2'/%3E%3C/svg%3E");
}

.smq-review-card .smq-result-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233059d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Crect x='6' y='10' width='3' height='6'/%3E%3Crect x='11' y='7' width='3' height='9'/%3E%3Crect x='16' y='4' width='3' height='12'/%3E%3C/svg%3E");
}

.smq-review-card .smq-result-stats {
  border-top: 1px solid var(--smq-border);
  padding-top: 1rem;
}

.smq-result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.72rem;
}

.smq-stat-item {
  min-height: 6.6rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--smq-border);
  border-radius: 12px;
  background: var(--smq-neutral-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  align-items: flex-start;
  gap: 0.15rem;
}

.smq-stat-item::before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-bottom: 0.35rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.smq-stat-score::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233059d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M8 7h5a3 3 0 0 1 0 6H10a3 3 0 0 0 0 6h6'/%3E%3C/svg%3E");
}

.smq-stat-accuracy::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233059d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 12l4-4'/%3E%3Cpath d='M12 12h6'/%3E%3C/svg%3E");
}

.smq-stat-correct::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8b4c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E");
}

.smq-stat-wrong::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12'/%3E%3Cpath d='m18 6-12 12'/%3E%3C/svg%3E");
}

.smq-stat-time::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233059d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l3 2'/%3E%3Cpath d='M9 3h6'/%3E%3C/svg%3E");
}

.smq-review-card .smq-stat-item:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233059d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M8 7h5a3 3 0 0 1 0 6H10a3 3 0 0 0 0 6h6'/%3E%3C/svg%3E");
}

.smq-review-card .smq-stat-item:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8b4c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E");
}

.smq-review-card .smq-stat-item:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233059d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l3 2'/%3E%3Cpath d='M9 3h6'/%3E%3C/svg%3E");
}

.smq-stat-label {
  order: 3;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--smq-muted);
}

.smq-stat-value {
  order: 2;
  font-size: 1.45rem;
  line-height: 1.15;
  color: #0f172a;
}

.smq-stat-score .smq-stat-value,
.smq-stat-accuracy .smq-stat-value,
.smq-stat-time .smq-stat-value {
  color: var(--smq-primary);
}

.smq-stat-correct .smq-stat-value {
  color: var(--smq-success);
}

.smq-stat-wrong .smq-stat-value {
  color: var(--smq-danger);
}



.smq-review-title,
.smq-review-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}

.smq-review-title::before,
.smq-review-section h3::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233059d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11h6'/%3E%3Cpath d='M9 15h4'/%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3C/svg%3E");
}

.smq-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.72rem;
}

.smq-review-item {
  min-height: 8.8rem;
  padding: 0.75rem;
  border: 1px solid var(--smq-border);
  border-radius: 12px;
  background: var(--smq-neutral-bg);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: var(--smq-transition);
}

.smq-review-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
}

.smq-review-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.smq-review-q-num {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #334155;
}

.smq-review-state {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.15rem 0.4rem;
  line-height: 1;
}

.smq-review-state::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.smq-review-item.is-correct {
  border-color: rgba(31, 139, 76, 0.35);
}

.smq-review-item.is-correct .smq-review-state {
  color: var(--smq-success);
  border-color: rgba(31, 139, 76, 0.28);
  background: var(--smq-success-soft);
}

.smq-review-item.is-correct .smq-review-state::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8b4c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E");
}

.smq-review-item.is-wrong {
  border-color: rgba(192, 57, 43, 0.35);
}

.smq-review-item.is-wrong .smq-review-state {
  color: var(--smq-danger);
  border-color: rgba(192, 57, 43, 0.28);
  background: var(--smq-danger-soft);
}

.smq-review-item.is-wrong .smq-review-state::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12'/%3E%3Cpath d='m18 6-12 12'/%3E%3C/svg%3E");
}

.smq-review-item.is-skipped {
  border-color: rgba(100, 116, 139, 0.38);
}

.smq-review-item.is-skipped .smq-review-state {
  color: #475569;
  border-color: rgba(100, 116, 139, 0.28);
  background: #eef2f7;
}

.smq-review-item.is-skipped .smq-review-state::before {
  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.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.smq-review-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 600;
  color: #0f172a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.smq-review-abacus-hint {
  margin: 0;
  display: inline-flex;
  width: fit-content;
  padding: 0.18rem 0.42rem;
  border-radius: 8px;
  border: 1px solid #dae2ee;
  background: #eef2f7;
  color: #475569;
  font-size: 0.68rem;
}

.smq-review-meta {
  margin-top: auto;
  display: grid;
  gap: 0.3rem;
}

.smq-review-meta-item {
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.3;
  padding: 0.25rem 0.38rem;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smq-review-meta-item.smq-correct-answer {
  border-color: rgba(31, 139, 76, 0.28);
  color: var(--smq-success);
}

.smq-test.smq-review {
  max-width: 58rem;
  margin: 0 auto;
}

.smq-test-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  justify-content: stretch;
  align-items: stretch;
  padding: 0.8rem 0rem;
}

/* Legacy review markup fallback (no logic changes) */
.smq-test.smq-review>div[style*="border:1px solid"] {
  min-height: 8.8rem;
  padding: 0.72rem !important;
  margin: 0 !important;
  border: 1px solid var(--smq-border) !important;
  border-radius: 12px;
  background: var(--smq-neutral-bg) !important;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.smq-test.smq-review>div[style*="border:1px solid"] strong {
  font-size: 0.72rem;
  line-height: 1.2;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.smq-test.smq-review>div[style*="border:1px solid"] strong::before {
  content: "";
  width: 0.72rem;
  height: 0.72rem;
  flex: 0 0 0.72rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.smq-test.smq-review>div[style*="border:1px solid"]:not(:has(p[style*="#c0392b"])) {
  border-color: rgba(31, 139, 76, 0.35) !important;
}

.smq-test.smq-review>div[style*="border:1px solid"]:not(:has(p[style*="#c0392b"])) strong::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8b4c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E");
}

.smq-test.smq-review>div[style*="border:1px solid"]:has(p[style*="#c0392b"]):not( :has(.smq-not-answered)) {
  border-color: rgba(192, 57, 43, 0.35) !important;
}

.smq-test.smq-review>div[style*="border:1px solid"]:has(p[style*="#c0392b"]):not( :has(.smq-not-answered)) strong::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12'/%3E%3Cpath d='m18 6-12 12'/%3E%3C/svg%3E");
}

.smq-test.smq-review>div[style*="border:1px solid"]:has(.smq-not-answered) {
  border-color: rgba(100, 116, 139, 0.38) !important;
}

.smq-test.smq-review>div[style*="border:1px solid"]:has(.smq-not-answered) strong::before {
  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.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.smq-test.smq-review>div[style*="border:1px solid"]>p {
  margin: 0.1rem 0 !important;
}

.smq-test.smq-review>div[style*="border:1px solid"]>p:first-of-type {
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 600;
  color: #0f172a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.smq-test.smq-review>div[style*="border:1px solid"]>p[style*="color:"] {
  margin-top: auto !important;
  font-size: 0.66rem;
  line-height: 1.3;
  padding: 0.22rem 0.36rem;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smq-test.smq-review>div[style*="border:1px solid"]>p[style*="color:"] strong {
  display: none;
}

@media (min-width: 641px) {
  .smq-test.smq-review {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.72rem;
  }

  .smq-test.smq-review>.smq-result-card.smq-review-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .smq-test-layout {
    grid-template-columns: 1fr;
  }

  .smq-number-grid {
    grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr));
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .smq-number-grid .smq-nav-btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .smq-test.smq-test-single {
    padding: 0.85rem;
  }

  .smq-question-panel {
    padding: 0.85rem;
  }

  .smq-test-footer {
    justify-content: center;
  }

  .smq-test-single .smq-btn {
    flex: 1 1 auto;
    min-width: 0;
  }

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

  .smq-review-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  }
}

/* ==========================================================
   Mobile-First Quiz UI Refinement
   ========================================================== */
.smq-dashboard {
  --smq-ui-surface: #ffffff;
  --smq-ui-surface-soft: #f7f9fc;
  --smq-ui-border: #dbe3ef;
  --smq-ui-radius: 12px;
  --smq-ui-radius-sm: 10px;
  --smq-ui-primary: #3059d8;
  --smq-ui-success: #1f8b4c;
  --smq-ui-danger: #c0392b;
  --smq-ui-muted: #64748b;
}

.smq-test.smq-test-single,
.smq-test.smq-review,
.smq-result-card {
  min-width: 0;
}

.smq-test.smq-test-single.is-quiz-focus-mode {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: space-between;
  flex-wrap: nowrap;
  height: 100%;
}

/* Test Interface */
.smq-test.smq-test-single {
  max-width: 680px;
  margin: 0 auto;
  padding: 0.8rem;
}

.smq-test-single .smq-timer-wrap {
  margin-bottom: 0.65rem;
  padding: 0.34rem 0.6rem;
  border: 1px solid var(--smq-ui-border);
  border-radius: 999px;
  background: var(--smq-ui-surface-soft);
  font-size: 0.76rem;
}

.smq-test-single .smq-test-layout {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}

.smq-test-single .smq-number-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  max-height: none;
  overflow: visible;
  padding-right: 0;
  justify-content: stretch;
  justify-items: stretch;
  align-items: stretch;
  align-content: stretch;
}

.smq-test-single .smq-number-grid .smq-nav-btn {
  width: 100%;
  height: 2rem;
  min-width: 0;
  border-radius: 4px;
  font-size: 0.74rem;
}

.smq-test-single .smq-question-panel {
  border: 1px solid var(--smq-ui-border);
  border-radius: var(--smq-ui-radius);
  padding: 0.7rem;
  background: #ffffff;
  height: 100%;
}

.smq-test-single .smq-question-content {
  gap: 0.65rem;
}

.smq-test-single .smq-question-type {
  margin: 0;
  border: 1px solid var(--smq-ui-border);
  border-radius: var(--smq-ui-radius-sm);
  background: #f2f6ff;
  padding: 0.62rem 0.7rem;
  font-size: 0.89rem;
  line-height: 1.35;
}

.smq-question-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.smq-expression-prompt {
  border: 1px solid var(--smq-ui-border);
  border-radius: var(--smq-ui-radius-sm);
  background: #ffffff;
  padding: 0.78rem 0.82rem;
  color: #10233b;
  font-size: 1rem;
  font-weight: 700;
}

.smq-expression-operands {
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.24rem;
}

.smq-expression-equals {
  color: #52657a;
}

.smq-expression-term,
.smq-expression-word,
.smq-expression-operator,
.smq-expression-equals {
  display: inline-flex;
  align-items: center;
}

.smq-expression-operator {
  color: #173451;
  font-size: 1.08em;
  font-weight: 700;
  line-height: 1;
}

.smq-expression-operator.is-division {
  font-size: 1.22em;
  font-weight: 800;
  transform: translateY(-0.01em);
}

.smq-expression-word {
  color: #52657a;
  font-weight: 700;
}

.smq-list-prompt {
  font-size: 0.92rem;
  font-weight: 600;
}

.smq-bodmas-prompt {
  line-height: 1.45;
  white-space: normal;
}

.smq-expression-label {
  color: #52657a;
}

.smq-test-single .smq-mcq-options {
  gap: 0.45rem;
}

.smq-test-single .smq-mcq-label {
  border: 1px solid var(--smq-ui-border);
  border-radius: var(--smq-ui-radius-sm);
  padding: 0.58rem 0.68rem;
  background: var(--smq-ui-surface);
  font-size: 0.84rem;
  transition: all 0.2s ease;
}

.smq-test-single .smq-mcq-label:hover {
  border-color: #c5d3f7;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

.smq-test-single .smq-mcq-label input {
  margin-top: 0.1rem;
}

.smq-test-single .smq-mcq-label:has(input:checked) {
  border-color: var(--smq-ui-primary);
  background: #edf2ff;
}

.smq-test-single .smq-answer-wrap {
  padding-top: 0.7rem;
}

.smq-test-single .smq-answer {
  max-width: 100%;
  padding: 0.64rem 0.7rem;
  border-radius: var(--smq-ui-radius-sm);
  font-size: 0.9rem;
}

.smq-test-single .smq-test-footer {
  display: flex;
  gap: 0.5rem;
  flex-direction: row;
  flex-wrap: nowrap;
}

.smq-test-single .smq-btn {
  min-width: 0;
  min-height: 2.3rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem;
  border-radius: var(--smq-ui-radius-sm);
}

/* Review Summary */
.smq-result-card.smq-review-card {
  padding: 0.8rem;
  border-radius: var(--smq-ui-radius);
  border: 1px solid var(--smq-ui-border);
  background: var(--smq-ui-surface);
}

.smq-result-card.smq-review-card .smq-result-title {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  gap: 0.4rem;
}

.smq-result-card .smq-result-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.smq-result-card .smq-stat-item {
  min-height: 4.45rem;
  padding: 0.5rem 0.52rem;
  border-radius: var(--smq-ui-radius-sm);
  border: 1px solid var(--smq-ui-border);
  background: #f8faff;
  box-shadow: none;
}

.smq-result-card .smq-stat-label {
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  margin: 0;
}

.smq-result-card .smq-stat-value {
  font-size: 1rem;
  line-height: 1.15;
}

/* Review Card Grid */
.smq-test.smq-review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
  align-items: stretch;
}

.smq-test.smq-review>.smq-result-card.smq-review-card {
  grid-column: 1 / -1;
  margin: 0 0 0.08rem;
}

.smq-test.smq-review {
  counter-reset: smq-review-question;
}

.smq-review div[style*="border:1px solid"] {
  counter-increment: smq-review-question;
  margin: 0 !important;
  padding: 0.58rem !important;
  border: 1px solid var(--smq-ui-border) !important;
  border-radius: var(--smq-ui-radius);
  background: var(--smq-ui-surface) !important;
  display: flex;
  row-gap: 0.35rem;
  flex-direction: column;
}

.smq-review div[style*="border:1px solid"]>strong {
  margin: 0;
  font-size: 0;
  line-height: 0;
  align-self: start;
}

.smq-review div[style*="border:1px solid"]>strong::before {
  content: "#" counter(smq-review-question);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.26rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: #edf2ff;
  color: var(--smq-ui-primary);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.smq-review div[style*="border:1px solid"]>p:first-of-type {
  margin: 0 !important;
  padding: 0.32rem 0.45rem;
  border-radius: 8px;
  background: #f7f9fd;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0f172a;
}

.smq-review .smq-abacus-display {
  margin: 0.05rem 0 0.02rem !important;
  padding: 0.38rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--smq-ui-border);
  background: #fafcff;
  gap: 0.14rem;
  flex: 1;
}

.smq-review div[style*="border:1px solid"]>p:nth-of-type(n + 2) {
  grid-column: 1 / -1;
  margin: 0 !important;
  padding: 0.28rem 0.4rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: grid;
  grid-template-columns: 5.1rem 1fr;
  align-items: start;
  gap: 0.38rem;
  font-size: 0.68rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.smq-review div[style*="border:1px solid"]>p:nth-of-type(3) {
  color: var(--smq-ui-success) !important;
  border-color: #cfe7d7;
  background: #eefaf2;
}

.smq-review div[style*="border:1px solid"]>p:nth-of-type(n + 2) strong {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--smq-ui-muted);
  line-height: 1.35;
}

.smq-review .smq-not-answered {
  color: var(--smq-ui-danger) !important;
  font-weight: 700;
}

/* Modal */
.smq-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0.9rem;
}

.smq-confirm-modal.is-open {
  display: flex;
}

.smq-confirm-overlay {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.48);
  cursor: pointer;
}

.smq-confirm-dialog {
  position: relative;
  width: min(100%, 320px);
  border-radius: 8px;
  border: 1px solid var(--smq-ui-border);
  background: #fff;
  padding: 12px;
  transform: translateY(16px);
  opacity: 0;
  transition: all 0.2s ease;
}

.smq-confirm-modal.is-open .smq-confirm-dialog {
  transform: translateY(0);
  opacity: 1;
}

.smq-confirm-title {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  line-height: 1.25;
  color: #0f172a;
}

.smq-confirm-message {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #334155;
}

.smq-confirm-actions {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.smq-confirm-modal.is-alert .smq-confirm-actions {
  grid-template-columns: 1fr;
}

.smq-confirm-actions .smq-btn {
  min-height: 2.2rem;
  padding: 0.4rem 0.6rem;
  width: 100%;
  border-radius: 4px;
}

@media (min-width: 700px) {
  .smq-test.smq-test-single {
    padding: 1rem;
  }

  .smq-test-grid {
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns on desktop */
  }

  .smq-test-single .smq-number-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .smq-test-single .smq-btn {
    font-size: 0.82rem;
  }
}

@media (min-width: 860px) {
  .smq-test-single .smq-test-layout {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0.9rem;
  }

  .smq-test-single .smq-number-grid {
    grid-template-columns: 1fr;
    max-height: 21rem;
    overflow-y: auto;
  }
}

@media (min-width: 980px) {
  .smq-test.smq-review {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (min-width: 640px) {
  .smq-confirm-modal {
    align-items: center;
  }
}

/* Progress/resume states */
.smq-number-grid .smq-nav-btn.unanswered {
  border-color: rgba(192, 57, 43, 0.45);
  background: #fff5f4;
  color: #c0392b;
}

.smq-number-grid .smq-nav-btn.unanswered.active {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16);
}

.smq-number-grid .smq-nav-btn.answered.active {
  border-color: var(--smq-primary);
  color: var(--smq-primary);
  background: var(--smq-primary-soft);
  font-weight: 600;
}

/* Ensure full abacus hint text is visible */
.smq-review-abacus-hint {
  display: block;
  width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* Show complete question text in review cards */
.smq-review-text {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
  white-space: normal;
}

.smq-review-item .smq-abacus-display {
  margin: 0.2rem 0 0;
  padding: 0.38rem 0.48rem;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  align-items: flex-end;
  gap: 0.14rem;
  font-size: 0.78rem;
}

.smq-review-options {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.24rem;
}

.smq-review-option {
  padding: 0.24rem 0.38rem;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 0.7rem;
  line-height: 1.3;
}

.smq-review-option.is-correct-option {
  border-color: rgba(31, 139, 76, 0.34);
  background: #eefaf2;
  color: #1f8b4c;
}

.smq-review-option.is-chosen-option {
  border-color: rgba(192, 57, 43, 0.34);
  background: #fff4f3;
  color: #c0392b;
}

/* ==========================================================
   Student Metrics Refresh (No Shadow)
   ========================================================== */
.smq-dashboard {
  --smq-metric-primary: #0f4f8c;
  --smq-metric-accent: #1f8b4c;
  --smq-metric-warn: #b7791f;
  --smq-metric-text: #17324d;
  --smq-metric-muted: #5f7286;
  --smq-metric-border: #d4dfeb;
  --smq-metric-surface: #f7fafd;
  --smq-metric-surface-2: #eef4fa;
  --smq-metric-radius: 12px;
}

.smq-section-progress .smq-student-progress,
.smq-section-summary .smq-student-summary,
.smq-section-profile .smq-profile-card {
  max-width: 72rem;

  box-shadow: none !important;
}

.smq-timeline-marker {
  box-shadow: none !important;
  border-color: #eaf1f8;
}

.smq-timeline-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  border: 1px solid var(--smq-metric-border);
  border-radius: var(--smq-metric-radius);
  background: var(--smq-metric-surface);
  box-shadow: none !important;
  padding: 0.75rem;
}

.smq-timeline-header {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 0 0.55rem;
  border-bottom: 1px solid var(--smq-metric-border);
}

.smq-timeline-header h4 {
  color: var(--smq-metric-text);
  font-size: 0.94rem;
}

.smq-timeline-date {
  color: var(--smq-metric-muted);
}

.smq-timeline-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.smq-timeline-stats .smq-stat {
  min-height: 4.75rem;
  border: 1px solid var(--smq-metric-border);
  border-radius: var(--smq-metric-radius);
  background: var(--smq-metric-surface-2);
  padding: 0.45rem 0.4rem;
  box-shadow: none !important;
}

.smq-timeline-stats .smq-stat-label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  color: var(--smq-metric-muted);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.smq-timeline-stats .smq-stat-label::before {
  content: "";
  width: 0.78rem;
  height: 0.78rem;
  flex: 0 0 0.78rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.smq-timeline-stats .smq-stat:nth-child(1) .smq-stat-label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M8 7h5a3 3 0 0 1 0 6H10a3 3 0 0 0 0 6h6'/%3E%3C/svg%3E");
}

.smq-timeline-stats .smq-stat:nth-child(2) .smq-stat-label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8b4c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E");
}

.smq-timeline-stats .smq-stat:nth-child(3) .smq-stat-label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7791f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l3 2'/%3E%3Cpath d='M9 3h6'/%3E%3C/svg%3E");
}

.smq-timeline-stats .smq-stat-value {
  font-size: 1.02rem;
  line-height: 1.2;
}

.smq-timeline-stats .smq-stat:nth-child(1) .smq-stat-value {
  color: var(--smq-metric-primary);
}

.smq-timeline-stats .smq-stat:nth-child(2) .smq-stat-value {
  color: var(--smq-metric-accent);
}

.smq-timeline-stats .smq-stat:nth-child(3) .smq-stat-value {
  color: var(--smq-metric-warn);
}

.smq-student-summary {
  box-shadow: none !important;
}

.smq-student-summary h2 {
  color: var(--smq-metric-text);
  margin-bottom: 0.9rem;
}

.smq-section-summary .smq-summary-cards {
  grid-template-columns: 1fr;
  gap: 1rem;
}

.smq-section-summary .smq-summary-card {
  min-height: 5.4rem;
  border: 1px solid var(--smq-metric-border);
  border-radius: var(--smq-metric-radius);
  background: var(--smq-metric-surface);
  padding: 0.62rem 0.58rem;
  box-shadow: none !important;
}

.smq-section-summary .smq-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--smq-metric-muted);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.22rem;
  font-weight: 700;
}

.smq-section-summary .smq-summary-label::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.smq-section-summary .smq-summary-card:nth-child(1) .smq-summary-label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Crect x='6' y='10' width='3' height='6'/%3E%3Crect x='11' y='7' width='3' height='9'/%3E%3Crect x='16' y='4' width='3' height='12'/%3E%3C/svg%3E");
}

.smq-section-summary .smq-summary-card:nth-child(2) .smq-summary-label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8b4c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E");
}

.smq-section-summary .smq-summary-card:nth-child(3) .smq-summary-label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7791f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M8.5 12.5l2 2 5-5'/%3E%3C/svg%3E");
}

.smq-section-summary .smq-summary-value {
  margin-bottom: 0.04rem;
  font-size: 2.14rem;
  line-height: 1.15;
}

.smq-section-summary .smq-summary-card:nth-child(1) .smq-summary-value {
  color: var(--smq-metric-primary);
}

.smq-section-summary .smq-summary-card:nth-child(2) .smq-summary-value {
  color: var(--smq-metric-accent);
}

.smq-section-summary .smq-summary-card:nth-child(3) .smq-summary-value {
  color: var(--smq-metric-warn);
}

.smq-section-summary .smq-summary-sublabel {
  color: #75879a;
  font-size: 1rem;
  font-weight: 400;
}

.smq-section-profile .smq-profile-card {
  box-shadow: none !important;
}

.smq-section-profile .smq-section-title {
  margin-bottom: 0.8rem;
  color: var(--smq-metric-text);
}

.smq-profile-form {
  gap: 0.7rem;
}

.smq-profile-form .smq-form-group {
  border: 1px solid var(--smq-metric-border);
  border-radius: var(--smq-metric-radius);
  background: var(--smq-metric-surface);
  padding: 0.55rem;
}

.smq-profile-form .smq-form-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: var(--smq-metric-text);
  margin-bottom: 0.22rem;
}

.smq-profile-form .smq-form-group label::before {
  content: "";
  width: 0.78rem;
  height: 0.78rem;
  flex: 0 0 0.78rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.smq-profile-form .smq-form-group:nth-of-type(1) label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M6 20c1.6-3 9.4-3 12 0'/%3E%3C/svg%3E");
}

.smq-profile-form .smq-form-group:nth-of-type(2) label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}

.smq-profile-form .smq-form-group:nth-of-type(3) label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8b4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v2a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.6A2 2 0 0 1 4 1h2a2 2 0 0 1 2 1.7c.1.9.4 1.8.8 2.7a2 2 0 0 1-.4 2.1L7.5 8.4a16 16 0 0 0 8.1 8.1l.9-.9a2 2 0 0 1 2.1-.4c.9.4 1.8.7 2.7.8A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E");
}

.smq-profile-form .smq-form-group:nth-of-type(4) label::before,
.smq-profile-form .smq-form-group:nth-of-type(5) label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7791f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.smq-profile-form .smq-form-group input {
  border: 1px solid #c8d7e7;
  border-radius: 10px;
  box-shadow: none !important;
}

.smq-profile-form .smq-form-group input:focus {
  border-color: #0f4f8c;
  box-shadow: none !important;
}

.smq-profile-form .smq-btn {
  border-radius: 10px;
  box-shadow: none !important;
}

/* Auth validation + quiz keypad overrides */
.smq-auth-message-slot:empty {
  display: none;
}

.smq-auth-message-slot {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
}

.smq-auth-message-slot:empty {
  display: none;
}

.smq-auth-success {
  background: #e7f6ea;
  color: #1b5e20;
  border: 1px solid #c7e4ce;
}

.smq-auth-field {
  margin-bottom: 1rem;
}

.smq-auth-field.is-invalid input[type="text"],
.smq-auth-field.is-invalid input[type="password"],
.smq-auth-field.is-invalid input[type="email"],
.smq-auth-field.is-invalid input[type="tel"] {
  border-color: #d93025 !important;
  box-shadow: 0 0 0 1px rgba(217, 48, 37, 0.12);
}

.smq-auth-field-checkbox {
  margin-top: 0.5rem;
}

.smq-auth-reset-wrap {
  margin-top: 0.75rem;
}

.smq-auth-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: #1a73e8;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
}

.smq-auth-link:hover,
.smq-auth-link:focus {
  color: #1557b0;
  text-decoration: underline;
  outline: none;
}

.smq-forgot-password-form {
  margin-top: 0.85rem;
  padding: 1rem;
  border: 1px solid #dfe7ef;
  border-radius: 12px;
  background: #f8fbff;
}

.smq-auth-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.smq-forgot-password-form .smq-auth-secondary-btn {
  width: auto;
  min-width: 10rem;
  flex: 0 0 auto;
  background: #1a73e8;
}

.smq-forgot-password-form .smq-auth-secondary-btn:hover,
.smq-forgot-password-form .smq-auth-secondary-btn:focus {
  background: #1557b0;
}

@media (max-width: 640px) {
  .smq-auth-inline-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .smq-forgot-password-form .smq-auth-secondary-btn {
    width: 100%;
  }
}

.smq-field-help {
  display: block;
  margin-top: 0.35rem;
  color: #637282;
  font-size: 0.78rem;
  line-height: 1.4;
}

.smq-field-error {
  display: block;
  min-height: 1.15rem;
  margin-top: 0.35rem;
  color: #c62828;
  font-size: 0.82rem;
  line-height: 1.35;
}

.smq-answer.is-active {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
  background: #f7fbff;
}

.smq-answer-wrap.is-active .smq-answer-label {
  color: #1a73e8;
}

.smq-answer::placeholder {
  color: #7f93a7;
  opacity: 0;
  transition:
    opacity 0.16s ease,
    color 0.16s ease;
}

.smq-answer.is-active::placeholder {
  opacity: 1;
}

.smq-answer-keypad {

  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.smq-answer-keypad.is-hidden {
  display: none;
}

.smq-answer-keypad__grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.smq-keypad-btn {
  --smq-key-border: #cfd9e4;
  --smq-key-bg: #fff;
  --smq-key-color: #203040;
  --smq-key-hover-border: #9db3cc;
  --smq-key-hover-bg: #f5f8fc;
  --smq-key-hover-ring: rgba(98, 129, 165, 0.12);
  --smq-key-active-border: #8098b4;
  --smq-key-active-bg: #eef3f8;
  min-height: 2.9rem;
  padding: 0rem;
  border: 1px solid var(--smq-key-border) !important;
  border-radius: 10px !important;
  background: var(--smq-key-bg);
  color: var(--smq-key-color);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition:
    transform 0.12s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.smq-key--number {
  --smq-key-border: #cfd9e4;
  --smq-key-bg: #ffffff;
  --smq-key-color: #203040;
  --smq-key-hover-border: #7fa0c2;
  --smq-key-hover-bg: #f4f8fd;
  --smq-key-hover-ring: rgba(73, 113, 160, 0.14);
  --smq-key-active-border: #698bb0;
  --smq-key-active-bg: #e9f1fb;
}

.smq-key--symbol {
  --smq-key-border: #b9d7d3;
  --smq-key-bg: #f4fbfa;
  --smq-key-color: #175a57;
  --smq-key-hover-border: #6cb9b0;
  --smq-key-hover-bg: #e8f7f4;
  --smq-key-hover-ring: rgba(47, 140, 131, 0.14);
  --smq-key-active-border: #4e9f97;
  --smq-key-active-bg: #ddf1ed;
}

.smq-key--erase {
  --smq-key-border: #efc7cd;
  --smq-key-bg: #fff5f6;
  --smq-key-color: #9d3b48;
  --smq-key-hover-border: #df8e99;
  --smq-key-hover-bg: #ffecef;
  --smq-key-hover-ring: rgba(196, 83, 100, 0.14);
  --smq-key-active-border: #c96b79;
  --smq-key-active-bg: #ffdfe4;
}

.smq-keypad-btn:hover,
.smq-keypad-btn:focus-visible {
  border-color: var(--smq-key-hover-border);
  background: var(--smq-key-hover-bg);
  box-shadow: 0 0 0 3px var(--smq-key-hover-ring);
  outline: none;
}

.smq-keypad-btn:active,
.smq-keypad-btn.is-pressed {
  transform: translateY(1px) scale(0.985);
  border-color: var(--smq-key-active-border);
  background: var(--smq-key-active-bg);
  box-shadow: inset 0 1px 4px rgba(15, 23, 42, 0.08);
}

.smq-keypad-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 640px) {


  .smq-keypad-btn {
    min-height: 2.7rem;
  }
}

/* Focused quiz mode */
.smq-test-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.smq-test-topbar .smq-timer-wrap {
  margin: 0;
}

.smq-test-back {
  min-width: 5.75rem;
  flex: 0 0 auto;
}

body.smq-quiz-focus .smq-app-bottom-nav {
  display: none;
}

body.smq-quiz-focus .smq-app-top-bar {
  display: none;
}

.smq-app-shell.is-quiz-focus .smq-app-panels {
  padding-bottom: 0;
}

body.smq-quiz-focus .smq-app-tab-panel {
  min-height: auto;
  height: 100%;
}

.smq-dashboard.is-quiz-focus .smq-section-courses,
.smq-dashboard.is-quiz-focus .smq-section-days {
  display: none !important;
}

.smq-dashboard.is-quiz-focus .smq-section-questions {
  padding-top: 0;
  height: 100%;
}

.smq-dashboard.is-review-view .smq-section-courses,
.smq-dashboard.is-review-view .smq-section-days {
  display: none !important;
}

.smq-dashboard.is-review-view .smq-section-questions {
  padding-top: 0;
}

.smq-dashboard.is-quiz-focus .smq-test-inner {
  max-width: 100%;
  height:100%;
}

.smq-test-single.is-quiz-focus-mode {
  max-width: 840px;
  margin: 0 auto;
}


.smq-test-single.is-quiz-focus-mode .smq-answer-keypad__grid {
  gap: 0.45rem;
}

.smq-test-single.is-quiz-focus-mode .smq-keypad-btn {
  min-height: clamp(1.75rem, 5vh, 2.45rem);
  padding: 0.45rem 0.35rem;
}

.smq-test-single.is-quiz-focus-mode .smq-test-footer {
  margin-top: 0rem;
}

@media (max-width: 860px) {
  .smq-test-single.is-quiz-focus-mode {
    padding: 0rem;
  }

  .smq-test-single.is-quiz-focus-mode .smq-test-layout {
    gap: 0.6rem;
    margin-bottom: 0rem;
    flex-grow: 1;
    width:100%;
  }

  .smq-test-single.is-quiz-focus-mode .smq-number-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
    max-height: none;
    overflow: visible;
  }

  .smq-test-single.is-quiz-focus-mode .smq-number-grid .smq-nav-btn {
    height: 1.9rem;
  }
}

@media (max-width: 640px) {
  .smq-test-topbar {
    position: sticky;
    top: 0.35rem;
    z-index: 20;
    padding: 0.25rem 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
  }

  .smq-test-topbar .smq-timer-wrap {
    font-size: 0.72rem;
    padding: 0.32rem 0.55rem;
  }

  .smq-test-single.is-quiz-focus-mode {
    padding: 0rem;
  }

  .smq-test-single.is-quiz-focus-mode .smq-question-panel {
    padding: 0.65rem;
  }

  .smq-test-single.is-quiz-focus-mode .smq-answer-keypad {
    padding: 0rem;
    border-radius: 12px;
  }

  .smq-test-single.is-quiz-focus-mode .smq-keypad-btn {
    min-height: clamp(1.7rem, 4.7vh, 2.2rem);
    font-size: 0.92rem;
  }
}

/* Focused quiz control dock */
.smq-test-topbar {
  justify-content: flex-start;
}

.smq-test-single .smq-test-layout {
  display: block;
}

.smq-key--number {
  --smq-key-border: #b8cae0;
  --smq-key-bg: linear-gradient(180deg, #ffffff 0%, #edf5ff 100%);
  --smq-key-color: #17324d;
  --smq-key-hover-border: #5f8ec2;
  --smq-key-hover-bg: linear-gradient(180deg, #f9fbff 0%, #e2eeff 100%);
  --smq-key-hover-ring: rgba(51, 109, 181, 0.18);
  --smq-key-active-border: #4679b0;
  --smq-key-active-bg: linear-gradient(180deg, #edf5ff 0%, #dbe9fb 100%);
}

.smq-key--symbol {
  --smq-key-border: #5aaea7;
  --smq-key-bg: linear-gradient(180deg, #f3fffd 0%, #dcf6f0 100%);
  --smq-key-color: #0e5b55;
  --smq-key-hover-border: #318c84;
  --smq-key-hover-bg: linear-gradient(180deg, #ebfcf8 0%, #d0efe8 100%);
  --smq-key-hover-ring: rgba(34, 150, 136, 0.2);
  --smq-key-active-border: #24736d;
  --smq-key-active-bg: linear-gradient(180deg, #dff5ef 0%, #c9ebe3 100%);
}

.smq-key--erase {
  --smq-key-border: #d98a95;
  --smq-key-bg: linear-gradient(180deg, #fff7f8 0%, #ffe1e6 100%);
  --smq-key-color: #9f3345;
  --smq-key-hover-border: #c65b6f;
  --smq-key-hover-bg: linear-gradient(180deg, #fff0f3 0%, #ffd6dd 100%);
  --smq-key-hover-ring: rgba(214, 72, 103, 0.22);
  --smq-key-active-border: #ad4458;
  --smq-key-active-bg: linear-gradient(180deg, #ffe4e9 0%, #ffcfd8 100%);
}

.smq-test-single .smq-test-control-dock {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0rem;
}

.smq-test-single .smq-test-control-dock .smq-answer-keypad {
  gap: 0.55rem;
  margin-top: 0;
}

.smq-test-single .smq-test-control-dock .smq-timer-wrap {
  align-self: center;
  margin: 0;
  padding: 0.35rem 0.72rem;
  border: 1px solid #d9e4f1;
  border-radius: 999px;
  background: #f7fbff;
  color: #1e415e;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.smq-test-single .smq-test-control-dock .smq-number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.2rem, 1fr));
  gap: 0.34rem; 
  overflow: auto;
  padding-right: 0.1rem;
}

.smq-test-single .smq-test-control-dock .smq-number-grid .smq-nav-btn {
  min-height: 2.05rem;
  border-radius: 0px;
  font-size: 0.8rem;
}

.smq-test-single.is-quiz-focus-mode .smq-test-layout {
  margin-bottom: 0rem;
}


.smq-test-single.is-quiz-focus-mode .smq-test-control-dock .smq-answer-keypad__grid {
  gap: 0rem;
}

.smq-test-single.is-quiz-focus-mode .smq-test-control-dock .smq-keypad-btn {
  min-height: clamp(1.8rem, 5vh, 2.4rem);
  padding: 0.35rem;
  font-weight: 900 !important;
  font-size: 18px !important;
  border-radius: 6px !important;
}

 
@media (min-width: 860px) {
  .smq-test-single .smq-test-layout {
    display: block;
  }

  .smq-test-single .smq-test-control-dock .smq-number-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .smq-test-single.is-quiz-focus-mode .smq-test-control-dock .smq-number-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    
  }
}

@media (max-width: 640px) {
  .smq-test-single.is-quiz-focus-mode .smq-test-control-dock {
    padding: 0.62rem 0rem;
    border-radius: 14px; 
  }

  .smq-test-single.is-quiz-focus-mode .smq-test-control-dock .smq-timer-wrap {
    font-size: 0.72rem;
    padding: 0.3rem 0.6rem;
  }

  .smq-test-single.is-quiz-focus-mode .smq-test-control-dock .smq-number-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    
    gap: 0rem;
  }

  .smq-test-single.is-quiz-focus-mode .smq-test-control-dock .smq-number-grid .smq-nav-btn {
    min-height: 1.85rem;
    font-size: 0.76rem;
  }

  .smq-test-single.is-quiz-focus-mode .smq-test-control-dock .smq-keypad-btn {
    min-height: clamp(1.75rem, 4.6vh, 2.15rem);
    font-size: 0.94rem;
  }
}

/* Focused test footer and shell spacing */
.smq-app-shell.is-quiz-focus .smq-app-panels {
  padding: 0.5rem;
}

.smq-test-single {
  --smq-test-footer-offset: 5.9rem;
}

.smq-test-single .smq-test-footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.smq-test-single .smq-test-footer .smq-btn {
  min-height: 2.75rem;
  padding: 0.55rem 0.6rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.15;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smq-test-single .smq-test-footer .smq-btn[disabled] {
  opacity: 0.56;
  cursor: not-allowed;
  filter: saturate(0.82);
}

.smq-test-single .smq-test-footer .smq-btn-nav-back {
  border-color: #c6d1dd;
  background: linear-gradient(180deg, #f8fafc 0%, #e8eef5 100%);
  color: #334e68;
}

.smq-test-single .smq-test-footer .smq-btn-nav-back:hover:not([disabled]),
.smq-test-single .smq-test-footer .smq-btn-nav-back:focus-visible {
  border-color: #9eb3c9;
  background: linear-gradient(180deg, #f3f7fb 0%, #dde7f1 100%);
  color: #20384f;
}

.smq-test-single .smq-test-footer .smq-btn-nav-prev {
  border-color: #e5c36c;
  background: linear-gradient(180deg, #fff9ea 0%, #ffecc2 100%);
  color: #8a5800;
}

.smq-test-single .smq-test-footer .smq-btn-nav-prev:hover:not([disabled]),
.smq-test-single .smq-test-footer .smq-btn-nav-prev:focus-visible {
  border-color: #d3a63f;
  background: linear-gradient(180deg, #fff5df 0%, #ffe2a5 100%);
  color: #744800;
  font-size: 24px;
  padding: 0px;
}

.smq-test-single .smq-test-footer .smq-btn-nav-next {
  border-color: #7eaee2;
  background: linear-gradient(180deg, #eff7ff 0%, #dcecff 100%);
  color: #1e5ea8;
  font-size: 24px!important;
  padding: 0px;
}

.smq-test-single .smq-test-footer .smq-btn-nav-next:hover:not([disabled]),
.smq-test-single .smq-test-footer .smq-btn-nav-next:focus-visible {
  border-color: #5a92d2;
  background: linear-gradient(180deg, #e8f2ff 0%, #cfe4ff 100%);
  color: #174d8c;
  
}

.smq-test-single .smq-test-footer .smq-btn-nav-submit {
  border-color: #69bc84;
  background: linear-gradient(180deg, #edf9f1 0%, #d8f0df 100%);
  color: #17663b;
}

.smq-test-single .smq-test-footer .smq-btn-nav-submit:hover:not([disabled]),
.smq-test-single .smq-test-footer .smq-btn-nav-submit:focus-visible {
  border-color: #4da56a;
  background: linear-gradient(180deg, #e6f6eb 0%, #cae9d2 100%);
  color: #11522f;
}

.smq-test-single.is-quiz-focus-mode .smq-test-control-dock {
  bottom: calc(var(--smq-test-footer-offset) + env(safe-area-inset-bottom));
  width:100%;
}

.smq-test-single.is-quiz-focus-mode .smq-test-footer {
  z-index: 18;
  padding: 0rem;
  margin-top: 1.25rem;
}

@media (max-width: 640px) {
  .smq-test-single {
    --smq-test-footer-offset: 8.45rem;
  }

  .smq-test-single .smq-test-footer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .smq-test-single .smq-test-footer .smq-btn {
    min-height: 2.55rem;
    font-size: 0.8rem;
  }

  .smq-test-single.is-quiz-focus-mode .smq-test-footer {
    padding: 0rem;
    border-radius: 14px;
    margin-top: 1rem;
  }
}

/* ---- Profile tab premium refresh ---- */
.smq-app-shell .smq-app-top-bar {
  height: 3.5rem;
  padding: 0 0.7rem;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #e3eaf3;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.smq-app-shell .smq-app-logo img {
  width: 132px !important;
  max-width: min(9rem, 44vw);
}

.smq-app-shell .smq-app-utility-btn {
  background: #f5f8ff;
  border-color: #d4dfeb;
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.06);
}

.smq-app-tab-panel[data-smq-app-panel="profile"] {
  background: linear-gradient(180deg, #f6f8fb 0%, #f1f5fb 100%);
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-section {
  background: transparent;
  padding: 0.55rem 0 0;
  border-bottom: 0;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-section-progress,
.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-section-profile {
  padding-top: 0.65rem;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-section-title {
  margin-bottom: 0.15rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: #10233f;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-section-subtitle {
  margin: 0.25rem 0 0;
  color: #637488;
  font-size: 0.84rem;
  line-height: 1.45;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-snapshot,
.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-card {
  max-width: 72rem;
  margin: 0 auto;
}

.smq-profile-snapshot {
  display: grid;
  gap: 0.85rem;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-snapshot {
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid #dbe5f1;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.smq-profile-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.smq-progress-grid--profile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}

.smq-progress-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.32rem;
  min-height: 6.8rem;
  padding: 0.95rem;
  border-radius: 16px;
  border: 1px solid #dbe5f1;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease;
}

.smq-progress-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--smq-progress-accent, #3b82f6), transparent 88%);
  pointer-events: none;
}

.smq-progress-card:hover,
.smq-progress-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.smq-progress-card:active {
  transform: translateY(0) scale(0.985);
}

.smq-progress-card--primary {
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  border-color: #cfe0ff;
}

.smq-progress-card--secondary {
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  border-color: #e0e8f2;
}

.smq-progress-card__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--smq-progress-icon-bg, #e8f1ff);
  flex-shrink: 0;
}

.smq-progress-card__icon::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: var(--smq-progress-icon-image) center / contain no-repeat;
}

.smq-progress-card--course {
  --smq-progress-accent: #3b82f6;
  --smq-progress-icon-bg: #e8f1ff;
}

.smq-progress-card--course .smq-progress-card__icon {
  --smq-progress-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10a4 4 0 0 1 4 4v10H8a4 4 0 0 0-4 4V6z'/%3E%3Cpath d='M14 6h6v14h-6'/%3E%3C/svg%3E");
}

.smq-progress-card--day {
  --smq-progress-accent: #7c3aed;
  --smq-progress-icon-bg: #f0eaff;
}

.smq-progress-card--day .smq-progress-card__icon {
  --smq-progress-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}

.smq-progress-card--score {
  --smq-progress-accent: #0f9d8d;
  --smq-progress-icon-bg: #e7f7f4;
}

.smq-progress-card--score .smq-progress-card__icon {
  --smq-progress-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f9d8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.9 5.9L21 10l-4.5 4.4 1.1 6.2L12 17.9 6.4 20.6l1.1-6.2L3 10l6.1-1.1L12 3z'/%3E%3C/svg%3E");
}

.smq-progress-card--accuracy {
  --smq-progress-accent: #f59e0b;
  --smq-progress-icon-bg: #fff4e2;
}

.smq-progress-card--accuracy .smq-progress-card__icon {
  --smq-progress-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M8 19v-8'/%3E%3Cpath d='M12 19V9'/%3E%3Cpath d='M16 19v-5'/%3E%3Cpath d='M20 19V3'/%3E%3C/svg%3E");
}

.smq-progress-label {
  margin: 0;
  color: #65748a;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.smq-progress-value {
  margin: 0;
  color: #10233f;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.05;
  word-break: break-word;
}

.smq-progress-card--course .smq-progress-value,
.smq-progress-card--day .smq-progress-value {
  color: #1a4fb3;
}

.smq-progress-card--score .smq-progress-value {
  color: #15724a;
}

.smq-progress-card--accuracy .smq-progress-value {
  color: #9a5a00;
}

.smq-profile-card {
  display: grid;
  gap: 0.85rem;
}

.smq-profile-hero {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid #dbe5f1;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.smq-profile-hero__avatar {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #edf4ff 0%, #dce9ff 100%);
  color: #1a73e8;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.smq-profile-hero__body {
  min-width: 0;
  flex: 1 1 auto;
}

.smq-profile-hero__subtitle {
  margin: 0.25rem 0 0;
  color: #5f7085;
  font-size: 0.88rem;
  line-height: 1.45;
}

.smq-profile-hero__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.smq-profile-hero__meta span {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid #e1e8f2;
  border-radius: 14px;
  background: #f9fbff;
}

.smq-profile-hero__meta strong {
  font-size: 0.63rem;
  font-weight: 800;
  color: #6b7d95;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.smq-profile-hero__meta span>span {
  color: #11243d;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.smq-profile-hero__chip {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 0.45rem 0.72rem;
  border-radius: 999px;
  background: #e8f7ef;
  border: 1px solid #c7ead8;
  color: #15724a;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.smq-profile-form {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid #dbe5f1;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.smq-profile-form .smq-profile-row {
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
  border-top: 1px solid #e5ebf4;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  cursor: text;
  transition:
    transform 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.smq-profile-form .smq-profile-row:first-of-type {
  border-top: 0;
}

.smq-profile-form .smq-profile-row:hover,
.smq-profile-form .smq-profile-row:focus-within {
  background: linear-gradient(180deg, #fcfdff 0%, #f3f7fd 100%);
  border-top-color: #d5e0ef;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.smq-profile-form .smq-profile-row:active {
  transform: scale(0.992);
}

.smq-profile-row__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.smq-profile-row__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #10233f;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.smq-profile-row__label::before {
  content: "";
  width: 0.82rem;
  height: 0.82rem;
  flex: 0 0 0.82rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.smq-profile-row--name .smq-profile-row__label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a73e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M6 20c1.6-3 9.4-3 12 0'/%3E%3C/svg%3E");
}

.smq-profile-row--email .smq-profile-row__label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}

.smq-profile-row--phone .smq-profile-row__label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8b4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v2a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.6A2 2 0 0 1 4 1h2a2 2 0 0 1 2 1.7c.1.9.4 1.8.8 2.7a2 2 0 0 1-.4 2.1L7.5 8.4a16 16 0 0 0 8.1 8.1l.9-.9a2 2 0 0 1 2.1-.4c.9.4 1.8.7 2.7.8A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E");
}

.smq-profile-row--password .smq-profile-row__label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7791f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.smq-profile-row__hint {
  margin-left: auto;
  color: #6e8097;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.smq-profile-row__chevron {
  color: #9cb0c8;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.16s ease, color 0.16s ease;
}

.smq-profile-form .smq-profile-row:hover .smq-profile-row__chevron,
.smq-profile-form .smq-profile-row:focus-within .smq-profile-row__chevron {
  transform: translateX(2px);
  color: #3b82f6;
}

.smq-profile-row__support {
  margin-top: -0.1rem;
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.4;
}

.smq-profile-row__control input {
  width: 100%;
  max-width: 100%;
  padding: 0.84rem 0.92rem;
  border: 1px solid #d4dfeb;
  border-radius: 12px;
  background: #ffffff;
  color: #11243d;
  font-size: 0.95rem;
  box-shadow: none !important;
}

.smq-profile-row__control input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.smq-profile-row--password .smq-profile-row__control input {
  letter-spacing: 0.01em;
}

.smq-profile-actions {
  padding: 0.9rem 1rem 1rem;
  border-top: 1px solid #e5ebf4;
  background: #f8fbff;
}

.smq-profile-save-btn {
  width: 100%;
  min-height: 2.9rem;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(26, 115, 232, 0.12);
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-save-btn {
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(26, 115, 232, 0.12) !important;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-save-btn.smq-btn-primary {
  background: linear-gradient(135deg, #2f78e8 0%, #1d5ed6 100%) !important;
  color: #ffffff !important;
  border: 1px solid #2f78e8 !important;
  box-shadow: 0 12px 24px rgba(47, 120, 232, 0.2) !important;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-save-btn.smq-btn-primary:hover,
.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-save-btn.smq-btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(47, 120, 232, 0.24) !important;
}

.smq-app-bottom-nav {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 -14px 28px rgba(15, 23, 42, 0.1);
  border-top: 1px solid #dfe8f2;
}

.smq-app-tab-btn {
  padding: 0.35rem 0.2rem 0.4rem;
  transition:
    transform 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.smq-app-tab-btn:active {
  transform: scale(0.98);
}

.smq-app-tab-btn.is-active {
  background: linear-gradient(180deg, #eef4ff 0%, #dfeaff 100%);
  color: #1a73e8;
  box-shadow:
    inset 0 -2px 0 #1a73e8,
    0 8px 18px rgba(26, 115, 232, 0.12);
  padding-bottom: 8px;
}

.smq-app-tab-label {
  font-size: 0.72rem;
  font-weight: 700;
}

@media (min-width: 900px) {
  .smq-progress-grid--profile {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .smq-profile-hero {
    padding: 0.9rem;
  }

  .smq-profile-hero__meta {
    grid-template-columns: 1fr;
  }

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

  .smq-progress-card {
    min-height: 6.25rem;
    padding: 0.85rem;
  }

  .smq-progress-value {
    font-size: 1.4rem;
  }

  .smq-profile-form .smq-profile-row {
    padding: 0.9rem;
  }
}

/* ---- Profile tab simplification pass ---- */
.smq-app-tab-panel[data-smq-app-panel="profile"] {
  background: #f6f8fb;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-dashboard.smq-workbook {
  background: transparent;
  padding: 0 0.15rem 0.4rem;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-section {
  background: transparent;
  border: 0;
  padding: 0.55rem 0.35rem 0;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-snapshot,
.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-snapshot {
  gap: 0.7rem;
  padding: 0.9rem;
  border-radius: 14px;
  border: 1px solid #dee7f2;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-card {
  gap: 0.7rem;
  padding: 0.9rem;
  border-radius: 14px;
  border: 1px solid #dee7f2;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05) !important;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-section-head {
  margin-bottom: 0.05rem;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-section-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-section-subtitle {
  margin-top: 0.2rem;
  font-size: 0.81rem;
  line-height: 1.35;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-progress-grid--profile {
  gap: 0.6rem;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-progress-card {
  min-height: 6.1rem;
  padding: 0.8rem;
  gap: 0.3rem;
  border: 1px solid #dde6f1;
  border-radius: 13px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-progress-card::before {
  display: none;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-progress-card--primary {
  background: #f7fbff;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-progress-card--secondary {
  background: #fbfdff;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-progress-label {
  font-size: 0.62rem;
  letter-spacing: 0.07em;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-progress-value {
  font-size: 1.42rem;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-hero {
  padding: 0 0 0.75rem;
  border: 0;
  border-bottom: 1px solid #e5ebf4;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 0.75rem;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-hero__avatar {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 12px;
  font-size: 0.9rem;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-hero__subtitle {
  margin-top: 0.15rem;
  font-size: 0.8rem;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-hero__meta {
  margin-top: 0.55rem;
  gap: 0.45rem;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-hero__meta span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-hero__meta strong {
  font-size: 0.61rem;
  letter-spacing: 0.07em;
  color: #72859b;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-hero__meta span>span {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-hero__chip {
  align-self: flex-start;
  padding: 0.35rem 0.58rem;
  font-size: 0.62rem;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-form {
  margin: 0;
  border: 1px solid #dee7f2;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-form .smq-profile-row {
  gap: 0.35rem;
  padding: 0.82rem 0.86rem;
  border-top: 1px solid #e8eef6;
  background: #ffffff;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-form .smq-profile-row:hover,
.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-form .smq-profile-row:focus-within {
  background: #f8fbff;
  box-shadow: none;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-form .smq-profile-row:active {
  transform: none;
  background: #f2f7ff;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-row__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.08rem;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-row__label {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  color: #6c7e94;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-row__hint {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 500;
  color: #51647c;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-row__chevron {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.2rem;
  color: #9aabc0;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-row__support {
  margin-top: -0.02rem;
  font-size: 0.72rem;
  color: #6f8196;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-row__control input {
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  font-size: 0.97rem;
  font-weight: 600;
  color: #11243d;
  line-height: 1.35;
  border: 2px solid #d6d6d6;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-row__control input::placeholder {
  color: #8da0b6;
  font-weight: 500;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-row__control input:focus {
  box-shadow: none !important;
  outline: none;
  border-color: #3b82f6;
}

.smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-actions {
  border-top: 1px solid #e8eef6;
  background: #ffffff;
  padding: 0.82rem 0.86rem 0.9rem;
}

@media (max-width: 640px) {
  .smq-app-tab-panel[data-smq-app-panel="profile"] .smq-dashboard.smq-workbook {
    padding: 0 0.1rem 0.3rem;
  }

  .smq-app-tab-panel[data-smq-app-panel="profile"] .smq-section {
    padding: 0.48rem 0.25rem 0;
  }

  .smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-snapshot,
  .smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-card {
    padding: 0.78rem;
    border-radius: 12px;
  }

  .smq-app-tab-panel[data-smq-app-panel="profile"] .smq-profile-hero__meta {
    grid-template-columns: 1fr;
  }

  .smq-app-tab-panel[data-smq-app-panel="profile"] .smq-progress-grid--profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .smq-app-tab-panel[data-smq-app-panel="profile"] .smq-progress-card {
    min-height: 5.7rem;
    padding: 0.72rem;
    border-radius: 12px;
  }

  .smq-app-tab-panel[data-smq-app-panel="profile"] .smq-progress-value {
    font-size: 1.32rem;
  }
}