/* ===== PREMIUM REDESIGNED styles.css ===== */
/* Uses design-tokens.css — fonts loaded from index.html for faster first paint */
/* ════════════════════════════════════════ RESET & BASE ════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* Skip link — keyboard / screen reader entry to main */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  padding: 10px 18px;
  border-radius: var(--r2, 10px);
  background: var(--primary-500, #3D5AFE);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(13, 13, 20, 0.2);
  transition: top 0.15s ease;
}
.skip-link:focus-visible,
.skip-link:focus {
  top: 12px;
  outline: 3px solid var(--amber, #e8a400);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  direction: rtl;
  background-image:
    radial-gradient(ellipse 90% 55% at 10% -5%, rgba(61,90,254,.055) 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 92% 15%, rgba(109,53,224,.045) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 15% 20%, rgba(61,90,254,.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 80%, rgba(109,53,224,.03) 0%, transparent 50%),
    linear-gradient(180deg, var(--neutral-50) 0%, var(--bg) 32%, var(--bg) 100%);
}

/* background-attachment:fixed is a GPU layer killer on iOS — limit to true pointer devices */
@media (hover: hover) and (pointer: fine) {
  body { background-attachment: fixed; }
}

input, textarea, select, button {
  font-family: var(--font);
  direction: rtl;
}

/* English mode — LTR layout */
body.lang-en {
  direction: ltr;
}

body.lang-en input, body.lang-en textarea, body.lang-en select, body.lang-en button {
  direction: ltr;
}

body.lang-en .hitem:hover {
  border-right-color: transparent;
  border-left-color: var(--blue);
  background: linear-gradient(to left, var(--blue-l), var(--card));
}

body.lang-en .box-a {
  border-right: none;
  border-left: 3px solid var(--border-d);
}

body.lang-en .box-a.active {
  border-left-color: var(--green);
}

body.lang-en .nq-item::before {
  content: '→ ';
}

body.lang-en .nq-item:hover {
  transform: translateX(3px);
}

body.lang-en .card-title::before {
  margin-left: 0;
  margin-right: 0;
}

body.lang-en #answerWordCount {
  direction: ltr;
  text-align: right;
}

/* ════════════════════════════════════════ ANIMATIONS ════════════════════════════════════════ */
@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeUp {
  from {
    opacity:0;
    transform:translateY(12px);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes fadeIn {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}

@keyframes slideUp {
  from {
    opacity:0;
    transform:translateY(18px);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes bounceIn {
  from {
    opacity:0;
    transform:scale(.55);
  }
  to {
    opacity:1;
    transform:scale(1);
  }
}

@keyframes blink {
  0%,100% {
    opacity:1
  }
  50% {
    opacity:.2
  }
}

@keyframes pulse {
  0%,100% {
    transform:scale(1)
  }
  50% {
    transform:scale(1.45)
  }
}

@keyframes wv {
  0%,100% {
    height:4px
  }
  50% {
    height:22px
  }
}

@keyframes shimmer {
  0% {
    background-position:-200% 0
  }
  100% {
    background-position:200% 0
  }
}

@keyframes micRing {
  0% {
    transform:scale(1);
    opacity:.5
  }
  70% {
    transform:scale(1.14);
    opacity:0
  }
  100% {
    transform:scale(1.14);
    opacity:0
  }
}

@keyframes micRingActive {
  0% {
    transform:scale(1);
    opacity:.7
  }
  70% {
    transform:scale(1.18);
    opacity:0
  }
  100% {
    transform:scale(1.18);
    opacity:0
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes scoreIn {
  from {
    opacity:0;
    transform:scale(.7) rotate(-6deg);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes gradShift {
  0%,100% {
    background-position:0% 50%
  }
  50% {
    background-position:100% 50%
  }
}

.wrap {
  animation: pageIn .5s cubic-bezier(.4,0,.2,1) both;
}

.card {
  animation: pageIn .4s cubic-bezier(.4,0,.2,1) both;
}

.card:nth-child(1) {
  animation-delay:.04s;
}

.card:nth-child(2) {
  animation-delay:.08s;
}

.card:nth-child(3) {
  animation-delay:.12s;
}

.fade-up {
  animation: fadeUp .3s cubic-bezier(.4,0,.2,1) both;
}

/* ════════════════════════════════════════ LAYOUT ════════════════════════════════════════ */
.wrap {
  max-width: 928px;
  margin: 0 auto;
  padding: var(--sp3) max(var(--sp2), env(safe-area-inset-left)) calc(var(--sp4) + env(safe-area-inset-bottom)) max(var(--sp2), env(safe-area-inset-right));
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp2);
}

.full {
  grid-column: 1 / -1;
}

.flex {
  display: flex;
  align-items: center;
  gap: var(--sp1);
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp1);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--sp1);
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp1);
}

.row-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp1);
}

/* ════════════════════════════════════════ CARD — Premium glass morphism touch ════════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp3);
  margin-bottom: var(--sp2);
  box-shadow: var(--sh1);
  transition: box-shadow var(--t-l), border-color .2s;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(61,90,254,.12) 50%, transparent 90%);
  pointer-events: none;
}

.card:hover {
  box-shadow: var(--sh2);
  border-color: var(--border-d);
}

.card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: var(--sp2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-title::before {
  content: '';
  width: 2px;
  height: 14px;
  background: linear-gradient(180deg, var(--blue), var(--purple));
  border-radius: 2px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════ HEADER — Premium redesign ════════════════════════════════════════ */
.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp4);
  padding: var(--space-2) 0 var(--space-6);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: var(--sp2);
  position: relative;
}

.hdr::after {
  content: '';
  position: absolute;
  bottom: -1px;
  inset-inline-end: 0;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  border-radius: 2px;
}

.hdr-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hdr-title-line {
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.hdr-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: var(--sh-blue);
  position: relative;
  overflow: hidden;
}

.hdr-icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: rgba(255,255,255,.15);
  border-radius: 13px 13px 0 0;
}

.hdr-name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.5px;
  line-height: 1.1;
}

.hdr-sub {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 3px;
  letter-spacing: .4px;
}

.hdr-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-d);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  transition: var(--transition-fast);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: rgba(61, 90, 254, 0.28);
  background: var(--card2);
  box-shadow: var(--sh0);
}
.theme-toggle:focus-visible {
  outline: 3px solid var(--primary-500);
  outline-offset: 2px;
}

.help-modal-box {
  max-width: 520px;
}
.help-modal-body {
  max-height: min(62vh, 420px);
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: var(--space-2);
}
body.lang-en .help-modal-body {
  padding-right: 0;
  padding-left: 4px;
}
.help-modal-h {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: var(--space-4) 0 var(--space-2);
}
.help-modal-h:first-child {
  margin-top: 0;
}
.help-modal-p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.75;
  margin: 0;
}
.help-modal-ul {
  margin-bottom:0;
}
.help-modal-actions {
  margin-top: var(--space-3);
}
.help-import-btn {
  min-height: 46px;
  padding: 0 var(--space-4);
  font-weight: 700;
}

.setup-extras {
  max-width: 560px;
  margin: 0 auto var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.setup-extras-sum {
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  padding: var(--space-4) var(--space-5);
  background: var(--card2);
  border-bottom: 1px solid transparent;
  transition: var(--transition-fast);
}
.setup-extras-sum::-webkit-details-marker {
  display: none;
}
.setup-extras[open] .setup-extras-sum {
  border-bottom-color: var(--border);
  color: var(--blue-text);
}
.setup-extras-sum:hover {
  background: var(--card3);
}
.setup-extras-inner {
  padding: var(--space-4) var(--space-5) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.75;
}
.setup-extras-h {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: var(--space-4) 0 var(--space-2);
}
.setup-extras-h:first-child {
  margin-top: 0;
}
.setup-kbd-list {
  margin: 0;
  padding: 0 1.1em 0 0;
  list-style: disc;
}
body.lang-en .setup-kbd-list {
  padding: 0 0 0 1.1em;
}
.setup-kbd-list li {
  margin-bottom: var(--space-2);
}
.setup-privacy {
  margin: 0;
  padding: var(--space-3);
  background: var(--neutral-100);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  color: var(--ink-2);
}

.ver {
  font-size: 10px;
  font-weight: 700;
  color: var(--blue-text);
  background: var(--blue-l);
  border-radius: var(--r5);
  padding: 3px 9px;
  letter-spacing: .8px;
  text-transform: uppercase;
  border: 1px solid rgba(61,90,254,.15);
}

.timer {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r5);
  padding: 5px 14px;
  box-shadow: var(--sh0);
}

.timer.on {
  display: flex;
}

.tdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: blink 1s infinite;
  box-shadow: 0 0 6px rgba(0,163,122,.55);
}

.live-badge {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-l);
  border: 1px solid rgba(0,163,122,.2);
  border-radius: var(--r5);
  padding: 3px 10px;
}

.live-badge.on {
  display: inline-flex;
}

.live-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: blink 1s infinite;
}

/* ════════════════════════════════════════ BANNERS ════════════════════════════════════════ */
.banner {
  display: none;
  border-radius: var(--radius-lg);
  padding: 14px var(--sp2);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp2);
  align-items: center;
  gap: var(--sp1);
  flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
}

