/* ==========================================================================
   MülakatSim — Tasarım Sistemi
   Tailwind (yardımcı sınıflar) + daisyUI 4 (bileşenler) + bu dosya (kimlik)
   Yön C: açık kağıt zemin, bölüm başına renk bloğu, yuvarlak hatlar
   ========================================================================== */

/* ---------- 1. daisyUI teması: AÇIK ---------- */
[data-theme="mulakat"] {
  color-scheme: light;

  --p:  52% 0.168 284;   --pf: 45% 0.170 284;   --pc: 98% 0.012 284;
  --s:  55% 0.105 179;   --sf: 48% 0.108 179;   --sc: 98% 0.012 179;
  --a:  63% 0.148 47;    --af: 56% 0.152 47;    --ac: 99% 0.010 47;
  --n:  26% 0.021 62;    --nf: 20% 0.021 62;    --nc: 97% 0.008 62;

  --b1: 99.2% 0.003 84;  /* kartlar — sıcak beyaz  */
  --b2: 96.6% 0.008 82;  /* sayfa zemini — kağıt   */
  --b3: 92.4% 0.012 80;  /* çizgiler               */
  --bc: 25% 0.022 62;    /* mürekkep — sıcak siyah */

  --in: 55% 0.130 244;   --inc: 98% 0.010 244;
  --su: 54% 0.118 158;   --suc: 98% 0.010 158;
  --wa: 69% 0.140 68;    --wac: 22% 0.030 68;
  --er: 55% 0.185 25;    --erc: 98% 0.010 25;

  --rounded-box: 1.25rem;
  --rounded-btn: 0.75rem;
  --rounded-badge: 999px;
  --border-btn: 1.5px;
  --tab-radius: 0.6rem;
  --animation-btn: 0.22s;
  --animation-input: 0.22s;
  --btn-focus-scale: 0.985;

  /* Bölüm renk blokları — yön C'nin özü, düşük kroma ile */
  --tint-violet:  oklch(96.4% 0.026 286);
  --tint-mint:    oklch(96.4% 0.028 172);
  --tint-peach:   oklch(96.8% 0.032 58);
  --tint-sky:     oklch(96.4% 0.028 236);
  --tint-rose:    oklch(96.6% 0.026 8);

  --ink-violet: oklch(37% 0.155 286);
  --ink-mint:   oklch(35% 0.105 172);
  --ink-peach:  oklch(39% 0.135 48);
  --ink-sky:    oklch(37% 0.135 240);
  --ink-rose:   oklch(39% 0.150 12);
  --pill:       oklch(100% 0 0 / .68);

  --paper:  oklch(99.2% 0.003 84);
  --hairline: oklch(90% 0.014 80);
  --grain-opacity: .028;

  --lift-1: 0 1px 2px oklch(32% 0.03 62 / .05), 0 6px 16px -10px oklch(32% 0.03 62 / .16);
  --lift-2: 0 1px 2px oklch(32% 0.03 62 / .06), 0 18px 40px -20px oklch(32% 0.03 62 / .26);
  --inner-hi: inset 0 1px 0 oklch(100% 0 0 / .7);
}

/* ---------- 2. daisyUI teması: KOYU ---------- */
[data-theme="mulakat-dark"] {
  color-scheme: dark;

  --p:  70% 0.150 284;   --pf: 63% 0.155 284;   --pc: 16% 0.030 284;
  --s:  70% 0.100 179;   --sf: 62% 0.104 179;   --sc: 16% 0.028 179;
  --a:  74% 0.135 55;    --af: 66% 0.140 55;    --ac: 18% 0.030 55;
  --n:  32% 0.022 268;   --nf: 26% 0.022 268;   --nc: 94% 0.010 268;

  --b1: 20.5% 0.016 268;
  --b2: 16.5% 0.016 268;
  --b3: 28%   0.020 268;
  --bc: 93%   0.010 86;

  --in: 70% 0.115 244;   --inc: 16% 0.028 244;
  --su: 70% 0.110 158;   --suc: 16% 0.028 158;
  --wa: 79% 0.125 72;    --wac: 18% 0.030 72;
  --er: 68% 0.160 22;    --erc: 16% 0.028 22;

  --rounded-box: 1.25rem;
  --rounded-btn: 0.75rem;
  --rounded-badge: 999px;
  --border-btn: 1.5px;
  --tab-radius: 0.6rem;
  --animation-btn: 0.22s;
  --animation-input: 0.22s;
  --btn-focus-scale: 0.985;

  /* Koyu temada renkli yüzey kuralı: kroma DÜŞÜK, parlaklık zeminden belirgin yüksek.
     Ters yaparsan (yüksek kroma, düşük parlaklık) sıcak tonlar kahverengiye,
     yeşil zehir yeşiline çöker. Hue kimliği yüzeyde değil yazı/ikon renginde taşınır. */
  --tint-violet: oklch(28%   0.028 288);
  --tint-mint:   oklch(27.5% 0.022 178);
  --tint-peach:  oklch(28%   0.020 52);
  --tint-sky:    oklch(27.5% 0.024 242);
  --tint-rose:   oklch(28%   0.024 14);

  --ink-violet: oklch(86% 0.090 288);
  --ink-mint:   oklch(86% 0.075 178);
  --ink-peach:  oklch(88% 0.080 62);
  --ink-sky:    oklch(86% 0.082 242);
  --ink-rose:   oklch(87% 0.082 14);
  --pill:       oklch(100% 0 0 / .10);

  --paper: oklch(20.5% 0.016 268);
  --hairline: oklch(30% 0.020 268);
  --grain-opacity: .05;

  --lift-1: 0 1px 2px oklch(0% 0 0 / .35), 0 6px 16px -10px oklch(0% 0 0 / .55);
  --lift-2: 0 1px 2px oklch(0% 0 0 / .40), 0 18px 40px -20px oklch(0% 0 0 / .70);
  --inner-hi: inset 0 1px 0 oklch(100% 0 0 / .05);
}

