/* Amategeko — professional light/dark design tokens */
:root, [data-theme="light"] {
  --am-bg: #F1F5F9;
  --am-card: #FFFFFF;
  --am-surface2: #F8FAFC;
  --am-text: #0F172A;
  --am-text2: #334155;
  --am-muted: #64748B;
  --am-border: #E2E8F0;
  --am-primary: #0B5FFF;
  --am-primary-soft: #DBEAFE;
  --am-primary-text: #1D4ED8;
  --am-header-bg: rgba(255,255,255,.94);
  --am-opt-bg: #FFFFFF;
  --am-opt-border: #E2E8F0;
  --am-opt-selected-bg: #EFF6FF;
  --am-opt-selected-border: #0B5FFF;
  --am-choice-bg: #F1F5F9;
  --am-choice-on: #0B5FFF;
  --am-choice-on-fg: #FFFFFF;
  --am-success: #047857;
  --am-success-bg: #ECFDF5;
  --am-success-border: #059669;
  --am-success-text: #064E3B;
  --am-danger: #B91C1C;
  --am-danger-bg: #FEF2F2;
  --am-danger-border: #DC2626;
  --am-danger-text: #7F1D1D;
  --am-shadow: 0 4px 16px rgba(15,23,42,.06);
  --am-timer-bg: #0F172A;
  --am-timer-fg: #F8FAFC;
}

[data-theme="dark"] {
  --am-bg: #0B1220;
  --am-card: #111827;
  --am-surface2: #1A2332;
  --am-text: #F8FAFC;
  --am-text2: #E2E8F0;
  --am-muted: #94A3B8;
  --am-border: #334155;
  --am-primary: #3B82F6;
  --am-primary-soft: #1E3A5F;
  --am-primary-text: #93C5FD;
  --am-header-bg: rgba(15,23,42,.96);
  --am-opt-bg: #0F172A;
  --am-opt-border: #475569;
  --am-opt-selected-bg: #1E3A5F;
  --am-opt-selected-border: #60A5FA;
  --am-choice-bg: #1E293B;
  --am-choice-on: #3B82F6;
  --am-choice-on-fg: #FFFFFF;
  /* High-contrast success/danger for dark review cards */
  --am-success: #6EE7B7;
  --am-success-bg: #065F46;
  --am-success-border: #34D399;
  --am-success-text: #ECFDF5;
  --am-danger: #FCA5A5;
  --am-danger-bg: #7F1D1D;
  --am-danger-border: #F87171;
  --am-danger-text: #FEF2F2;
  --am-shadow: 0 4px 20px rgba(0,0,0,.4);
  --am-timer-bg: #1E293B;
  --am-timer-fg: #F8FAFC;
}

.amategeko-body {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  background: var(--am-bg);
  color: var(--am-text);
  min-height: 100dvh;
  margin: 0;
}
.am-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--am-header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--am-border);
  color: var(--am-text);
}
.am-back, .am-theme-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--am-surface2); color: var(--am-text);
  border: 1px solid var(--am-border); text-decoration: none; cursor: pointer;
}
.am-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.am-brand strong { display: block; font-size: .95rem; color: var(--am-text); }
.am-brand span { font-size: .72rem; color: var(--am-muted); }
.am-cap { color: var(--am-primary); flex-shrink: 0; }
.am-wrap { max-width: 560px; margin: 0 auto; padding: 16px 14px 96px; }

.am-pill {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  color: var(--am-primary-text); background: var(--am-primary-soft);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 8px;
}
.am-title { font-size: 1.45rem; font-weight: 800; margin: 0 0 6px; line-height: 1.25; color: var(--am-text); }
.am-lead { font-size: .9rem; color: var(--am-muted); line-height: 1.5; margin: 0 0 16px; }

.am-card {
  background: var(--am-card);
  border: 1px solid var(--am-border);
  border-radius: 24px;
  padding: 16px;
  box-shadow: var(--am-shadow);
  margin-bottom: 14px;
  color: var(--am-text);
}
.am-exam-head h2 { margin: 0; font-size: 1.1rem; color: var(--am-text); }
.am-sub { font-size: .8rem; color: var(--am-muted); }

