/* Ilova qobig'i (UI) — px/rem. Hujjatning o'zi document.css da.
   Tema tizim sozlamasiga ergashadi (prefers-color-scheme): standart — yorug',
   qorong'i rejimda — qop-qora emas, yumshoq grafit ranglar. */
:root {
  color-scheme: light dark;

  /* ---- yorug' palitra (standart) ---- */
  --bg: #eef2f8;                 /* ish maydoni: oq sahifalar ajralib tursin */
  --bar: #ffffff;
  --surface: #ffffff;            /* kartalar, oynalar */
  --surface-2: #f5f8fc;
  --line: rgba(22, 28, 40, .10);
  --line-2: rgba(22, 28, 40, .17);
  --hover: rgba(22, 28, 40, .055);
  --text: #1c2230;
  --heading: #161b26;
  --muted: #586174;
  --faint: #8a93a3;
  --accent: #2f76d2;             /* logotipdagi ko'k — oq fonda o'qiladigan */
  --accent-strong: #1b4f96;
  --accent-soft: rgba(63, 134, 221, .12);
  --accent-line: rgba(63, 134, 221, .45);
  --accent-ink: #0d2340;
  --blue: #3f86dd;
  --ok: #1f9d68;
  --warn: #d4513f;
  --warn-text: #b23a2a;
  --tb-bg: #ffffff;  --tb-fg: #3b4352;  --tb-hover: #eef1f6;
  --tbw-bg: #e5eefb; --tbw-fg: #2059a8; --tbw-hover: #d6e6fa;
  --danger-bg: #fde8e5; --danger-fg: #c0392b;
  --shadow: 0 18px 44px -16px rgba(22, 28, 40, .28);
  --sheet-shadow: 0 .3mm .8mm rgba(22,28,40,.10), 0 3mm 9mm -2mm rgba(22,28,40,.18);
  --pno: rgba(22, 28, 40, .45);
  --glow-a: rgba(63, 134, 221, .10);
  --glow-b: rgba(63, 179, 174, .07);

  --bar-h: 64px;
  --ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ---- qorong'i palitra: grafit, qop-qora emas ---- */
    --bg: #2b313b;
    --bar: #343c48;
    --surface: #3a4250;
    --surface-2: #434c5b;
    --line: rgba(255, 255, 255, .09);
    --line-2: rgba(255, 255, 255, .16);
    --hover: rgba(255, 255, 255, .07);
    --text: #eceff4;
    --heading: #f6f2ea;
    --muted: #b1b8c5;
    --faint: #8a93a2;
    --accent: #8ab9ee;
    --accent-strong: #dcebfc;
    --accent-soft: rgba(138, 185, 238, .16);
    --accent-line: rgba(138, 185, 238, .5);
    --accent-ink: #0b1c31;
    --blue: #8ab9ee;
    --ok: #5ad19d;
    --warn: #ff8a7a;
    --warn-text: #ffb4a8;
    --tb-bg: #3d4451;  --tb-fg: #e1e5ec;  --tb-hover: #4a5262;
    --tbw-bg: #35486a; --tbw-fg: #d6e6fa; --tbw-hover: #3f557d;
    --danger-bg: #5a2d2d; --danger-fg: #ffb4a8;
    --shadow: 0 20px 50px -16px rgba(0, 0, 0, .55);
    --sheet-shadow: 0 .3mm .8mm rgba(0,0,0,.2), 0 3mm 9mm -2mm rgba(0,0,0,.4);
    --pno: rgba(255, 255, 255, .42);
    --glow-a: rgba(138, 185, 238, .08);
    --glow-b: rgba(63, 179, 174, .05);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 var(--ui);
  overflow: hidden;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- navbar ---------- */
.bar {
  position: relative; z-index: 5;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 16px 0 18px;
  background: var(--bar);
  box-shadow: 0 1px 0 var(--line), 0 6px 18px -14px rgba(22, 28, 40, .35);
}
/* pastki chiziq: markazda oltin nur */
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line) 50%, transparent);
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; min-width: 0; }
/* Tizim belgisi (shared/logo.svg) — fonsiz, o'zi kvadrat maydonni to'ldiradi */
.mark { width: 38px; height: 38px; flex: none; display: block; }
.mark img, .mark svg { display: block; width: 100%; height: 100%; }
.wordmark { display: grid; line-height: 1.05; }
.wordmark b { font: 600 19px/1.1 var(--serif); letter-spacing: .005em; color: var(--heading); white-space: nowrap; }
.wordmark span {
  margin-top: 4px;
  font-size: 10px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}

