/*
 * TULAJDONOSI FELÜLET · 2/3 — LICENC, CSOMAGOK, KIJELZŐK
 *
 * Az árlap kártyái, a megtérülés-számoló, a kijelzőkeret és a menüsorok.
 *
 * A BETÖLTÉSI SORREND KÖTÖTT: ezek a fájlok EGY kaszkádot alkotnak —
 * ugyanazt, ami korábban egyetlen fájl volt. A darabolás BAJTRA folytonos
 * volt, tehát egyetlen szabály sem mozdult el a kaszkádban; de csak addig,
 * amíg a sorrend ez marad:
 *
 *   tulaj.css  ->  tulaj-licenc.css  ->  tulaj-listak.css
 *
 * A sorrendet a `lib/header.php` `$cssLapok` tömbje rögzíti.
 */
/* ── Közlemény-szerkesztő (Hely oldal) ────────────────────────────────── */

.qb-noticeedit {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.qb-noticeedit__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 12px;
}

.qb-noticeedit__del {
  margin-left: auto;
}

.qb-noticeedit__translations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.qb-noticeedit__translation {
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.qb-noticeedit__translation h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: .92rem;
}

.qb-noticeedit__translation .qb-field + .qb-field {
  margin-top: 10px;
}

@media (max-width: 720px) {
  .qb-noticeedit__translations {
    grid-template-columns: 1fr;
  }
}

/*
 * A SZÉLES LAP TÉNYLEG KITÖLTI A HELYET.
 *
 * A `body` flex-konténer, és a `.qb-page` `margin: 0 auto`-val áll benne —
 * ettől a szélessége a TARTALOMHOZ igazodott, nem a képernyőhöz. Amíg a
 * tartalom széles (táblázat, rács), ez nem látszott; egy hasábokra bomló
 * listánál viszont tyúk-tojás probléma lett belőle: a hasábszám a
 * szélességtől függ, a szélesség meg a tartalomtól — a böngésző egy hasábot
 * adott, és a lap fele üresen maradt.
 */
.qb-page--wide {
  width: 100%;
  max-width: var(--page-wide);
}

/*
 * MIÉRT NEM LÁTJA A VENDÉG. A két jogszabályi közlemény kikapcsolva és üres
 * összeggel jön létre — helyesen: egy díj, amiről a hely nem döntött, nem
 * kerülhet ki magától. Eddig viszont semmi nem MONDTA meg ezt, és a
 * tulajdonos hiába kereste, miért nem jelenik meg semmi a vendég lapján.
 */
.qb-noticeedit__baj {
  margin: 0 0 10px;
  padding: 8px 12px;
  background: var(--amber-soft);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ── Licenc ────────────────────────────────────────────────────────────── */

.qb-licenc {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 16px;
  padding: 20px;
  background: var(--tint-mint);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--mint);
  border-radius: var(--radius);
}

.qb-licenc.is-fogy {
  background: var(--tint-amber);
  border-left-color: var(--amber);
}

.qb-licenc.is-lejart {
  background: var(--tint-plum);
  border-left-color: var(--plum);
}

.qb-licenc__fo {
  flex: 1 1 280px;
  min-width: 0;
}