.banner.on {
  display: flex;
}

.b-warn {
  background: var(--red-l);
  border: 1px solid rgba(229,56,59,.18);
  color: var(--red);
}

.b-offline {
  background: var(--neutral-150, var(--card2));
  border: 1px solid var(--border-d);
  color: var(--ink-2);
}

.b-conf {
  background: var(--amber-l);
  border: 1px solid rgba(192,125,0,.18);
  color: var(--amber);
  animation: fadeUp .3s ease both;
}

.banner-actions {
  display: flex;
  gap: 8px;
  margin-inline-start: auto;
}

/* ════════════════════════════════════════ FORM ELEMENTS — Premium touch ════════════════════════════════════════ */
.form-group {
  margin-bottom: 6px;
}

label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-bottom: 7px;
  font-weight: 600;
  letter-spacing: .15px;
}

.optional {
  color: var(--ink-3);
  font-weight: 400;
  font-size: var(--fs-xs);
}

input[type=text], textarea, select {
  width: 100%;
  background: var(--card2);
  border: 1.5px solid var(--border-d);
  border-radius: var(--r2);
  color: var(--ink);
  font-size: 15px;
  padding: 12px var(--sp2);
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
  resize: none;
  box-shadow: inset 0 1px 2px rgba(13,13,20,.04);
  font-family: var(--font);
}

input[type=text]:focus, textarea:focus, select:focus {
  border-color: var(--blue);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--blue-m), inset 0 1px 2px rgba(13,13,20,.03);
}

input[type=text]::placeholder, textarea::placeholder {
  color: var(--ink-4);
}

input[type=text].err, select.err {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-l);
}

textarea {
  min-height: 82px;
  line-height: 1.7;
}

select option {
  background: var(--card);
  color: var(--ink);
}

.vmsg {
  font-size: var(--fs-xs);
  color: var(--red);
  margin-top: 4px;
  display: none;
  font-weight: 600;
}

.vmsg.on {
  display: block;
}

/* CV file — custom row (i18n labels); native file UI hidden under overlay */
.cv-upload-wrap {
  position: relative;
  width: 100%;
  margin-bottom: var(--sp1);
  border: 2px dashed var(--border-d);
  border-radius: var(--r);
  background: var(--card2);
  min-height: 52px;
  transition: var(--t);
}

.cv-upload-wrap:hover {
  border-color: var(--blue);
  background: var(--blue-l);
}

.cv-file-input-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  font-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cv-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px var(--sp2);
  pointer-events: none;
  min-height: 48px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-family: var(--font);
}

.cv-upload-fake-btn {
  background: var(--blue-m);
  border: 1px solid rgba(61,90,254,.2);
  color: var(--blue-text);
  border-radius: 7px;
  padding: 5px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.cv-file-namedisp {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cv-status {
  font-size: var(--fs-sm);
  margin-top: 6px;
  display: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
}

.cv-status.ok {
  display: block;
  color: var(--green);
  background: var(--green-l);
  border: 1px solid rgba(0,163,122,.18);
}

.cv-status.err {
  display: block;
  color: var(--red);
  background: var(--red-l);
  border: 1px solid rgba(229,56,59,.18);
}

/* ═══ JOB SPECIALIZATION SELECT ═══ */
#uJob { margin-bottom: 6px; }
#uJobCustom { margin-top: 4px; }

/* ════════════════════════════════════════ TONE BUTTONS — Redesigned card style ════════════════════════════════════════ */
.tone-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.tone-btn {
  border: 1.5px solid var(--border-d);
  border-radius: var(--r2);
  padding: 16px var(--sp1);
  cursor: pointer;
  text-align: center;
  background: var(--card);
  transition: var(--t);
  user-select: none;
  box-shadow: var(--sh0);
  position: relative;
  overflow: hidden;
}

.tone-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--blue-l), transparent);
  opacity: 0;
  transition: opacity .2s;
}

.tone-btn:hover {
  border-color: var(--blue);
  box-shadow: var(--sh1);
  transform: translateY(-2px);
}

.tone-btn:hover::before {
  opacity: 1;
}

.tone-btn.active {
  border-color: var(--blue);
  background: var(--blue-l);
  box-shadow: 0 0 0 3px var(--blue-m), var(--sh1);
  transform: translateY(-2px);
}

.tone-btn.active::before {
  opacity: 1;
}

.tone-icon {
  font-size: 24px;
  display: block;
  margin-bottom: 6px;
  pointer-events: none;
  position: relative;
}

.tone-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  pointer-events: none;
  position: relative;
}

.tone-btn.active .tone-label {
  color: var(--blue-text);
}

/* ════════════════════════════════════════ SLIDER ════════════════════════════════════════ */
.slider-row {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  margin-top: 10px;
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue) var(--v, 50%), var(--bg-3) var(--v, 50%));
  cursor: pointer;
  outline: none;
  border: none;
  padding: 0;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card);
  border: 2.5px solid var(--blue);
  cursor: pointer;
  box-shadow: 0 2px 8px var(--blue-glow);
  transition: transform .2s, box-shadow .2s;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 14px var(--blue-glow);
}

input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card);
  border: 2.5px solid var(--blue);
  cursor: pointer;
}

.slider-val {
  font-size: var(--fs-sm);
  color: var(--blue-text);
  font-weight: 700;
  min-width: 100px;
  background: var(--blue-l);
  border-radius: var(--r5);
  padding: 4px 14px;
  text-align: center;
  border: 1px solid rgba(61,90,254,.15);
}

/* ════════════════════════════════════════ BUTTONS — Premium hierarchy ════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--font);
  transition: var(--t);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  padding: 0 var(--sp2);
  white-space: nowrap;
  letter-spacing: .1px;
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background .15s;
  pointer-events: none;
}

.btn:active::after {
  background: rgba(255,255,255,.08);
}

/* Primary — Gradient CTA */
.btn-gold {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
  color: #fff;
  width: 100%;
  font-size: 15px;
  padding: 0 var(--sp3);
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: var(--sh-blue);
  border-radius: var(--r2);
  min-height: 50px;
}

.setup-start-btn {
  min-height: 52px;
  font-size: clamp(15px, 2.8vw, 16px);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-blue), 0 1px 0 rgba(255,255,255,.12) inset;
}

.setup-start-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  box-shadow: var(--sh-blue-lg), 0 0 0 4px var(--blue-m);
}

.btn-gold::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}

.btn-gold:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--sh-blue-lg);
}

.btn-gold:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--sh-blue);
}

.btn-gold:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Ghost */
.btn-sm {
  background: var(--card);
  border: 1.5px solid var(--border-d);
  color: var(--ink-2);
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r);
  box-shadow: var(--sh0);
  font-size: var(--fs-sm);
}

.btn-sm:hover {
  border-color: var(--blue);
  color: var(--blue-text);
  background: var(--blue-l);
  transform: translateY(-1px);
  box-shadow: var(--sh1);
}

.btn-sm:active {
  transform: translateY(0);
}

/* Danger */
.btn-danger {
  background: var(--red-l);
  border: 1.5px solid rgba(229,56,59,.18);
  color: var(--red);
}

.btn-danger:hover {
  background: rgba(229,56,59,.14);
  border-color: rgba(229,56,59,.32);
}

/* XS */
.btn-xs {
  min-height: 30px;
  padding: 0 10px;
  font-size: var(--fs-xs);
  border-radius: 7px;
}

/* ════════════════════════════════════════ MODE TABS — Premium pill switcher ════════════════════════════════════════ */
.mode-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: var(--sp3);
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 6px;
  border: 1px solid var(--border);
  box-shadow: var(--sh1);
  position: relative;
}

.mtab {
  flex: 1;
  min-height: 50px;
  padding: 10px 6px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: var(--t);
  font-family: var(--font);
  position: relative;
}

.mtab:hover {
  color: var(--ink-2);
  background: var(--bg-2);
}

.mtab.active {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
  color: #fff;
  box-shadow: var(--sh-blue);
}

.mtab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.mtab-icon {
  font-size: 20px;
  display: block;
  margin-bottom: 3px;
}


/* ════════════════════════════════════════ STATUS BAR — Sleek redesign ════════════════════════════════════════ */
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px var(--sp2);
  margin-bottom: var(--sp2);
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: var(--sh0);
}

.statusbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 80px;
}

.statusbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-d);
  transition: var(--t);
  flex-shrink: 0;
}

.sdot.listening {
  background: var(--green);
  box-shadow: 0 0 10px rgba(0,163,122,.5);
  animation: pulse 1.5s infinite;
}

.sdot.thinking {
  background: var(--amber);
  box-shadow: 0 0 10px rgba(192,125,0,.5);
  animation: pulse 1s infinite;
}

.sdot.streaming {
  background: var(--blue);
  box-shadow: 0 0 10px rgba(61,90,254,.5);
  animation: pulse .8s infinite;
}

.stxt {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.stxt b {
  color: var(--ink);
  font-weight: 700;
}

.badge {
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--card2);
  border: 1px solid var(--border-d);
  color: var(--ink-2);
  border-radius: var(--r5);
  padding: 3px 11px;
}