.am-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.am-metric {
  background: var(--am-surface2); border: 1px solid var(--am-border);
  border-radius: 14px; padding: 12px; text-align: center;
}
.am-metric strong { display: block; font-size: 1.25rem; color: var(--am-text); }
.am-metric small { color: var(--am-muted); font-size: .72rem; }
.am-metric-ico { color: var(--am-primary); display: inline-flex; margin-bottom: 4px; }
.am-metric-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.am-start {
  width: 100%; min-height: 54px; border: none; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1.05rem; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #0B5FFF 0%, #2563EB 50%, #1D4ED8 100%);
  box-shadow: 0 8px 24px rgba(11,95,255,.35);
  transition: transform .15s ease, opacity .15s ease;
}
.am-start:active { transform: scale(.98); }
.am-start:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.am-start.is-loading { opacity: .8; pointer-events: none; }
.am-hint { font-size: .8rem; color: var(--am-muted); margin: 10px 0 0; }
.am-section-h { font-size: 1rem; font-weight: 800; margin: 18px 0 10px; color: var(--am-text); }

.am-resources { display: flex; flex-direction: column; gap: 10px; }
.am-res {
  display: flex; align-items: center; gap: 12px; text-align: left;
  width: 100%; padding: 14px; border-radius: 16px;
  border: 1px solid var(--am-border);
  background: var(--am-card); color: var(--am-text);
  cursor: pointer; min-height: 64px; font-family: inherit;
}
.am-res strong { display: block; font-size: .95rem; color: var(--am-text); }
.am-res small { color: var(--am-muted); font-size: .78rem; }
.am-res-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--am-primary-soft); color: var(--am-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.am-res-ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.am-mini-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--am-primary);
  font-weight: 700; font-size: .9rem; cursor: pointer; padding: 6px 0; font-family: inherit;
}
.am-mini-back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; }

