/* =====================================================================
   MAXPOINT NOVA — Components (V7)
   Nova implements the FULL shared component vocabulary (btn, card, field,
   table, alert, modal, sheet, toast, skeleton, empty, exam engine, chat…)
   in its own design language. Classic keeps app.css; Nova owns this file.
   ===================================================================== */

/* ------------------------------------------------------------ container */
html[data-ui-theme="nova"] .container { width: 100%; max-width: var(--nv-max); margin-inline: auto; padding-inline: clamp(14px, 3vw, 28px); }

/* ------------------------------------------------------------ buttons */
html[data-ui-theme="nova"] .btn {
  --btn-bg: var(--nv-surface);
  --btn-fg: var(--nv-t1);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: calc(9px * var(--nv-density)) calc(18px * var(--nv-density));
  border: 1px solid var(--nv-line); border-radius: var(--nv-r-md);
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-size: .88rem; font-weight: 700; line-height: 1.6;
  cursor: pointer; user-select: none; text-decoration: none;
  transition: transform var(--nv-d-fast) var(--nv-ease), box-shadow var(--nv-d-fast), background var(--nv-d-fast), border-color var(--nv-d-fast);
  min-height: 44px;
}
html[data-ui-theme="nova"] .btn:hover { transform: translateY(-1px); box-shadow: var(--nv-e2); }
html[data-ui-theme="nova"] .btn:active { transform: translateY(0); }
html[data-ui-theme="nova"] .btn:disabled, html[data-ui-theme="nova"] .btn.is-disabled { opacity: .55; pointer-events: none; }
html[data-ui-theme="nova"] .btn:focus-visible { outline: none; box-shadow: var(--nv-ring); }
html[data-ui-theme="nova"] .btn svg { width: 1.05em; height: 1.05em; }

html[data-ui-theme="nova"] .btn--gold,
html[data-ui-theme="nova"] .btn--primary {
  /* Decorative gradients are not text surfaces: use the paired theme tokens. */
  --btn-bg: var(--nv-accent);
  --btn-fg: var(--nv-on-accent);
  background: var(--btn-bg);
  color: var(--btn-fg); border: none;
  box-shadow: var(--nv-e-accent);
}
html[data-ui-theme="nova"] .btn--gold:hover, html[data-ui-theme="nova"] .btn--primary:hover { box-shadow: var(--nv-e-accent); }

html[data-ui-theme="nova"] .btn--soft { background: #eeebff; color: #4933bd; border-color: #7765c9; }
html[data-ui-theme="nova"] .btn--soft:hover { background: #e2dcff; color: #4933bd; }
html[data-ui-theme="nova"][data-theme="dark"] .btn--soft { background: #292340; color: #cec5ff; border-color: #9180ce; }
html[data-ui-theme="nova"][data-theme="dark"] .btn--soft:hover { background: #352c52; color: #cec5ff; }
html[data-ui-theme="nova"] .btn:focus-visible { outline: 2px solid var(--nv-t1); outline-offset: 3px; box-shadow: none; }
html[data-ui-theme="nova"] .btn--outline { background: var(--nv-surface); border-color: var(--nv-line-strong); color: var(--nv-t1); box-shadow: var(--nv-e1); }
html[data-ui-theme="nova"] .btn--outline:hover { background: var(--nv-surface-2); border-color: var(--nv-accent); color: var(--nv-t1); }
html[data-ui-theme="nova"] .btn--ghost { background: transparent; border-color: transparent; color: var(--nv-t2); }
html[data-ui-theme="nova"] .btn--ghost:hover { background: var(--nv-sunken); box-shadow: none; }
html[data-ui-theme="nova"] .btn--danger { background: var(--nv-bad); border: none; color: #fff; }
/* Touch-target floor: app.css «touch + controls» sets the project-wide
   comfort contract (.btn--sm → 40px). This scoped re-declaration loads later
   and outranked it (34px on mobile 375px QA). Match the floor — same value,
   so small CTAs stay ≥40px tall in BOTH themes. */
html[data-ui-theme="nova"] .btn--sm { padding: 6px 13px; min-height: 40px; font-size: .8rem; border-radius: var(--nv-r-sm); }
html[data-ui-theme="nova"] .btn.w-full, html[data-ui-theme="nova"] .btn--block { width: 100%; }

html[data-ui-theme="nova"] .btn.loading { pointer-events: none; opacity: .75; }
html[data-ui-theme="nova"] .btn.loading::after {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: nv-spin .7s linear infinite;
}
@keyframes nv-spin { to { transform: rotate(360deg); } }

html[data-ui-theme="nova"] .ibtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--nv-r-md);
  border: 1px solid transparent; background: transparent; color: var(--nv-t2);
  cursor: pointer; position: relative; flex-shrink: 0;
  transition: background var(--nv-d-fast), color var(--nv-d-fast), border-color var(--nv-d-fast);
}
html[data-ui-theme="nova"] .ibtn:hover { background: var(--nv-sunken); color: var(--nv-t1); }
html[data-ui-theme="nova"] .ibtn--bordered { border-color: var(--nv-line); background: var(--nv-surface); }
html[data-ui-theme="nova"] .ibtn--danger { color: var(--nv-bad); }
html[data-ui-theme="nova"] .ibtn--danger:hover { background: var(--nv-bad-soft); }

/* ------------------------------------------------------------ cards */
html[data-ui-theme="nova"] .card {
  /* display:block — anchor cards (a.card) otherwise fall back to the UA
     `display:inline`, painting the background per line-fragment only
     (white slivers on the admin support list). Real bug from browser QA. */
  display: block;
  background: var(--nv-surface);
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-r-lg);
  padding: calc(20px * var(--nv-density));
  box-shadow: var(--nv-e1);
  transition: box-shadow var(--nv-d-base) var(--nv-ease), border-color var(--nv-d-base), transform var(--nv-d-base) var(--nv-ease);
}
html[data-ui-theme="nova"] .card--flat { box-shadow: none; }
html[data-ui-theme="nova"] .card--pad-sm { padding: calc(14px * var(--nv-density)); }
html[data-ui-theme="nova"] a.card:hover, html[data-ui-theme="nova"] .card.is-hoverable:hover {
  box-shadow: var(--nv-e3); border-color: var(--nv-line-strong); transform: translateY(-2px);
}

html[data-ui-theme="nova"] .card-title { font-size: .95rem; font-weight: 800; color: var(--nv-t1); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
html[data-ui-theme="nova"] .card-title svg { color: var(--nv-accent); }

/* ------------------------------------------------------------ badges & chips */
html[data-ui-theme="nova"] .badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  padding: 2px 9px; border-radius: var(--nv-r-full);
  background: var(--nv-sunken); color: var(--nv-t2); border: 1px solid transparent;
  white-space: nowrap;
}
html[data-ui-theme="nova"] .badge--ok { background: var(--nv-ok-soft); color: var(--nv-ok); }
html[data-ui-theme="nova"] .badge--bad { background: var(--nv-bad-soft); color: var(--nv-bad); }
html[data-ui-theme="nova"] .badge--warn { background: var(--nv-warn-soft); color: var(--nv-warn); }
html[data-ui-theme="nova"] .badge--info { background: var(--nv-info-soft); color: var(--nv-info); }
html[data-ui-theme="nova"] .badge--accent { background: var(--nv-accent-soft); color: var(--nv-accent); }
html[data-ui-theme="nova"] .badge--outline { background: transparent; border-color: var(--nv-line-strong); }

html[data-ui-theme="nova"] .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--nv-r-full);
  background: var(--nv-surface); border: 1px solid var(--nv-line);
  color: var(--nv-t2); font-size: .8rem; font-weight: 700; cursor: pointer;
  transition: all var(--nv-d-fast) var(--nv-ease); white-space: nowrap;
  min-height: 38px;
}
html[data-ui-theme="nova"] .chip:hover { border-color: var(--nv-accent); color: var(--nv-accent); }
html[data-ui-theme="nova"] .chip.is-active, html[data-ui-theme="nova"] .chip.active {
  background: var(--nv-accent); border-color: var(--nv-accent); color: #fff;
  box-shadow: var(--nv-e-accent);
}
html[data-ui-theme="nova"] .mx-chips-row, html[data-ui-theme="nova"] .chip-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html[data-ui-theme="nova"] .mx-chips-row::-webkit-scrollbar, html[data-ui-theme="nova"] .chip-row::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------ segmented */
html[data-ui-theme="nova"] .seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--nv-sunken); border-radius: var(--nv-r-md);
  border: 1px solid var(--nv-line);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