/* ---------- 3. Tipografi ---------- */
body {
  font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  letter-spacing: -0.006em;
  text-rendering: optimizeLegibility;
}
.display, h1, h2, h3, .card-title {
  font-family: 'Bricolage Grotesque', 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-variation-settings: 'wdth' 96;
  letter-spacing: -0.022em;
  line-height: 1.12;
}
.num { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
p, li { text-wrap: pretty; }

/* ---------- 4. Zemin: kağıt + grain ---------- */
body { background: oklch(var(--b2)); position: relative; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* ---------- 5. Yüzeyler ---------- */
.surface {
  background: var(--paper);
  border: 1.5px solid var(--hairline);
  border-radius: var(--rounded-box);
  box-shadow: var(--lift-1), var(--inner-hi);
  transition: box-shadow .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s;
}
.surface-hover:hover { box-shadow: var(--lift-2), var(--inner-hi); transform: translateY(-3px); border-color: oklch(var(--bc) / .16); }

.tint { border-radius: var(--rounded-box); }
.tint-violet { background: var(--tint-violet); }
.tint-mint   { background: var(--tint-mint); }
.tint-peach  { background: var(--tint-peach); }
.tint-sky    { background: var(--tint-sky); }
.tint-rose   { background: var(--tint-rose); }
.on-violet { color: var(--ink-violet); }
/* Tint üstü gövde metni: hue'lu soluk renk DEĞİL, normal mürekkep */
.tint-title { color: oklch(var(--bc)); }
.tint-body  { color: oklch(var(--bc) / .72); }
.tint-meta  { color: oklch(var(--bc) / .52); }
.pill { background: var(--pill); }
.on-mint   { color: var(--ink-mint); }
.on-peach  { color: var(--ink-peach); }
.on-sky    { color: var(--ink-sky); }
.on-rose   { color: var(--ink-rose); }

/* ---------- 6. Üst bar + sekmeler ---------- */
.appbar { background: oklch(var(--b2) / .82); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1.5px solid var(--hairline); }

.view-section { display: none; }
.view-section.active { display: block; }

.nav-tab-btn {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .5rem .8rem; border-radius: 999px; font-size: .8375rem; font-weight: 700;
  color: oklch(var(--bc) / .62);
  background: transparent; border: 1.5px solid transparent;
  transition: all .2s cubic-bezier(.2,.8,.2,1);
}
.nav-tab-btn:hover { background: var(--paper); border-color: var(--hairline); color: oklch(var(--bc) / .9); }
.nav-tab-btn.active { background: oklch(var(--n)); border-color: oklch(var(--n)); color: oklch(var(--nc)); box-shadow: var(--lift-1); }
.nav-tab-btn i { opacity: .85; }
.icon-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--paper); border: 1.5px solid var(--hairline); color: oklch(var(--bc) / .7);
  transition: all .2s cubic-bezier(.2,.8,.2,1); }
.icon-btn:hover { color: oklch(var(--bc) / .95); border-color: oklch(var(--bc) / .22); transform: translateY(-1px); }
.pulse-focus { animation: pulse-ring 1.1s ease-out 3; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 oklch(var(--p) / .55); } 100% { box-shadow: 0 0 0 10px oklch(var(--p) / 0); } }
/* ---------- Aşama adımları (şirketin gerçek süreci) ----------
   Renk kuralı: adımlar ayrı bir yüzey (--paper) DEĞİL, üstünde durdukları tonun
   saydam katmanıdır. Böylece hem açık hem koyu temada, hem de mor/nane/şeftali
   bloklarının hepsinde okunabilir kalır ve zemin rengi görünmeye devam eder. */
.stage-steps { display: flex; flex-wrap: wrap; gap: .5rem; }
.stage-count { font-size: .72rem; font-weight: 700; color: oklch(var(--bc) / .5); }
.stage-count b { color: oklch(var(--bc) / .8); font-weight: 800; }

.stage-step {
  display: inline-flex; align-items: center; gap: .6rem; text-align: left; cursor: pointer;
  padding: .6rem .95rem .6rem .6rem; border-radius: 1rem;
  background: oklch(var(--bc) / .055);
  border: 1.5px solid oklch(var(--bc) / .11);
  color: oklch(var(--bc) / .82);
  font-weight: 700; font-size: .85rem; line-height: 1.25;
  transition: background .18s ease, border-color .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.stage-step:hover { background: oklch(var(--bc) / .10); border-color: oklch(var(--bc) / .2); transform: translateY(-1px); }
.stage-step:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }

.stage-step .num {
  display: grid; place-items: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem;
  border-radius: 999px; font-size: .72rem; font-weight: 800;
  background: oklch(var(--bc) / .10); color: oklch(var(--bc) / .6);
}
.stage-step .sub { display: block; font-size: .7rem; font-weight: 600; opacity: .58; margin-top: .15rem; }

.stage-step[aria-checked="true"] {
  background: oklch(var(--p)); border-color: oklch(var(--p)); color: oklch(var(--pc));
  box-shadow: 0 2px 10px -2px oklch(var(--p) / .45);
}
.stage-step[aria-checked="true"] .num { background: oklch(var(--pc) / .2); color: oklch(var(--pc)); }
.stage-step[aria-checked="true"] .sub { opacity: .78; }