.qb-licenc__csomag {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.qb-licenc__meddig {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.qb-licenc__mit {
  margin: 10px 0 0;
  max-width: 52ch;
  color: var(--ash);
  font-size: 0.9rem;
}

.qb-licenc__azon {
  flex: 0 1 260px;
}

/*
 * A KÓD ÉS A MÁSOLÓ GOMB egy sorban, a gomb a kód MELLETT — nem alatta.
 * Alatta külön műveletnek látszana; mellette egyértelmű, hogy mire
 * vonatkozik.
 */
.qb-licenc__kodsor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
}

.qb-licenc__kod {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/*
 * A MÁSOLÓ GOMB. Két ikon lakik benne — a másolás jele és a visszajelző
 * pipa —, és mindig PONTOSAN EGY látszik: a láthatóságot a `masol.js`
 * kapcsolja a projekt `.is-hidden` osztályával.
 *
 * Az első változat a gomb `is-masolva` osztályára épített, leszármazott
 * szelektorral. Elegánsabb volt, de MÉRHETETLENÜL viselkedett: a szabály
 * illeszkedett, mégsem érvényesült. Egy visszajelzés, ami néha elmarad,
 * rosszabb, mint amelyik egyszerűbb eszközzel, de mindig működik.
 */
.qb-licenc__masol {
  flex: 0 0 auto;
}

.qb-licenc__pipa {
  color: var(--mint);
}

.qb-kijelzo-keret { margin-top: 18px; }
.qb-kijelzo-keret__head,
.qb-kijelzo-keret__sor { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.qb-kijelzo-keret__szam { color: var(--brand); font-size: 1.55rem; }
.qb-kijelzo-keret__sav { display: block; width: 100%; height: 10px; margin: 14px 0; overflow: hidden; appearance: none; background: var(--paper); border: 0; border-radius: 5px; }
.qb-kijelzo-keret__sav::-webkit-progress-bar { background: var(--paper); border-radius: 5px; }
.qb-kijelzo-keret__sav::-webkit-progress-value { background: var(--brand); border-radius: 5px; }
.qb-kijelzo-keret__sav::-moz-progress-bar { background: var(--brand); border-radius: 5px; }
.qb-kijelzo-keret__lista { display: grid; gap: 8px; margin-top: 14px; }
.qb-kijelzo-keret__sor { padding: 10px 0; border-top: 1px solid var(--hairline); }
.qb-kijelzo-keret__sor span:first-child { display: grid; gap: 2px; }
.qb-kijelzo-keret__sor small { color: var(--ash); }
.qb-kijelzo-keret__sor.is-inaktiv { opacity: .55; }

@media (max-width: 560px) {
  .qb-kijelzo-keret__head,
  .qb-kijelzo-keret__sor {
    align-items: flex-start;
    flex-direction: column;
  }

  .qb-kijelzo-keret__sor form,
  .qb-kijelzo-keret__sor .qb-btn {
    width: 100%;
  }
}

/*
 * KULCSBEVÁLTÓ PANEL.
 *
 * A közös `.qb-form` szándékosan keskeny (420px), mert az admin többi
 * űrlapja rövid mezőkből áll. A licenckulcs viszont hosszú aláírt szöveg:
 * ott a keskeny doboz nem segít, hanem elrejti, hogy egyben van-e.
 */
.qb-bevalt {
  margin-top: 30px;
  padding: 24px 26px 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--lift);
}

.qb-bevalt__lead {
  max-width: 62ch;
  margin: 8px 0 0;
  color: var(--ash);
  line-height: 1.6;
}

.qb-bevalt__mezo {
  display: block;
  margin-top: 22px;
}

/*
 * A MEZŐ A KULCS ALAKJÁT VESZI FEL: teljes szélesség, írógépbetű, ritkítva.
 * Így egy pillantásból látszik, hogy nem tört szét és nem maradt le a vége.
 */
.qb-bevalt__mezo textarea {
  width: 100%;
  min-height: 104px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  resize: vertical;
}

.qb-bevalt__gomb {
  margin-top: 20px;
}

/*
 * MEGTÉRÜLÉS — lépésenként egy hasáb.
 *
 * A felső margó nem dísz: a doboz korábban nekitapadt a csomagkártyák
 * aljának, és úgy nézett ki, mintha a harmadik kártya folytatása volna.
 */
.qb-megterules {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
}

.qb-megterules .qb-megterules__cim {
  margin: 0;
  font-size: 1.1rem;
}

.qb-megterules__lepesek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.qb-megterules__lepes {
  padding: 20px 22px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}

.qb-megterules__ut {
  margin: 0;
  color: var(--ash);
  font-size: 0.85rem;
  font-weight: 600;
}

.qb-megterules__nyil {
  margin: 0 4px;
}

/* A NAP a hasáb horgonya: ezt az egy számot viszi magával az ember. */
.qb-megterules__nap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--brand);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.qb-megterules__mertek {
  color: var(--ash);
  font-size: 0.95rem;
  font-weight: 600;
}

.qb-megterules__mibol {
  margin: 14px 0 0;
  color: var(--ash);
  font-size: 0.9rem;
  line-height: 1.65;
}

/*
 * TÖRLÉS-MEGERŐSÍTŐ DOBOZ.
 *
 * Szerveroldali kérdés, nem `confirm()`: a szigorú CSP miatt sorközi szkript
 * nincs, és így akkor is működik, ha a JavaScript nem fut le. A piros csík
 * bal oldalt azért van, mert a doboz a lista SORAI KÖZÖTT jelenik meg — ott
 * a szem másképp nem venné észre, hogy ez most más, mint a többi sor.
 */
.qb-torlesdoboz {
  margin: 10px 0 4px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--plum);
  border-radius: var(--radius);
  background: var(--surface);
}

.qb-torlesdoboz__cim {
  margin: 0;
  font-size: 0.95rem;
}

.qb-torlesdoboz__mit {
  margin: 8px 0 0;
  color: var(--ash);
  font-size: 0.85rem;
  line-height: 1.6;
}