.badge-primary {
  color: var(--blue-text);
  background: var(--blue-l);
  border-color: rgba(61,90,254,.18);
}

.emergency {
  display: none;
  background: var(--red-l);
  border: 1px solid rgba(229,56,59,.2);
  color: var(--red);
  border-radius: var(--radius-lg);
  padding: 14px var(--sp2);
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: var(--sp1);
  cursor: pointer;
  text-align: center;
  animation: pulse 2s infinite;
  box-shadow: var(--shadow-xs);
}

.errmsg {
  display: none;
  background: var(--red-l);
  border: 1px solid rgba(229,56,59,.2);
  color: var(--red);
  border-radius: var(--radius-lg);
  padding: 12px var(--sp2);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-bottom: var(--sp1);
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-xs);
}

.errmsg.on {
  display: flex;
}

/* ════════════════════════════════════════ MIC BUTTON — Hero redesign ════════════════════════════════════════ */
.mic-area {
  text-align: center;
  margin: var(--sp3) 0;
  padding: var(--space-6) var(--space-4);
  background: linear-gradient(180deg, var(--card2) 0%, var(--card) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

.mic-btn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, var(--blue) 0%, var(--purple) 100%);
  cursor: pointer;
  font-size: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: manipulation;
  outline: none;
  box-shadow: var(--sh-blue);
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}

.mic-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(61,90,254,.18);
  animation: micRing 2.5s ease infinite;
}

.mic-btn:hover:not(:disabled) {
  transform: scale(1.07);
  box-shadow: 0 16px 48px rgba(61,90,254,.38);
}

.mic-btn.on {
  background: linear-gradient(145deg, var(--green) 0%, #00C890 100%);
  box-shadow: 0 8px 32px rgba(0,163,122,.4);
}

.mic-btn.on::before {
  border-color: rgba(0,163,122,.28);
  animation: micRingActive 1.2s ease infinite;
}

.mic-btn:disabled {
  opacity: .32;
  cursor: not-allowed;
  transform: none;
}

.mic-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 6px;
}

.mic-hint {
  margin-top: 12px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-weight: 500;
}

.waves {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  opacity: 0;
  transition: opacity .3s;
  margin: 8px 0;
}

.waves.on {
  opacity: 1;
}

.wbar {
  width: 3px;
  border-radius: 3px;
  background: var(--green);
  animation: wv .8s ease-in-out infinite;
}

/* ════════════════════════════════════════ Q/A BOXES ════════════════════════════════════════ */
.box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--sp2);
  margin-bottom: var(--sp1);
  box-shadow: var(--sh0);
  transition: var(--t-l);
}

.box-q.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-m), var(--sh1);
}

.box-a {
  border-right: 3px solid var(--border-d);
  background: linear-gradient(to left, rgba(61,90,254,.025), var(--card));
}

.box-a.active {
  border-right-color: var(--green);
}

.box-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.box-lbl-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.box-lbl-right {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.qtxt {
  font-size: var(--fs);
  color: var(--ink);
  line-height: 1.8;
  word-break: break-word;
}

.qtxt.ph {
  font-size: var(--fs-sm);
  color: var(--ink-4);
  font-style: italic;
}

.atxt {
  font-size: var(--fs);
  line-height: 2.05;
  color: var(--ink);
  word-break: break-word;
  white-space: pre-wrap;
}

.atxt.ph {
  font-size: var(--fs-sm);
  color: var(--ink-4);
  white-space: normal;
  font-style: italic;
}

/* ════════════════════════════════════════ QTYPE BADGES ════════════════════════════════════════ */
.qbadge {
  display: none;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r5);
  padding: 2px 10px;
  letter-spacing: .3px;
}

.qbadge.on {
  display: inline-block;
}

.qt-behavioral {
  background: var(--purple-l);
  color: var(--purple);
  border: 1px solid rgba(109,53,224,.18);
}

.qt-technical {
  background: var(--blue-m);
  color: var(--blue-text);
  border: 1px solid rgba(61,90,254,.18);
}

.qt-situational {
  background: var(--green-l);
  color: var(--green);
  border: 1px solid rgba(0,163,122,.18);
}

.qt-general {
  background: var(--amber-l);
  color: var(--amber);
  border: 1px solid rgba(192,125,0,.18);
}

/* ════════════════════════════════════════ RATING ════════════════════════════════════════ */
.rating-bar {
  display: none;
  align-items: center;
  gap: var(--sp1);
  flex-wrap: wrap;
  margin-top: var(--sp1);
  padding-top: var(--sp1);
  border-top: 1px solid var(--border);
}

.rating-bar.on {
  display: flex;
}

.rating-label {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-weight: 600;
}

.stars-row {
  display: flex;
  gap: 4px;
}

.star {
  font-size: 22px;
  cursor: pointer;
  opacity: .16;
  transition: var(--t);
  user-select: none;
  color: var(--amber);
}

.star:hover {
  opacity: .65;
  transform: scale(1.22);
}

.star.on {
  opacity: 1;
  transform: scale(1.14);
  filter: drop-shadow(0 2px 4px rgba(192,125,0,.3));
}

.rbadge {
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r5);
  padding: 3px 12px;
  display: none;
  margin-right: auto;
}

.rb-strong {
  background: var(--green-l);
  color: var(--green);
  border: 1px solid rgba(0,163,122,.18);
}

.rb-medium {
  background: var(--amber-l);
  color: var(--amber);
  border: 1px solid rgba(192,125,0,.18);
}

.rb-weak {
  background: var(--red-l);
  color: var(--red);
  border: 1px solid rgba(229,56,59,.18);
}

/* ════════════════════════════════════════ PROGRESS BAR ════════════════════════════════════════ */
.prog {
  height: 4px;
  background: var(--bg-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp2);
  overflow: hidden;
  display: none;
}

.prog.on {
  display: block;
}

.pfill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  border-radius: var(--radius-full);
  transition: width .1s linear;
  box-shadow: 0 0 8px rgba(61,90,254,.38);
}

/* ══ Setup: backup + live generation comfort UI ══ */
.setup-comfort {
  margin: var(--sp2) 0 var(--sp3);
  padding: var(--sp2) var(--sp3);
  background: var(--card2);
  border: 1px solid var(--border-d);
  border-radius: var(--r5);
  text-align: center;
}
.setup-backup-btn {
  font-weight: 600;
}
.setup-comfort-hint {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.45;
}
.setup-comfort-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.setup-privacy-link {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue-text);
  text-decoration: underline;
  padding: 6px 8px;
}
.setup-privacy-link:hover {
  opacity: 0.9;
}

/* إنهاء الجلسة — تأكيد */
.end-confirm-bar {
  display: none;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin-bottom: var(--sp2);
  padding: var(--sp2);
  background: var(--amber-l);
  border: 1px solid rgba(192, 125, 0, 0.28);
  border-radius: var(--r5);
}
.end-confirm-text {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--amber);
  line-height: 1.45;
}
.end-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* شريط أدوات المقابلة المباشرة */
.live-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-d);
}
.net-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r5);
}
.net-pill-ok {
  background: var(--green-l, rgba(0, 163, 122, 0.12));
  color: var(--green, #00a37a);
  border: 1px solid rgba(0, 163, 122, 0.2);
}
.net-pill-off {
  background: var(--red-l);
  color: var(--red);
  border: 1px solid rgba(229, 56, 59, 0.2);
}
.live-tool-btn[aria-pressed="true"] {
  background: var(--primary-xs);
  color: var(--primary);
  border-color: rgba(37, 99, 235, 0.35);
}
.font-scale-btns {
  display: inline-flex;
  gap: 2px;
}

/* ── شريط وضع التركيز: مخفي افتراضياً، يظهر فقط عند التفعيل ── */
.focus-mode-bar {
  display: none;
}
body.iv7-focus-live .focus-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(90deg, var(--blue-l), rgba(109,53,224,.08));
  border: 1px solid rgba(61,90,254,.25);
  border-radius: var(--r2);
  padding: 7px 14px;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  color: var(--blue-text);
  font-weight: 600;
}
.focus-mode-exit-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r5);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--t-s);
}
.focus-mode-exit-btn:hover { background: var(--blue-d); }

/* وضع تركيز — إخفاء التشتيت في المباشر */
body.iv7-focus-live .mode-tabs {
  display: none !important;
}
body.iv7-focus-live #histSection,
body.iv7-focus-live .analytics,
body.iv7-focus-live .next-qs {
  display: none !important;
}
body.iv7-focus-live #liveMode .box.box-q .qtxt,
body.iv7-focus-live #liveMode .box.box-a .atxt {
  max-width: 42rem;
  margin-inline: auto;
}

/* حجم قراءة السؤال/الإجابة */
:root {
  --iv7-read-scale: 1;
}
#liveMode .box.box-q .qtxt,
#liveMode .box.box-a .atxt,
#simMode .sim-answer,
#simMode #simAnswer,
#trainMode .train-answer {
  font-size: calc(1em * var(--iv7-read-scale));
}