/* Süreçte olmayan aşamalar: numara yerine artı, daha silik */
.stage-step.is-extra { background: transparent; border-style: dashed; color: oklch(var(--bc) / .6); }
.stage-step.is-extra:hover { background: oklch(var(--bc) / .06); border-style: solid; }
.stage-step.is-extra .num { background: transparent; color: oklch(var(--bc) / .4); }

.stage-more {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .8rem; padding: .3rem .1rem;
  font-size: .78rem; font-weight: 700; color: oklch(var(--bc) / .5);
  background: none; border: 0; cursor: pointer; transition: color .18s ease;
}
.stage-more:hover { color: oklch(var(--bc) / .85); }

/* ---------- Mülakat odası ---------- */
.origin-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 800; letter-spacing: .01em;
  padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; }
.origin-badge i { width: .8rem; height: .8rem; }
.origin-real { background: oklch(var(--su) / .14); color: oklch(var(--su)); }
.origin-generated { background: oklch(var(--bc) / .07); color: oklch(var(--bc) / .55); }
.origin-other { background: oklch(var(--in) / .14); color: oklch(var(--in)); }
.origin-derived { background: oklch(var(--wa) / .16); color: oklch(var(--wa) / .9); }
.next-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: oklch(var(--b2) / .88); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-top: 1.5px solid var(--hairline); animation: rise .28s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
.next-score { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; font-weight: 800; font-size: .95rem; background: oklch(var(--p) / .14); color: oklch(var(--p)); flex-shrink: 0; }
.next-score.good { background: oklch(var(--su) / .16); color: oklch(var(--su)); }
.next-score.bad  { background: oklch(var(--er) / .14); color: oklch(var(--er)); }
body.has-next-bar { padding-bottom: 7rem; }
textarea.locked { opacity: .7; cursor: not-allowed; }
.rec-dot { width: .5rem; height: .5rem; border-radius: 999px; background: oklch(var(--er)); animation: rec-blink 1.2s ease-in-out infinite; }
@keyframes rec-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.typewriter.typing::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: currentColor; animation: caret 0.8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chat-bubble-q { position: relative; }
.chat-bubble-q::before { content: ''; position: absolute; left: 1.25rem; top: -.5rem; width: 1rem; height: 1rem; background: inherit; transform: rotate(45deg); border-radius: 3px; }
.no-bar { scrollbar-width: none; -ms-overflow-style: none; }
.no-bar::-webkit-scrollbar { display: none; }

/* ---------- 7. Bölüm başlığı ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; }

/* ---------- 8. Aşama zaman çizelgesi ---------- */
.timeline { position: relative; display: flex; flex-direction: column; gap: .55rem; padding-left: 1.55rem; margin: 0; list-style: none; }
.timeline::before { content: ''; position: absolute; left: .3rem; top: .55rem; bottom: .55rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, oklch(var(--bc) / .16), oklch(var(--bc) / .05)); }
.timeline li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: baseline; font-size: .875rem; line-height: 1.35; }
.timeline li::before { content: ''; position: absolute; left: -1.55rem; top: .42rem; width: .5rem; height: .5rem; border-radius: 999px; background: oklch(var(--bc) / .28); box-shadow: 0 0 0 3.5px var(--paper); }
.timeline li.is-key { font-weight: 700; }
.timeline li.is-key::before { background: oklch(var(--p)); width: .6rem; height: .6rem; left: -1.6rem; top: .38rem; box-shadow: 0 0 0 3.5px var(--paper), 0 0 0 5.5px oklch(var(--p) / .16); }
.timeline .meta { font-size: .72rem; color: oklch(var(--bc) / .48); font-weight: 600; white-space: nowrap; }

/* ---------- 9. Güven göstergesi ---------- */
.conf { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700; padding: .25rem .6rem .25rem .45rem; border-radius: 999px; background: oklch(var(--bc) / .05); color: oklch(var(--bc) / .62); }
.conf::before { content: ''; width: .4rem; height: .4rem; border-radius: 999px; background: currentColor; }
.conf-high     { background: oklch(var(--su) / .16); color: oklch(var(--su)); }
.conf-medium   { background: oklch(var(--in) / .16); color: oklch(var(--in)); }
.conf-low      { background: oklch(var(--wa) / .18); color: oklch(var(--wa)); }
/* Tahmini veri: uydurma olmadığı ama doğrulanmadığı belli olsun — kesikli çerçeve + soluk ton */
.conf-template { background: transparent; color: oklch(var(--bc) / .52);
                 border: 1.5px dashed oklch(var(--bc) / .22); padding: .2rem .6rem .2rem .45rem; }
.conf-template::before { background: oklch(var(--bc) / .35); }

/* ---------- 10. Şirket kimliği ---------- */
.co-strip { height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--co), color-mix(in oklab, var(--co) 28%, transparent)); }
.co-avatar { width: 2.6rem; height: 2.6rem; border-radius: .85rem; display: grid; place-items: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: -.02em; flex-shrink: 0;
  background: color-mix(in oklab, var(--co) 15%, transparent); color: color-mix(in oklab, var(--co) 82%, black); }
[data-theme="mulakat-dark"] .co-avatar { background: color-mix(in oklab, var(--co) 26%, transparent); color: color-mix(in oklab, var(--co) 55%, white); }
[data-theme="mulakat-dark"] .co-strip  { background: linear-gradient(90deg, color-mix(in oklab, var(--co) 68%, white), color-mix(in oklab, var(--co) 22%, transparent)); }