html[data-ui-theme="nova"] .seg::-webkit-scrollbar { display: none; }
html[data-ui-theme="nova"] .seg > button, html[data-ui-theme="nova"] .seg > a {
  padding: 6px 14px; border-radius: var(--nv-r-sm); border: none; background: transparent;
  color: var(--nv-t2); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  white-space: nowrap; min-height: 34px;
  transition: background var(--nv-d-fast), color var(--nv-d-fast);
}
html[data-ui-theme="nova"] .seg > button.active, html[data-ui-theme="nova"] .seg > button.is-active,
html[data-ui-theme="nova"] .seg > a.active, html[data-ui-theme="nova"] .seg > a.is-active {
  background: var(--nv-surface); color: var(--nv-t1); box-shadow: var(--nv-e1);
}
html[data-ui-theme="nova"] .seg--accent > button.active { background: var(--nv-accent); color: #fff; }

/* ------------------------------------------------------------ tabs */
html[data-ui-theme="nova"] .tabs, html[data-ui-theme="nova"] [role="tablist"] {
  display: flex; gap: 4px; border-bottom: 1px solid var(--nv-line);
  overflow-x: auto; scrollbar-width: none; margin-bottom: 18px;
}
html[data-ui-theme="nova"] .tabs::-webkit-scrollbar { display: none; }
html[data-ui-theme="nova"] .tab, html[data-ui-theme="nova"] [role="tab"] {
  padding: 10px 16px; border: none; background: none; cursor: pointer;
  color: var(--nv-t3); font: inherit; font-size: .86rem; font-weight: 700;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  transition: color var(--nv-d-fast), border-color var(--nv-d-fast);
}
html[data-ui-theme="nova"] .tab:hover { color: var(--nv-t1); }
html[data-ui-theme="nova"] .tab.active, html[data-ui-theme="nova"] .tab[aria-selected="true"] {
  color: var(--nv-accent); border-bottom-color: var(--nv-accent);
}

/* ------------------------------------------------------------ fields */
html[data-ui-theme="nova"] .field { display: grid; gap: 6px; min-width: 0; }
html[data-ui-theme="nova"] .field > label { font-size: .78rem; font-weight: 700; color: var(--nv-t2); }
html[data-ui-theme="nova"] .field-box, html[data-ui-theme="nova"] .field input,
html[data-ui-theme="nova"] .field select, html[data-ui-theme="nova"] .field textarea {
  width: 100%; padding: 10px 14px; min-height: 44px;
  border: 1.5px solid var(--nv-line); border-radius: var(--nv-r-md);
  background: var(--nv-surface-2); color: var(--nv-t1);
  font: inherit; font-size: .9rem;
  transition: border-color var(--nv-d-fast), box-shadow var(--nv-d-fast), background var(--nv-d-fast);
}
html[data-ui-theme="nova"] .field textarea { min-height: 110px; resize: vertical; }
html[data-ui-theme="nova"] .field input:focus, html[data-ui-theme="nova"] .field select:focus,
html[data-ui-theme="nova"] .field textarea:focus, html[data-ui-theme="nova"] .field-box:focus-within {
  outline: none; border-color: var(--nv-accent); background: var(--nv-surface);
  box-shadow: 0 0 0 3px var(--nv-accent-soft);
}
html[data-ui-theme="nova"] .field.is-error input, html[data-ui-theme="nova"] .field.is-error textarea,
html[data-ui-theme="nova"] .field.is-error select, html[data-ui-theme="nova"] .field-box--error {
  border-color: var(--nv-bad); box-shadow: 0 0 0 3px var(--nv-bad-soft);
}
html[data-ui-theme="nova"] .field-help { font-size: .72rem; color: var(--nv-t3); }
html[data-ui-theme="nova"] .form-grid { display: grid; gap: 14px; }
html[data-ui-theme="nova"] .form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

html[data-ui-theme="nova"] .otp-box {
  width: 52px; height: 58px; text-align: center; font-size: 1.3rem; font-weight: 800;
  border: 1.5px solid var(--nv-line); border-radius: var(--nv-r-md);
  background: var(--nv-surface-2); color: var(--nv-t1);
}
html[data-ui-theme="nova"] .otp-box:focus { outline: none; border-color: var(--nv-accent); box-shadow: 0 0 0 3px var(--nv-accent-soft); }

/* ------------------------------------------------------------ alerts */
html[data-ui-theme="nova"] .alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 15px; border-radius: var(--nv-r-md);
  font-size: .84rem; line-height: 1.9; border: 1px solid transparent;
}
html[data-ui-theme="nova"] .alert svg { flex-shrink: 0; margin-top: 4px; }
html[data-ui-theme="nova"] .alert--ok { background: var(--nv-ok-soft); color: var(--nv-ok); border-color: transparent; }
html[data-ui-theme="nova"] .alert--bad { background: var(--nv-bad-soft); color: var(--nv-bad); border-color: transparent; }
html[data-ui-theme="nova"] .alert--warn { background: var(--nv-warn-soft); color: var(--nv-warn); border-color: transparent; }
html[data-ui-theme="nova"] .alert--info { background: var(--nv-info-soft); color: var(--nv-info); border-color: transparent; }
html[data-ui-theme="nova"] .alert b { font-weight: 800; }
html[data-ui-theme="nova"] .alert--bad.shake, html[data-ui-theme="nova"] .shake { animation: nv-shake .4s var(--nv-ease); }
@keyframes nv-shake { 20%, 60% { transform: translateX(5px); } 40%, 80% { transform: translateX(-5px); } }

/* ------------------------------------------------------------ tables */
html[data-ui-theme="nova"] .table-wrap {
  overflow-x: auto; border: 1px solid var(--nv-line); border-radius: var(--nv-r-md);
  background: var(--nv-surface); position: relative; -webkit-overflow-scrolling: touch;
}
html[data-ui-theme="nova"] .table-wrap.is-scrollable::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 14px;
  background: linear-gradient(to left, transparent, var(--nv-sunken)); pointer-events: none;
  border-start-start-radius: var(--nv-r-md); border-end-start-radius: var(--nv-r-md);
}
html[data-ui-theme="nova"] .table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 480px; }
html[data-ui-theme="nova"] .table th {
  text-align: start; font-size: .7rem; font-weight: 800; letter-spacing: .03em;
  color: var(--nv-t3); background: var(--nv-surface-2);
  padding: calc(10px * var(--nv-density)) calc(14px * var(--nv-density));
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
  border-bottom: 1px solid var(--nv-line);
}
html[data-ui-theme="nova"] .table td {
  padding: calc(10px * var(--nv-density)) calc(14px * var(--nv-density));
  border-bottom: 1px solid var(--nv-line); color: var(--nv-t2); vertical-align: middle;
}
html[data-ui-theme="nova"] .table tr:last-child td { border-bottom: none; }
html[data-ui-theme="nova"] .table tr:hover td { background: var(--nv-surface-2); }
html[data-ui-theme="nova"] .table td strong, html[data-ui-theme="nova"] .table .t-strong { color: var(--nv-t1); font-weight: 700; }
html[data-ui-theme="nova"] .table .num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ overlays */
html[data-ui-theme="nova"] .overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  opacity: 0; transition: opacity var(--nv-d-base) var(--nv-ease);
}
html[data-ui-theme="nova"] .overlay.is-open { opacity: 1; }
html[data-ui-theme="nova"] .overlay-bg { position: absolute; inset: 0; background: rgba(9, 11, 20, .55); backdrop-filter: blur(6px); }
html[data-ui-theme="nova"] .modal {
  position: relative; width: min(460px, 100%); max-height: min(86vh, 720px); overflow: auto;
  background: var(--nv-surface); border: 1px solid var(--nv-line);
  border-radius: var(--nv-r-lg); padding: calc(22px * var(--nv-density));
  box-shadow: var(--nv-e3);
  transform: translateY(14px) scale(.98); transition: transform var(--nv-d-base) var(--nv-ease);
}
html[data-ui-theme="nova"] .overlay.is-open .modal { transform: none; }
html[data-ui-theme="nova"] .modal-lg { width: min(680px, 100%); }
html[data-ui-theme="nova"] .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
html[data-ui-theme="nova"] .modal-title { font-size: 1rem; font-weight: 800; color: var(--nv-t1); margin: 0; }
html[data-ui-theme="nova"] .modal-sub { font-size: .8rem; color: var(--nv-t3); margin-top: 3px; }
html[data-ui-theme="nova"] .modal-actions { display: flex; gap: 10px; justify-content: flex-start; margin-top: 18px; flex-wrap: wrap; }

/* sheet (mobile-first bottom sheet) */
html[data-ui-theme="nova"] .overlay--sheet { align-items: flex-end; padding: 0; }
html[data-ui-theme="nova"] .sheet {
  position: relative; width: min(560px, 100%); max-height: 86vh;
  margin-inline: auto; overflow: hidden auto; overscroll-behavior: contain;
  background: var(--nv-surface); border: 1px solid var(--nv-line); border-bottom: none;
  border-radius: var(--nv-r-lg) var(--nv-r-lg) 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--nv-e3);
  transform: translateY(100%); transition: transform var(--nv-d-base) var(--nv-ease);
}
@media (min-width: 640px) {
  html[data-ui-theme="nova"] .overlay--sheet { align-items: center; }
  html[data-ui-theme="nova"] .sheet { border-radius: var(--nv-r-lg); border-bottom: 1px solid var(--nv-line); transform: translateY(14px) scale(.98); }
  html[data-ui-theme="nova"] .overlay.is-open .sheet { transform: none; }
}
html[data-ui-theme="nova"] .overlay.is-open .sheet { transform: none; }
html[data-ui-theme="nova"] .sheet-grab { display: flex; justify-content: center; padding: 4px 0 10px; cursor: grab; }
html[data-ui-theme="nova"] .sheet-grab i { width: 44px; height: 5px; border-radius: 99px; background: var(--nv-line-strong); }
html[data-ui-theme="nova"] .sheet-body { padding-top: 6px; }