.gen-progress-wrap {
  margin-bottom: var(--sp2);
  padding: 10px var(--sp2);
  background: var(--blue-l);
  border: 1px solid rgba(61, 90, 254, 0.2);
  border-radius: var(--r5);
}
.gen-progress-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(61, 90, 254, 0.15);
  overflow: hidden;
  margin-bottom: 8px;
}
.gen-progress-indeterminate {
  height: 100%;
  width: 40%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--blue), var(--purple));
  animation: gen-indet 1.2s ease-in-out infinite;
}
@keyframes gen-indet {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.gen-progress-lbl {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  .gen-progress-indeterminate { animation: none; width: 100%; opacity: 0.35; }
}

/* ════════════════════════════════════════ NEXT QUESTIONS ════════════════════════════════════════ */
.next-qs {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp2);
  margin-bottom: var(--sp2);
  display: none;
  box-shadow: var(--sh0);
}

.next-qs.on {
  display: block;
  animation: fadeUp .3s ease;
}

.next-qs-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-bottom: 10px;
}

.nq-item {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  padding: 9px 14px;
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--t);
  margin-bottom: 3px;
  border: 1px solid transparent;
  font-weight: 500;
}

.nq-item:hover {
  background: var(--blue-l);
  color: var(--blue-text);
  border-color: rgba(61,90,254,.14);
  transform: translateX(-3px);
}

.nq-item::before {
  content: '← ';
  color: var(--blue);
  font-weight: 700;
}

/* ════════════════════════════════════════ ANALYTICS ════════════════════════════════════════ */
.analytics {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--sp2);
  margin-bottom: var(--sp2);
  display: none;
  box-shadow: var(--sh0);
}

.analytics.on {
  display: block;
}

.analytics-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp2);
  flex-wrap: wrap;
  gap: 6px;
}

.analytics-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.8px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: var(--sp1);
}

.stat-c {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 16px var(--sp1);
  text-align: center;
  transition: var(--t);
}

.stat-c:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh2);
  border-color: var(--border-d);
}

.stat-v {
  font-size: 26px;
  font-weight: 900;
  color: var(--blue-text);
  font-family: var(--mono);
  line-height: 1;
}

.stat-l {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ════════════════════════════════════════ HISTORY ════════════════════════════════════════ */
.hist-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: var(--sp1);
}

.hist-title {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.hist-count {
  background: var(--blue-m);
  color: var(--blue-text);
  border-radius: var(--r5);
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
}

.hist-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.hist-search {
  background: var(--card);
  border: 1.5px solid var(--border-d);
  color: var(--ink);
  border-radius: var(--r5);
  padding: 7px 16px;
  font-size: var(--fs-sm);
  outline: none;
  width: 150px;
  font-family: var(--font);
  transition: var(--t);
  direction: inherit;
  box-shadow: var(--sh0);
}

.hist-search:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-m);
}

.hitem {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: var(--sp2);
  margin-bottom: 7px;
  cursor: pointer;
  transition: var(--t);
  box-shadow: var(--sh0);
}

.hitem:hover {
  border-color: var(--border-d);
  box-shadow: var(--sh2);
  transform: translateY(-2px);
}

.hitem-q {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-bottom: 4px;
  font-weight: 600;
}

.ha {
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.6;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hitem-meta {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 5px;
}

/* ════════════════════════════════════════ SIMULATOR ════════════════════════════════════════ */
.sim-interviewer {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  padding: var(--space-5) var(--sp2);
  background: var(--card2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp2);
  border: 1px solid var(--border);
  box-shadow: var(--sh0);
}

.sim-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: var(--sh-blue);
}

.sim-info {
  flex: 1;
  min-width: 0;
}

.sim-name {
  font-size: var(--fs);
  font-weight: 700;
  color: var(--ink);
}

.sim-role {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 2px;
}

.sim-prog {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: var(--mono);
  color: var(--blue-text);
  white-space: nowrap;
}

.sim-answer, .train-answer {
  width: 100%;
  background: var(--card2);
  border: 1.5px solid var(--border-d);
  border-radius: var(--r2);
  color: var(--ink);
  font-size: 15px;
  padding: 13px var(--sp2);
  outline: none;
  resize: vertical;
  min-height: 96px;
  transition: var(--t);
  line-height: 1.75;
  direction: inherit;
  box-shadow: inset 0 1px 2px rgba(13,13,20,.04);
  font-family: var(--font);
}

.sim-answer:focus, .train-answer:focus {
  border-color: var(--blue);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--blue-m), inset 0 1px 2px rgba(13,13,20,.03);
}

/* ════════════════════════════════════════ SCORE DISPLAY + SVG RING ════════════════════════════════════════ */
.score-display {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  padding: var(--space-5) var(--sp2);
  background: var(--card2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp2);
  border: 1px solid var(--border);
  box-shadow: var(--sh0);
  animation: scoreIn .5s cubic-bezier(.34,1.56,.64,1) both;
}

.score-num, .sim-score-num {
  font-size: 36px;
  font-weight: 900;
  font-family: var(--mono);
  line-height: 1;
}

.score-info {
  flex: 1;
}

.score-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: 8px;
}

.score-bar-track {
  height: 5px;
  background: var(--bg-2);
  border-radius: 4px;
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
  width: 0%;
}

.sc-high {
  color: var(--green);
}

.sc-high .score-bar-fill, .sc-high.score-bar-fill {
  background: linear-gradient(90deg, var(--green), #00D4A0);
}

.sc-mid {
  color: var(--amber);
}

.sc-mid .score-bar-fill, .sc-mid.score-bar-fill {
  background: linear-gradient(90deg, var(--amber), #F0A800);
}

.sc-low {
  color: var(--red);
}

.sc-low .score-bar-fill, .sc-low.score-bar-fill {
  background: linear-gradient(90deg, var(--red), #FF6B6E);
}

/* Score Ring */
.score-ring-wrap {
  position: relative;
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  animation: scoreIn .5s cubic-bezier(.34,1.56,.64,1) both;
}

.score-ring-svg {
  width: 78px;
  height: 78px;
  transform: rotate(-90deg);
}

.score-ring-bg {
  fill: none;
  stroke: var(--bg-3);
  stroke-width: 6;
}

.score-ring-fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1), stroke .3s;
}

.score-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-ring-num {
  font-size: 20px;
  font-weight: 900;
  font-family: var(--mono);
  line-height: 1;
}

.score-ring-sub {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 1px;
}

.train-score-num.sc-high {
  color: var(--green);
}

.train-score-num.sc-mid {
  color: var(--amber);
}

.train-score-num.sc-low {
  color: var(--red);
}

.sim-score-num.sc-high {
  color: var(--green);
}

.sim-score-num.sc-mid {
  color: var(--amber);
}

.sim-score-num.sc-low {
  color: var(--red);
}

/* ════════════════════════════════════════ COMPARE / INSIGHT / COACH ════════════════════════════════════════ */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}

.compare-box {
  padding: var(--sp2);
  border-radius: var(--r2);
  font-size: var(--fs-sm);
  line-height: 1.85;
}

.compare-title {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.compare-your {
  background: var(--red-l);
  border: 1px solid rgba(229,56,59,.13);
}

.compare-ideal {
  background: var(--green-l);
  border: 1px solid rgba(0,163,122,.13);
}

.compare-your .compare-title {
  color: var(--red);
}

.compare-ideal .compare-title {
  color: var(--green);
}

.compare-body {
  color: var(--ink-2);
}

.insight-box {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: var(--sp2);
  margin-bottom: 10px;
}

.insight-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-text);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-bottom: 8px;
}

.insight-body {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.85;
}

.sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.sw-box {
  padding: var(--sp2);
  border-radius: var(--r2);
}

.sw-str {
  background: var(--green-l);
  border: 1px solid rgba(0,163,122,.13);
}

.sw-weak {
  background: var(--red-l);
  border: 1px solid rgba(229,56,59,.13);
}

.sw-title {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.sw-str .sw-title {
  color: var(--green);
}

.sw-weak .sw-title {
  color: var(--red);
}

.sw-body {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.75;
}

.reaction-box {
  background: var(--card2);
  border: 1px solid var(--border);
  border-right: 3px solid var(--blue);
  border-radius: var(--r2);
  padding: 11px var(--sp2);
  margin-bottom: var(--sp2);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.75;
}

.coach-tip {
  background: var(--purple-l);
  border: 1px solid rgba(109,53,224,.16);
  border-radius: var(--r2);
  padding: var(--sp2);
  margin-bottom: 10px;
  font-size: var(--fs-sm);
  color: var(--purple);
  line-height: 1.85;
}

.thinking-indicator {
  display: none;
  text-align: center;
  padding: 11px;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ════════════════════════════════════════ SUMMARY / BREAKDOWN ════════════════════════════════════════ */
.summary-hero {
  text-align: center;
  padding: var(--sp4) 0 var(--sp3);
}

.summary-emoji {
  font-size: 54px;
  margin-bottom: 10px;
  display: block;
  animation: bounceIn .6s cubic-bezier(.34,1.56,.64,1) both;
}

.summary-score {
  font-size: 54px;
  font-weight: 900;
  font-family: var(--mono);
  color: var(--blue-text);
  line-height: 1;
}

.summary-label {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: 8px;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--sp2);
  background: var(--card2);
  border-radius: var(--r);
  margin-bottom: 4px;
  border: 1px solid var(--border);
  transition: var(--t);
}

.breakdown-item:hover {
  transform: translateX(-3px);
  border-color: var(--border-d);
}

.breakdown-num {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  flex-shrink: 0;
  font-family: var(--mono);
  font-weight: 700;
  min-width: 20px;
}

.breakdown-q {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.breakdown-sc {
  font-size: var(--fs);
  font-weight: 900;
  font-family: var(--mono);
  flex-shrink: 0;
}

.verdict-box {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: var(--sp2);
  margin-bottom: var(--sp2);
}

.verdict-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-text);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-bottom: 10px;
}