/* ---------- 11. Çipler ---------- */
.chip-btn { border-radius: 999px !important; font-weight: 700; border-width: 1.5px; }
.chip-btn:not(.active) { background: var(--paper); border-color: var(--hairline); color: oklch(var(--bc) / .68); }
.chip-btn:not(.active):hover { border-color: oklch(var(--bc) / .22); color: oklch(var(--bc)); }
.chip-btn.active { background: oklch(var(--n)); border-color: oklch(var(--n)); color: oklch(var(--nc)); }

/* ---------- 12. Ses dalgası ---------- */
.waveform-box { display: flex; gap: 3px; align-items: center; height: 22px; }
.waveform-box .wave-bar { width: 3.5px; height: 7px; border-radius: 2px; background: currentColor; opacity: .3; transition: height .2s, opacity .2s; }
.waveform-box.active .wave-bar { opacity: 1; animation: wave .95s ease-in-out infinite; }
.waveform-box.active .wave-bar:nth-child(2) { animation-delay: .11s; }
.waveform-box.active .wave-bar:nth-child(3) { animation-delay: .22s; }
.waveform-box.active .wave-bar:nth-child(4) { animation-delay: .33s; }
.waveform-box.active .wave-bar:nth-child(5) { animation-delay: .44s; }
@keyframes wave { 0%,100% { height: 7px; } 50% { height: 20px; } }

/* ---------- 13. Kayıt & sayaç ---------- */
.timer-badge.warning { background: oklch(var(--er) / .12) !important; color: oklch(var(--er)) !important; }
.voice-record-btn.recording { background: oklch(var(--er) / .10); border-color: oklch(var(--er)); color: oklch(var(--er)); animation: pulse-soft 1.3s infinite; }
@keyframes pulse-soft { 0%,100% { box-shadow: 0 0 0 0 oklch(var(--er) / .28); } 50% { box-shadow: 0 0 0 7px oklch(var(--er) / 0); } }

/* ---------- 14. Açılır paneller ---------- */
.accordion-body, .qbank-answer-panel { display: none; }
.accordion-body.open, .qbank-answer-panel.show { display: block; animation: rise .3s cubic-bezier(.2,.8,.2,1); }

/* ---------- 15. Modal ---------- */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 60; background: oklch(20% .02 62 / .5); backdrop-filter: blur(4px); padding: 1rem; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; animation: fade .2s ease-out; }
.modal-overlay.active > * { animation: rise .3s cubic-bezier(.2,.8,.2,1); }

/* ---------- 17. Hareket ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.view-section.active { animation: fade .22s ease-out; }
.stagger > * { animation: rise .42s cubic-bezier(.2,.8,.2,1) backwards; }
.stagger > *:nth-child(1){animation-delay:.02s} .stagger > *:nth-child(2){animation-delay:.05s}
.stagger > *:nth-child(3){animation-delay:.08s} .stagger > *:nth-child(4){animation-delay:.11s}
.stagger > *:nth-child(5){animation-delay:.14s} .stagger > *:nth-child(6){animation-delay:.17s}
.stagger > *:nth-child(7){animation-delay:.20s} .stagger > *:nth-child(8){animation-delay:.22s}
.stagger > *:nth-child(n+9){animation-delay:.24s}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- 18. Ufak düzeltmeler ---------- */
.feedback-list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; line-height: 1.5; }
[data-lucide] { flex-shrink: 0; }
.select, .input, .textarea { border-width: 1.5px !important; border-color: var(--hairline) !important; background-color: var(--paper) !important; font-weight: 600; }
.select:focus, .input:focus-within, .textarea:focus { outline: none !important; border-color: oklch(var(--p) / .6) !important; box-shadow: 0 0 0 3.5px oklch(var(--p) / .12); }
.textarea { font-weight: 400; }
.btn { font-weight: 700; }
.table :where(thead tr) { border-bottom-color: var(--hairline); }
.table :where(tbody tr:not(:last-child)) { border-bottom-color: oklch(var(--bc) / .07); }
.table :where(tbody tr:hover) { background: oklch(var(--bc) / .028); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(var(--bc) / .18); border-radius: 999px; border: 3px solid oklch(var(--b2)); }
::-webkit-scrollbar-thumb:hover { background: oklch(var(--bc) / .3); }

/* hidden niteliği her zaman kazanır (Tailwind'in display:flex'i ezmesin) */
[hidden] { display: none !important; }

/* Puan halkası
   inherits: true ŞART — daisyUI halkayı ::before içinde çiziyor ve --value'yu miras alması gerek.
   false olursa sözde eleman initial-value 0'a düşer ve halka hep boş görünür. */
@property --value { syntax: '<number>'; inherits: true; initial-value: 0; }
.radial-progress { box-shadow: inset 0 0 0 var(--thickness, 5px) oklch(var(--bc) / .10); }
.radial-progress::after { display: none; }

/* ---------- 19. Aranabilir açılır liste (combobox) ----------
   Kural: liste SABİT yükseklikte kalır (ekranı kaplamaz), arama kutusu ve sayaç
   kaydırma alanının dışında durur, sektör başlıkları kaydırırken yapışır.
   Tetik düğmesi .select sınıfını aynen taşır — yanındaki "Rol" seçicisiyle
   piksel piksel aynı görünsün diye. */