/* drawer */
html[data-ui-theme="nova"] .drawer-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(9, 11, 20, .5); opacity: 0; pointer-events: none; transition: opacity var(--nv-d-base); }
html[data-ui-theme="nova"] .drawer-overlay.open { opacity: 1; pointer-events: auto; }
html[data-ui-theme="nova"] .drawer {
  position: fixed; top: 0; bottom: 0; z-index: 91; width: min(400px, 92vw);
  background: var(--nv-surface); box-shadow: var(--nv-e3); overflow: auto;
  transition: transform var(--nv-d-base) var(--nv-ease);
}
html[data-ui-theme="nova"] .drawer-right { inset-inline-end: 0; transform: translateX(100%); }
html[data-ui-theme="nova"] .drawer-left { inset-inline-start: 0; transform: translateX(-100%); }
html[data-ui-theme="nova"] [dir="rtl"] .drawer-right { transform: translateX(-100%); }
html[data-ui-theme="nova"] [dir="rtl"] .drawer-left { transform: translateX(100%); }
html[data-ui-theme="nova"] .drawer.open { transform: none !important; }

/* ------------------------------------------------------------ toasts */
html[data-ui-theme="nova"] .toasts {
  position: fixed; bottom: calc(var(--nv-dock-h, 0px) + 14px + env(safe-area-inset-bottom, 0px));
  inset-inline: 14px; z-index: 120; display: grid; gap: 8px; pointer-events: none;
}
@media (min-width: 768px) { html[data-ui-theme="nova"] .toasts { inset-inline-start: auto; inset-inline-end: 20px; width: 360px; bottom: 20px; } }
html[data-ui-theme="nova"] .toast {
  pointer-events: auto; display: flex; gap: 10px; align-items: flex-start;
  background: var(--nv-surface); border: 1px solid var(--nv-line);
  border-radius: var(--nv-r-md); padding: 12px 14px; box-shadow: var(--nv-e3);
  position: relative; overflow: hidden;
  transform: translateY(12px); opacity: 0; transition: all var(--nv-d-base) var(--nv-ease);
}
html[data-ui-theme="nova"] .toast.is-in { transform: none; opacity: 1; }
html[data-ui-theme="nova"] .toast.is-out { transform: translateY(8px); opacity: 0; }
html[data-ui-theme="nova"] .toast-ico { flex-shrink: 0; margin-top: 2px; }
html[data-ui-theme="nova"] .toast--success .toast-ico { color: var(--nv-ok); }
html[data-ui-theme="nova"] .toast--error .toast-ico { color: var(--nv-bad); }
html[data-ui-theme="nova"] .toast--info .toast-ico { color: var(--nv-info); }
html[data-ui-theme="nova"] .toast--warn .toast-ico { color: var(--nv-warn); }
html[data-ui-theme="nova"] .toast-title { font-size: .82rem; font-weight: 800; color: var(--nv-t1); }
html[data-ui-theme="nova"] .toast-text { font-size: .76rem; color: var(--nv-t2); margin-top: 2px; }
html[data-ui-theme="nova"] .toast-x { flex-shrink: 0; background: none; border: none; color: var(--nv-t3); cursor: pointer; padding: 2px; }
html[data-ui-theme="nova"] .toast-life { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: var(--nv-accent-grad); transform-origin: right; animation: nv-life linear forwards; }
html[data-ui-theme="nova"] .toast--error .toast-life { background: var(--nv-bad); }
html[data-ui-theme="nova"] .toast--success .toast-life { background: var(--nv-ok); }
html[data-ui-theme="nova"] .toast--warn .toast-life { background: var(--nv-warn); }
@keyframes nv-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------------------------------------------------- skeleton & states */
html[data-ui-theme="nova"] .skel, html[data-ui-theme="nova"] .skeleton {
  border-radius: var(--nv-r-md);
  background: linear-gradient(100deg, var(--nv-sunken) 40%, var(--nv-surface-2) 50%, var(--nv-sunken) 60%);
  background-size: 200% 100%;
  animation: nv-shimmer 1.4s linear infinite;
  border: 1px solid var(--nv-line);
}
@keyframes nv-shimmer { to { background-position: -200% 0; } }
html[data-ui-theme="nova"] .skeleton-card { height: 150px; }
html[data-ui-theme="nova"] .skel-line { height: 13px; margin: 8px 0; }
html[data-ui-theme="nova"] .skel-line--w60 { width: 60%; } html[data-ui-theme="nova"] .skel-line--w40 { width: 40%; }

html[data-ui-theme="nova"] .empty {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 40px 20px; color: var(--nv-t3);
}
html[data-ui-theme="nova"] .empty-art {
  width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: var(--nv-r-lg); background: var(--nv-sunken); color: var(--nv-t3);
  margin-bottom: 4px;
}
html[data-ui-theme="nova"] .empty-art svg { width: 28px; height: 28px; }
html[data-ui-theme="nova"] .empty h3 { margin: 0; font-size: .95rem; color: var(--nv-t2); }
html[data-ui-theme="nova"] .empty p { margin: 0; font-size: .8rem; max-width: 40ch; line-height: 1.9; }
html[data-ui-theme="nova"] .empty .btn { margin-top: 10px; }

/* state mount (loading | error | empty | data) — state-first UI */
html[data-ui-theme="nova"] .nv-state { min-height: 80px; }
html[data-ui-theme="nova"] .nv-state[aria-busy="true"] { display: grid; place-items: center; min-height: 120px; }
html[data-ui-theme="nova"] .nv-error {
  display: grid; justify-items: center; gap: 10px; text-align: center; padding: 34px 18px;
}
html[data-ui-theme="nova"] .nv-error__art {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: var(--nv-r-lg);
  background: var(--nv-bad-soft); color: var(--nv-bad);
}
html[data-ui-theme="nova"] .nv-error__title { font-weight: 800; color: var(--nv-t1); margin: 0; font-size: .95rem; }
html[data-ui-theme="nova"] .nv-error__msg { color: var(--nv-t3); font-size: .8rem; margin: 0; max-width: 46ch; }

/* ---------------------------------------------------- grid vocabularies */
html[data-ui-theme="nova"] .exams-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr));
}
html[data-ui-theme="nova"] .tiles, html[data-ui-theme="nova"] .tile-grid {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr));
}

/* ------------------------------------------------------------ exam card */
html[data-ui-theme="nova"] .exam-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--nv-surface); border: 1px solid var(--nv-line);
  border-radius: var(--nv-r-lg); padding: 16px;
  box-shadow: var(--nv-e1); position: relative; overflow: hidden;
  transition: transform var(--nv-d-base) var(--nv-ease), box-shadow var(--nv-d-base), border-color var(--nv-d-base);
}
html[data-ui-theme="nova"] .exam-card:hover { transform: translateY(-3px); box-shadow: var(--nv-e3); border-color: var(--nv-line-strong); }
html[data-ui-theme="nova"] .exam-card__state-band { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; border-radius: 0 99px 99px 0; }
html[data-ui-theme="nova"] .exam-thumb {
  width: 46px; height: 46px; border-radius: var(--nv-r-md);
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--nv-accent-soft); color: var(--nv-accent);
}
html[data-ui-theme="nova"] .exam-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
html[data-ui-theme="nova"] .exam-title { font-size: .92rem; font-weight: 800; color: var(--nv-t1); line-height: 1.7; }
html[data-ui-theme="nova"] .exam-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
html[data-ui-theme="nova"] .exam-foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--nv-line); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
html[data-ui-theme="nova"] .price { font-weight: 800; color: var(--nv-t1); font-size: .95rem; font-variant-numeric: tabular-nums; }
html[data-ui-theme="nova"] .price .toman, html[data-ui-theme="nova"] .toman { font-size: .68rem; font-weight: 600; color: var(--nv-t3); margin-inline-start: 3px; }
html[data-ui-theme="nova"] .price--free { color: var(--nv-ok); }
html[data-ui-theme="nova"] .price-old { text-decoration: line-through; color: var(--nv-t3); font-size: .76rem; font-weight: 600; }

/* horizontal snap rail (state rails) */
html[data-ui-theme="nova"] .mx-rail, html[data-ui-theme="nova"] .nv-rail-x {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
html[data-ui-theme="nova"] .mx-rail::-webkit-scrollbar, html[data-ui-theme="nova"] .nv-rail-x::-webkit-scrollbar { display: none; }
html[data-ui-theme="nova"] .mx-rail > *, html[data-ui-theme="nova"] .nv-rail-x > * {
  flex: 0 0 auto; width: min(300px, 78vw); scroll-snap-align: start;
}

/* ------------------------------------------------------------ tiles */
html[data-ui-theme="nova"] .tile {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-r-md);
  padding: calc(14px * var(--nv-density));
  transition: border-color var(--nv-d-fast), transform var(--nv-d-fast) var(--nv-ease), box-shadow var(--nv-d-fast);
  color: var(--nv-t2); text-decoration: none;
}
html[data-ui-theme="nova"] a.tile:hover, html[data-ui-theme="nova"] button.tile:hover { border-color: var(--nv-accent); transform: translateY(-2px); box-shadow: var(--nv-e2); }
html[data-ui-theme="nova"] .tile-label { font-size: .72rem; font-weight: 700; color: var(--nv-t3); display: flex; align-items: center; gap: 6px; }
html[data-ui-theme="nova"] .tile-label svg { color: var(--nv-accent); }
html[data-ui-theme="nova"] .tile-value { font-size: 1.3rem; font-weight: 800; color: var(--nv-t1); font-variant-numeric: tabular-nums; line-height: 1.5; }
html[data-ui-theme="nova"] .tile-sub { font-size: .7rem; color: var(--nv-t3); }
html[data-ui-theme="nova"] .tile-trend { font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; }
html[data-ui-theme="nova"] .tile-trend.is-up { color: var(--nv-ok); }
html[data-ui-theme="nova"] .tile-trend.is-down { color: var(--nv-bad); }

