/* ==================== QUIZ CARD ==================== */
.question-card,
.glass-panel {
  position: relative;
  width: 100%;
  max-width: min(100%, var(--question-max-width, 800px));
  margin: 0 auto;
  padding: var(--spacing-lg);
  overflow: hidden;
  container-type: inline-size;
  transition:
    transform var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    max-width var(--duration-normal) var(--ease-standard),
    padding var(--duration-normal) var(--ease-standard),
    gap var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);

  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(var(--acrylic-blur, 25px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--acrylic-blur, 25px)) saturate(160%);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.02);
}

.question-card > * {
  transition: all var(--duration-normal) var(--ease-standard);
}

.question-card.feedback-correct {
  animation: pulse-success 0.5s ease-out;
  border-color: rgba(76, 201, 240, 0.5) !important;
  box-shadow: 0 0 30px rgba(76, 201, 240, 0.2) !important;
}

.question-card.feedback-incorrect {
  animation: shake-error 0.5s ease-out;
  border-color: rgba(255, 107, 107, 0.5) !important;
  box-shadow: 0 0 30px rgba(255, 107, 107, 0.2) !important;
}

.question-card.marked {
  animation: pulseGlow 3s infinite ease-in-out;
  border-color: var(--warning-default);
  box-shadow:
    var(--shadow-lg),
    0 0 20px var(--warning-bg);
}

@keyframes pulse-success {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shake-error {
  0%,
  100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-4px);
  }
  30% {
    transform: translateX(4px);
  }
  45% {
    transform: translateX(-2px);
  }
  60% {
    transform: translateX(2px);
  }
  75% {
    transform: translateX(-1px);
  }
  90% {
    transform: translateX(1px);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow:
      var(--shadow-lg),
      0 0 12px var(--warning-bg);
  }
  50% {
    box-shadow:
      var(--shadow-lg),
      0 0 24px rgba(255, 185, 56, 0.25);
  }
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  transition:
    padding var(--duration-normal) var(--ease-standard),
    margin var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);

  border-bottom: 1px solid transparent;
}

.q-badge {
  font-size: var(--font-size-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;

  display: inline-block;
  padding: 6px 14px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;

  background: var(--badge-bg);
  color: var(--badge-text);
  border: 1px solid var(--badge-text);
  border-radius: var(--radius-pill);
}

.q-number {
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 3px;

  display: inline-block;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: color var(--duration-fast);

  background: none;
  border: none;
  color: var(--text-tertiary);

  &:hover,
  &.active {
    color: var(--accent-default);
  }
}

.question-body {
  transition:
    padding var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);
  margin-bottom: 28px;

  border-right: 1px solid transparent;

  & img {
    max-width: 100%;

    background: white;
  }
}

.explanation-box {
  line-height: 1.7;

  color: var(--text-secondary);

  & img {
    max-width: 100%;

    background: white;
  }
}

.question-text {
  font-size: 1rem;
  line-height: 1.7;
  animation: slideIn var(--duration-slower) var(--ease-decelerate);

  color: var(--text-primary);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.question-image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  gap: var(--spacing-md);
  transition:
    padding var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);

  border-right: 1px solid transparent;

  & img {
    display: inline-block;
    vertical-align: middle;
    cursor: zoom-in;
    max-width: 100%;
    transition: transform var(--duration-normal) var(--ease-standard);

    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-md);

    &:hover {
      transform: scale(1.02);
    }
  }
}

/* ==================== OPTIONS ==================== */
.options-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.option-card {
  font-family: inherit;
  font-size: 1rem;

  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 16px;
  gap: var(--spacing-md);
  cursor: pointer;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-standard);

  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);

  &:hover:not(.disabled) {
    transform: translateY(-2px);

    background: var(--card-bg-hover);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
  }

  &.selected {
    z-index: 2;
    animation: option-pulse 2s infinite;

    background: var(--accent-tertiary);
    border-color: var(--accent-default);
    box-shadow:
      inset 0 0 0 1px var(--accent-default),
      0 0 15px var(--accent-glow);

    & .option-marker,
    & .option-letter {
      background: var(--accent-default);
      color: var(--text-on-accent);
      box-shadow: 0 2px 8px var(--accent-glow);
    }
  }

  &.correct {
    background: var(--success-bg);
    border-color: var(--success-default);

    & .option-marker,
    & .option-letter {
      background: var(--success-default);
      color: var(--text-on-accent);
    }
  }

  &.incorrect {
    background: var(--error-bg);
    border-color: var(--error-default);

    & .option-marker,
    & .option-letter {
      background: var(--error-default);
      color: #fff;
    }
  }

  &.disabled {
    pointer-events: none;
    cursor: default;
  }
}

@keyframes option-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px var(--accent-default),
      0 0 10px var(--accent-glow);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px var(--accent-default),
      0 0 20px var(--accent-glow);
  }
}