.qb-torlesdoboz__gombok {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

/* A KORLÁT MEZŐJE az Állomások lapon: két számjegy, nem több. */
.qb-kapacitas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qb-kapacitas__cimke {
  color: var(--ash);
  font-size: 0.8rem;
}

.qb-kapacitas__mezo {
  width: 62px;
  text-align: center;
}

/*
 * CSOMAGKÁRTYÁK.
 *
 * Ez a lap EGYETLEN döntést kér, és a döntés három kártya összevetéséből
 * születik. Amit ezért kerülünk: a sorvégi pontsorokat és a tucatnyi tömör
 * pipát — egy tizenkét soros listán abból számlakivonat lesz, és a szem
 * inkább átugorja. Ami helyettük tartja a szerkezetet: azonos magasságú
 * kártyák, egy vékony akcentuscsík a fejléc alatt, és bőven levegő a sorok
 * között.
 */
.qb-csomagok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 30px;
  align-items: stretch;
}

.qb-csomag {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 24px 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--lift);
}

/*
 * A FEJLÉC ALATTI AKCENTUSCSÍK a kártya aláírása: rövid, vastag vonal a
 * pezsgő színben. Egyetlen elem, ami minden kártyán ugyanott van — ettől
 * lesz a három kártya egy CSALÁD, nem három doboz egymás mellett.
 */
