:root { --kartya: var(--pico-card-background-color); --halk: var(--pico-muted-color); --jo: #2e9e5b; --figy: #c9821b; }
  body { background: var(--pico-background-color); }
  main.container { max-width: 980px; padding: 1rem 16px 3rem; }
  h1 { font-size: 1.4rem; margin: .4rem 0 1rem; }
  .sorrend { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
  .sorrend button { width: auto; padding: .35rem .8rem; font-size: .9rem; }
  .sorrend button.ki { background: transparent; color: var(--pico-primary); }
  .szekciok { display: flex; flex-direction: column; gap: .2rem; }
  .szekciok.forditva { flex-direction: column-reverse; }
  fieldset { margin-bottom: .6rem; }
  fieldset legend { font-weight: 600; }
  .info { font-size: .85rem; color: var(--halk); margin: -.4rem 0 .4rem; min-height: 1.2em; }
  .jeloltek { max-height: 220px; overflow: auto; font-size: .85rem; border: 1px solid var(--pico-muted-border-color);
              border-radius: 6px; padding: .3rem .5rem; margin-bottom: .6rem; }
  .jeloltek label { display: flex; gap: .4rem; align-items: baseline; margin: .15rem 0; cursor: pointer; }
  .jeloltek input { margin: 0; }
  .cimke { font-size: .72rem; padding: 0 .35rem; border-radius: 4px; background: var(--jo); color: #fff; white-space: nowrap; }
  .cimke.nincs { background: var(--halk); }
  .chipek { display: flex; flex-wrap: wrap; gap: .3rem; margin: -.3rem 0 .6rem; }
  .chipek button { width: auto; padding: .15rem .55rem; font-size: .8rem; margin: 0; background: transparent;
                   color: var(--pico-primary); border: 1px solid var(--pico-primary); }
  #chat { display: none; }
  .uzenetek { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
  .u { max-width: 85%; padding: .55rem .8rem; border-radius: 10px; white-space: pre-wrap; line-height: 1.45; font-size: .95rem; }
  .u.vevo { align-self: flex-end; background: var(--pico-primary-background); color: var(--pico-primary-inverse); }
  .u.ugynok { align-self: flex-start; background: var(--kartya); border: 1px solid var(--pico-muted-border-color); }
  .u.rendszer { align-self: flex-start; background: transparent; border: 1px dashed var(--figy); color: var(--figy); }
  .u.urlap { align-self: flex-end; background: transparent; border: 1px solid var(--pico-primary); color: var(--pico-color);
             font-size: .85rem; }
  .meta { font-size: .72rem; color: var(--halk); margin-top: .3rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
  .meta button { width: auto; padding: .05rem .45rem; font-size: .75rem; margin: 0; background: transparent;
                 color: var(--pico-color); border: 1px solid var(--pico-muted-border-color); }
  .meta button.valasztott { border-color: var(--pico-primary); color: var(--pico-primary); font-weight: 600; }
  /* választógombok a kérdés alatt (11-11) — a legutolsó ügynök-üzenetnél, amíg a vevő nem válaszolt */
  .gombsor { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .55rem; }
  .gombsor button { width: auto; margin: 0; padding: .35rem .9rem; font-size: .9rem; border-radius: 999px;
                    background: transparent; color: var(--pico-primary); border: 1px solid var(--pico-primary); }
  .gombsor button:hover { background: var(--pico-primary); color: var(--pico-primary-inverse); }
  .gombsor button:disabled { opacity: .5; }
  #talalatok details.elozo > summary { cursor: pointer; }
  /* OE-eredmény kártya (11-11, csak teszt mód): gyári szám + gombra a gyári ábra és a szerelési útmutató */
  #oe { display: none; border: 1px solid var(--pico-muted-border-color); border-left: 3px solid var(--pico-primary);
        border-radius: 8px; padding: .7rem .9rem; margin: 0 0 1rem; background: var(--kartya); font-size: .92rem; }
  #oe .szam { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 1.05rem; }
  #oe .halk { color: var(--halk); font-size: .82rem; }
  #oe .gombsor button.be { background: var(--pico-primary); color: var(--pico-primary-inverse); }
  #oe .abra { margin-top: .7rem; overflow: auto; max-height: 80vh; border: 1px solid var(--pico-muted-border-color);
              border-radius: 6px; background: #fff; }
  #oe .abra img { display: block; max-width: none; width: 100%; cursor: zoom-in; }
  #oe .abra img.nagy { width: 220%; cursor: zoom-out; }
  #oe .utm { margin-top: .7rem; }
  #oe .utm .sorbe { display: flex; gap: .5rem; } #oe .utm .sorbe input { margin: 0; } #oe .utm .sorbe button { width: auto; margin: 0; }
  #oe .utm h6 { margin: .7rem 0 .2rem; font-size: .8rem; color: var(--halk); text-transform: uppercase; letter-spacing: .04em; }
  #oe .utm a.cikk { display: block; padding: .2rem 0; font-size: .88rem; cursor: pointer; }
  #oe .utm .leiras { white-space: pre-wrap; font-size: .88rem; line-height: 1.5; border-top: 1px dashed var(--pico-muted-border-color);
                     margin-top: .6rem; padding-top: .6rem; }
  #oe .utm .leiras img { max-width: 100%; display: block; margin: .5rem 0; background: #fff; border-radius: 4px; }
  .gepel { font-size: .85rem; color: var(--halk); font-style: italic; }
  .kuld { display: flex; gap: .5rem; }
  .kuld input { margin: 0; }
  .kuld button { width: auto; margin: 0; }
  .hiba { color: #d9534f; font-size: .85rem; }
  .u.mely { background: var(--kartya, transparent); border-left: 3px solid var(--figy); font-size: .9em; white-space: pre-wrap; }
  .szunet { border: 1px solid var(--figy); border-left-width: 4px; border-radius: 6px; padding: .6rem .8rem;
            margin: 0 0 1rem; font-size: .9rem; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
  .szunet .szoveg { flex: 1 1 18rem; }
  .szunet .ido { color: var(--halk); font-size: .8rem; display: block; margin-top: .2rem; }
  .szunet button { width: auto; margin: 0; padding: .35rem .9rem; font-size: .9rem; }
  .eszkoztar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: -.4rem 0 1rem; font-size: .85rem; }
  .eszkoztar button { width: auto; padding: .25rem .7rem; font-size: .85rem; margin: 0; }
  .eszkoztar label { display: flex; gap: .35rem; align-items: center; margin: 0; cursor: pointer; }
  .eszkoztar input[type=checkbox] { margin: 0; }
  #beallitas { display: none; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1rem; }
  #beallitas textarea { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; min-height: 340px; }
  #beallitas .sor { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; }
  #beallitas table { font-size: .78rem; }
  .reszlet { margin-top: .4rem; font-size: .78rem; border-top: 1px dashed var(--pico-muted-border-color); padding-top: .4rem;
             white-space: normal; }
  .reszlet pre { font-size: .72rem; max-height: 320px; overflow: auto; white-space: pre-wrap; margin: .2rem 0 .4rem; padding: .4rem; }
  .reszlet .lep { margin: .25rem 0; }
  .reszlet .gond { font-style: italic; color: var(--halk); white-space: pre-wrap; }
  .reszlet details summary { font-size: .75rem; }
  .reszlet .eszk { font-family: ui-monospace, Menlo, monospace; color: var(--pico-primary); }
  #allapotpanel { display: none; margin-bottom: 1rem; font-size: .8rem; }
  #allapotpanel table { font-size: .74rem; }
  #allapotpanel td, #allapotpanel th { padding: .2rem .35rem; vertical-align: top; }
  .rejt { opacity: .55; text-decoration: line-through; }
  #talalatok { display: none; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: .7rem .9rem;
               margin-bottom: 1rem; }
  #talalatok .fej { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
  #talalatok select { width: auto; margin: 0; padding: .2rem 2rem .2rem .5rem; font-size: .85rem; }
  #talalatok table { font-size: .85rem; margin: 0; }
  #talalatok td, #talalatok th { padding: .3rem .4rem; }
  .el-sajat { color: var(--jo); font-weight: 600; }
  .halk { color: var(--halk); font-size: .78rem; }
  .modok { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .5rem; }
  .modok button { width: auto; padding: .2rem .65rem; font-size: .82rem; margin: 0; background: transparent;
                  color: var(--pico-primary); border: 1px solid var(--pico-primary); }
  .modok button.be { background: var(--pico-primary); color: var(--pico-primary-inverse); }
  .sorbe { display: flex; gap: .4rem; align-items: center; }
  .sorbe input, .sorbe select { margin: 0; }
  .mik { width: auto; padding: .3rem .55rem; margin: 0; background: transparent; border: 1px solid var(--pico-muted-border-color);
         color: var(--pico-color); }
  .mik.felvesz { border-color: #d9534f; color: #d9534f; }
  .szurok { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .5rem 0; font-size: .8rem; align-items: baseline; }
  .szurok .csop { display: flex; flex-wrap: wrap; gap: .25rem; align-items: baseline; }
  .szurok button { width: auto; padding: .05rem .45rem; font-size: .75rem; margin: 0; background: transparent;
                   color: var(--pico-color); border: 1px solid var(--pico-muted-border-color); }
  .szurok button.be { border-color: var(--pico-primary); color: var(--pico-primary); font-weight: 600; }
  .szurok input { width: 6.5rem; padding: .1rem .4rem; height: auto; margin: 0; font-size: .8rem; }
  .fmezok { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .2rem .8rem; font-size: .8rem;
            margin: .4rem 0; }
  .fmezok .bizt { color: var(--figy); }
  .belso { display: none; }
  body.atlatszo .belso { display: table-cell; }
  @media (max-width: 600px) { .u { max-width: 100%; } }

  /* a beágyazott stílusok helyett (a VPS-kiadás tartalom-házirendje a `style` attribútumot is tiltja) */
  .alcim { color: var(--halk); font-weight: 400; }
  .szin-halk { color: var(--halk); } .szin-figy { color: var(--figy); }
  .szoros { margin: 0 0 .6rem; } .gombok { display: flex; gap: .5rem; flex-wrap: wrap; } .keskeny { width: auto; }
  .chipek.fent { margin-top: .4rem; } .chipek.fent5 { margin-top: .5rem; } .fent1 { margin-top: 1rem; }
  #oe a.szam.vekony { font-weight: 400; } .nullmargo { margin: 0; } tr.fakult { opacity: .5; }
  pre.nyers { white-space: pre-wrap; font-size: .75rem; }
  body.tavoli .mik, body.tavoli .csak-helyben { display: none; }
  body.belsos .eszkoztar, body.belsos #korabbiak { display: none; }