.verdict-body {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.85;
  font-style: italic;
}

/* ════════════════════════════════════════ TRAINING ════════════════════════════════════════ */
.track-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: var(--sp2);
}

.track-btn {
  border: 1.5px solid var(--border-d);
  border-radius: var(--r2);
  padding: var(--sp2) var(--sp1);
  cursor: pointer;
  text-align: center;
  transition: var(--t);
  background: var(--card);
  user-select: none;
  min-height: 86px;
  box-shadow: var(--sh0);
  position: relative;
  overflow: hidden;
}

.track-btn:hover {
  border-color: var(--blue);
  background: var(--blue-l);
  transform: translateY(-2px);
  box-shadow: var(--sh2);
}

.track-btn.active {
  border-color: var(--blue);
  background: var(--blue-l);
  box-shadow: 0 0 0 3px var(--blue-m), var(--sh1);
  transform: translateY(-2px);
}

.track-icon {
  font-size: 26px;
  margin-bottom: 6px;
  pointer-events: none;
  display: block;
}

.track-name {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--ink-2);
  pointer-events: none;
}

.track-btn.active .track-name {
  color: var(--blue-text);
}

.track-desc {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 3px;
  pointer-events: none;
}

.track-en {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  pointer-events: none;
  margin-top: 2px;
  opacity: .5;
}

.fw-box {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp2);
  margin-bottom: 8px;
}

.fw-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs);
  font-weight: 700;
  color: var(--blue-text);
  margin-bottom: var(--sp2);
}

.fw-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.75;
  margin-bottom: 10px;
}

.fw-letter {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px var(--blue-glow);
}

.fw-reminder {
  background: var(--amber-l);
  border: 1px solid rgba(192,125,0,.18);
  border-radius: var(--r);
  padding: 10px var(--sp2);
  margin-bottom: 10px;
  font-size: var(--fs-sm);
  color: var(--amber);
  font-weight: 700;
}

.hint-box {
  display: none;
  background: var(--blue-l);
  border: 1px solid rgba(61,90,254,.18);
  border-radius: var(--r2);
  padding: var(--sp2);
  margin-bottom: 10px;
  font-size: var(--fs-sm);
  color: var(--blue-text);
  line-height: 1.85;
  white-space: pre-line;
}

.fw-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.fw-check-item:last-child {
  border-bottom: none;
}

.fw-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fw-dot.ok {
  background: var(--green);
  box-shadow: 0 0 6px rgba(0,163,122,.38);
}

.fw-dot.miss {
  background: var(--red);
  box-shadow: 0 0 6px rgba(229,56,59,.38);
}

.pdots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.pdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-d);
  transition: all .3s;
}

.pdot.done {
  background: var(--green);
  box-shadow: 0 0 6px rgba(0,163,122,.3);
}

.pdot.active {
  background: var(--blue);
  box-shadow: 0 0 6px rgba(61,90,254,.3);
  transform: scale(1.3);
}

.pdot.fail {
  background: var(--red);
  box-shadow: 0 0 6px rgba(229,56,59,.3);
}

.train-score-num, .train-score {
  font-size: 30px;
  font-weight: 900;
  font-family: var(--mono);
  margin-bottom: 6px;
}

.train-summary {
  text-align: center;
  padding: var(--sp2) 0 var(--sp4);
}

.progress-tip {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: var(--sp2);
  margin-bottom: var(--sp2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.85;
}

/* ════════════════════════════════════════ WORD COUNT + COUNTER COLORS ════════════════════════════════════════ */
.word-count {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
}

.counter-ok {
  color: var(--green) !important;
}

.counter-warn {
  color: var(--amber) !important;
}

.counter-low {
  color: var(--red) !important;
}

/* ════════════════════════════════════════ DIVIDER ════════════════════════════════════════ */
.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.divider-text {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  white-space: nowrap;
  font-weight: 600;
}

/* Session stat */
.session-stat {
  display: none;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r5);
  padding: 3px 11px;
  font-weight: 600;
  box-shadow: var(--sh0);
}

.session-stat .ssc {
  color: var(--blue-text);
  font-weight: 800;
}

/* ════════════════════════════════════════ PROFILE TIP ════════════════════════════════════════ */
.profile-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, var(--blue-l) 0%, rgba(109,53,224,.06) 100%);
  border: 1px solid rgba(61,90,254,.14);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--blue-text);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-xs);
}

.profile-tip-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ════════════════════════════════════════ SKELETON ════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--card2) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r);
  min-height: 18px;
}

/* ════════════════════════════════════════ REPORT MODAL ════════════════════════════════════════ */
.rmodal {
  position: fixed;
  inset: 0;
  background: rgba(13,13,20,.5);
  z-index: 9999;
  overflow-y: auto;
  padding: var(--sp3);
  box-sizing: border-box;
  display: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.rmodal.on {
  display: block;
  animation: fadeIn .22s ease;
}

.rmodal-box {
  background: var(--card);
  border-radius: var(--r2);
  padding: var(--sp4);
  max-width: 720px;
  margin: 0 auto;
  box-shadow: var(--sh4);
  border: 1px solid var(--border);
  animation: slideUp .28s cubic-bezier(.4,0,.2,1) both;
}

.rmodal-title {
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp2);
  margin-bottom: var(--sp2);
  font-size: 19px;
  font-weight: 800;
  font-family: var(--font-display);
}

.rmodal-meta {
  background: var(--card2);
  border: 1px solid var(--border);
  padding: 11px var(--sp2);
  border-radius: var(--r);
  margin-bottom: var(--sp2);
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--ink-2);
}

.ritem {
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: var(--sp2);
  margin-bottom: var(--sp2);
}

.rq {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  font-size: var(--fs);
}

.ra {
  color: var(--ink-2);
  line-height: 1.85;
  font-size: var(--fs-sm);
}

.rrating {
  color: var(--amber);
  margin-top: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.rsum {
  background: linear-gradient(135deg, var(--blue-l), var(--purple-l));
  border: 1px solid rgba(61,90,254,.18);
  border-radius: var(--r2);
  padding: var(--sp2);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-text);
  margin-top: 10px;
}

.rmodal-actions {
  display: flex;
  gap: 10px;
  margin-top: var(--sp2);
  flex-wrap: wrap;
}

.rmodal-print {
  flex: 1;
  min-height: 46px;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: var(--fs);
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  box-shadow: var(--sh-blue);
  transition: var(--t);
}

.rmodal-print:hover {
  box-shadow: var(--sh-blue-lg);
  transform: translateY(-2px);
}

.rmodal-close {
  min-height: 46px;
  padding: 0 var(--sp3);
  background: var(--card2);
  color: var(--ink-2);
  border: 1.5px solid var(--border-d);
  border-radius: var(--r);
  font-size: var(--fs);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: var(--t);
}

.rmodal-close:hover {
  border-color: var(--blue);
  color: var(--blue-text);
}

/* ════════════════════════════════════════ TOAST ════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r5);
  padding: 11px 28px;
  font-size: var(--fs-sm);
  font-weight: 600;
  z-index: 9998;
  transition: transform .38s cubic-bezier(.34,1.56,.64,1), background .2s;
  white-space: normal;
  pointer-events: none;
  box-shadow: 0 12px 40px rgba(13,13,20,.28);
  border: 1px solid rgba(255,255,255,.08);
  max-width: min(88vw, 380px);
  text-align: center;
  line-height: 1.45;
}

.toast.on {
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════ BACK BAR ════════════════════════════════════════ */
.back-bar {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  align-items: center;
  min-height: 52px;
  padding: max(10px, env(safe-area-inset-top)) max(var(--sp2), env(safe-area-inset-right)) 12px max(var(--sp2), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--card) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
  .back-bar {
    background: rgba(255,255,255,.94);
  }
}

.back-bar.on {
  display: flex;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--sh0);
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.back-btn:hover {
  background: var(--card2);
  border-color: var(--border-d);
  box-shadow: var(--sh1);
  color: var(--blue-text);
}

.back-btn:active {
  transform: scale(0.98);
  opacity: .92;
}

.back-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.back-btn svg,
.back-btn-chevron {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: var(--blue);
  color: var(--blue);
}

.back-btn-chevron {
  transform: scaleX(-1);
}

body.lang-en .back-btn-chevron {
  transform: scaleX(1);
}

body.has-backbar .wrap {
  padding-top: calc(56px + env(safe-area-inset-top) + var(--sp2));
}


/* Session & setup quick navigation */
.session-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  margin: 0 0 var(--sp3);
  padding: 10px 12px;
  background: var(--card2);
  border: 1px solid var(--border-d);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh0);
}

.session-subnav-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--blue-text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: var(--transition-fast);
}