/* ------------------------------------------------------------ progress / bars */
html[data-ui-theme="nova"] .hbar { margin-bottom: 12px; }
html[data-ui-theme="nova"] .hbar-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; font-weight: 700; margin-bottom: 6px; gap: 8px; color: var(--nv-t2); }
html[data-ui-theme="nova"] .hbar-track { height: 9px; border-radius: 99px; background: var(--nv-sunken); overflow: hidden; }
html[data-ui-theme="nova"] .hbar-fill {
  height: 100%; border-radius: 99px; background: var(--nv-accent-grad);
  width: 0; transition: width 1s var(--nv-ease);
}
html[data-ui-theme="nova"] .hbar-fill.is-in { width: var(--w, 0%); }
html[data-ui-theme="nova"] .hbar-fill--ok { background: linear-gradient(90deg, #34d399, #0fa968); }
html[data-ui-theme="nova"] .hbar-fill--bad { background: linear-gradient(90deg, #f87171, #e5484d); }
html[data-ui-theme="nova"] .hbar-fill--info { background: linear-gradient(90deg, #60a5fa, #0e7fe0); }

html[data-ui-theme="nova"] .progressbar { height: 7px; background: var(--nv-sunken); border-radius: 99px; overflow: hidden; }
html[data-ui-theme="nova"] .progressbar > i {
  display: block; height: 100%; border-radius: inherit; background: var(--nv-accent-grad);
  width: 0; transition: width .4s var(--nv-ease);
}
html[data-ui-theme="nova"] .progressbar > i.is-in { width: var(--w, 0%); }

/* ------------------------------------------------------------ avatar */
html[data-ui-theme="nova"] .avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-grid; place-items: center;
  background: var(--nv-accent-grad); color: #fff; font-weight: 800; font-size: .95rem;
}

/* tick rows (menu/feature rows) */
html[data-ui-theme="nova"] .tick-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border: 1px solid var(--nv-line); border-radius: var(--nv-r-md); background: var(--nv-surface-2);
  color: var(--nv-t1); text-decoration: none; transition: border-color var(--nv-d-fast);
}
html[data-ui-theme="nova"] .tick-row:hover { border-color: var(--nv-accent); }
html[data-ui-theme="nova"] .tick-box {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: var(--nv-r-sm); background: var(--nv-accent-soft); color: var(--nv-accent);
}
html[data-ui-theme="nova"] .tick-title { font-size: .84rem; font-weight: 800; }
html[data-ui-theme="nova"] .tick-desc { font-size: .72rem; color: var(--nv-t3); }

/* token chip (balance chip) */
html[data-ui-theme="nova"] .token-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--nv-r-full);
  background: var(--nv-warn-soft); color: var(--nv-warn);
  font-size: .8rem; font-weight: 800; min-height: 38px;
}
html[data-ui-theme="nova"] .token-chip.hidden, html[data-ui-theme="nova"] .hidden { display: none !important; }

/* ------------------------------------------------------------ misc */
html[data-ui-theme="nova"] .skip-link {
  position: absolute; inset-inline-start: 12px; top: -48px; z-index: 200;
  background: var(--nv-accent); color: #fff; padding: 8px 16px; border-radius: var(--nv-r-sm);
  transition: top var(--nv-d-fast); font-size: .8rem; font-weight: 700;
}
html[data-ui-theme="nova"] .skip-link:focus { top: 12px; }
html[data-ui-theme="nova"] .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html[data-ui-theme="nova"] .mx-locked, html[data-ui-theme="nova"] body.mx-locked { overflow: hidden; }

html[data-ui-theme="nova"] .mx-announce {
  display: flex; align-items: center; gap: 10px;
  background: var(--nv-accent-grad); color: #fff;
  padding: 9px 16px; font-size: .8rem; font-weight: 700;
}
html[data-ui-theme="nova"] .mx-announce-text { color: #fff; flex: 1; min-width: 0; }
html[data-ui-theme="nova"] .mx-announce-x { background: rgba(255,255,255,.18); border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
html[data-ui-theme="nova"] .mx-announce.is-closing { transition: height .24s, opacity .24s; opacity: 0; overflow: hidden; }

html[data-ui-theme="nova"] .page-head { display: grid; gap: 4px; margin-bottom: 18px; }
html[data-ui-theme="nova"] .page-title { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 800; margin: 0; }
html[data-ui-theme="nova"] .page-sub { color: var(--nv-t3); font-size: .84rem; margin: 0; }
html[data-ui-theme="nova"] .page-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

html[data-ui-theme="nova"] .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--nv-t3); margin-bottom: 14px; flex-wrap: wrap; }
html[data-ui-theme="nova"] .breadcrumb a { color: var(--nv-t3); }
html[data-ui-theme="nova"] .breadcrumb a:hover { color: var(--nv-accent); }
html[data-ui-theme="nova"] .breadcrumb .sep { opacity: .5; }

/* ---------------- exam engine (take page) ---------------- */
html[data-ui-theme="nova"] .exam-top {
  position: sticky; top: 0; z-index: 40;
  background: var(--nv-glass); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nv-line);
  padding: 10px 0;
}
html[data-ui-theme="nova"] .exam-top-inner { display: flex; align-items: center; gap: 12px; }
html[data-ui-theme="nova"] .exam-timer {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--nv-r-full);
  background: var(--nv-sunken); color: var(--nv-t1);
  font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums;
  border: 1px solid var(--nv-line);
}
html[data-ui-theme="nova"] .exam-timer.is-low { background: var(--nv-bad-soft); color: var(--nv-bad); border-color: transparent; animation: nv-pulse 1s infinite; }
@keyframes nv-pulse { 50% { opacity: .65; } }

html[data-ui-theme="nova"] .qcard {
  background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-r-lg);
  padding: clamp(16px, 3vw, 26px); box-shadow: var(--nv-e2);
}
html[data-ui-theme="nova"] .qcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
html[data-ui-theme="nova"] .qnum { font-size: .8rem; font-weight: 800; color: var(--nv-t3); }
html[data-ui-theme="nova"] .qtext { font-size: 1rem; font-weight: 700; line-height: 2.1; color: var(--nv-t1); margin-bottom: 16px; white-space: pre-line; }
html[data-ui-theme="nova"] .qimage, html[data-ui-theme="nova"] .option-image {
  max-width: 100%; max-height: 320px; border-radius: var(--nv-r-md); border: 1px solid var(--nv-line);
  margin: 6px 0 14px; background: var(--nv-surface-2);
}