/* Joy tor bo'lsa ko'rsatkich qisqaradi, so'ng butunlay yashirinadi —
   almashtirgich (.tools) yoki tugmalar ustiga chiqmaydi. */
.progress { flex: none; display: flex; align-items: center; min-width: 0; }
@media (max-width: 1240px) { #progLbl { display: none; } }
@media (max-width: 1040px) { .progress { display: none; } }
.prog {
  flex: none; max-width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 13px 6px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.prog:hover { border-color: var(--line-2); background: var(--hover); }
.prog b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ring { width: 22px; height: 22px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .bgc { stroke: var(--line-2); }
.ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1), stroke .3s; }
.prog.done .ring .fg { stroke: var(--ok); }

/* sig'masa tugmalar gorizontal suriladi — hech qachon brend ustiga chiqmaydi */
.actions {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
}
.actions::-webkit-scrollbar { display: none; }
.actions > * { flex: none; }
/* flex-end emas: toshgan qism chapga chiqib, surib bo'lmay qoladi. auto-margin
   bo'sh joy bo'lsa o'ngga suradi, sig'masa 0 ga tushib, o'ngga surishga imkon beradi. */
.actions::before { content: ""; margin-left: auto; }
.vsep { width: 1px; height: 24px; background: var(--line); margin: 0 6px; }

.btn {
  height: 36px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 13px; font-weight: 560; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; opacity: .9; }
.btn.ghost { border-color: transparent; background: none; color: var(--muted); padding: 0 11px; }
.btn.ghost:hover { color: var(--text); background: var(--hover); }
.btn.primary {
  border: 0; color: #fff; font-weight: 650;
  background: linear-gradient(180deg, #4b90e2, #2f76d2);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 20px -10px rgba(47,118,210,.85);
}
.btn.primary:hover { background: linear-gradient(180deg, #5b9ce9, #3a80db); }

/* yozuv almashtirgichi: hujjat yorliqlari + kiritilgan matn birga o'tadi */
.script-switch {
  position: relative;
  display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 3px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-2);
}
.script-switch .thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(63,134,221,.26), rgba(63,134,221,.13));
  border: 1px solid var(--accent-line);
  box-shadow: 0 5px 14px -8px rgba(47,118,210,.55);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.script-switch[data-value="cyrl"] .thumb { transform: translateX(100%); }
.script-switch button {
  position: relative; z-index: 1;
  min-width: 70px; height: 28px; padding: 0 12px;
  border: 0; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 650; letter-spacing: .01em;
  color: var(--muted); transition: color .2s;
}
.script-switch button:hover { color: var(--text); }
.script-switch button[aria-checked="true"] { color: var(--accent-strong); }
.script-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: 8px; }

/* ---------- ish maydoni ---------- */
.work {
  height: calc(100% - var(--bar-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.pane { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane + .pane { border-left: 1px solid var(--line); }

.scroll {
  flex: 1; min-height: 0; overflow: auto;
  padding: 36px 0 90px;
  background:
    radial-gradient(1200px 500px at 50% -160px, var(--glow-a), transparent 60%),
    radial-gradient(900px 700px at 50% 40%, var(--glow-b), transparent 70%),
    var(--bg);
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.stage { position: relative; margin: 0 auto; }
.stage > .doc { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pane.view .doc { pointer-events: none; }

/* ---------- tahrir rejimi: maydonlar (sahifa doim oq) ---------- */
.is-edit .f[contenteditable] {
  outline: none;
  border-radius: .5mm;
  cursor: text;
  caret-color: #2f6bff;
  transition: background-color .15s, box-shadow .15s;
  box-shadow: inset 0 -0.25mm 0 rgba(47,107,255,0);
}
/* ixtiyoriy maydon — faqat tahrirda belgilanadi; bo'sh qolsa hujjatga tushmaydi */
.is-edit .b.opt > .lbl::after,
.is-edit .head .cell.opt > .lbl::after {
  content: " (ixtiyoriy)";
  font-weight: 400; font-style: italic; font-size: .86em; color: #8a94a6;
}

.is-edit .f[contenteditable]:hover { background: rgba(255, 205, 90, .18); }
.is-edit .f[contenteditable]:focus {
  background: rgba(47, 107, 255, .07);
  box-shadow: inset 0 -0.3mm 0 #2f6bff;
}
.is-edit .f[contenteditable]:empty::before {
  content: attr(data-hint);
  color: #a4a9b4; font-style: italic; font-weight: 400;
  pointer-events: none;
}
.is-edit .f.missing { background: rgba(255, 90, 70, .13); box-shadow: inset 0 -0.3mm 0 #e2483a; }
.is-edit .f.missing:empty::before { color: #d0564a; }
.is-edit .rel-head .f { cursor: default; }

/* rasm */
.is-edit .photo { cursor: pointer; }
.photo-hover {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(20, 30, 60, .55); color: #fff;
  font: 600 3mm/1.2 var(--ui); text-align: center;
  opacity: 0; transition: opacity .15s;
}
.is-edit .photo:hover .photo-hover, .is-edit .photo.drag .photo-hover { opacity: 1; }
.is-edit .photo.drag { outline: .6mm dashed #2f6bff; outline-offset: .8mm; }
.photo-x {
  position: absolute; top: 1mm; right: 1mm;
  width: 5.5mm; height: 5.5mm; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.65); color: #fff;
  font: 600 4mm/1 var(--ui); cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.is-edit .photo:hover .photo-x { opacity: 1; }
/* bo'sh ramka tahrirda — «Fotosurat yuklash» maydoni */
.is-edit .photo:not(.has) { background: var(--accent-soft); }
.photo-ph.edit {
  border: .4mm dashed var(--accent-line); border-radius: 1mm;
  gap: 1mm; color: var(--accent); font-family: var(--ui);
}
.photo-ph.edit .ph-ico { display: block; width: 7mm; height: 7mm; }
.photo-ph.edit .ph-ico svg { width: 100%; height: 100%; }
.photo-ph.edit .ph-t { font: 650 3.1mm/1.2 var(--ui); text-align: center; }
.photo-ph.edit .ph-s { font: 500 2.7mm/1 var(--ui); color: var(--muted); }
.is-edit .photo:not(.has):hover { background: rgba(63,134,221,.16); }

/* «Fotosurat qo'shish» menyusi (rasm yonida chiqadi) */
.pmenu {
  position: fixed; z-index: 50; width: 300px;
  display: grid; gap: 8px; padding: 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-4px); transition: opacity .14s, transform .14s;
}
.pmenu.in { opacity: 1; transform: none; }
.pm-h { font: 650 14.5px/1.2 var(--ui); color: var(--accent-strong); }
.pm-row {
  display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 11px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: var(--surface-2);
  transition: background .15s, border-color .15s;
}
.pm-row:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.pm-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.pm-ic svg { width: 19px; height: 19px; }
.pm-tx { display: grid; gap: 2px; min-width: 0; }
.pm-tx b { font: 650 13.5px/1.2 var(--ui); color: var(--heading); }
.pm-tx span { font-size: 12px; color: var(--muted); }
.pm-ch { color: var(--faint); }
.pm-ch svg { width: 16px; height: 16px; display: block; }
.pm-f { font-size: 11.5px; color: var(--faint); }

/* satr asboblari: qatorning TEPASIDA, chap burchakda — sahifaning bo'sh chap chetida.
   Maydondagi matn va kulrang namunani yopmaydi, oqimga ta'sir qilmaydi.
   Konteyner qator balandligigacha cho'zilgan shaffof «ko'prik»: sichqoncha qatordan
   tugmalarga o'tganda asboblar yo'qolib qolmaydi. */
.rowtools {
  position: absolute; z-index: 3;
  top: -6mm; bottom: 0;
  left: calc(-1 * var(--ml) - 12mm);
  width: calc(var(--ml) + 12mm);
  display: flex; flex-direction: row; align-items: flex-start; gap: .4mm;
  opacity: 0; pointer-events: none;
  transition: opacity .12s;
  font-family: var(--ui);
}
.b:hover > .rowtools, .b:focus-within > .rowtools { opacity: 1; pointer-events: auto; }
/* jadval sarlavhasidagi «⇅ tartib» — sarlavha yonida, vertikal markazda */
.rowtools.head-tools { top: 50%; bottom: auto; transform: translateY(-50%); }
.tb {
  flex: none;
  width: 5mm; height: 5mm;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 1.3mm;
  background: var(--tb-bg); color: var(--tb-fg);
  font: 600 3mm/1 var(--ui);
  cursor: pointer;
  box-shadow: 0 .5mm 1.5mm rgba(22,28,40,.18);
  transition: background .12s, color .12s;
}
.tb:hover { background: var(--tb-hover); }
.tb.danger:hover { background: var(--danger-bg); color: var(--danger-fg); }
.tb.word { width: auto; padding: 0 1mm; font-size: 2.5mm; letter-spacing: 0; }
.tb.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.tb.wide { width: auto; padding: 0 2.4mm; font-size: 3mm; background: var(--tbw-bg); color: var(--tbw-fg); }
.tb.wide:hover { background: var(--tbw-hover); }

/* ro'yxat oxiridagi doim ko'rinadigan «qo'shish» tugmasi (faqat tahrir panelida, oq sahifa ustida) */
.add-row {
  position: absolute; left: 0; top: calc(100% + 1.6mm); z-index: 1;
  display: inline-flex; align-items: center; gap: 1.8mm;
  height: 7mm; padding: 0 3.2mm 0 2.2mm;
  border: .3mm dashed rgba(47,107,255,.55); border-radius: 1.8mm;
  background: rgba(47,107,255,.06); color: #2c5bd0;
  font: 600 3.3mm/1 var(--ui); white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.add-row .plus {
  display: grid; place-items: center;
  width: 4.4mm; height: 4.4mm; border-radius: 50%;
  background: #2f6bff; color: #fff; font-size: 3.6mm; line-height: 1;
}
.add-row:hover { background: rgba(47,107,255,.12); border-style: solid; box-shadow: 0 1mm 3mm -1mm rgba(47,107,255,.35); }
.add-row:focus-visible { outline: .5mm solid #2f6bff; outline-offset: .6mm; }

/* ---------- maydon tagidagi yozish yordamchisi: namuna, Tab-taklif, tayyor so'zlar, qoida ---------- */
.assist {
  position: fixed; z-index: 50;
  display: grid; gap: 7px;
  min-width: 240px; max-width: 440px; padding: 9px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 12.5px; line-height: 1.4; color: var(--text);
  animation: pop .12s ease-out;
}
.assist .as-problem { color: var(--warn-text); font-weight: 600; }
.assist .as-go {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 9px; border-radius: 8px; cursor: pointer; text-align: left;
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--heading);
}
.assist .as-go:hover { background: rgba(232,184,106,.24); }
.assist .as-go .v { font-family: "Times New Roman", Times, serif; font-size: 14.5px; }
.assist kbd {
  flex: none; font: 650 10px/1 var(--ui); letter-spacing: .04em;
  padding: 3px 6px; border-radius: 5px;
  color: var(--accent); background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 1px 0 var(--line);
}
.assist .as-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.assist .as-chips button {
  border: 1px solid var(--line-2); background: var(--surface-2);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.assist .as-chips button:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.assist .as-ex { color: var(--muted); }
.assist .as-ex b { color: var(--text); font-weight: 600; }
.assist .as-tip { color: var(--faint); font-size: 11.5px; border-top: 1px solid var(--line); padding-top: 7px; }

/* ---------- xabarnoma ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 60;
  transform: translate(-50%, 20px); opacity: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px 11px 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: var(--shadow);
  width: max-content; max-width: calc(100vw - 32px);
  font-size: 13px; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button {
  flex: none;
  border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 12.5px;
}
.toast button:hover { background: rgba(232,184,106,.26); }

@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- tanishtiruv (Driver.js) — rasmiy uslub, ilova ranglarida ---------- */
.driver-popover.obk-driver {
  background: var(--surface); color: var(--text); border: 1px solid var(--accent-line); border-radius: 12px;
  box-shadow: 0 28px 70px -20px rgba(14,18,26,.5); font-family: var(--ui);
  max-width: 380px; padding: 16px 18px 14px;
}
.driver-popover.obk-driver .driver-popover-title {
  font: 600 18px/1.25 var(--serif); color: var(--heading);
  padding-bottom: 8px; border-bottom: 1px solid var(--accent-line);
}
.driver-popover.obk-driver .driver-popover-description { color: var(--text); font-size: 13px; line-height: 1.55; }
.driver-popover.obk-driver .driver-popover-progress-text { color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.driver-popover.obk-driver .obk-sec { margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
/* namuna — hujjatning o'zidagidek: qog'oz fon, Times New Roman */
.driver-popover.obk-driver .obk-ex {
  display: grid; gap: 3px; margin-top: 12px; padding: 8px 11px 9px;
  background: #f7fafe; color: #111; border: 1px solid rgba(63,134,221,.3); border-left: 3px solid #3f86dd; border-radius: 4px;
  font: 14.5px/1.35 "Times New Roman", Times, serif;
}
.driver-popover.obk-driver .obk-ex span { font: 700 9.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: #1b4f96; }
/* kirish qadami: shartlar ro'yxati va rozilik satri */
.driver-popover.obk-driver.obk-intro { max-width: 460px; }
/* kirish oynasida «orqaga» tugmasi kerak emas (bitta qadam) */
.driver-popover.obk-intro .driver-popover-prev-btn { display: none; }
.driver-popover.obk-driver .obk-terms { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.driver-popover.obk-driver .obk-terms li::marker { color: var(--accent); }
/* kirish oynasida taklif uchun aloqa qatori */
.driver-popover.obk-driver .obk-contact {
  margin-top: 10px; font-size: 12.5px; color: var(--muted);
}
.driver-popover.obk-driver .obk-contact a {
  color: var(--accent-strong); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
}
.driver-popover.obk-driver .obk-contact a:hover { border-bottom-color: currentColor; }

.driver-popover.obk-driver .obk-accept {
  margin-top: 12px; padding: 9px 11px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--heading); font-weight: 600; font-size: 12.5px;
}
.driver-popover.obk-driver .driver-popover-close-btn { color: var(--faint); }
.driver-popover.obk-driver .driver-popover-close-btn:hover { color: var(--text); }
.driver-popover.obk-driver .driver-popover-footer button {
  text-shadow: none; border: 1px solid var(--line-2); border-radius: 8px;
  background: none; color: var(--text); font: 600 12.5px/1 var(--ui); padding: 9px 12px;
  white-space: nowrap;
}
.driver-popover.obk-driver .driver-popover-footer button:hover { background: var(--hover); border-color: var(--line-2); color: var(--heading); }
.driver-popover.obk-driver .driver-popover-footer button:active { transform: translateY(1px); }
.driver-popover.obk-driver .driver-popover-footer .driver-popover-next-btn {
  border: 0; color: #fff; background: linear-gradient(180deg, #4b90e2, #2f76d2);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 18px -10px rgba(47,118,210,.85);
}
.driver-popover.obk-driver .driver-popover-footer .driver-popover-next-btn:hover {
  background: linear-gradient(180deg, #5b9ce9, #3a80db); color: #fff;
}
.driver-popover.obk-driver .driver-popover-footer button.driver-popover-btn-disabled,
.driver-popover.obk-driver .driver-popover-footer button:disabled { opacity: .45; pointer-events: none; }
.driver-popover.obk-driver .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--surface); }
.driver-popover.obk-driver .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--surface); }
.driver-popover.obk-driver .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--surface); }
.driver-popover.obk-driver .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--surface); }

/* ---------- moslashuvchan ---------- */
.switch { display: none; }
/* Yozuvli tugmalar faqat panel to'liq sig'adigan kenglikda; aks holda — ikonka (title — maslahat) */
@media (max-width: 1560px) {
  .btn.ghost .lbl { display: none; }
  .btn.ghost { padding: 0 9px; }
}
@media (max-width: 1180px) {
  .work { grid-template-columns: 1fr; }
  .work.show-view .pane.edit, .work:not(.show-view) .pane.view { display: none; }
  .pane + .pane { border-left: 0; }
  .switch { display: inline-flex; }
  .btn.switch .lbl { display: inline; }
  .progress { display: none; }
}
@media (max-width: 760px) {
  .wordmark, .btn .lbl-long, .vsep { display: none; }
  .bar { gap: 8px; padding: 0 10px; }
  .btn { padding: 0 10px; }
  .btn.switch .lbl { display: none; }
  .script-switch button { min-width: 0; padding: 0 9px; }
}