.session-subnav-btn:hover {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--ink);
}

.session-subnav-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.session-subnav-sep {
  color: var(--muted);
  font-weight: 700;
  user-select: none;
}

.setup-quick-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  margin-top: var(--sp3);
  padding-top: var(--sp2);
  border-top: 1px dashed var(--border-d);
}

.setup-quick-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-text);
  text-decoration: none;
}

.setup-quick-link:hover {
  text-decoration: underline;
}

.setup-quick-btn {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  -webkit-tap-highlight-color: transparent;
}

.setup-quick-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.setup-quick-sep {
  color: var(--muted);
  font-weight: 700;
}
/* ════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════ */
@media (max-width: 600px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
  .full {
    grid-column: 1;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .compare-grid {
    grid-template-columns: 1fr;
  }
  .sw-grid {
    grid-template-columns: 1fr;
  }
  .track-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .wrap {
    padding: var(--sp2) var(--sp2) calc(var(--sp4) + env(safe-area-inset-bottom));
  }
  .mic-area {
    padding: var(--space-5) var(--space-3);
    border-radius: var(--radius-lg);
  }
  .mic-btn {
    width: 90px;
    height: 90px;
    font-size: 32px;
  }
  .hdr-sub {
    display: none;
  }
  .card {
    padding: var(--sp2);
  }
  .mode-tabs {
    gap: 4px;
    padding: 4px;
  }
  .hdr {
    margin-bottom: var(--sp3);
  }
}

@media (max-width: 380px) {
  .tone-row {
    grid-template-columns: 1fr;
  }
  .mode-tabs {
    gap: 2px;
    padding: 3px;
  }
}

/* ════════════════════════════════════════ PRINT ════════════════════════════════════════ */
/* ════════════════════════════════════════ LANG SWITCHER PILL ════════════════════════════════════════ */
.lang-sw-btn {
  background: transparent;
  border: none;
  border-radius: 20px;
  width: 34px;
  height: 30px;
  cursor: pointer;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--t);
  -webkit-tap-highlight-color: transparent;
  opacity: .5;
  position: relative;
}

.lang-sw-btn:hover {
  opacity: .85;
  background: rgba(61,90,254,.08);
  transform: scale(1.05);
}

.lang-sw-btn.active {
  background: var(--blue);
  opacity: 1;
  box-shadow: 0 2px 10px var(--blue-glow);
  transform: scale(1.05);
}

.lang-sw-btn.active::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  border: 2px solid rgba(61,90,254,.3);
}

/* ════════════════════════════════════════ UTILITY CLASSES (used dynamically by JS) ════════════════════════════════════════ */
.listening {
  background: var(--green) !important;
  box-shadow: 0 0 10px rgba(0,163,122,.5) !important;
}

.thinking {
  background: var(--amber) !important;
  box-shadow: 0 0 10px rgba(192,125,0,.5) !important;
}

.streaming {
  background: var(--blue) !important;
  box-shadow: 0 0 10px rgba(61,90,254,.5) !important;
}

/* PWA update toast — distinct from regular toasts */
.toast.toast-update {
  background: linear-gradient(135deg, var(--green), #00C49A);
  box-shadow: 0 12px 40px rgba(0,163,122,.35);
  border-color: rgba(255,255,255,.15);
  font-weight: 700;
  pointer-events: auto;
}

.toast.toast-update:hover {
  transform: translateX(-50%) translateY(-2px);
}

/* ════════════════════════════════════════ PERFORMANCE — content-visibility ════════════════════════════════════════ */
/* Paint only the active tab panel; hidden panels render when needed */
#simMode[style*="none"],
#trainMode[style*="none"] {
  content-visibility: hidden;
}

/* Reduce layout recalc cost for long history lists */
#histList {
  contain: layout style;
}

/* ════════════════════════════════════════ ACCESSIBILITY — reduced motion ════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Preserve score ring animation at a much shorter duration */
  .score-ring-fill {
    transition: stroke-dashoffset 0.3s linear !important;
  }

  .score-bar-fill {
    transition: width 0.3s linear !important;
  }

  /* Remove parallax/float effects */
  .setup-hero,
  .setup-chip {
    animation: none !important;
  }

  /* Waves: stop the motion but keep them visible */
  .wbar {
    animation: none !important;
    height: 8px !important;
  }
}

/* ════════════════════════════════════════ FOCUS — keyboard navigation ════════════════════════════════════════ */
/* Global focus-visible ring — consistent, high-contrast, non-intrusive */
:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove default outline (we provide our own via :focus-visible) */
:focus:not(:focus-visible) {
  outline: none;
}

/* ════════════════════════════════════════ PRINT ════════════════════════════════════════ */
@media print {
  .back-bar,
  .hdr-right,
  .mode-tabs,
  .session-subnav,
  .mic-area,
  .rating-bar,
  .hist-actions,
  .rmodal-actions,
  #bannerWarn,
  #bannerOffline,
  #bannerConf,
  #emergencyReset,
  #toast {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }

  .card, .box {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .rmodal {
    position: static !important;
    background: none !important;
  }

  .rmodal-box {
    box-shadow: none !important;
    max-width: 100% !important;
  }
}

/* ════════════════════════════════════════ SCROLL — smooth anchors ════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}

/* ════════════════════════════════════════ SELECTION COLOR ════════════════════════════════════════ */
::selection {
  background: var(--blue-m);
  color: var(--ink);
}


/* ════════════════════════════════════════ SR LANG INDICATOR (below mic) ════════════════════════════════════════ */
#srLangIndicator {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue-text);
  background: var(--blue-l);
  border: 1px solid rgba(61,90,254,.15);
  border-radius: var(--r5);
  padding: 2px 14px;
  margin-top: 6px;
  animation: fadeUp .25s ease both;
}

/* ════════════════════════════════════════ ANSWER STREAMING CURSOR ════════════════════════════════════════ */
@keyframes blink-cursor {
  0%,100% {
    opacity:1
  }
  50% {
    opacity:0
  }
}

.atxt-streaming::after {
  content: '▍';
  display: inline;
  font-size: .85em;
  color: var(--blue);
  animation: blink-cursor .7s infinite;
  margin-right: 2px;
}

/* ════════════════════════════════════════ IMPROVED HISTORY EMPTY STATE ════════════════════════════════════════ */
.hist-empty {
  text-align: center;
  padding: var(--sp3) var(--sp2);
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.hist-empty-icon {
  font-size: 32px;
  margin-bottom: 10px;
  display: block;
  opacity: .5;
}

.hist-empty-text {
  line-height: 1.7;
}

/* ════════════════════════════════════════ IMPROVED CONF BANNER ════════════════════════════════════════ */
/* .b-conf animation merged */
/* ════════════════════════════════════════ IMPROVED SCORE RING ANIMATION ════════════════════════════════════════ */
/* score-ring-wrap consolidated */
/* ════════════════════════════════════════ IMPROVED SETUP HERO ════════════════════════════════════════ */
.setup-hero {
  text-align: center;
  padding: var(--space-6) 0 var(--space-5);
}

.setup-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4.8vw, 34px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.85px;
  line-height: 1.18;
  margin-bottom: var(--space-4);
  max-width: min(100%, 26rem);
  margin-left: auto;
  margin-right: auto;
}

.setup-hero p {
  font-size: var(--text-base);
  color: var(--ink-2);
  max-width: 36rem;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

.setup-cta {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 5;
}

.setup-cta .setup-start-btn {
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

.setup-chip {
  display: inline-flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r5);
  padding: 6px 18px 6px 10px;
  box-shadow: var(--sh0);
  margin-bottom: var(--space-4);
  gap: 10px;
}

.setup-chip-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg,var(--blue),var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.setup-feature-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-6);
  padding: 0 var(--space-2);
}

.setup-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r5);
  padding: 5px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  box-shadow: var(--sh0);
  transition: var(--t);
}

.setup-feature-pill:hover {
  border-color: var(--blue);
  color: var(--blue-text);
  background: var(--blue-l);
  transform: translateY(-2px);
}