.option-marker,
.option-letter {
  font-weight: 600;
  font-size: 18px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  transition: all var(--duration-normal) var(--ease-standard);

  background: var(--card-bg-hover);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

/* ==================== FEEDBACK ==================== */
.feedback-section {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  animation: slideIn var(--duration-slow) var(--ease-decelerate);

  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--accent-default);

  &.correct {
    background: var(--success-bg);
    border-left-color: var(--success-default);
  }
  &.incorrect {
    background: var(--error-bg);
    border-left-color: var(--error-default);
  }
  &.info {
    background: var(--info-bg);
    border-left-color: var(--accent-default);
  }
}

.feedback-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.feedback-icon {
  font-size: 1.3em;
}

.feedback-title {
  font-size: var(--font-size-subtitle);
  font-weight: 600;

  &.feedback-success {
    color: var(--success-default);
  }
  &.feedback-error {
    color: var(--error-default);
  }
}

/* ==================== ACTION BAR ==================== */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.center-actions {
  display: flex;
  gap: var(--spacing-xs);
}

@container (max-width: 580px) {
  .action-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--spacing-sm);
  }
  .center-actions {
    display: flex;
    justify-content: center;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }
  #prev-btn,
  #next-btn {
    display: flex;
    justify-content: center;
    grid-row: 2;
    min-height: 44px;
  }
  #prev-btn {
    grid-column: 1;
  }
  #next-btn {
    grid-column: 2;
  }
}

/* ==================== GRID ==================== */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  padding: var(--spacing-md);
  gap: 6px;
  overflow-y: auto;
  padding-bottom: 80px;
}
.grid-item {
  font-size: var(--font-size-caption);
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);

  background: var(--card-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);

  &:hover {
    transform: scale(1.08);

    background: var(--card-bg-hover);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
  }
  &.current {
    font-weight: 600;

    background: var(--accent-default);
    color: var(--text-on-accent);
    box-shadow: 0 0 12px var(--accent-glow);
  }
  &.correct {
    background: var(--success-default);
    color: var(--text-on-accent);
  }
  &.incorrect {
    background: var(--error-default);
    color: #fff;
  }
  &.marked {
    border: 2px solid var(--warning-default);
    box-shadow: 0 0 8px var(--warning-bg);
  }
}

/* ==================== BROWSE MODE ==================== */
.browse-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  width: 100%;
  max-width: min(100%, var(--question-max-width, 800px));
  margin: 0 auto;
  padding-bottom: var(--spacing-xl);

  &.hidden {
    display: none;
  }
}

.browse-item {
  /* Reuses glass-panel visual styles */
  position: relative;
  padding: var(--spacing-lg);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  container-type: inline-size;

  animation: slideIn var(--duration-slower) var(--ease-decelerate);
  transition:
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);

  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(25px) saturate(160%);
  -webkit-backdrop-filter: blur(25px) saturate(160%);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.02);

  &.browse-current {
    box-shadow:
      var(--shadow-lg),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  &.marked {
    animation: pulseGlow 3s infinite ease-in-out;
    border-color: var(--warning-default);
    box-shadow:
      var(--shadow-lg),
      0 0 20px var(--warning-bg);
  }

  &.answered-correct {
    border-color: rgba(76, 201, 240, 0.3);
  }

  &.answered-incorrect {
    border-color: rgba(255, 107, 107, 0.3);
  }

  &.feedback-correct {
    animation: pulse-success 0.5s var(--ease-bounce);
    border-color: rgba(76, 201, 240, 0.5);
    box-shadow: 0 0 30px rgba(76, 201, 240, 0.2);
  }

  &.feedback-incorrect {
    animation: shake-error 0.4s var(--ease-bounce);
    border-color: rgba(255, 107, 107, 0.5);
    box-shadow: 0 0 30px rgba(255, 107, 107, 0.2);
  }
}

/* ── Browse Item Header ── */
.browse-item-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-subtle);
}

.browse-item-num {
  font-size: var(--font-size-caption);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-left: auto;
}

.browse-badge {
  max-width: 180px;
}

/* ── Browse Status Icon ── */
.browse-status-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;

  & .ri-checkbox-circle-fill {
    color: var(--success-default);
  }
  & .ri-close-circle-fill {
    color: var(--error-default);
  }
  & .ri-flag-fill {
    color: var(--warning-default);
  }
}

/* ── Browse Question Text ── */
.browse-question-text {
  margin-bottom: var(--spacing-lg);
}

/* ── Browse Image Container ── */
.browse-img-container {
  margin-bottom: var(--spacing-md);
}

/* ── Browse Options ── */
.browse-options {
  margin-bottom: var(--spacing-md);
}

/* ── Browse Action Row ── */
.browse-action-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  flex-wrap: wrap;

  & .browse-submit-btn {
    margin-left: auto;
  }
}

.browse-action-bar {
  justify-content: flex-start !important;
}

.browse-action-bar .center-actions {
  flex: 1;
}

.browse-action-bar .browse-submit-btn {
  margin-left: auto;
}

/* ── Browse Feedback ── */
.browse-feedback {
  margin-top: var(--spacing-md);
  margin-bottom: 0;
}

/* ── Browse Toggle Button ── */
#browse-toggle-btn {
  &.active {
    background: var(--accent-tertiary) !important;
    border-color: var(--accent-default) !important;
    color: var(--accent-default) !important;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}