.am-timer {
  position: sticky; top: 56px; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--am-timer-bg); color: var(--am-timer-fg); font-weight: 700;
  padding: 10px 14px; border-radius: 12px; margin-bottom: 12px;
}
.am-timer.warn { background: #B45309; color: #FFFBEB; }
.am-timer.danger { background: #B91C1C; color: #FEF2F2; }

.am-qtext { font-size: 1.05rem; font-weight: 600; line-height: 1.5; margin: 0 0 10px; color: var(--am-text); }
.am-qimg {
  width: 100%; max-height: 220px; object-fit: contain;
  border-radius: 12px; background: var(--am-surface2);
  border: 1px solid var(--am-border); margin: 8px 0 12px;
}

.am-opts { display: flex; flex-direction: column; gap: 8px; }
.am-opt {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  width: 100%; min-height: 52px; padding: 12px 14px;
  border-radius: 14px; border: 2px solid var(--am-opt-border);
  background: var(--am-opt-bg); color: var(--am-text);
  font-size: .95rem; cursor: pointer; font-family: inherit;
}
.am-opt:hover { border-color: var(--am-primary); }
.am-opt.selected { border-color: var(--am-opt-selected-border); background: var(--am-opt-selected-bg); }
.am-opt.correct { border-color: var(--am-success-border); background: var(--am-success-bg); color: var(--am-success-text); }
.am-opt.wrong { border-color: var(--am-danger-border); background: var(--am-danger-bg); color: var(--am-danger-text); }
.am-choice {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--am-choice-bg); border: 2px solid var(--am-border);
  color: var(--am-text2); font-size: .75rem; font-weight: 800;
}
.am-choice.is-selected { background: var(--am-choice-on); border-color: var(--am-choice-on); color: var(--am-choice-on-fg); }
.am-choice svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.am-option-text { flex: 1; line-height: 1.4; color: inherit; padding-top: 3px; font-weight: 500; }

.am-nav-btns { display: flex; gap: 8px; margin-top: 14px; }
.am-nav-btns .btn { flex: 1; min-height: 44px; }

/* Result */
.am-result { text-align: center; }
.am-score { font-size: 2rem; font-weight: 800; margin: 8px 0; color: var(--am-text); }
.am-verdict { font-size: 1.25rem; font-weight: 800; }
.am-score.pass, .am-verdict.pass { color: var(--am-success); }
.am-score.fail, .am-verdict.fail { color: var(--am-danger); }
.am-result-note, .am-result-kicker { color: var(--am-muted); font-size: .85rem; }
.am-result-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
}
.am-result-icon.pass { background: var(--am-success-bg); color: var(--am-success); }
.am-result-icon.fail { background: var(--am-danger-bg); color: var(--am-danger); }
.am-result-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; }
.am-result-actions { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.am-result-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 16px; border-radius: 14px;
  font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer;
  border: none; font-family: inherit; width: 100%;
}
.am-result-btn.primary { background: var(--am-primary); color: #fff; }
.am-result-btn.secondary {
  background: var(--am-surface2); color: var(--am-text);
  border: 1px solid var(--am-border);
}
.am-result-btn.share {
  background: linear-gradient(135deg, #059669, #0B5FFF);
  color: #fff;
}

/* Review — high contrast in both themes */
.am-review {
  background: var(--am-card);
  border: 1px solid var(--am-border);
  border-radius: 14px;
  padding: 12px; margin-bottom: 10px;
  color: var(--am-text);
}
.am-review.ok { border-left: 4px solid var(--am-success-border); }
.am-review.bad { border-left: 4px solid var(--am-danger-border); }
.am-review-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.am-review-head strong { color: var(--am-text); }
.am-review-status { font-size: .78rem; font-weight: 700; color: var(--am-muted); }
.am-review.ok .am-review-status { color: var(--am-success); }
.am-review.bad .am-review-status { color: var(--am-danger); }
.am-review p { color: var(--am-text2); margin: 0 0 8px; line-height: 1.45; font-weight: 500; }
.am-review-title { font-size: 1rem; font-weight: 800; margin: 16px 0 10px; color: var(--am-text); }
 .am-review-list { margin-top: 8px; }
.am-review-explanation {
  margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--am-primary-soft); border: 1px solid var(--am-opt-selected-border);
  color: var(--am-text2); line-height: 1.55;
}
.am-review-explanation strong { display:block; margin-bottom:5px; color: var(--am-primary-text); }
.am-creator-explanation {
  margin-top:12px; padding:14px; border-radius:16px;
  background:var(--am-primary-soft); border:1px solid var(--am-opt-selected-border);
  color:var(--am-text); text-align:left; line-height:1.55;
}
.am-review-opts { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }

.am-review-opt {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px;
  border: 1.5px solid var(--am-border);
  font-size: .9rem;
  background: var(--am-surface2);
  color: var(--am-text);
}
.am-review-opt .am-letter {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .78rem;
  background: var(--am-choice-bg); color: var(--am-text);
  border: 1px solid var(--am-border);
}
.am-review-opt-text {
  flex: 1; font-weight: 600; line-height: 1.35;
  color: var(--am-text) !important;
  opacity: 1 !important;
}
.am-review-opt.is-correct {
  border-color: var(--am-success-border);
  background: var(--am-success-bg);
}
.am-review-opt.is-correct .am-review-opt-text {
  color: var(--am-success-text) !important;
}
.am-review-opt.is-correct .am-letter {
  background: var(--am-success-border);
  color: #fff;
  border-color: transparent;
}
.am-review-opt.is-wrong {
  border-color: var(--am-danger-border);
  background: var(--am-danger-bg);
}
.am-review-opt.is-wrong .am-review-opt-text {
  color: var(--am-danger-text) !important;
}
.am-review-opt.is-wrong .am-letter {
  background: var(--am-danger-border);
  color: #fff;
  border-color: transparent;
}
.am-review-tag {
  margin-left: auto; font-size: .65rem; font-weight: 800;
  padding: 4px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}
.am-review-tag.ok {
  background: rgba(255,255,255,.2);
  color: var(--am-success-text);
  border: 1px solid var(--am-success-border);
}
.am-review-tag.bad {
  background: rgba(255,255,255,.15);
  color: var(--am-danger-text);
  border: 1px solid var(--am-danger-border);
}
[data-theme="dark"] .am-review-tag.ok,
[data-theme="dark"] .am-review-tag.bad {
  background: rgba(0,0,0,.25);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}

.am-review-answer {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px;
}
.am-review-answer > div {
  background: var(--am-surface2); border-radius: 10px; padding: 9px;
  border: 1px solid var(--am-border);
}
.am-review-answer small { display: block; color: var(--am-muted); font-size: .72rem; margin-bottom: 3px; }
.am-review-answer strong { color: var(--am-text); font-size: .85rem; line-height: 1.35; }

.am-feedback { font-size: .9rem; font-weight: 600; margin: 10px 0; color: var(--am-text); }
.am-feedback.ok { color: var(--am-success); }
.am-feedback.bad { color: var(--am-danger); }
.am-progress-line { font-size: .85rem; color: var(--am-muted); margin: 0 0 8px; }

.am-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--am-primary-soft);
  border-top-color: var(--am-primary);
  border-radius: 50%; display: inline-block;
  animation: am-spin .7s linear infinite; vertical-align: middle;
}
@keyframes am-spin { to { transform: rotate(360deg); } }
.am-inline-load { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--am-muted); }