.landing-trust {
  max-width: 560px;
  margin: 0 auto var(--space-7);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: linear-gradient(160deg, var(--card) 0%, var(--card2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.landing-trust-h {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  margin-bottom: var(--space-3);
  letter-spacing: 0.02em;
}

.landing-trust-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.landing-trust-item {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.5;
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-d);
}

.landing-scroll-hint {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary-600, var(--blue-text));
}

@media (max-width: 480px) {
  .landing-trust {
    padding: var(--space-3);
    margin-bottom: var(--space-5);
  }
}

/* ════════════════════════════════════════ IMPROVED TOAST TYPES ════════════════════════════════════════ */
/* ════════════════════════════════════════ ANSWER BOX STREAMING STATE ════════════════════════════════════════ */
.box-a.active {
  border-right-color: var(--green);
  background: linear-gradient(to left, rgba(0,163,122,.025), var(--card));
}

/* ════════════════════════════════════════ IMPROVED BREAKDOWN ITEM SCORES ════════════════════════════════════════ */
.breakdown-sc.sc-high-c {
  color: var(--green);
}

.breakdown-sc.sc-mid-c {
  color: var(--amber);
}

.breakdown-sc.sc-low-c {
  color: var(--red);
}

/* ════════════════════════════════════════ IMPROVED FORM GROUP SPACING ════════════════════════════════════════ */
.grid2 .form-group {
  margin-bottom: 12px;
}

.grid2 .form-group label,
#trainPickTrackLbl {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ════════════════════════════════════════ TRAINING FRAMEWORK STEP HOVER ════════════════════════════════════════ */
.fw-step {
  transition: var(--t);
  border-radius: var(--r);
  padding: 4px 6px;
  margin-inline-end: -6px;
}

.fw-step:hover {
  background: var(--bg-2);
}

/* ════════════════════════════════════════ IMPROVED ANALYTICS TABS (ACTIVE STATE) ════════════════════════════════════════ */
.btn-sm.active-tab {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
  transform: none !important;
}

/* ════════════════════════════════════════ BACK BUTTON IMPROVED ════════════════════════════════════════ */
.back-btn:hover svg,
.back-btn:hover .back-btn-chevron {
  stroke: var(--blue-d);
  color: var(--blue-d);
}

.back-bar.on {
  animation: none;
}

/* ════════════════════════════════════════ SETUP CARD ENHANCED ════════════════════════════════════════ */
#setupScreen .card {
  border-top: 3px solid var(--blue);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

#setupScreen .card::before {
  display: none;
}

/* ════════════════════════════════════════ MOBILE OPTIMIZATIONS ════════════════════════════════════════ */
@media (max-width: 600px) {
  .setup-hero h1 {
    font-size: 24px;
  }
  .setup-feature-pills {
    gap: 6px;
  }
  .setup-feature-pill {
    padding: 4px 10px;
  }
  /* score-ring-wrap consolidated */
  .score-ring-svg {
    width: 66px;
    height: 66px;
  }
  .score-ring-num {
    font-size: 17px;
  }
  .rmodal-box {
    padding: var(--sp2);
  }
  .sim-interviewer {
    flex-wrap: wrap;
  }
  .analytics-hdr {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ════════════════════════════════════════ SHARE BUTTON SPECIAL STYLE ════════════════════════════════════════ */
#shareBtn {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.5px;
}

/* ════════════════════════════════════════ ANSWER WORD COUNT ════════════════════════════════════════ */
#answerWordCount {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  animation: fadeUp .25s ease both;
}

/* ════════════════════════════════════════ SESSION RECOVERY BANNER ════════════════════════════════════════ */
/* #srb animation merged */
/* ════════════════════════════════════════ THINKING ANIMATION DOTS ════════════════════════════════════════ */
/* Thinking dots when atxt is empty (pre-streaming) */
@keyframes think-dots {
  0% {
    content: '⋯';
    opacity: .3;
  }
  33% {
    content: '⋯⋯';
    opacity: .6;
  }
  66% {
    content: '⋯⋯⋯';
    opacity: .9;
  }
  100% {
    content: '⋯';
    opacity: .3;
  }
}

.atxt-streaming:empty {
  min-height: 28px;
  display: flex;
  align-items: center;
}

.atxt-streaming:empty::before {
  content: '⋯';
  color: var(--blue);
  font-size: 22px;
  animation: blink .65s infinite;
  letter-spacing: 3px;
}

/* ════════════════════════════════════════ HISTORY ITEM ENHANCED ════════════════════════════════════════ */
.hitem {
  border-right: 3px solid transparent;
  transition: var(--t);
}

.hitem:hover {
  border-right-color: var(--blue);
  background: linear-gradient(to right, var(--blue-l), var(--card));
}

/* ════════════════════════════════════════ SETUP FORM — Better label colors ════════════════════════════════════════ */
label {
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ════════════════════════════════════════ IMPROVED STAT CARDS (dashboard feel) ════════════════════════════════════════ */
.stat-c:first-child {
  border-inline-end: 2px solid var(--blue-l);
}

/* ════════════════════════════════════════ IMPROVED FW-BOX ════════════════════════════════════════ */
.fw-box {
  transition: var(--t);
}

.fw-box:hover {
  border-color: var(--border-d);
  box-shadow: var(--sh1);
}

/* ════════════════════════════════════════ MOBILE: Session recovery banner ════════════════════════════════════════ */
@media (max-width: 600px) {
  #sessionRecoveryBanner {
    flex-direction: column;
    align-items: flex-start;
  }
  #answerWordCount {
    font-size: 10px;
  }
}

/* ════════════════════════════════════════ IMPROVED SESSIONRECOVERYBANNER ════════════════════════════════════════ */
#sessionRecoveryBanner {
  background: linear-gradient(135deg, var(--amber-l), rgba(217,119,6,.05));
  border: 1px solid rgba(192,125,0,.2);
  border-inline-end: 4px solid var(--amber);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--sp2);
  margin-bottom: var(--sp2);
  font-size: var(--fs-sm);
  color: var(--amber);
  font-weight: 600;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
}

.recovery-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.recovery-banner-btn {
  min-height: 36px;
  padding: 0 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
}

#setupScreen {
  padding-bottom: var(--space-8);
}

/* ════════════════════════════════════════ IMPROVED MIC BUTTON ACTIVE PULSE RING ════════════════════════════════════════ */
.mic-btn.on::before {
  animation: micRingActive .9s ease infinite;
  border-color: rgba(0,163,122,.35);
}

/* ════════════════════════════════════════ IMPROVED PROGRESS INDICATOR ════════════════════════════════════════ */
.pfill {
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--blue));
  background-size: 200% 100%;
  animation: gradShift 1.5s ease infinite;
}

/* ════════════════════════════════════════ BETTER TOOLTIP ON LANG SWITCHER ════════════════════════════════════════ */
#langSwitcher {
  position: relative;
}

.lang-sw-btn[aria-label]:hover::before {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
}

/* ════════════════════════════════════════ ANSWER BOX — Better typography ════════════════════════════════════════ */
/* .atxt consolidated above */
/* ════════════════════════════════════════ TRAIN/SIM ANSWER TEXTAREA — Word count row ════════════════════════════════════════ */
.answer-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

/* ════════════════════════════════════════ HISTORY ITEM QUALITY BADGES ════════════════════════════════════════ */
.hitem-rbadge {
  display: inline-block;
  border-radius: var(--r5);
  padding: 1px 8px;
  font-weight: 700;
  font-size: 11px;
  margin-inline-end: 4px;
}

.hitem-rating-high {
  color: var(--green);
  background: var(--green-l);
}

.hitem-rating-mid {
  color: var(--amber);
  background: var(--amber-l);
}

.hitem-rating-low {
  color: var(--red);
  background: var(--red-l);
}

.hitem-qtype {
  display: inline-block;
  color: var(--ink-3);
  font-size: 11px;
  opacity: .75;
}

/* ════════════════════════════════════════ PREMIUM FINAL POLISH ════════════════════════════════════════ */
/* Start button glow effect */
/* .btn-gold letter-spacing merged */
/* Better card transition */
.card {
  transition: box-shadow var(--t-l), border-color .2s, transform .15s;
}

#setupScreen .card:hover, .score-display:hover {
  transform: none;
}

/* Score display entrance */
.score-display {
  transition: opacity .3s, transform .3s;
}

/* Verdict box */
.verdict-body {
  font-style: normal;
  font-weight: 500;
}

/* Cleaner FW check items */
.fw-check-item {
  gap: 8px;
}

/* Better sim/train answer textarea */
.sim-answer, .train-answer {
  transition: border-color .18s, box-shadow .18s, background .18s;
}

/* Hide scrollbar but keep functionality */
.histList::-webkit-scrollbar, #histList::-webkit-scrollbar {
  width: 4px;
}

.histList::-webkit-scrollbar-track, #histList::-webkit-scrollbar-track {
  background: transparent;
}

.histList::-webkit-scrollbar-thumb, #histList::-webkit-scrollbar-thumb {
  background: var(--border-d);
  border-radius: 4px;
}

/* ════════════════════════════════════════ LAUNCH-READY IMPROVEMENTS ════════════════════════════════════════ */
/* Better selection color */
::selection {
  background: var(--blue-l);
  color: var(--blue-text);
}

/* Smooth focus transitions */
*:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Card hover on interactive cards only */
.hitem:hover, .breakdown-item:hover {
  cursor: pointer;
}

/* Better placeholder text */
input::placeholder, textarea::placeholder {
  color: var(--ink-4);
  font-style: italic;
  font-size: .95em;
}

/* Better select arrow */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B8BA7' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-left: 36px;
}

/* RTL: arrow on right side */
body:not(.lang-en) select {
  background-position: right 12px center;
  padding-left: 16px;
  padding-right: 36px;
}

/* Better scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-d);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink-3);
}

/* Hero gradient text fallback */
.gradient-text {
  background: linear-gradient(135deg, var(--blue), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Better empty state */
.hist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--sp4) var(--sp2);
  color: var(--ink-3);
}

/* Improved tone buttons */
.tone-btn {
  min-height: 80px;
}

/* Better sim avatar glow */
.sim-avatar {
  border: 2px solid rgba(255,255,255,.2);
}