html[data-ui-theme="nova"] .opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 13px 15px; margin-bottom: 10px;
  border: 1.5px solid var(--nv-line); border-radius: var(--nv-r-md);
  background: var(--nv-surface); color: var(--nv-t1);
  font: inherit; font-size: .92rem; text-align: start; cursor: pointer;
  transition: border-color var(--nv-d-fast), background var(--nv-d-fast), box-shadow var(--nv-d-fast);
  min-height: 52px;
}
html[data-ui-theme="nova"] .opt:hover { border-color: var(--nv-accent); background: var(--nv-accent-soft); }
html[data-ui-theme="nova"] .opt.selected {
  border-color: var(--nv-accent); background: var(--nv-accent-soft);
  box-shadow: 0 0 0 3px var(--nv-accent-soft); font-weight: 700;
}
html[data-ui-theme="nova"] .opt.is-correct { border-color: var(--nv-ok); background: var(--nv-ok-soft); }
html[data-ui-theme="nova"] .opt.is-wrong { border-color: var(--nv-bad); background: var(--nv-bad-soft); }
html[data-ui-theme="nova"] .opt-bubble {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800;
  background: var(--nv-sunken); color: var(--nv-t2);
  transition: all var(--nv-d-fast);
}
html[data-ui-theme="nova"] .opt.selected .opt-bubble { background: var(--nv-accent); color: #fff; }
html[data-ui-theme="nova"] .opt.is-correct .opt-bubble { background: var(--nv-ok); color: #fff; }
html[data-ui-theme="nova"] .opt.is-wrong .opt-bubble { background: var(--nv-bad); color: #fff; }
html[data-ui-theme="nova"] .opt-body { min-width: 0; flex: 1; line-height: 2; }

html[data-ui-theme="nova"] .exam-foot {
  position: sticky; bottom: calc(var(--nv-dock-h, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 40;
  background: var(--nv-glass); backdrop-filter: blur(14px);
  border-top: 1px solid var(--nv-line); padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}
html[data-ui-theme="nova"] .exam-foot-inner { display: flex; align-items: center; gap: 10px; justify-content: space-between; }

html[data-ui-theme="nova"] .navgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 8px; }
html[data-ui-theme="nova"] .navdot {
  height: 42px; border-radius: var(--nv-r-sm); border: 1.5px solid var(--nv-line);
  background: var(--nv-surface-2); color: var(--nv-t2);
  font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
html[data-ui-theme="nova"] .navdot.is-answered { background: var(--nv-accent-soft); border-color: var(--nv-accent); color: var(--nv-accent); }
html[data-ui-theme="nova"] .navdot.is-flagged { border-color: var(--nv-warn); box-shadow: inset 0 -3px 0 var(--nv-warn); }
html[data-ui-theme="nova"] .navdot.is-current { background: var(--nv-accent); border-color: var(--nv-accent); color: #fff; }

/* ---------------- chat ---------------- */
html[data-ui-theme="nova"] .chat-wrap { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-r-lg); overflow: hidden; }
html[data-ui-theme="nova"] .chat-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: min(56vh, 540px); max-height: min(56vh, 540px); overflow-y: auto; background: var(--nv-surface-2); }
html[data-ui-theme="nova"] .bubble {
  max-width: 82%; padding: 10px 14px; border-radius: var(--nv-r-md);
  font-size: .88rem; line-height: 2; white-space: pre-line; word-break: break-word;
  box-shadow: var(--nv-e1);
}
html[data-ui-theme="nova"] .bubble--me { align-self: flex-start; background: var(--nv-accent); color: #fff; border-bottom-right-radius: 4px; }
html[data-ui-theme="nova"] .bubble--them { align-self: flex-end; background: var(--nv-surface); border: 1px solid var(--nv-line); color: var(--nv-t1); border-bottom-left-radius: 4px; }
html[data-ui-theme="nova"] .bubble-meta { font-size: .64rem; opacity: .75; margin-top: 4px; }
html[data-ui-theme="nova"] .chat-input-row { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--nv-line); background: var(--nv-surface); }
html[data-ui-theme="nova"] .chat-input-row input,
html[data-ui-theme="nova"] .chat-input-row textarea { flex: 1; min-height: 46px; border: 1.5px solid var(--nv-line); border-radius: var(--nv-r-md); padding: 8px 14px; font: inherit; background: var(--nv-surface-2); color: var(--nv-t1); }
html[data-ui-theme="nova"] .chat-input-row input:focus,
html[data-ui-theme="nova"] .chat-input-row textarea:focus { outline: none; border-color: var(--nv-accent); }

/* ---------------- results ---------------- */
html[data-ui-theme="nova"] .result-hero {
  background: var(--nv-accent-grad); color: #fff;
  border-radius: var(--nv-r-lg); padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--nv-e-accent); position: relative; overflow: hidden;
}
html[data-ui-theme="nova"] .result-hero .seal {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .4);
  font-size: 1.6rem; font-weight: 800;
}
html[data-ui-theme="nova"] .result-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
html[data-ui-theme="nova"] .gauge-wrap { display: grid; place-items: center; }

/* ---------------- footer ---------------- */
html[data-ui-theme="nova"] .footer {
  margin-top: 48px; background: var(--nv-sunken); border-top: 1px solid var(--nv-line);
  padding: 40px 0 90px; color: var(--nv-t2);
}
@media (min-width: 768px) { html[data-ui-theme="nova"] .footer { padding-bottom: 40px; } }
html[data-ui-theme="nova"] .footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 768px) { html[data-ui-theme="nova"] .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { html[data-ui-theme="nova"] .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
html[data-ui-theme="nova"] .footer-title { font-size: .85rem; font-weight: 800; color: var(--nv-t1); margin-bottom: 12px; }
html[data-ui-theme="nova"] .footer-links { display: grid; gap: 8px; font-size: .8rem; }
html[data-ui-theme="nova"] .footer-links a { color: var(--nv-t2); }
html[data-ui-theme="nova"] .footer-links a:hover { color: var(--nv-accent); }
html[data-ui-theme="nova"] .footer-contacts span { display: flex; align-items: center; gap: 8px; font-size: .78rem; }
html[data-ui-theme="nova"] .fc-ico { color: var(--nv-accent); display: inline-flex; }
html[data-ui-theme="nova"] .footer-social { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
html[data-ui-theme="nova"] .footer-social-link {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--nv-r-sm);
  background: var(--nv-surface); border: 1px solid var(--nv-line); color: var(--nv-t2);
}
html[data-ui-theme="nova"] .footer-social-link:hover { color: var(--nv-accent); border-color: var(--nv-accent); }
html[data-ui-theme="nova"] .footer-badges { display: flex; gap: 10px; flex-wrap: wrap; }
html[data-ui-theme="nova"] .footer-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px;
  border: 1px solid var(--nv-line); border-radius: var(--nv-r-sm); background: var(--nv-surface);
  font-size: .72rem; font-weight: 700; color: var(--nv-t2);
}
html[data-ui-theme="nova"] .footer-bottom { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--nv-line); font-size: .74rem; color: var(--nv-t3); text-align: center; }
html[data-ui-theme="nova"] .text-sm { font-size: .84rem; } html[data-ui-theme="nova"] .text-xs { font-size: .72rem; }
html[data-ui-theme="nova"] .text-muted { color: var(--nv-t3); } html[data-ui-theme="nova"] .text-ok { color: var(--nv-ok); }
html[data-ui-theme="nova"] .font-semibold { font-weight: 700; } html[data-ui-theme="nova"] .font-bold { font-weight: 800; }
html[data-ui-theme="nova"] .flex { display: flex; } html[data-ui-theme="nova"] .items-center { align-items: center; }
html[data-ui-theme="nova"] .justify-between { justify-content: space-between; } html[data-ui-theme="nova"] .gap-1 { gap: 6px; } html[data-ui-theme="nova"] .gap-2 { gap: 10px; }
html[data-ui-theme="nova"] .mt-1 { margin-top: 6px; } html[data-ui-theme="nova"] .mt-3 { margin-top: 16px; } html[data-ui-theme="nova"] .mt-4 { margin-top: 20px; } html[data-ui-theme="nova"] .mb-2 { margin-bottom: 10px; } html[data-ui-theme="nova"] .mb-3 { margin-bottom: 14px; }
html[data-ui-theme="nova"] .w-full { width: 100%; } html[data-ui-theme="nova"] .tabular-nums { font-variant-numeric: tabular-nums; }

/* =====================================================================
   NOVA — VOCABULARY BRIDGE (V7)
   The views are shared between themes, so Nova implements the complete
   component vocabulary the views use — in Nova's design language.
   ===================================================================== */

/* ---- panels & section scaffolding ---- */
html[data-ui-theme="nova"] .panel { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-r-lg); padding: calc(20px * var(--nv-density)); box-shadow: var(--nv-e1); }
html[data-ui-theme="nova"] .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
html[data-ui-theme="nova"] .panel-title { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 800; color: var(--nv-t1); margin: 0; }
html[data-ui-theme="nova"] .panel-title svg { color: var(--nv-accent); width: 1.1rem; height: 1.1rem; }
html[data-ui-theme="nova"] .section-head { display: grid; gap: 8px; text-align: center; margin-bottom: 34px; }
html[data-ui-theme="nova"] .eyebrow { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-inline: auto; font-size: .76rem; font-weight: 800; color: var(--nv-accent); background: var(--nv-accent-soft); padding: 4px 14px; border-radius: 99px; }
html[data-ui-theme="nova"] .eyebrow svg { width: .95rem; height: .95rem; }
html[data-ui-theme="nova"] .section { padding-block: clamp(40px, 7vw, 76px); }
html[data-ui-theme="nova"] .section--tight { padding-block: clamp(26px, 4vw, 46px); }
html[data-ui-theme="nova"] .section-title { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; margin: 0; letter-spacing: -.01em; }
html[data-ui-theme="nova"] .section-sub { color: var(--nv-t2); font-size: .92rem; max-width: 60ch; margin: 0 auto; line-height: 2; }
html[data-ui-theme="nova"] .text-center { text-align: center; }
html[data-ui-theme="nova"] .tiny { font-size: .7rem; }
html[data-ui-theme="nova"] .num { font-variant-numeric: tabular-nums; }
html[data-ui-theme="nova"] .text-gold { color: var(--nv-warn); }
html[data-ui-theme="nova"] .text-bad { color: var(--nv-bad); }
html[data-ui-theme="nova"] .badge--gold { background: var(--nv-warn-soft); color: var(--nv-warn); }
html[data-ui-theme="nova"] .badge--mut { background: var(--nv-sunken); color: var(--nv-t3); }
html[data-ui-theme="nova"] .grid { display: grid; }
html[data-ui-theme="nova"] .gap-3 { gap: 14px; } html[data-ui-theme="nova"] .gap-4 { gap: 18px; }
html[data-ui-theme="nova"] .mt-2 { margin-top: 10px; }
html[data-ui-theme="nova"] .mb-4 { margin-bottom: 18px; } html[data-ui-theme="nova"] .mb-6 { margin-bottom: 28px; }
html[data-ui-theme="nova"] .flex-col { flex-direction: column; }
html[data-ui-theme="nova"] .justify-end { justify-content: flex-end; }
html[data-ui-theme="nova"] .justify-center { justify-content: center; }
html[data-ui-theme="nova"] .row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
html[data-ui-theme="nova"] .row { display: flex; align-items: center; gap: 8px; }
html[data-ui-theme="nova"] .list-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--nv-line); }
html[data-ui-theme="nova"] .list-row:last-child { border-bottom: none; }
html[data-ui-theme="nova"] .stats-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
html[data-ui-theme="nova"] .stat-icon { width: 42px; height: 42px; border-radius: var(--nv-r-md); display: inline-grid; place-items: center; background: var(--nv-accent-soft); color: var(--nv-accent); flex-shrink: 0; }
html[data-ui-theme="nova"] .stat-icon svg { width: 20px; height: 20px; }
html[data-ui-theme="nova"] .stat-card { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-r-md); padding: calc(14px * var(--nv-density)); display: grid; gap: 4px; }
html[data-ui-theme="nova"] .stat-card b { font-size: 1.25rem; color: var(--nv-t1); font-variant-numeric: tabular-nums; }
html[data-ui-theme="nova"] .stat-card span { font-size: .72rem; color: var(--nv-t3); font-weight: 700; }