.qb-csomag__nev {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.qb-csomag__nev::after {
  content: "";
  flex: 0 0 100%;
  height: 3px;
  margin-top: 10px;
  border-radius: var(--radius-pill);
  background: var(--brand);
}

.qb-csomag__mondat {
  margin: 0 0 20px;
  color: var(--ash);
  font-size: 0.875rem;
  line-height: 1.45;
}

.qb-csomag__ar {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
}

.qb-csomag__ar span {
  color: var(--ash);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
}

/*
 * AZ ÉVES DÍJ SAJÁT DOBOZBAN, halvány pezsgő alapon. Loose szürke sorként
 * elveszett a lapon; így a kártyának két olvasható horgonya lesz — a havi
 * ár és a megtakarítás —, és a szem magától összeveti a hármat.
 */
.qb-csomag__ev,
.qb-csomag__regi {
  margin: 14px 0 0;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.qb-csomag__ev strong,
.qb-csomag__regi strong {
  display: block;
  font-variant-numeric: tabular-nums;
}

.qb-csomag__ev span,
.qb-csomag__regi span {
  display: block;
  margin-top: 2px;
  color: var(--ash);
}

.qb-csomag__regi s {
  color: var(--ash);
}

/*
 * A LISTA NŐ, a fejléc nem: így a kártyák alja egy vonalban áll, akármennyi
 * pont van bennük. Enélkül a rövidebb kártya „félkésznek" látszik.
 */
.qb-csomag__lista {
  flex: 1 1 auto;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
}

/* „Az előzőn felül” a lista FÖLÖTT, nem a név mellett címkeként. */
.qb-csomag__folott {
  margin: 22px 0 -8px;
  color: var(--ash);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
 * A PIPA VÉKONY VONALRAJZ, nem tömör folt. Tizenkét tömör négyzet a szemnek
 * tizenkét kopogás; egy halk pipa ugyanazt mondja, és a SZÖVEG marad a
 * hangsúlyos — azt jött elolvasni.
 */
.qb-csomag__lista li {
  position: relative;
  margin: 0 0 11px;
  padding-left: 26px;
  font-size: 0.875rem;
  line-height: 1.45;
}

.qb-csomag__lista li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

/* ── A kiemelt (középső) kártya ────────────────────────────────────────── */

/*
 * Feljebb ül és sötét: a magasságkülönbség hamarabb szól, mint a szín.
 * Sötét lapon a tinta nem fehér, hanem világos szürke — ugyanaz a szabály,
 * mint a konyhai kijelzőn: a tiszta fehér éjszaka bántja a szemet.
 */
.qb-csomag.is-kiemelt {
  margin-top: -12px;
  padding-top: 36px;
  border-color: var(--ink);
  background: var(--ink);
  color: #efece5;
  box-shadow: var(--lift-strong);
}

.qb-csomag.is-kiemelt .qb-csomag__mondat,
.qb-csomag.is-kiemelt .qb-csomag__folott {
  color: rgba(239, 236, 229, 0.66);
}

.qb-csomag.is-kiemelt .qb-csomag__lista {
  border-top-color: rgba(239, 236, 229, 0.2);
}

.qb-csomag.is-kiemelt .qb-csomag__ev,
.qb-csomag.is-kiemelt .qb-csomag__regi {
  background: rgba(239, 236, 229, 0.09);
  color: #efece5;
}

.qb-csomag.is-kiemelt .qb-csomag__ev span,
.qb-csomag.is-kiemelt .qb-csomag__regi s,
.qb-csomag.is-kiemelt .qb-csomag__ar span {
  color: rgba(239, 236, 229, 0.62);
}

/*
 * A CÍMKE HÁTTERE IS ÁTÁLL. Korábban csak a szövegszíne — világos szöveg
 * maradt világos alapon, azaz olvashatatlanul. Sötét kártyán a címke
 * áttetsző, nem papírszínű.
 */
.qb-csomag.is-kiemelt .qb-tag {
  background: rgba(239, 236, 229, 0.12);
  border-color: rgba(239, 236, 229, 0.28);
  color: #efece5;
}

/* ── „Ez a tiéd” ───────────────────────────────────────────────────────── */

.qb-csomag.is-enyem {
  border-color: var(--mint);
  background: var(--tint-mint);
}

.qb-csomag.is-enyem .qb-csomag__nev::after {
  background: var(--mint);
}

.qb-csomag.is-enyem .qb-csomag__lista li::before {
  border-color: var(--mint);
}

.qb-csomag.is-kiemelt.is-enyem {
  border-color: var(--mint);
  background: var(--ink);
}

/* A szalag a kártya tetején, középen — nem a sarkából lóg ki. */
.qb-csomag__szalag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 5px 15px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fffdf8;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/*
 * HAVI / ÉVES VÁLTÓ. A komponens korábban is itt volt, de senki nem
 * használta — a licenc-lap éves nézetével kapott gazdát. A kedvezmény a
 * gombon BELÜL ül („Éves −17%"), mert külön sorban a szem nem kötné össze
 * a kettőt.
 */
.qb-arvalto {
  display: inline-flex;
  gap: 4px;
  margin: 16px 0 20px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.qb-arvalto__gomb {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.qb-arvalto__gomb.is-aktiv {
  background: var(--ink);
  color: var(--surface);
}

.qb-arvalto__gomb span {
  color: var(--brand);
  font-weight: 700;
}

.qb-arvalto__gomb.is-aktiv span {
  color: #d6a45f;
}

/* ── Napi oszlopsor (gyorsnézet) ───────────────────────────────────────── */

.qb-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.qb-chartbox {
  margin: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--lift);
}

.qb-chartbox__title {
  margin-bottom: 12px;
  color: var(--ash);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ── Belépés ───────────────────────────────────────────────────────────── */

.qb-login {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: clamp(56px, 11vh, 96px) 24px;
}

.qb-help {
  margin-top: 20px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.qb-help summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ── Munkatárs-tábla ───────────────────────────────────────────────────── */

.qb-tablewrap {
  margin-top: 24px;
  padding: 4px 20px 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.qb-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.qb-inlineform {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 12px;
}

.qb-inlineform .qb-field--narrow {
  flex: 0 0 120px;
}

/* ── Étlapkezelő ───────────────────────────────────────────────────────── */

/*
 * A KATEGÓRIA-SZAKASZ IS KÁRTYA — ugyanaz, mint a termék-, a hely-, az
 * összetevő- és a statisztika-lapon.
 *
 * Eddig hajszálvonallal elválasztott sávok voltak: az étlap egy végtelen
 * folyamnak látszott, és semmi nem mutatta, hol ér véget egy kategória.
 * Húsz kategóriánál ez húsz elmosódó határ.
 *
 * A doboz-szabályt ugyanaz a szabály adja, mint a `.qb-csoport`-ét — egy
 * hely, egy kinézet: két másolatból előbb-utóbb kétféle kártya lenne.
 */
.qb-menusec {
  margin-top: 16px;
  padding: 16px 18px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(27, 25, 21, 0.04);
}

.qb-menusec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}

.qb-menusec__count {
  color: var(--ash);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
}

.qb-menusec__count.is-shared {
  color: var(--sky);
}

.qb-menusec__tools,
.qb-menurow__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.qb-menurow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.qb-menurow.is-soldout .qb-menurow__name,
.qb-menurow.is-soldout .qb-menurow__meta {
  color: var(--ash);
}

.qb-menurow__main {
  flex: 1 1 240px;
  min-width: 0;
}

.qb-menurow__name {
  margin: 0;
  font-weight: 600;
}

.qb-menurow__meta {
  margin: 2px 0 0;
  color: var(--ash);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.qb-rename {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: auto;
}

.qb-rename input[type="text"] {
  width: auto;
  min-width: 180px;
  margin-top: 0;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.qb-rename input[type="number"] {
  width: 72px;
  margin-top: 0;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.qb-rename select {
  margin-top: 0;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.qb-form {
  max-width: 420px;
  margin-top: 24px;
}

.qb-form select,
.qb-form textarea {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.qb-notice--ok {
  background: var(--mint-soft);
  border: 1px solid var(--mint);
  border-radius: var(--radius);
}

.qb-langfield {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.qb-langfield input {
  min-width: 0;
}