.am-book strong { display: block; margin-bottom: 4px; color: var(--am-text); }
.am-book .text-muted { color: var(--am-muted); }
.am-book-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.am-book-reader {
  width: 100%; min-height: 70vh; border: 1px solid var(--am-border);
  border-radius: 12px; background: var(--am-surface2);
}

/* Content creator mode — compact for screen recording */
.am-creator-setup .form-group { margin-bottom: 12px; }
.am-creator-setup label { display: block; font-size: .82rem; font-weight: 700; color: var(--am-muted); margin-bottom: 6px; }
.am-creator-setup select,
.am-creator-setup input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--am-border);
  background: var(--am-surface2); color: var(--am-text);
  font-size: 1rem; font-family: inherit;
}
.am-creator-stage {
  overflow: hidden; position: relative; min-height: 280px;
}
.am-creator-slide {
  width: 100%;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.am-creator-slide.enter-from-right { transform: translateX(100%); opacity: 0; }
.am-creator-slide.enter-active { transform: translateX(0); opacity: 1; }
.am-creator-slide.exit-to-left { transform: translateX(-100%); opacity: 0; }
.am-creator-q {
  font-size: .95rem; font-weight: 600; line-height: 1.4;
  color: var(--am-text); margin: 0 0 10px;
}
.am-creator-opts { display: flex; flex-direction: column; gap: 6px; }
.am-creator-opt {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 10px;
  border: 1.5px solid var(--am-border);
  background: var(--am-surface2); color: var(--am-text);
  font-size: .85rem;
}
.am-creator-opt.reveal-correct {
  border-color: var(--am-success-border);
  background: var(--am-success-bg);
  color: var(--am-success-text);
}
.am-creator-opt .am-letter {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .72rem;
  background: var(--am-choice-bg); color: var(--am-text);
}
.am-creator-opt.reveal-correct .am-letter {
  background: var(--am-success-border); color: #fff;
}
.am-creator-bar {
  display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; margin-top: 14px;
}
.am-creator-bar .btn { min-height: 44px; font-weight: 700; }

.amategeko-body .ihu-bottom { background: var(--am-card); border-top: 1px solid var(--am-border); }
.amategeko-body .ihu-bottom a { color: var(--am-muted); }
.amategeko-body .ihu-bottom a.active { color: var(--am-primary); background: color-mix(in srgb, var(--am-primary) 8%, transparent); }
.amategeko-body .ihu-bottom .ihu-cta { color:#fff; background:linear-gradient(145deg,#0B5FFF,#00A894); border-color:var(--am-surface); }
.amategeko-body .ihu-bottom .ihu-cta.active { color:#fff; }

.amategeko-body .btn-secondary {
  background: var(--am-surface2); color: var(--am-text); border: 1px solid var(--am-border);
}
.amategeko-body .btn-primary { background: var(--am-primary); color: #fff; border: none; }
.amategeko-body .text-muted { color: var(--am-muted) !important; }
.hidden { display: none !important; }

[data-theme="dark"] [data-theme-toggle] .ico-sun { display: none; }
[data-theme="dark"] [data-theme-toggle] .ico-moon { display: block; }
[data-theme-toggle] .ico-moon { display: none; }

@media (max-width: 420px) {
  .am-review-answer { grid-template-columns: 1fr; }
}


/* Image loading state for questions with photos */
.am-img-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 120px; margin: 8px 0 12px;
  border-radius: 12px;
  border: 1px dashed var(--am-border);
  background: var(--am-surface2, #F8FAFC);
  color: var(--am-muted, #64748B);
  font-size: .88rem; font-weight: 600;
}
.am-qimg-pending { opacity: 0; position: absolute; width: 0; height: 0; overflow: hidden; }

/* Content creator — pure black, thicker text for screen recording */
.am-creator-q {
  color: #000000 !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0.3px #000;
  text-shadow: none;
}
.am-creator-opt {
  color: #000000 !important;
  font-weight: 700 !important;
  border-color: #111 !important;
  background: #fff !important;
}
.am-creator-opt .am-letter {
  color: #000 !important;
  font-weight: 800 !important;
  background: #F3F4F6 !important;
  border: 1.5px solid #111 !important;
}
.am-creator-opt.reveal-correct {
  color: #000 !important;
  background: #D1FAE5 !important;
  border-color: #059669 !important;
}
.am-creator-opt.reveal-correct .am-letter {
  background: #059669 !important;
  color: #fff !important;
  border-color: #047857 !important;
}
#screenCreator .am-progress-line {
  color: #000 !important;
  font-weight: 700;
}
#screenCreator .am-card {
  background: #fff !important;
  color: #000 !important;
}

#btnExportVideo { margin-top: 8px; }
#crExportStatus { min-height: 1.2em; font-weight: 600; color: var(--am-primary, #0B5FFF); }

/* Content creator format picker + export progress */
.am-format-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
@media (max-width: 400px) {
  .am-format-grid { grid-template-columns: 1fr; }
}
.am-format-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; border-radius: 14px;
  border: 2px solid var(--am-border, #E2E8F0);
  background: var(--am-surface2, #F8FAFC);
  color: var(--am-text, #0F172A);
  cursor: pointer; font-family: inherit;
  min-height: 96px;
}
.am-format-card strong { font-size: .78rem; text-align: center; line-height: 1.2; }
.am-format-card small { font-size: .68rem; color: var(--am-muted, #64748B); }
.am-format-card.is-selected {
  border-color: var(--am-primary, #0B5FFF);
  background: var(--am-primary-soft, #DBEAFE);
  box-shadow: 0 0 0 3px rgba(11,95,255,.15);
}
.am-format-ico { display: flex; align-items: center; justify-content: center; height: 32px; }
.am-export-progress { margin-top: 12px; }
.am-export-bar {
  height: 10px; border-radius: 999px;
  background: var(--am-border, #E2E8F0);
  overflow: hidden;
}
.am-export-bar > span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #0B5FFF, #22D3EE, #0B5FFF);
  background-size: 200% 100%;
  animation: am-export-shine 1.2s linear infinite;
  border-radius: 999px;
  transition: width .25s ease;
}
@keyframes am-export-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
#btnExportVideo { margin-top: 4px; }
#crExportStatus { min-height: 1.2em; font-weight: 600; color: var(--am-primary, #0B5FFF); margin-top: 8px; }

/* IHUZE Video Studio V3 — generated-video design preview and setup */
.am-creator-hero {
  margin: 12px 0 14px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, #063b2a 0%, #08734b 55%, #22a95d 100%);
  color: #fff;
  box-shadow: 0 16px 40px rgba(5, 74, 48, .18);
  overflow: hidden;
  position: relative;
}
.am-creator-hero::after {
  content: "";
  position: absolute; width: 150px; height: 150px; right: -55px; bottom: -65px;
  border-radius: 50%; background: rgba(255,255,255,.10);
}
.am-creator-hero .am-title { color: #fff; position: relative; z-index: 1; }
.am-creator-hero .am-lead { color: rgba(255,255,255,.84); position: relative; z-index: 1; }
.am-creator-hero-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px;
  border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18);
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
}
.am-creator-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #86efac; box-shadow: 0 0 0 5px rgba(134,239,172,.12); }
.am-creator-preview-card { padding-bottom: 14px; }
.am-creator-preview-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.am-creator-preview-head strong { display:block; font-size:.88rem; }
.am-creator-preview-head small { display:block; margin-top:2px; color:var(--am-muted); font-size:.72rem; }
.am-sfx-pill { display:inline-flex; align-items:center; padding:6px 9px; border-radius:999px; background:#E9F8EF; color:#087A4B; font-size:.66rem; font-weight:800; }
.am-video-preview {
  min-height: 330px; border-radius: 22px; padding: 16px; box-sizing:border-box; position:relative; overflow:hidden;
  background: linear-gradient(145deg,#063b2a,#08734b 55%,#22a95d); color:#fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.am-video-preview::before,.am-video-preview::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.10); }
.am-video-preview::before { width:120px;height:120px;left:-55px;top:35px; }
.am-video-preview::after { width:170px;height:170px;right:-75px;bottom:-55px; }
.am-video-preview-top { display:flex; justify-content:space-between; font-weight:800; font-size:.72rem; opacity:.95; position:relative; z-index:1; }
.am-video-preview-badge { display:inline-block; margin-top:12px; padding:6px 9px; border-radius:999px; background:#E9F8EF; color:#087A4B; font-size:.58rem; font-weight:900; position:relative; z-index:1; }
.am-video-preview-card { position:relative; z-index:1; margin-top:8px; background:#fff; color:#10271D; border-radius:18px; padding:15px 12px 13px; box-shadow:0 14px 30px rgba(0,0,0,.18); }
.am-video-preview-question { padding-right:35px; font-size:.82rem; font-weight:800; line-height:1.3; }
.am-video-preview-options { display:grid; gap:5px; margin-top:10px; }
.am-video-preview-options span { display:block; border:1px solid #D7E4DC; background:#F8FBF9; border-radius:999px; padding:7px 9px; font-size:.63rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.am-video-preview-timer { position:absolute; right:11px; top:11px; width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#E9F8EF;color:#087A4B;border:3px solid #0A9F5A;font-size:.86rem;font-weight:900; }
.am-video-preview-footer { position:absolute; left:16px; right:16px; bottom:12px; display:flex; justify-content:space-between; font-size:.58rem; font-weight:800; opacity:.9; z-index:1; }
.am-creator-section-title { display:flex; align-items:center; gap:9px; margin:8px 0 10px; color:var(--am-text); }
.am-creator-section-title span { width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#E9F8EF;color:#087A4B;font-size:.72rem;font-weight:900; }
.am-creator-section-title strong { font-size:.82rem; }
.am-sfx-setting { margin: 5px 0 12px; padding:10px 12px; border-radius:14px; background:var(--am-surface2); border:1px solid var(--am-border); }
.am-check-row { display:flex; align-items:center; gap:10px; cursor:pointer; }
.am-check-row input { width:18px; height:18px; accent-color:#0A9F5A; }
.am-check-row span { display:block; }
.am-check-row strong { display:block; font-size:.82rem; }
.am-check-row small { display:block; margin-top:2px; color:var(--am-muted); font-size:.68rem; }
.am-creator-note { margin:10px 0 12px; padding:11px 12px; border-radius:14px; background:#F0FDF4; border:1px solid #BBF7D0; color:#14532D; font-size:.74rem; line-height:1.45; }
.am-creator-generate { display:flex; align-items:center; justify-content:center; gap:9px; background:linear-gradient(135deg,#087A4B,#19A45D,#0A9F5A) !important; box-shadow:0 10px 25px rgba(10,159,90,.24); }
.am-creator-generate:hover { transform:translateY(-1px); }

/* Screen-recording preview uses the same green visual language. */
#screenCreator .am-card { background:transparent !important; border:none; box-shadow:none; padding:0; }
#screenCreator .am-creator-stage { min-height:420px; border-radius:24px; padding:16px; background:linear-gradient(145deg,#063b2a,#08734b 55%,#22a95d); box-shadow:0 16px 40px rgba(5,74,48,.18); }
#screenCreator .am-creator-slide { background:#fff; border-radius:20px; padding:18px; box-sizing:border-box; min-height:380px; box-shadow:0 14px 32px rgba(0,0,0,.18); }
#screenCreator .am-creator-q { color:#10271D !important; -webkit-text-stroke:0 !important; font-size:1rem; font-weight:800 !important; }
#screenCreator .am-creator-opt { color:#153327 !important; border:1.5px solid #D7E4DC !important; background:#F8FBF9 !important; border-radius:999px; min-height:46px; }
#screenCreator .am-creator-opt .am-letter { background:#0E7A4D !important; color:#fff !important; border:none !important; border-radius:50%; }
#screenCreator .am-creator-opt.reveal-correct { color:#0A6E42 !important; background:#CFF7DD !important; border-color:#0A9F5A !important; }
#screenCreator .am-creator-opt.reveal-correct .am-letter { background:#0A9F5A !important; }
#screenCreator .am-creator-bar { margin-top:12px; }

[data-theme="dark"] .am-creator-note { background:#0d2f20; border-color:#1c6a45; color:#d1fae5; }
[data-theme="dark"] .am-sfx-setting { background:#0f2119; }
[data-theme="dark"] .am-video-preview-card { color:#10271D; }

/* ---- Exam access / paywall — professional redesign ---- */
.am-pay-backdrop {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(6, 20, 14, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.am-pay-backdrop.hidden { display: none; }
.am-pay-sheet {
  position: relative; width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
  background: var(--am-card); color: var(--am-text); border-radius: 24px 24px 0 0;
  padding: 22px 18px 26px; box-shadow: 0 -20px 50px rgba(0, 0, 0, .25);
  animation: amPaySheetUp .22s ease;
}
@keyframes amPaySheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 560px) {
  .am-pay-backdrop { align-items: center; }
  .am-pay-sheet { border-radius: 24px; }
}
.am-pay-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--am-border); background: var(--am-surface2); color: var(--am-text);
  display: grid; place-items: center; cursor: pointer;
}
.am-pay-head { position: relative; padding-right: 34px; margin-bottom: 4px; }
.am-pay-head h2 { margin: 4px 0 10px; font-size: 1.08rem; color: var(--am-text); }
.am-access-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.am-access-head h2 { margin: 5px 0 0; font-size: 1.05rem; color: var(--am-text); }
.am-wallet-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .74rem; font-weight: 800; padding: 8px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #063B2A, #0A9F5A); color: #fff;
  box-shadow: 0 6px 14px rgba(10, 159, 90, .28);
}
.am-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.am-price-option {
  position: relative; border: 1.5px solid var(--am-border); background: var(--am-surface2, #fff);
  border-radius: 18px; padding: 14px 14px 12px; text-align: left; display: flex; flex-direction: column;
  gap: 3px; cursor: pointer; color: inherit; box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.am-price-option:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, .1); border-color: #7FE3A8; }
.am-price-option.is-featured {
  border-color: #0A9F5A; background: linear-gradient(160deg, #F0FDF4, var(--am-surface2, #fff) 60%);
  box-shadow: 0 10px 24px rgba(10, 159, 90, .16);
}
.am-price-badge {
  position: absolute; top: -9px; right: 12px; background: linear-gradient(135deg, #087A4B, #0A9F5A);
  color: #fff; font-size: .58rem; font-weight: 900; letter-spacing: .04em; padding: 4px 9px;
  border-radius: 999px; box-shadow: 0 4px 10px rgba(10, 159, 90, .35);
}
.am-price-amount { font-size: 1.18rem; font-weight: 900; color: var(--am-text); }
.am-price-amount small { font-size: .62rem; font-weight: 800; color: var(--am-muted); }
.am-price-label { font-weight: 700; font-size: .82rem; color: var(--am-text); }
.am-price-span { color: var(--am-muted); font-size: .68rem; }
.am-access-note { font-size: .78rem; color: var(--am-muted); line-height: 1.5; margin: 12px 0; }
.am-promo-row {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  border: 1.5px solid var(--am-border); border-radius: 14px; padding: 4px 4px 4px 12px;
  background: var(--am-surface2, #fff);
}
.am-promo-ico { color: #0A9F5A; display: flex; flex-shrink: 0; }
.am-promo-input { min-width: 0; flex: 1; border: none; background: transparent; color: inherit; font: inherit; padding: 9px 0; outline: none; }
.am-promo-row .btn { border-radius: 11px; white-space: nowrap; }
@media (max-width: 420px) { .am-price-grid { grid-template-columns: 1fr; } }