/* ---- buttons: extra variants used by views ---- */
html[data-ui-theme="nova"] .btn--ok { background: var(--nv-ok); border: none; color: #fff; }
html[data-ui-theme="nova"] .btn--ok:hover { filter: brightness(1.05); }
html[data-ui-theme="nova"] .btn--block { width: 100%; }
html[data-ui-theme="nova"] .btn--lg { min-height: 50px; padding: 12px 26px; font-size: .95rem; border-radius: var(--nv-r-md); }
html[data-ui-theme="nova"] .btn.is-success { background: var(--nv-ok); color: #fff; border-color: transparent; }

/* ---- forms: field extras ---- */
html[data-ui-theme="nova"] .field-label { font-size: .78rem; font-weight: 700; color: var(--nv-t2); }
html[data-ui-theme="nova"] .field-note { font-size: .72rem; color: var(--nv-t3); }
html[data-ui-theme="nova"] .field-error { font-size: .72rem; color: var(--nv-bad); font-weight: 700; }
html[data-ui-theme="nova"] .field--icon { display: flex; align-items: center; gap: 9px; padding-inline: 14px; }
html[data-ui-theme="nova"] .field--icon .lead, html[data-ui-theme="nova"] .field--icon svg:first-child { width: 1.05rem; height: 1.05rem; color: var(--nv-t3); flex-shrink: 0; }
html[data-ui-theme="nova"] .field--icon .field-input { border: none; background: transparent; padding: 10px 0; min-height: 42px; flex: 1; }
html[data-ui-theme="nova"] .field--icon:focus-within { box-shadow: 0 0 0 3px var(--nv-accent-soft); }
html[data-ui-theme="nova"] .field-input::placeholder { color: var(--nv-t3); }
html[data-ui-theme="nova"] .field-trail { display: flex; align-items: center; gap: 6px; }
html[data-ui-theme="nova"] .switch { position: relative; width: 44px; height: 26px; border-radius: 99px; background: var(--nv-line-strong); border: none; cursor: pointer; transition: background var(--nv-d-fast); flex-shrink: 0; }
html[data-ui-theme="nova"] .switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
html[data-ui-theme="nova"] .switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--nv-d-fast) var(--nv-ease); box-shadow: 0 1px 3px rgba(20, 22, 43, .25); }
/* FIX: the state carrier is the hidden checkbox inside the span — the old
   `.switch.on` / [aria-checked] hooks never fired, so Nova toggles always
   painted the OFF state (real bug found in browser QA on admin settings). */
html[data-ui-theme="nova"] .switch.on,
html[data-ui-theme="nova"] .switch[aria-checked="true"],
html[data-ui-theme="nova"] .switch:has(input:checked) { background: var(--nv-accent); }
html[data-ui-theme="nova"] .switch.on::after,
html[data-ui-theme="nova"] .switch[aria-checked="true"]::after,
html[data-ui-theme="nova"] .switch:has(input:checked)::after { transform: translateX(-18px); }
html[data-ui-theme="nova"] .form-grid label { display: grid; gap: 6px; }

/* ---- tabs: tab-btn contract ---- */
html[data-ui-theme="nova"] .tab-btn {
  padding: 10px 16px; border: none; background: none; cursor: pointer;
  color: var(--nv-t3); font: inherit; font-size: .86rem; font-weight: 700;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  transition: color var(--nv-d-fast), border-color var(--nv-d-fast);
}
html[data-ui-theme="nova"] .tab-btn:hover { color: var(--nv-t1); }
html[data-ui-theme="nova"] .tab-btn.active { color: var(--nv-accent); border-bottom-color: var(--nv-accent); }
html[data-ui-theme="nova"] .tab-btn svg { width: 1.05rem; height: 1.05rem; }
html[data-ui-theme="nova"] [data-tab-panel] > * + * { margin-top: 14px; }

/* ---- skeleton extras ---- */
html[data-ui-theme="nova"] .skeleton-line { height: 12px; border-radius: 99px; margin: 9px 0; }
html[data-ui-theme="nova"] .skel-line--w80 { width: 80%; }

/* ---- exam card extras ---- */
html[data-ui-theme="nova"] .exam-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; }
html[data-ui-theme="nova"] .exam-body { display: grid; gap: 7px; }
html[data-ui-theme="nova"] .exam-grade { font-size: .74rem; color: var(--nv-t3); }
html[data-ui-theme="nova"] .price-tag { font-weight: 800; color: var(--nv-t1); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 3px; }
html[data-ui-theme="nova"] .price-tag .free, html[data-ui-theme="nova"] .free { color: var(--nv-ok); font-weight: 800; }
html[data-ui-theme="nova"] .omr-strip { display: inline-flex; gap: 3px; align-items: center; }
html[data-ui-theme="nova"] .omr-strip i { width: 5px; height: 12px; border-radius: 2px; background: var(--nv-line-strong); }
html[data-ui-theme="nova"] .omr-strip i.on { background: var(--nv-accent); opacity: .75; }

/* ---- product detail grid ---- */
html[data-ui-theme="nova"] .pdp-grid { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) { html[data-ui-theme="nova"] .pdp-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
html[data-ui-theme="nova"] .secure-note { display: flex; align-items: center; gap: 7px; font-size: .72rem; color: var(--nv-t3); }
html[data-ui-theme="nova"] .secure-note svg { color: var(--nv-ok); }

/* ---- checkout grid ---- */
html[data-ui-theme="nova"] .co-grid { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) { html[data-ui-theme="nova"] .co-grid { grid-template-columns: minmax(0, 1fr) 330px; } }
html[data-ui-theme="nova"] .cart-summary { position: sticky; top: calc(var(--nv-topbar-h, 66px) + 16px); }
html[data-ui-theme="nova"] .total-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: .84rem; color: var(--nv-t2); }
html[data-ui-theme="nova"] .total-row.grand { font-size: 1.02rem; font-weight: 800; color: var(--nv-t1); border-top: 1px dashed var(--nv-line-strong); margin-top: 6px; padding-top: 12px; }
html[data-ui-theme="nova"] .mx-step { display: flex; align-items: center; gap: 10px; }
html[data-ui-theme="nova"] .mx-step-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--nv-sunken); color: var(--nv-t3); font-size: .78rem; font-weight: 800; border: 1.5px solid var(--nv-line); flex-shrink: 0; }
html[data-ui-theme="nova"] .mx-step.is-done .mx-step-dot, html[data-ui-theme="nova"] .mx-step.is-active .mx-step-dot { background: var(--nv-accent); color: #fff; border-color: var(--nv-accent); }
html[data-ui-theme="nova"] .mx-step-line { flex: 1; height: 2px; background: var(--nv-line); min-width: 18px; }
html[data-ui-theme="nova"] .mx-step.is-done .mx-step-line { background: var(--nv-accent); }
html[data-ui-theme="nova"] .mx-step-label { font-size: .74rem; font-weight: 700; color: var(--nv-t3); }
html[data-ui-theme="nova"] .mx-step.is-active .mx-step-label, html[data-ui-theme="nova"] .mx-step.is-done .mx-step-label { color: var(--nv-t1); }
html[data-ui-theme="nova"] .mx-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }

/* ---- quick links / steps / floaters ---- */
html[data-ui-theme="nova"] .mx-quick-link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--nv-line); border-radius: var(--nv-r-md); background: var(--nv-surface); color: var(--nv-t1); font-size: .84rem; font-weight: 700; text-decoration: none; transition: border-color var(--nv-d-fast), transform var(--nv-d-fast); }
html[data-ui-theme="nova"] .mx-quick-link:hover { border-color: var(--nv-accent); transform: translateY(-1px); }
html[data-ui-theme="nova"] .mx-quick-chev { margin-inline-start: auto; color: var(--nv-t3); display: inline-flex; }
html[data-ui-theme="nova"] .mx-quick-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin-bottom: 22px; }
html[data-ui-theme="nova"] .mx-float { animation: nv-float 5s ease-in-out infinite; }
html[data-ui-theme="nova"] .mx-float--slow { animation: nv-float 7s ease-in-out infinite; }
@keyframes nv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
html[data-ui-theme="nova"] .mx-pop { animation: nv-pop .3s var(--nv-ease); }
@keyframes nv-pop { from { opacity: 0; transform: scale(.94); } }
html[data-ui-theme="nova"] .mx-flash { animation: nv-flash 1.1s var(--nv-ease); }
@keyframes nv-flash { 0% { box-shadow: 0 0 0 0 var(--nv-accent-soft); } 40% { box-shadow: 0 0 0 7px var(--nv-accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
html[data-ui-theme="nova"] .mx-shimmer { border: 1px solid color-mix(in srgb, var(--nv-accent) 30%, var(--nv-line)); }
html[data-ui-theme="nova"] .mx-glow { box-shadow: var(--nv-e-accent); }
html[data-ui-theme="nova"] .mx-magnetic { will-change: transform; }
html[data-ui-theme="nova"] .reg-corners { border-radius: var(--nv-r-lg); }
html[data-ui-theme="nova"] .mx-grad-border { padding: 1.5px; background: var(--nv-accent-grad); border-radius: calc(var(--nv-r-lg) + 2px); }
html[data-ui-theme="nova"] .mx-grad-border > * { background: var(--nv-surface); border-radius: var(--nv-r-lg); }
html[data-ui-theme="nova"] .mx-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; animation: nv-pulse 1.6s infinite; }
html[data-ui-theme="nova"] .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; animation: nv-pulse 1.6s infinite; }

/* ---- qcard extras + exam engine ---- */
html[data-ui-theme="nova"] .qtotal { font-size: .74rem; color: var(--nv-t3); }
html[data-ui-theme="nova"] .flag-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--nv-r-sm); border: 1.5px solid var(--nv-line); background: var(--nv-surface); color: var(--nv-t2); font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
html[data-ui-theme="nova"] .flag-btn.on { border-color: var(--nv-warn); color: var(--nv-warn); background: var(--nv-warn-soft); }
html[data-ui-theme="nova"] .flag-btn svg { width: .95rem; height: .95rem; }
html[data-ui-theme="nova"] .opts { display: grid; gap: 10px; }
html[data-ui-theme="nova"] .opts .opt { margin-bottom: 0; }
html[data-ui-theme="nova"] .opt--correct { border-color: var(--nv-ok); background: var(--nv-ok-soft); }
html[data-ui-theme="nova"] .opt--wrong { border-color: var(--nv-bad); background: var(--nv-bad-soft); }
html[data-ui-theme="nova"] .timer { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 99px; background: var(--nv-sunken); font-weight: 800; font-variant-numeric: tabular-nums; border: 1px solid var(--nv-line); font-size: .88rem; }
html[data-ui-theme="nova"] .timer.is-low { background: var(--nv-bad-soft); color: var(--nv-bad); border-color: transparent; }
html[data-ui-theme="nova"] .exam-progress { display: grid; gap: 5px; min-width: 140px; flex: 1; max-width: 260px; }
html[data-ui-theme="nova"] .exam-progress-top { display: flex; justify-content: space-between; font-size: .66rem; color: var(--nv-t3); font-weight: 700; }
html[data-ui-theme="nova"] .exam-progress-track { height: 7px; background: var(--nv-sunken); border-radius: 99px; overflow: hidden; }
html[data-ui-theme="nova"] .exam-progress-fill { height: 100%; background: var(--nv-accent-grad); border-radius: 99px; width: 0; transition: width .35s var(--nv-ease); }
html[data-ui-theme="nova"] .exam-shell { padding-block: 20px 30px; min-height: 50vh; }
html[data-ui-theme="nova"] .exam-title { font-size: .95rem; font-weight: 800; color: var(--nv-t1); flex: 1; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui-theme="nova"] .mx-kbd-hint { display: none; gap: 16px; justify-content: center; font-size: .7rem; color: var(--nv-t3); padding: 12px 0 4px; }
@media (min-width: 900px) { html[data-ui-theme="nova"] .mx-kbd-hint { display: flex; } }
html[data-ui-theme="nova"] .mx-kbd-hint kbd { border: 1px solid var(--nv-line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 7px; font-size: .68rem; background: var(--nv-surface); }
html[data-ui-theme="nova"] .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; }