/* Print improvements */
@media print {
  .setup-hero, .setup-feature-pills, #sessionRecoveryBanner {
    display: none !important;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ════════════════════════════════════════ GENERATION LOADING STATE ════════════════════════════════════════ */
.answer-generating {
  position: relative;
  overflow: hidden;
}

.answer-generating::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(61,90,254,.04) 50%, transparent 100%);
  animation: shimmer 1.5s infinite;
  pointer-events: none;
}

/* ════════════════════════════════════════ IMPROVED HISTORY ITEM ════════════════════════════════════════ */
.hitem {
  position: relative;
}

.hitem .hitem-q {
  font-size: var(--fs-sm);
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 5px;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ════════════════════════════════════════ WORD COUNT INDICATOR COLORS ════════════════════════════════════════ */
#simWordCount.counter-ok, #trainWordCount.counter-ok {
  color: var(--green) !important;
}

#simWordCount.counter-warn, #trainWordCount.counter-warn {
  color: var(--amber) !important;
}

#simWordCount.counter-low, #trainWordCount.counter-low {
  color: var(--red) !important;
}

/* ════════════════════════════════════════ IMPROVED BADGE LAYOUT ════════════════════════════════════════ */
.statusbar-right {
  gap: 5px;
}

.badge {
  white-space: nowrap;
}

/* ════════════════════════════════════════ BETTER BUTTON STATES ════════════════════════════════════════ */
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  pointer-events: none;
}

/* ════════════════════════════════════════ TOAST IMPROVED ════════════════════════════════════════ */
/* .toast consolidated */
/* Better input focus ring — consolidated above */
/* ════════════════════════════════════════ IMPROVED MOBILE EXPERIENCE ════════════════════════════════════════ */
@media (max-width: 600px) {
  .hdr {
    margin-bottom: var(--sp2);
  }
  .statusbar {
    padding: 8px var(--sp2);
  }
  .btn-gold {
    min-height: 52px;
    font-size: 16px;
  }
  .toast {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .rmodal {
    padding: var(--sp2);
  }
  .rmodal-box {
    padding: var(--sp2);
  }
}

@media print {
  .hdr,.mode-tabs,.statusbar,.btn,.rating-bar,.next-qs,.analytics,.emergency,.back-bar {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .box {
    border: 1px solid #ccc !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .atxt,.qtxt {
    color: #000 !important;
  }
  .score-ring-fill {
    stroke-dashoffset: 0 !important;
  }
}

/* ════════════════════════════════════════ SETUP LANGUAGE SELECTOR ════════════════════════════════════════ */
.setup-lang-bar {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  max-width: 400px;
  margin: 0 auto var(--space-5);
  padding: 5px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.setup-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: var(--font);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.setup-lang-btn:hover {
  border-color: var(--border-d);
  color: var(--blue-text);
  background: var(--card);
  box-shadow: var(--sh0);
}

.setup-lang-btn.active {
  border-color: rgba(61,90,254,.22);
  background: var(--card);
  color: var(--blue-text);
  box-shadow: var(--sh0), 0 0 0 2px var(--blue-m);
}

.setup-lang-btn .slb-flag {
  font-size: 18px;
  line-height: 1;
}

.setup-lang-btn .slb-label {
  font-size: var(--fs-sm);
  font-weight: 700;
}

@media (max-width: 400px) {
  .setup-lang-btn {
    padding: 7px 12px;
    font-size: var(--fs-xs);
  }
  .setup-lang-btn .slb-label {
    display: none;
  }
}

/* ════════════════════════════════════════ MARKDOWN RENDERING ══ */
.md-rendered {
  line-height: 1.8;
}
.md-rendered p {
  margin: 0 0 0.65em;
}
.md-rendered p:last-child {
  margin-bottom: 0;
}
.md-rendered strong {
  font-weight: 700;
  color: var(--t1);
}
.md-rendered em {
  font-style: italic;
  color: var(--ink-2);
}
.md-rendered code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88em;
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--primary-300, #7c8eff);
}
.md-rendered ul.md-ul,
.md-rendered ol.md-ol {
  padding-inline-start: 1.4em;
  margin: 0.3em 0 0.65em;
}
.md-rendered li {
  margin-bottom: 0.3em;
}
.md-rendered .md-h {
  margin: 0.8em 0 0.3em;
}
.md-rendered .md-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.8em 0;
}
.md-rendered br {
  content: '';
  display: block;
  margin: 0.2em 0;
}

/* ════════════════════════════════════════ PRINT STYLESHEET ══ */
@media print {
  /* Hide everything except answer and history */
  .back-bar, .hdr, #setupScreen, .tab-bar, #bannerWarn,
  #bannerOffline, #bannerConf, .toast, #healIndicator,
  #liveMode .mic-area, #liveMode .gen-progress-wrap, #liveMode .answer-actions,
  #liveMode .rating-bar, #liveMode .next-qs,
  .btn, .rmodal,
  .skip-link, .progress-bar, .waves { display: none !important; }

  body {
    background: #fff !important;
    color: #111 !important;
    font-size: 12pt;
    font-family: 'IBM Plex Sans Arabic', Arial, sans-serif;
  }

  .wrap { max-width: 100% !important; padding: 0 !important; }

  /* Show answer cleanly */
  .atxt {
    font-size: 12pt !important;
    line-height: 1.9 !important;
    color: #111 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* History items */
  .hist-item {
    border: 1px solid #ccc !important;
    break-inside: avoid;
    margin-bottom: 16pt;
    padding: 8pt !important;
    page-break-inside: avoid;
  }

  /* Print header */
  .hdr { display: block !important; border-bottom: 2pt solid #ccc; margin-bottom: 12pt; }
  .hdr-brand { display: flex !important; }
  .hdr-right { display: none !important; }

  /* Add URL at bottom */
  @page { margin: 2cm; }
  body::after {
    content: 'مساعد المقابلة — ' attr(data-print-date);
    display: block;
    font-size: 9pt;
    color: #666;
    text-align: center;
    margin-top: 20pt;
    border-top: 1px solid #ccc;
    padding-top: 6pt;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM LAYER v26 — Touch Safety · Scrollbar · Containment · Shimmer
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Touch devices: disable hover transforms to prevent stuck states ── */
@media (hover: none) {
  .tone-btn:hover,
  .hitem:hover,
  .stat-c:hover,
  .nq-item:hover { transform: none; }

  .btn-gold:hover:not(:disabled),
  .btn-sm:hover,
  .mic-btn:hover:not(:disabled) { transform: none; box-shadow: inherit; }

  .track-btn:hover { transform: none; }
}

/* ── 2. Custom scrollbar — webkit only, degrades gracefully ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-d);
  border-radius: 3px;
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
::-webkit-scrollbar-corner { background: transparent; }

/* Firefox scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-d) transparent; }

/* ── 3. CSS containment — limit layout recalc to component boundaries ── */
.analytics  { contain: layout style; }
.next-qs    { contain: layout style; }
.card       { contain: layout style; }
.box        { contain: layout style; }
.rmodal-box { contain: layout style; }

/* ── 4. will-change hints — GPU-promote elements that animate frequently ── */
.mic-btn       { will-change: transform; }
.btn-gold      { will-change: transform; }
.mic-btn::before { will-change: transform, opacity; }

/* ── 5. Animated shimmer on the primary CTA while hovered (desktop) ── */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover:not(:disabled) {
    background: linear-gradient(
      135deg,
      var(--blue-d) 0%,
      var(--blue) 30%,
      #6c82ff 55%,
      var(--blue) 70%,
      var(--blue-d) 100%
    );
    background-size: 200% auto;
    animation: goldShimmer .9s linear infinite;
  }
}

/* ── 6. CSS View Transitions — progressive enhancement for tab switches ── */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
}

/* ── 7. Setup hero: animated gradient text on first load ── */
@keyframes heroGradShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

#heroTitleHighlight {
  background-size: 200% auto !important;
  animation: heroGradShift 4s ease infinite;
}

/* ── 8. Mic button ring pulse — richer breathing effect ── */
@keyframes micRingPulse {
  0%   { transform: scale(1);    opacity: .5; }
  40%  { transform: scale(1.12); opacity: .25; }
  100% { transform: scale(1.22); opacity: 0; }
}

.mic-btn::before { animation-name: micRingPulse; animation-duration: 2s; }
.mic-btn.on::before { animation-duration: 1s; border-color: rgba(0,163,122,.35); }

/* ── 9. Score ring: smoother entrance transition ── */
.score-ring-fill {
  transition: stroke-dashoffset .8s cubic-bezier(.34,1.56,.64,1);
}

/* ── 10. Toast: add glassmorphism for dark mode ── */
@supports (backdrop-filter: blur(1px)) {
  .toast {
    background: color-mix(in srgb, var(--ink) 88%, transparent);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
  }
}

/* ── 11. hitem border accent on hover ── */
.hitem:hover {
  border-inline-start-color: var(--blue);
  border-inline-start-width: 3px;
}

/* ── 12. Reduced-motion: stop all new animations ── */
@media (prefers-reduced-motion: reduce) {
  #heroTitleHighlight { animation: none; }
  .btn-gold { animation: none !important; }
  .mic-btn::before { animation: none; }
  .score-ring-fill { transition: none; }
}