.cbx { position: relative; display: block; width: 100%; }
/* align-items: center ŞART — .select'in stretch'i metin bloğunu yukarı yapıştırıyor */
.cbx-btn { display: flex; align-items: center; justify-content: flex-start; gap: .6rem;
  text-align: left; line-height: 1.2; padding-inline-start: .5rem; overflow: hidden; }
.cbx-btn:focus-visible,
.cbx[data-open="true"] .cbx-btn { outline: none !important; border-color: oklch(var(--p) / .6) !important;
  box-shadow: 0 0 0 3.5px oklch(var(--p) / .12); }

.cbx-text { display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-width: 0; }
.cbx-name { font-size: .875rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-sub  { font-size: .69rem; font-weight: 600; color: oklch(var(--bc) / .5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-logo { flex-shrink: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .65rem;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: -.02em;
  background: color-mix(in oklab, var(--co, oklch(var(--bc))) 15%, transparent);
  color: color-mix(in oklab, var(--co, oklch(var(--bc))) 82%, black); }
[data-theme="mulakat-dark"] .cbx-logo {
  background: color-mix(in oklab, var(--co, oklch(var(--bc))) 26%, transparent);
  color: color-mix(in oklab, var(--co, oklch(var(--bc))) 55%, white); }

.cbx-pop { position: absolute; z-index: 50; top: calc(100% + .4rem); left: 0; right: 0; min-width: 16rem;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1.5px solid var(--hairline); border-radius: 1.1rem;
  box-shadow: var(--lift-2); animation: rise .16s cubic-bezier(.2,.8,.2,1); }
.cbx.cbx-up .cbx-pop { top: auto; bottom: calc(100% + .4rem); }

.cbx-search { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem;
  border-bottom: 1.5px solid var(--hairline); }
.cbx-search > svg { width: 1rem; height: 1rem; flex-shrink: 0; color: oklch(var(--bc) / .38); }
.cbx-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: inherit;
  font: inherit; font-size: .875rem; font-weight: 600; }
.cbx-input::placeholder { color: oklch(var(--bc) / .38); font-weight: 600; }

.cbx-list { position: relative; max-height: min(19rem, 46vh); overflow-y: auto; overscroll-behavior: contain; padding: .35rem; }
.cbx-group { position: sticky; top: -.35rem; z-index: 1; padding: .5rem .55rem .3rem; background: var(--paper);
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: oklch(var(--bc) / .42); }
.cbx-opt { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; border-radius: .8rem; cursor: pointer; }
.cbx-opt .cbx-name { font-size: .8125rem; }
.cbx-opt.is-active { background: oklch(var(--bc) / .06); }
.cbx-opt.is-sel .cbx-name { color: oklch(var(--p)); }
.cbx-opt.is-active.is-sel { background: oklch(var(--p) / .10); }
.cbx-opt mark { background: oklch(var(--p) / .20); color: inherit; border-radius: .25rem; padding: 0 .06rem; }
.cbx-check { width: 1rem; height: 1rem; margin-left: auto; flex-shrink: 0; color: oklch(var(--p)); }
.cbx-empty { padding: 1.7rem .75rem; text-align: center; font-size: .8125rem; font-weight: 600; color: oklch(var(--bc) / .5); }

.cbx-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .45rem .8rem; border-top: 1.5px solid var(--hairline); background: oklch(var(--bc) / .025);
  font-size: .66rem; font-weight: 700; color: oklch(var(--bc) / .42); }
.cbx-keys { white-space: nowrap; }
@media (max-width: 479px) { .cbx-keys { display: none; } }

/* Kısa listeler (sektör, veri güveni): arama ve alt bilgi yok, tetik hap biçiminde satır içi */
.cbx-compact .cbx-search, .cbx-compact .cbx-foot { display: none; }
.cbx-compact .cbx-list { max-height: min(24rem, 60vh); }
.cbx-inline { width: auto; flex: 0 0 auto; }
.cbx-inline .cbx-btn { width: auto; padding-inline: .3rem 2.4rem; }
.cbx-inline .cbx-btn .cbx-logo { width: 1.85rem; height: 1.85rem; border-radius: 999px; font-size: .64rem; }
.cbx-inline .cbx-pop { left: auto; right: 0; min-width: 17rem; }
@media (max-width: 639px) { .cbx-inline { width: 100%; } .cbx-inline .cbx-btn { width: 100%; } .cbx-inline .cbx-pop { left: 0; } }

/* ---------- Test modu (genel yetenek / İngilizce) ----------
   Gerçek test platformu hissi: sade yüzey, büyük şıklar, ara geri bildirim yok.
   Şık seçilince kısa bir vurgu, sonra sıradaki soru. */
.quiz-progress { display: flex; gap: .3rem; }
.quiz-progress span { flex: 1; height: .35rem; border-radius: 999px; background: oklch(var(--bc) / .12); }
.quiz-progress span.done { background: oklch(var(--bc) / .45); }
.quiz-progress span.now { background: oklch(var(--p)); }

.quiz-question { font-size: 1.05rem; line-height: 1.6; white-space: pre-line; }

.quiz-options { display: grid; gap: .6rem; }
.quiz-option {
  display: flex; align-items: flex-start; gap: .85rem; width: 100%; text-align: left; cursor: pointer;
  padding: .85rem 1rem; border-radius: 1rem;
  background: oklch(var(--bc) / .045); border: 1.5px solid oklch(var(--bc) / .12);
  color: oklch(var(--bc) / .88); font-weight: 600; font-size: .95rem; line-height: 1.45;
  transition: background .15s ease, border-color .15s ease, transform .15s cubic-bezier(.2,.8,.2,1);
}
.quiz-option:hover { background: oklch(var(--bc) / .09); border-color: oklch(var(--bc) / .25); transform: translateY(-1px); }
.quiz-option:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }
.quiz-option .key {
  display: grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: .6rem;
  background: oklch(var(--bc) / .10); color: oklch(var(--bc) / .65); font-size: .78rem; font-weight: 800;
}
.quiz-option.picked { background: oklch(var(--p)); border-color: oklch(var(--p)); color: oklch(var(--pc)); }
.quiz-option.picked .key { background: oklch(var(--pc) / .22); color: oklch(var(--pc)); }
.quiz-locked .quiz-option { pointer-events: none; }
.quiz-locked .quiz-option:not(.picked) { opacity: .55; }