/* ---- results ---- */
html[data-ui-theme="nova"] .result-score { font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
html[data-ui-theme="nova"] .result-score small { font-size: .45em; opacity: .85; }
html[data-ui-theme="nova"] .result-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
html[data-ui-theme="nova"] .result-chips .badge { background: var(--nv-surface-2); border: 1px solid var(--nv-line-strong); color: var(--nv-t1); }
html[data-ui-theme="nova"] .result-tile { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-r-md); padding: 14px; text-align: center; }
html[data-ui-theme="nova"] .result-tile .v { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
html[data-ui-theme="nova"] .result-tile .l { font-size: .72rem; color: var(--nv-t3); font-weight: 700; }
html[data-ui-theme="nova"] .q-row { border: 1px solid var(--nv-line); border-radius: var(--nv-r-md); background: var(--nv-surface); margin-bottom: 10px; overflow: hidden; }
html[data-ui-theme="nova"] .q-row summary { display: flex; align-items: center; gap: 10px; padding: 12px 15px; cursor: pointer; list-style: none; font-size: .84rem; }
html[data-ui-theme="nova"] .q-row summary::-webkit-details-marker { display: none; }
html[data-ui-theme="nova"] .q-row summary:hover { background: var(--nv-surface-2); }
html[data-ui-theme="nova"] .q-row .qnum { font-weight: 800; color: var(--nv-t3); min-width: 22px; }
html[data-ui-theme="nova"] .q-row .q-snippet { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nv-t2); }
html[data-ui-theme="nova"] .q-row .q-chev { color: var(--nv-t3); transition: transform var(--nv-d-fast); }
html[data-ui-theme="nova"] .q-row[open] .q-chev { transform: rotate(180deg); }
html[data-ui-theme="nova"] .q-row-body { padding: 4px 15px 16px; border-top: 1px dashed var(--nv-line); }
html[data-ui-theme="nova"] .q-row--ok summary .badge--ok, html[data-ui-theme="nova"] .q-row--bad summary .badge--bad { min-width: 34px; justify-content: center; }

/* ---- gauge & seal (result / hero mock) ---- */
html[data-ui-theme="nova"] .gauge { position: relative; display: grid; place-items: center; }
html[data-ui-theme="nova"] .gauge svg { width: 100%; height: auto; transform: rotate(-90deg); }
html[data-ui-theme="nova"] .gauge-track { fill: none; stroke: var(--nv-sunken); stroke-width: 12; }
html[data-ui-theme="nova"] .gauge-fill { fill: none; stroke: var(--nv-accent); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 408; }
html[data-ui-theme="nova"] .gauge-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 0; }
html[data-ui-theme="nova"] .gauge-value { font-size: 1.5rem; font-weight: 900; }
html[data-ui-theme="nova"] .gauge-label { font-size: .68rem; color: var(--nv-t3); }
html[data-ui-theme="nova"] .seal { position: relative; width: 74px; height: 74px; display: grid; place-items: center; flex-shrink: 0; }
html[data-ui-theme="nova"] .seal-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--gold-1, var(--nv-warn)); opacity: .65; }
html[data-ui-theme="nova"] .seal-ring--2 { inset: 8px; border-style: solid; opacity: .4; }
html[data-ui-theme="nova"] .seal-check { width: 30px; height: 30px; color: var(--gold-1, var(--nv-warn)); }
html[data-ui-theme="nova"] .seal.is-stamped { animation: nv-stamp .5s var(--nv-ease); }
@keyframes nv-stamp { 0% { transform: scale(1.7); opacity: 0; } 60% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1); } }

/* ---- chat aliases (support-room.js class names) ---- */
html[data-ui-theme="nova"] .chat-bubble { max-width: 82%; padding: 10px 14px; border-radius: var(--nv-r-md); font-size: .88rem; line-height: 2; white-space: pre-line; word-break: break-word; box-shadow: var(--nv-e1); }
html[data-ui-theme="nova"] .bubble-mine { align-self: flex-start; background: var(--nv-accent); color: #fff; border-bottom-right-radius: 4px; }
html[data-ui-theme="nova"] .bubble-other { align-self: flex-end; background: var(--nv-surface); border: 1px solid var(--nv-line); color: var(--nv-t1); border-bottom-left-radius: 4px; }

/* ---- modal body/foot aliases ---- */
html[data-ui-theme="nova"] .modal-body { display: grid; gap: 12px; }
html[data-ui-theme="nova"] .modal-foot { display: flex; gap: 10px; justify-content: flex-start; margin-top: 16px; flex-wrap: wrap; }

/* ---- hero (public landing) ---- */
html[data-ui-theme="nova"] .hero { position: relative; overflow: hidden; padding-block: clamp(44px, 8vw, 90px) clamp(30px, 5vw, 60px); }
html[data-ui-theme="nova"] .hero-bg { position: absolute; inset: 0; pointer-events: none; }
html[data-ui-theme="nova"] .hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
html[data-ui-theme="nova"] .hero-orb--1 { width: 420px; height: 420px; background: var(--nv-accent); opacity: .16; top: -140px; inset-inline-start: -110px; }
html[data-ui-theme="nova"] .hero-orb--2 { width: 360px; height: 360px; background: var(--nv-accent-2); opacity: .14; bottom: -160px; inset-inline-end: -80px; }
html[data-ui-theme="nova"] .hero-inner { position: relative; }
html[data-ui-theme="nova"] .hero-grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 1024px) { html[data-ui-theme="nova"] .hero-grid { grid-template-columns: 1.15fr .85fr; } }
html[data-ui-theme="nova"] .hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; color: var(--nv-t2); background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: 99px; padding: 6px 15px; }
html[data-ui-theme="nova"] .hero-title { font-size: clamp(1.7rem, 4.6vw, 3rem); font-weight: 900; line-height: 1.5; letter-spacing: -.015em; margin: 14px 0 10px; }
html[data-ui-theme="nova"] .hero-sub { color: var(--nv-t2); font-size: clamp(.9rem, 1.6vw, 1.02rem); max-width: 56ch; line-height: 2.1; margin: 0 0 22px; }
html[data-ui-theme="nova"] .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* Nova hero has no permanently-dark background (it uses --nv-bg), so the
   outline button cannot be a permanently-light pill. Instead, strengthen
   the border so the button is clearly distinguishable from the page bg in
   both light and dark modes. */
html[data-ui-theme="nova"] .hero-cta .btn--outline {
  border-width: 2px;
  border-color: var(--nv-line-strong);
  box-shadow: var(--nv-e1), inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}
html[data-ui-theme="nova"] .hero-cta .btn--outline:hover {
  border-color: var(--nv-accent);
  color: var(--nv-accent);
}
html[data-ui-theme="nova"] .hero-cta .btn--outline:focus-visible {
  outline: 2px solid var(--nv-accent); outline-offset: 3px;
}
html[data-ui-theme="nova"] .gold-text { background: var(--nv-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-ui-theme="nova"] .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nv-ok); display: inline-block; }
html[data-ui-theme="nova"] .badge-dot--pulse { animation: nv-pulse 1.8s infinite; }
html[data-ui-theme="nova"] .hero-stats { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 30px; }
html[data-ui-theme="nova"] .hero-stat-value { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
html[data-ui-theme="nova"] .hero-stat-label { font-size: .74rem; color: var(--nv-t3); font-weight: 700; }
html[data-ui-theme="nova"] .hero-scroll-cue { position: absolute; bottom: 14px; inset-inline-start: 50%; transform: translateX(50%); color: var(--nv-t3); opacity: .7; }
html[data-ui-theme="nova"] .omr-divider { display: flex; gap: 7px; justify-content: center; padding-block: 20px; }
html[data-ui-theme="nova"] .omr-divider i { width: 5px; height: 16px; border-radius: 2px; background: var(--nv-line-strong); }
html[data-ui-theme="nova"] .omr-divider i:nth-child(3n) { background: var(--nv-accent); opacity: .6; }
html[data-ui-theme="nova"] .trust { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
html[data-ui-theme="nova"] .trust-item { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--nv-t2); background: var(--nv-surface); border: 1px solid var(--nv-line); padding: 8px 16px; border-radius: 99px; }
html[data-ui-theme="nova"] .trust-item svg { color: var(--nv-ok); width: 1rem; height: 1rem; }
html[data-ui-theme="nova"] .features-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
html[data-ui-theme="nova"] .feature-card { position: relative; display: grid; gap: 9px; align-content: start; }
html[data-ui-theme="nova"] .feature-num { position: absolute; top: 14px; inset-inline-end: 16px; font-size: 2rem; font-weight: 900; color: var(--nv-sunken); line-height: 1; }
html[data-ui-theme="nova"] .feature-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--nv-accent-soft); color: var(--nv-accent); }
html[data-ui-theme="nova"] .feature-icon svg { width: 22px; height: 22px; }
html[data-ui-theme="nova"] .feature-card h3 { margin: 0; font-size: .98rem; }
html[data-ui-theme="nova"] .feature-card p { margin: 0; font-size: .8rem; color: var(--nv-t2); line-height: 2; }
html[data-ui-theme="nova"] .cta-band { background: var(--nv-accent-grad); border-radius: var(--nv-r-lg); padding: clamp(30px, 6vw, 54px); text-align: center; color: #fff; box-shadow: var(--nv-e-accent); }
html[data-ui-theme="nova"] .cta-band h2 { color: #fff; font-size: clamp(1.3rem, 3vw, 1.8rem); }
html[data-ui-theme="nova"] .cta-band p { color: rgba(255, 255, 255, .88); max-width: 52ch; margin: 8px auto 20px; line-height: 2; }
html[data-ui-theme="nova"] .cta-band .btn--outline {
  /* CTA band uses --nv-accent-grad (permanently coloured) — a permanently-light
     pill works in both light & dark themes. The previous override set
     border-color: var(--nv-surface) which equals the button bg, making the
     border invisible — and in dark mode --nv-surface itself is dark, so the
     button lost its outline character on the bright gradient. */
  background: #ffffff;
  border: 1px solid var(--nv-accent);
  color: #14162b;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
html[data-ui-theme="nova"] .cta-band .btn--outline:hover {
  background: #f4f2ea;
  border-color: var(--nv-accent-2);
  color: #14162b;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
html[data-ui-theme="nova"] .cta-band .btn--outline:focus-visible {
  outline-color: var(--nv-accent); outline-offset: 3px;
}
html[data-ui-theme="nova"] .float-chip { position: absolute; display: flex; align-items: center; gap: 9px; background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-r-md); padding: 9px 14px; font-size: .74rem; font-weight: 800; box-shadow: var(--nv-e3); }
html[data-ui-theme="nova"] .float-chip small { display: block; font-size: .62rem; color: var(--nv-t3); font-weight: 600; }
html[data-ui-theme="nova"] .float-chip svg { color: var(--nv-accent); }

/* ---- FAQ details ---- */
html[data-ui-theme="nova"] .mx-faq { display: grid; gap: 10px; max-width: 780px; margin-inline: auto; }
html[data-ui-theme="nova"] .mx-faq-item { border: 1px solid var(--nv-line); border-radius: var(--nv-r-md); background: var(--nv-surface); padding: 0 16px; }
html[data-ui-theme="nova"] .mx-faq-item[open] { border-color: var(--nv-accent); }
html[data-ui-theme="nova"] .mx-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 2px; cursor: pointer; list-style: none; font-weight: 800; font-size: .9rem; }
html[data-ui-theme="nova"] .mx-faq-q::-webkit-details-marker { display: none; }
html[data-ui-theme="nova"] .mx-faq-q svg { color: var(--nv-accent); transition: transform var(--nv-d-fast); flex-shrink: 0; }
html[data-ui-theme="nova"] .mx-faq-item[open] .mx-faq-q svg { transform: rotate(45deg); }
html[data-ui-theme="nova"] .mx-faq-a { color: var(--nv-t2); font-size: .84rem; line-height: 2.1; padding: 2px 2px 16px; margin: 0; }

/* ---- article cards (blog) ---- */
html[data-ui-theme="nova"] .article-card { overflow: hidden; display: flex; flex-direction: column; padding: 0; }
html[data-ui-theme="nova"] .article-cover { position: relative; display: block; aspect-ratio: 16/9; background: var(--nv-sunken); }
html[data-ui-theme="nova"] .article-cover img { width: 100%; height: 100%; object-fit: cover; }
html[data-ui-theme="nova"] .article-cat { position: absolute; bottom: 10px; inset-inline-start: 10px; }
html[data-ui-theme="nova"] .article-body { padding: 15px 16px 17px; display: grid; gap: 8px; }
html[data-ui-theme="nova"] .article-title { margin: 0; font-size: .95rem; line-height: 1.8; }
html[data-ui-theme="nova"] .article-title a { color: var(--nv-t1); }
html[data-ui-theme="nova"] .article-title a:hover { color: var(--nv-accent); }
html[data-ui-theme="nova"] .article-excerpt { margin: 0; font-size: .78rem; color: var(--nv-t2); line-height: 2; }
html[data-ui-theme="nova"] .article-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .68rem; color: var(--nv-t3); }
html[data-ui-theme="nova"] .article-meta b { font-weight: 400; display: inline-flex; }
html[data-ui-theme="nova"] .article-meta b svg { width: 12px; height: 12px; margin-inline-end: 3px; }
html[data-ui-theme="nova"] .stamped::after { content: none; }

/* ---- auth shell ---- */
html[data-ui-theme="nova"] .auth-shell { min-height: 100vh; display: grid; }
@media (min-width: 1024px) { html[data-ui-theme="nova"] .auth-shell { grid-template-columns: minmax(340px, 44%) 1fr; } }
html[data-ui-theme="nova"] .auth-card-wrap { display: grid; place-items: center; padding: 30px 16px; }
html[data-ui-theme="nova"] .auth-card { width: min(430px, 100%); background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-r-lg); padding: 30px 26px; box-shadow: var(--nv-e3); }
html[data-ui-theme="nova"] .auth-head { text-align: center; margin-bottom: 22px; display: grid; gap: 6px; }
html[data-ui-theme="nova"] .auth-title { font-size: 1.25rem; font-weight: 800; margin: 0; }
html[data-ui-theme="nova"] .auth-sub { color: var(--nv-t3); font-size: .8rem; margin: 0; }
html[data-ui-theme="nova"] .auth-foot { text-align: center; font-size: .76rem; color: var(--nv-t3); margin-top: 18px; }
html[data-ui-theme="nova"] .otp, html[data-ui-theme="nova"] .otp-row { display: flex; gap: 9px; justify-content: center; direction: ltr; }
html[data-ui-theme="nova"] .mx-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; border-radius: var(--nv-r-md); font-size: .82rem; background: var(--nv-info-soft); color: var(--nv-info); }

/* ---- footer utilities on nova public ---- */
html[data-ui-theme="nova"] .mb-1 { margin-bottom: 6px; }
html[data-ui-theme="nova"] .text-base { font-size: 1rem; }

/* ---- MXIcons size contracts (JS-injected SVGs have no intrinsic size) ---- */
html[data-ui-theme="nova"] .tile-label svg,
html[data-ui-theme="nova"] .tile-ico svg,
html[data-ui-theme="nova"] .exam-thumb svg,
html[data-ui-theme="nova"] .exam-meta svg,
html[data-ui-theme="nova"] .list-row svg,
html[data-ui-theme="nova"] .total-row svg,
html[data-ui-theme="nova"] .mx-notif-ico svg,
html[data-ui-theme="nova"] .stat-card svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
html[data-ui-theme="nova"] .tile-trend svg { width: 12px; height: 12px; flex-shrink: 0; }
html[data-ui-theme="nova"] .ico-sm { width: 13px; height: 13px; flex: none; display: inline-block; vertical-align: -2px; }
html[data-ui-theme="nova"] .tick-box svg { width: 18px; height: 18px; }
html[data-ui-theme="nova"] .nv-strip__actions .btn svg { width: 1em; height: 1em; }
html[data-ui-theme="nova"] .badge svg { width: .85em; height: .85em; flex-shrink: 0; }
html[data-ui-theme="nova"] .chip svg { width: .95em; height: .95em; flex-shrink: 0; }
html[data-ui-theme="nova"] .result-chips svg { width: 1em; height: 1em; }
html[data-ui-theme="nova"] .tab-btn svg, html[data-ui-theme="nova"] .tab svg { width: 1rem; height: 1rem; }