/* Cevap anahtarı (sadece testin sonunda) */
.quiz-key-row { display: grid; grid-template-columns: 1.6rem 1fr; gap: .75rem; padding: .8rem 0; border-top: 1px solid oklch(var(--bc) / .08); }
.quiz-key-row:first-child { border-top: 0; }
.quiz-key-row .mark { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.quiz-key-row .mark.ok    { background: oklch(var(--su) / .16); color: oklch(var(--su)); }
.quiz-key-row .mark.wrong { background: oklch(var(--er) / .14); color: oklch(var(--er)); }
.quiz-key-row .mark.blank { background: oklch(var(--bc) / .10); color: oklch(var(--bc) / .55); }
.quiz-pick { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; padding: .2rem .55rem; border-radius: .5rem; }
.quiz-pick.you   { background: oklch(var(--er) / .12); color: oklch(var(--er)); text-decoration: line-through; }
.quiz-pick.right { background: oklch(var(--su) / .14); color: oklch(var(--su)); }

/* Test modu: tablo yorumlama ve pasaj */
.quiz-passage { font-size: .98rem; line-height: 1.7; padding: 1rem 1.15rem; border-radius: 1rem; background: oklch(var(--bc) / .045); border-left: 3px solid oklch(var(--p) / .6); white-space: pre-line; }
.quiz-table { border-collapse: collapse; min-width: 18rem; font-size: .92rem; }
.quiz-table caption { caption-side: top; text-align: left; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: oklch(var(--bc) / .55); padding: 0 0 .5rem; }
.quiz-table th, .quiz-table td { padding: .5rem .9rem; border: 1px solid oklch(var(--bc) / .14); text-align: center; font-variant-numeric: tabular-nums; }
.quiz-table th { background: oklch(var(--bc) / .07); font-weight: 800; }
.quiz-table td:first-child { text-align: left; font-weight: 700; }

/* Muse feedback: model/candidate text is escaped and wraps on narrow screens. */
/* Evaluation report: flat and legible. 17px body, 13px meta, no nested boxes, colour only as a left rule + chip. */
.evaluation-report { overflow-wrap: anywhere; min-width: 0; display: flex; flex-direction: column; gap: 1.75rem; }
.evaluation-head { display: flex; align-items: flex-start; gap: 1.25rem; }
.evaluation-block { display: flex; flex-direction: column; gap: 1rem; }
.evaluation-answer { padding: 1.5rem; border-radius: var(--rounded-box); }
.evaluation-title { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: oklch(var(--bc) / .6); padding-bottom: .6rem; border-bottom: 1.5px solid var(--hairline); }
.evaluation-answer .evaluation-title { border-bottom-color: currentColor; opacity: .9; }
.evaluation-text { font-size: 17px; line-height: 1.65; margin: 0; color: oklch(var(--bc)); }
.evaluation-note { font-weight: 600; }
.evaluation-followup { margin-top: .5rem; padding-top: .9rem; border-top: 1.5px solid oklch(var(--bc) / .12); }
.evaluation-muted { font-size: 13px; line-height: 1.5; color: oklch(var(--bc) / .6); margin: 0; }
.evaluation-rows { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.evaluation-row { display: flex; flex-direction: column; gap: .5rem; padding: .25rem 0 .25rem 1.1rem; border-left: 4px solid currentColor; }
.evaluation-row.edge-mint  { border-left-color: var(--ink-mint); }
.evaluation-row.edge-peach { border-left-color: var(--ink-peach); }
.evaluation-row.edge-rose  { border-left-color: var(--ink-rose); }
.evaluation-row.edge-sky   { border-left-color: var(--ink-sky); }

/* Test raporu: doğru/yanlış/cevapsız kartları renkle ayrılır (yeşil = doğru, kırmızı = yanlış, turuncu = boş). */
.evaluation-report.eval-ok    { background: oklch(var(--su) / .10) !important; border-color: oklch(var(--su) / .35) !important; }
.evaluation-report.eval-wrong { background: oklch(var(--er) / .12) !important; border-color: oklch(var(--er) / .45) !important; }
.evaluation-report.eval-blank { background: oklch(var(--wa) / .10) !important; border-color: oklch(var(--wa) / .40) !important; }
.evaluation-report .evaluation-tag { display: inline-flex; align-self: flex-start; width: auto; padding: .25rem .7rem; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.evaluation-report.eval-ok    .evaluation-tag { background: oklch(var(--su)); color: oklch(var(--suc)); }
.evaluation-report.eval-wrong .evaluation-tag { background: oklch(var(--er)); color: #fff; }
.evaluation-report.eval-blank .evaluation-tag { background: oklch(var(--wa)); color: oklch(var(--wac)); }
.evaluation-report.eval-wrong .evaluation-row { border-left-color: oklch(var(--er)); }
.evaluation-report.eval-ok    .evaluation-row { border-left-color: oklch(var(--su)); }
.evaluation-report.eval-blank .evaluation-row { border-left-color: oklch(var(--wa)); }

/* Rapor altındaki buton çubuğu: uzun sayfada altta yapışık kalır. */
.evaluation-actions { position: sticky; bottom: .75rem; z-index: 20; box-shadow: 0 12px 32px -12px oklch(0% 0 0 / .35); backdrop-filter: blur(6px); }
.evaluation-chip { display: inline-flex; align-self: flex-start; align-items: center; height: 1.75rem; padding: 0 .75rem; font-size: 13px; font-weight: 800; border-radius: 999px; }
.evaluation-quote { font-size: 17px; line-height: 1.6; margin: 0; color: oklch(var(--bc) / .85); white-space: pre-wrap; }
.evaluation-missing { margin: 0; padding-left: 1.2rem; font-size: 15px; line-height: 1.6; display: flex; flex-direction: column; gap: .4rem; color: oklch(var(--bc) / .8); }
.evaluation-score { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; width: 5.5rem; height: 5.5rem; border-radius: 1.5rem; background: var(--paper); border: 1.5px solid var(--hairline); font-size: 2rem; font-weight: 800; line-height: 1; }
.evaluation-score small { font-size: .8rem; opacity: .65; margin-top: .25rem; }
@media (max-width: 480px) { .evaluation-head { gap: 1rem; } .evaluation-text, .evaluation-quote { font-size: 16px; } .evaluation-answer { padding: 1.1rem; } }
#feedback-report-panel:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; border-radius: 1.25rem; }

/* ---------- Süreç simülasyonu (şirketin tüm adımları sırayla) ----------
   Üstte yatay adım çubuğu; tamamlanan adım puanıyla, atlanan soluk, sıradaki vurgulu. */
.process-steps { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .15rem; margin: 0; list-style: none; scrollbar-width: none; }
.process-steps::-webkit-scrollbar { display: none; }
.process-step { display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0; max-width: 15rem;
  padding: .35rem .7rem .35rem .4rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
  background: oklch(var(--bc) / .05); color: oklch(var(--bc) / .55); border: 1.5px solid transparent; }
.process-step .process-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.process-dot { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; font-size: .68rem; font-weight: 800;
  background: oklch(var(--bc) / .10); color: oklch(var(--bc) / .6); flex-shrink: 0; }
.process-step.now { background: oklch(var(--p)); color: oklch(var(--pc)); }
.process-step.now .process-dot { background: oklch(var(--pc) / .22); color: oklch(var(--pc)); }
.process-step.done { background: oklch(var(--su) / .14); color: oklch(var(--su)); }
.process-step.done .process-dot { background: oklch(var(--su) / .22); color: oklch(var(--su)); }
.process-step.info { background: oklch(var(--in) / .12); color: oklch(var(--in)); }
.process-step.skipped { opacity: .55; text-decoration: line-through; text-decoration-color: oklch(var(--bc) / .35); }

/* Süreç özeti: aşama satırları */
.process-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.process-row { display: grid; grid-template-columns: 2rem 1fr auto; gap: .85rem; align-items: center; padding: .8rem 0; border-top: 1px solid oklch(var(--bc) / .08); }
.process-row:first-child { border-top: 0; }
.process-idx { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .7rem; font-size: .8rem; font-weight: 800;
  background: oklch(var(--bc) / .07); color: oklch(var(--bc) / .6); }

/* ---------- Canlı kodlama / kodlama testi (js/code-view.js, js/code-editor.js) ----------
   Sol: problem kartı (nane tonu, mülakatçı kutusuyla aynı dil). Sağ: editör + test konsolu.
   Editör CodeMirror 5 ("mulakat" teması aşağıda) ya da yüklenemezse düz textarea. */
.code-panel { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .code-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.code-avatar { background: var(--paper); }
.code-prompt p { margin: 0 0 .65rem; }
.code-prompt p:last-child { margin-bottom: 0; }
.code-prompt-pre, .code-example-list code, .code-test-detail code, .code-error, .code-logs pre, .code-fallback {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-prompt-pre { white-space: pre-wrap; font-size: 13px; line-height: 1.55; margin: 0 0 .65rem; padding: .7rem .85rem; border-radius: .9rem; background: var(--paper); color: oklch(var(--bc) / .85); }
.code-prompt-label { margin: 0 0 .3rem; font-weight: 800; font-size: 13px; color: oklch(var(--bc) / .7); }
.code-prompt-list { margin: 0 0 .65rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .25rem; font-size: 14px; }
.code-prompt-list li { line-height: 1.5; }
.code-prompt-pre { font-size: 12.5px; }
.code-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: oklch(var(--bc) / .55); margin: 0 0 .4rem; }
.code-example-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.code-example-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: 12.5px; }
.code-example-list code, .code-test-detail code { padding: .15rem .45rem; border-radius: .5rem; background: var(--paper); color: oklch(var(--bc) / .85); word-break: break-all; }
.code-arrow { color: oklch(var(--bc) / .4); font-weight: 700; }

.code-host { position: relative; border-radius: 1rem; overflow: hidden; border: 1.5px solid var(--hairline); background: var(--paper); min-height: 320px; }
.code-host:focus-within { border-color: oklch(var(--p) / .6); box-shadow: 0 0 0 3.5px oklch(var(--p) / .12); }
.code-host.locked { opacity: .75; }
.code-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: oklch(var(--bc) / .45); }
.code-fallback { display: block; width: 100%; min-height: 320px; padding: .9rem 1rem; border: 0; outline: none; resize: vertical; background: transparent; color: oklch(var(--bc)); font-size: 13.5px; line-height: 1.55; tab-size: 2; }
.code-fallback.locked { cursor: not-allowed; }

/* CodeMirror 5 — tema tokenlarına bağlı "mulakat" teması; iki temada da çalışır. */
.code-host .CodeMirror { height: auto; min-height: 320px; max-height: 60vh; background: transparent; color: oklch(var(--bc)); font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14.5px; line-height: 1.75; }
.code-host .CodeMirror pre.CodeMirror-line, .code-host .CodeMirror pre.CodeMirror-line-like { padding: 0 1rem 0 .6rem; }
.code-host .CodeMirror-lines { padding: .75rem 0; }
.cm-s-mulakat .CodeMirror-linenumber { padding: 0 .6rem 0 .8rem; }
.cm-s-mulakat .cm-bracket, .cm-s-mulakat .cm-punctuation { color: oklch(var(--bc) / .6); }
.cm-s-mulakat .CodeMirror-matchingbracket { background: oklch(var(--p) / .18); border-radius: 3px; font-weight: 800; text-decoration: none !important; }
.cm-s-mulakat .CodeMirror-nonmatchingbracket { background: oklch(var(--er) / .18); color: oklch(var(--er)) !important; border-radius: 3px; }
.code-host .CodeMirror-scroll { min-height: 320px; }
.cm-s-mulakat .CodeMirror-gutters { background: transparent; border-right: 1px solid oklch(var(--bc) / .08); }
.cm-s-mulakat .CodeMirror-linenumber { color: oklch(var(--bc) / .35); }
.cm-s-mulakat .CodeMirror-cursor { border-left: 2px solid oklch(var(--p)); }
.cm-s-mulakat .CodeMirror-selected, .cm-s-mulakat .CodeMirror-focused .CodeMirror-selected { background: oklch(var(--p) / .16); }
.cm-s-mulakat .CodeMirror-activeline-background { background: oklch(var(--p) / .07); }
.cm-s-mulakat .CodeMirror-activeline .CodeMirror-linenumber { color: oklch(var(--p)); font-weight: 800; }
.cm-s-mulakat .CodeMirror-matchingbracket { color: oklch(var(--p)) !important; text-decoration: underline; }
.cm-s-mulakat .cm-keyword { color: oklch(52% 0.2 300); font-weight: 600; }
.cm-s-mulakat .cm-atom, .cm-s-mulakat .cm-number { color: oklch(52% 0.16 45); }
.cm-s-mulakat .cm-def { color: oklch(48% 0.13 240); }
.cm-s-mulakat .cm-variable-2, .cm-s-mulakat .cm-property { color: oklch(var(--bc) / .9); }
.cm-s-mulakat .cm-string, .cm-s-mulakat .cm-string-2 { color: oklch(50% 0.13 160); }
.cm-s-mulakat .cm-comment { color: oklch(var(--bc) / .48); font-style: italic; }
.cm-s-mulakat .cm-operator { color: oklch(var(--bc) / .75); }
.cm-s-mulakat .cm-error { color: oklch(var(--er)); }
[data-theme="mulakat-dark"] .cm-s-mulakat .cm-keyword { color: oklch(80% 0.12 300); }
[data-theme="mulakat-dark"] .cm-s-mulakat .cm-atom, [data-theme="mulakat-dark"] .cm-s-mulakat .cm-number { color: oklch(82% 0.12 60); }
[data-theme="mulakat-dark"] .cm-s-mulakat .cm-def { color: oklch(80% 0.1 240); }
[data-theme="mulakat-dark"] .cm-s-mulakat .cm-string, [data-theme="mulakat-dark"] .cm-s-mulakat .cm-string-2 { color: oklch(80% 0.11 160); }

/* Test konsolu */
.code-console { border-radius: 1rem; background: oklch(var(--bc) / .04); padding: .85rem 1rem; font-size: 13px; min-height: 3.5rem; }
.code-console-empty { margin: 0; color: oklch(var(--bc) / .5); font-weight: 600; }
.code-result-head { display: flex; align-items: center; gap: .45rem; font-weight: 800; margin-bottom: .55rem; }
.code-result-head.pass { color: oklch(var(--su)); }
.code-result-head.fail { color: oklch(var(--er)); }
.code-test-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.code-test { display: flex; gap: .5rem; align-items: flex-start; padding: .45rem .6rem; border-radius: .7rem; background: var(--paper); }
.code-test.pass > i { color: oklch(var(--su)); }
.code-test.fail > i { color: oklch(var(--er)); }
.code-test-name { margin: 0; font-weight: 700; }
.code-hidden-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .4rem; border-radius: 999px; background: oklch(var(--bc) / .08); color: oklch(var(--bc) / .55); margin-left: .3rem; }
.code-test-detail { margin: .2rem 0 0; color: oklch(var(--bc) / .7); font-size: 12.5px; }
.code-error { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.5; padding: .7rem .85rem; border-radius: .8rem; background: oklch(var(--er) / .1); color: oklch(var(--er)); }
.code-logs { margin-top: .6rem; }
.code-logs summary { cursor: pointer; font-weight: 700; color: oklch(var(--bc) / .6); font-size: 12px; }
.code-logs pre { margin: .4rem 0 0; white-space: pre-wrap; font-size: 12px; padding: .6rem .8rem; border-radius: .7rem; background: var(--paper); }