@import url('fonts.css');

/* CrockyHost - Apeluri
 * ==========================================================================
 * Ideea: e dimineata, esti la birou cu telefonul in mana. Camera e in umbra,
 * iar singurul lucru luminat pe masa e FOAIA de pe care citesti. De aceea
 * textul pe care il spui la telefon sta pe hartie alba, si tot restul sta in
 * intuneric. Nu te poti rataci: ce straluceste, aia spui.
 *
 * Trei litere, fiecare cu rostul ei:
 *   Plex Serif - ce se citeste cu voce tare (foaia, intrebarea)
 *   Plex Mono  - ce se citeste cifra cu cifra (telefon, ceas, preturi)
 *   Plex Sans  - restul
 * ========================================================================== */

:root {
  --ink:    #100c0b;   /* camera */
  --desk:   #171210;   /* panou */
  --desk-2: #1f1815;   /* panou ridicat */
  --sunk:   #0b0808;   /* casete infundate */
  --rule:   #2b2320;
  --rule-2: #3a302a;

  --flare:     #efa355;   /* lumina lampii */
  --flare-hi:  #ffbd77;
  --flare-dim: #6d4a26;
  --flare-bg:  #2a1c0f;

  --paper:      #f5efe4;  /* foaia luminata */
  --paper-edge: #d9cdb8;
  --paper-ink:  #191310;
  --paper-mute: #6f6152;

  --txt:   #ece3d7;
  --dim:   #b2a493;
  --faint: #877a6c;

  --ok: #8cc46f;   --ok-bg: #182611;   --ok-ln: #3d6130;
  --info: #78bcd9; --info-bg: #10242c; --info-ln: #2e5a6c;
  --warn: #efc05a; --warn-bg: #2b2210; --warn-ln: #6a5320;
  --bad: #e58275;  --bad-bg: #2c1412;  --bad-ln: #6b322b;
  --neu: #a99b8c;  --neu-bg: #1e1917;  --neu-ln: #3a312b;
  --vio: #c0a3dd;  --vio-bg: #221a2c;  --vio-ln: #4e3a63;

  --r-s: 5px; --r-m: 9px; --r-l: 13px;
  --f-sans: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-serif: 'IBM Plex Serif', Georgia, serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
body { font: 400 14.5px/1.6 var(--f-sans); color: var(--txt); background: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--flare); }
:focus-visible { outline: 2px solid var(--flare); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.wrap { max-width: 1120px; margin: 0 auto; padding: 18px 18px 60px; }
.hidden { display: none !important; }
.mini { font-size: 12px; color: var(--faint); }

/* eticheta de pas: numar, instructiune, semn de intrebare */
.lbl { display: flex; gap: 10px; align-items: center; margin-bottom: 9px; font-size: 13px; color: var(--dim); }
.lbl .n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--flare-bg); border: 1px solid var(--flare-dim); color: var(--flare);
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; }
.lbl .tx { font-weight: 600; color: var(--txt); }
.lbl .tip { font-weight: 400; color: var(--faint); font-size: 12.5px; }

/* semnul de intrebare */
.hlp { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--rule-2);
  background: var(--sunk); color: var(--faint); font: 600 12px var(--f-sans); cursor: pointer; padding: 0;
  display: grid; place-items: center; transition: all .12s; }
.hlp:hover, .hlp.on { background: var(--flare-bg); border-color: var(--flare-dim); color: var(--flare); }
.hbox { display: none; margin: 0 0 12px; background: var(--info-bg); border: 1px solid var(--info-ln);
  border-left: 3px solid var(--info); border-radius: var(--r-m); padding: 13px 16px; font-size: 13.5px;
  line-height: 1.6; color: #d3ebf4; }
.hbox.on { display: block; animation: fade .16s ease; }
.hbox b { color: #fff; }
.hbox ul { margin: 7px 0 0 18px; }
.hbox li { margin-bottom: 4px; }

/* bara de sus cand nu e net: nu se poate rata, si spune ce se intampla cu munca */
/* Amandoua barile de sus stau intr-un singur container lipicios: doua elemente
   sticky la top:0 se suprapun cand derulezi, si atunci una o acopera pe alta. */
.bare { position: sticky; top: 0; z-index: 500; }
.bare:empty { display: none; }
.offbar { display: none; }
.offbar.on { display: block; margin: 0 0 12px;
  background: var(--bad-bg); border: 1px solid var(--bad-ln); border-left: 3px solid var(--bad);
  border-radius: var(--r-m); padding: 12px 15px; font-size: 13.5px; color: #f3cdc6; }
.offbar b { color: #fff; }
.offbar .btn { margin-left: 10px; }

/* ============================== antet ============================== */

header { margin-bottom: 14px; }
.htop { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
h1 { font-size: 15px; font-weight: 600; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
h1 span { color: var(--flare); }
h1::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--flare); box-shadow: 0 0 14px var(--flare); }

.who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); }
.who .u { display: flex; align-items: center; gap: 6px; }
.who .u.me { color: var(--txt); font-weight: 600; }
.who .u small { color: var(--faint); font-weight: 400; }
.pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(140,196,111,.16); }

.sync { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neu-ln); flex: 0 0 auto; }
.dot.on { background: var(--ok); }
.dot.busy { background: var(--warn); animation: pulse 1s infinite; }
.dot.err { background: var(--bad); }
@keyframes pulse { 50% { opacity: .3; } }

.stats { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin: 14px 0 7px; }
.stat { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.stat b { font-family: var(--f-mono); font-size: 17px; font-weight: 600; color: var(--txt); letter-spacing: -.02em; }
.stat.hi b { color: var(--flare); }
.stat.big b { font-size: 25px; }
.pbar { height: 3px; background: var(--sunk); border-radius: 2px; overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--flare-dim), var(--flare)); transition: width .4s ease; }

/* ============================== taburi ============================== */

.tabs { display: flex; gap: 2px; margin: 16px 0; border-bottom: 1px solid var(--rule); }
.tab { padding: 10px 15px 11px; background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--faint); font: 600 13.5px/1 var(--f-sans); cursor: pointer; white-space: nowrap; transition: color .12s; }
.tab:hover { color: var(--txt); }
.tab.on { color: var(--flare); border-bottom-color: var(--flare); }
.panel { display: none; }
.panel.on { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } }

/* ============================== butoane ============================== */

.btn { padding: 10px 16px; border: 1px solid var(--rule-2); border-radius: var(--r-m); background: var(--desk-2);
  color: var(--txt); font: 600 13.5px/1.2 var(--f-sans); cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; transition: background .12s, border-color .12s, transform .06s; }
.btn:hover { background: #29211c; border-color: var(--flare-dim); }
.btn:active { transform: translateY(1px); }
.btn.p { background: var(--flare); border-color: var(--flare); color: #241505; }
.btn.p:hover { background: var(--flare-hi); border-color: var(--flare-hi); }
.btn:disabled { opacity: .35; cursor: default; }
.btn:disabled:hover { background: var(--desk-2); border-color: var(--rule-2); }
.btn.sm { padding: 7px 12px; font-size: 12.5px; font-weight: 500; }
.btn.ok { background: var(--ok-bg); border-color: var(--ok-ln); color: var(--ok); }

/* ============================== apelul ============================== */

.nav { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.nav .pos { font-family: var(--f-mono); font-size: 12.5px; color: var(--faint); margin-left: auto; }

.big { background: var(--desk); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: hidden; }
.bh { padding: 20px 24px 18px; border-bottom: 1px solid var(--rule); display: flex; gap: 22px;
  justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
  background: linear-gradient(180deg, #1b1512, var(--desk)); }
.bh h2 { font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.bh .sub { color: var(--faint); font-size: 12.5px; margin-top: 5px; }
.bh .seg { display: inline-block; margin-top: 10px; margin-right: 6px; padding: 3px 10px; background: var(--sunk);
  border: 1px solid var(--rule-2); border-radius: 999px; font-size: 11.5px; color: var(--dim); }
.bb { padding: 20px 24px 22px; }

.phone { flex: 0 0 auto; text-align: right; }
.phone .pl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.phone a { display: block; font-family: var(--f-mono); font-size: 24px; font-weight: 600; letter-spacing: -.02em;
  color: #241505; background: var(--flare); border: 1px solid var(--flare); padding: 12px 20px;
  border-radius: var(--r-m); text-decoration: none; box-shadow: 0 10px 28px -14px var(--flare); }
.phone a:hover { background: var(--flare-hi); }
.phone.locked a { background: var(--sunk); color: var(--faint); border-color: var(--rule-2); box-shadow: none;
  text-decoration: line-through; pointer-events: none; }

.timer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.timer .t { font-family: var(--f-mono); font-size: 21px; font-weight: 600; color: var(--flare);
  font-variant-numeric: tabular-nums; min-width: 62px; }
.timer.live .t { animation: tick 1s steps(2) infinite; }
@keyframes tick { 50% { opacity: .45; } }

/* ---- foaia luminata: ce citesti cu voce tare ---- */
.say { background: var(--paper); color: var(--paper-ink); border: 1px solid var(--paper-edge);
  border-radius: var(--r-m); padding: 20px 22px; font-family: var(--f-serif); font-size: 20.5px; line-height: 1.58;
  box-shadow: 0 22px 48px -20px #000, 0 0 70px -26px rgba(239,163,85,.42); }
.say::selection { background: #ffd9a0; }

.blk { margin-top: 24px; }
.pkbox { background: var(--flare-bg); border: 1px solid var(--flare-dim); border-radius: var(--r-m); padding: 12px 15px; }
.pkn { color: var(--flare); font-weight: 600; font-size: 14.5px; }
.ofnb { margin-top: 10px; background: var(--warn-bg); border: 1px solid var(--warn-ln); border-radius: var(--r-m);
  padding: 11px 14px; font-size: 13px; color: #f0dcae; }

.oflist { display: flex; flex-direction: column; gap: 7px; }
.ofi { background: var(--sunk); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 13px 16px; }
.ofi.js-of { cursor: pointer; }
.ofi.js-of:hover { border-color: var(--flare-dim); background: #100c0a; }
.ofi .h { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.ofi .n { font-weight: 600; font-size: 14.5px; }
.ofi .p { text-align: right; font-family: var(--f-mono); font-size: 14px; font-weight: 600; color: var(--flare); white-space: nowrap; }
.ofi .p .rot { display: block; font-family: var(--f-sans); font-size: 12.5px; font-weight: 600; color: var(--flare-hi); }
.ofi .p .eur { display: block; font-family: var(--f-sans); font-size: 11.5px; font-weight: 400; color: var(--faint); }
.ofi .d { color: var(--dim); font-size: 13px; margin-top: 5px; }
.ofi .more { margin-top: 9px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--flare); opacity: .75; }
.ofi.op .more { display: none; }
.pd { display: none; margin-top: 13px; padding-top: 13px; border-top: 1px dashed var(--rule-2); }
.ofi.op .pd { display: block; }
.pdsub { color: var(--dim); font-size: 13.5px; }
.pdfor { margin-top: 9px; font-size: 13px; color: var(--dim); }
.pdfor b { color: var(--txt); }
.pd h5 { margin: 13px 0 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pd ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pd li { font-size: 13.5px; color: var(--dim); padding-left: 17px; position: relative; }
.pd li::before { content: '+'; position: absolute; left: 0; color: var(--ok); font-family: var(--f-mono); }
.trepte { width: 100%; border-collapse: collapse; margin: 4px 0 10px; }
.trepte td { padding: 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 13px; }
.trepte tr:last-child td { border-bottom: 0; }
.trepte .tn { color: var(--txt); font-weight: 600; white-space: nowrap; padding-right: 12px; }
.trepte .ts { color: var(--dim); }
.trepte .tp { font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; color: var(--flare);
  text-align: right; white-space: nowrap; padding-left: 12px; }
.trepte .tp i { display: block; font-style: normal; font-family: var(--f-sans); font-size: 11.5px; color: var(--flare-hi); }

.nbx { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.nbx div { background: var(--warn-bg); border: 1px solid var(--warn-ln); border-radius: var(--r-s); padding: 8px 11px;
  font-size: 12.5px; color: #f0dcae; }

/* ---- intrebarea care leaga discutia de oferta ---- */
.ask { background: var(--sunk); border: 1px solid var(--rule-2); border-radius: var(--r-m); padding: 16px 18px; }
.askq { font-size: 15px; font-weight: 600; color: var(--txt); margin-bottom: 12px; }
.askb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.askb button { text-align: left; padding: 13px 15px; border: 1px solid var(--rule-2); border-radius: var(--r-m);
  background: var(--desk); color: var(--txt); font: 600 13.5px var(--f-sans); cursor: pointer;
  transition: border-color .12s, background .12s; }
.askb button:hover { border-color: var(--flare-dim); background: var(--desk-2); }
.askb button small { display: block; margin-top: 3px; font-weight: 400; font-size: 11.5px; color: var(--faint); }

.rampick { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 13px; color: var(--dim); }
.rampick b { color: var(--flare); }

/* fraza de legatura sta tot pe hartie: se citeste cu voce tare */
.say-mid { font-size: 17.5px; padding: 16px 18px; box-shadow: 0 16px 34px -18px #000, 0 0 50px -24px rgba(239,163,85,.35); }

.askb button.on { background: var(--flare-bg); border-color: var(--flare-dim); color: var(--flare); }
.askb button.on small { color: var(--flare-hi); opacity: .8; }

/* raspunsurile la intrebarile despre firma, in timpul apelului */
.despre { margin-top: 14px; }
.desp { margin-top: 11px; display: flex; flex-direction: column; gap: 8px; }
.des { background: var(--sunk); border: 1px solid var(--rule); border-left: 3px solid var(--info-ln);
  border-radius: var(--r-m); padding: 12px 15px; }
.desq { font-weight: 600; color: var(--txt); font-size: 13.5px; margin-bottom: 5px; }
.desa { color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.desa b { color: var(--txt); }

/* obiectiile din tabul "Cum vorbesc": intrebarea lui, raspunsul tau, sfatul */
.qa { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.qa:last-child { border-bottom: 0; }
.qa .q { font-weight: 600; color: var(--flare); font-size: 14px; margin-bottom: 8px; }
.qa .a { background: var(--paper); color: var(--paper-ink); border-radius: var(--r-s); padding: 12px 15px;
  font-family: var(--f-serif); font-size: 15.5px; line-height: 1.55; }
.qa .a small { display: block; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--paper-edge);
  font-family: var(--f-sans); font-size: 12.5px; line-height: 1.5; color: var(--paper-mute); }

/* ---- fise de pachet ---- */
.pks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pk { background: var(--sunk); border: 1px solid var(--rule); border-left: 3px solid var(--rule-2);
  border-radius: var(--r-m); padding: 13px 15px; }
.pk.vrea { border-left-color: var(--ok); background: #0d100b; }
.pkh { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pkn2 { font-weight: 600; font-size: 14.5px; color: var(--txt); }
.pkp { font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--flare); text-align: right; white-space: nowrap; }
.pkp i { display: block; font-style: normal; font-family: var(--f-sans); font-size: 12px; color: var(--flare-hi); }
.pkd { font-size: 12.5px; color: var(--dim); margin-top: 5px; }
.pka { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.pka button { padding: 7px 11px; border-radius: 999px; border: 1px dashed var(--rule-2); background: transparent;
  color: var(--faint); font: 500 12px var(--f-sans); cursor: pointer; }
.pka button:hover { border-style: solid; color: var(--txt); }
.pka .js-tg.on { background: var(--flare-bg); border: 1px solid var(--flare-dim); color: var(--flare); font-weight: 600; }
.pka .wa.on { background: var(--ok-bg); border: 1px solid var(--ok-ln); color: var(--ok); }
.pk .pd { margin-top: 12px; padding-top: 12px; display: block; }

.pksearch { margin-top: 11px; }
.pksearch input { width: 100%; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: var(--r-m);
  background: var(--sunk); color: var(--txt); font: 400 14px var(--f-sans); }
.pksearch input:focus { border-color: var(--flare-dim); }

/* ---- "altceva, scriu eu" ---- */
.js-alt { padding: 8px 13px; border-radius: 999px; border: 1px dashed var(--flare-dim); background: transparent;
  color: var(--flare); font: 500 12.5px var(--f-sans); cursor: pointer; }
.js-alt:hover, .js-alt.on { background: var(--flare-bg); border-style: solid; }
.altin { width: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--flare-dim); border-radius: var(--r-m);
  background: var(--sunk); color: var(--txt); font: 400 14px var(--f-sans); }

.selrow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.pc { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: var(--flare-bg);
  border: 1px solid var(--flare-dim); border-radius: 999px; font-size: 12.5px; }
.pc b { font-weight: 600; color: var(--txt); }
.pc .pr { font-family: var(--f-mono); font-size: 11.5px; color: var(--flare); }
.pc .x { cursor: pointer; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.3); color: var(--dim);
  display: grid; place-items: center; font-size: 13px; }
.pc .x:hover { background: var(--bad-bg); color: var(--bad); }
.qpl { font-size: 11.5px; color: var(--faint); margin-bottom: 6px; }
.qp { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.qp button { padding: 7px 13px; border-radius: 999px; border: 1px dashed var(--rule-2); background: transparent;
  color: var(--dim); font: 500 12.5px var(--f-sans); cursor: pointer; }
.qp button:hover { border-style: solid; border-color: var(--flare-dim); color: var(--txt); }
.qp button.on { background: var(--flare-bg); border: 1px solid var(--flare-dim); color: var(--flare); font-weight: 600; }
.pnone { font-size: 12.5px; color: var(--faint); font-style: italic; margin-bottom: 9px; }
.selrow select, .frm select, .frm input, .filters select, .filters input, .bar input, .bar select, .cbk input {
  padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-m); background: var(--sunk);
  color: var(--txt); font: 400 13.5px var(--f-sans); }
.selrow select { width: 100%; }
.by { font-size: 11.5px; color: var(--faint); }

.objs { display: flex; gap: 6px; flex-wrap: wrap; }
.objs button { padding: 8px 13px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--sunk);
  color: var(--dim); font: 500 12.5px var(--f-sans); cursor: pointer; }
.objs button:hover { border-color: var(--vio-ln); color: var(--txt); }
.objs button.on { background: var(--vio-bg); border-color: var(--vio-ln); color: var(--vio); font-weight: 600; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { padding: 11px 16px; border-radius: var(--r-m); border: 1px solid var(--rule-2); background: var(--sunk);
  color: var(--dim); font: 600 13.5px var(--f-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: transform .06s, background .12s; }
.chip:active { transform: scale(.97); }
.chip kbd { font-family: var(--f-mono); font-size: 10.5px; font-weight: 400; opacity: .5; }
.chip:hover { background: var(--desk-2); color: var(--txt); }
.chip[data-s="Interesat"].on { background: var(--ok-bg); border-color: var(--ok-ln); color: var(--ok); }
.chip[data-s="Trimite oferta"].on { background: var(--info-bg); border-color: var(--info-ln); color: var(--info); }
.chip[data-s="Sunat, revin"].on { background: var(--warn-bg); border-color: var(--warn-ln); color: var(--warn); }
.chip[data-s="Nu a raspuns"].on { background: var(--neu-bg); border-color: var(--neu-ln); color: var(--neu); }
.chip[data-s="Refuz"].on { background: var(--bad-bg); border-color: var(--bad-ln); color: var(--bad); }
.chip[data-s="Numar gresit"].on { background: var(--vio-bg); border-color: var(--vio-ln); color: var(--vio); }

.cbk { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.cbk .q { padding: 8px 12px; border-radius: var(--r-m); border: 1px dashed var(--rule-2); background: none;
  color: var(--dim); font: 500 12.5px var(--f-sans); cursor: pointer; }
.cbk .q:hover { border-style: solid; border-color: var(--flare-dim); color: var(--flare); }

textarea { width: 100%; min-height: 104px; padding: 14px 16px; border: 1px solid var(--rule-2); border-radius: var(--r-m);
  background: var(--sunk); color: var(--txt); font: 400 14.5px/1.6 var(--f-sans); resize: vertical; }
textarea:focus { border-color: var(--flare-dim); }
textarea::placeholder, input::placeholder { color: #6d6156; }
.meta { font-size: 11.5px; color: var(--faint); margin-top: 7px; }
.hint { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--faint); }
.hint kbd { font-family: var(--f-mono); font-size: 11px; background: var(--sunk); border: 1px solid var(--rule-2);
  border-radius: 4px; padding: 2px 6px; color: var(--dim); }

.lockbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--warn-bg); border: 1px solid var(--warn-ln); border-left: 3px solid var(--warn);
  border-radius: var(--r-m); padding: 13px 16px; margin-bottom: 14px; font-size: 13.5px; color: #f2dfb0; }
.lockbar b { color: var(--txt); }
.dubl { background: var(--vio-bg); border: 1px solid var(--vio-ln); border-left: 3px solid var(--vio);
  border-radius: var(--r-m); padding: 12px 15px; font-size: 13.5px; color: #ddc9ee; margin-bottom: 14px; }
.claim { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; border: 1px solid var(--rule-2); background: var(--sunk); color: var(--faint); }
.claim.mine { background: var(--ok-bg); border-color: var(--ok-ln); color: var(--ok); }
.claim.other { background: var(--warn-bg); border-color: var(--warn-ln); color: var(--warn); }
.claim.free { background: var(--sunk); border-color: var(--rule-2); color: var(--faint); }
.leaseleft { font-family: var(--f-mono); font-weight: 400; opacity: .8; }

/* ---- ecranul de dinainte de a lua o firma ---- */
.idle { background: var(--desk); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 34px 32px; text-align: center; }
.idleh { font-size: 21px; font-weight: 700; color: var(--txt); margin-bottom: 10px; }
.idle p { max-width: 560px; margin: 0 auto; color: var(--dim); font-size: 14.5px; }
.idle p b { color: var(--txt); }
.idlew { max-width: 560px; margin: 18px auto 0; background: var(--warn-bg); border: 1px solid var(--warn-ln);
  border-radius: var(--r-m); padding: 12px 15px; font-size: 13.5px; color: #f2dfb0; }
.idlek { display: flex; justify-content: center; gap: 28px; margin: 22px 0 20px; font-size: 12.5px; color: var(--faint); }
.idlek b { display: block; font-family: var(--f-mono); font-size: 24px; font-weight: 600; color: var(--flare); }
.idlea { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.idlea .btn.p { padding: 14px 26px; font-size: 15px; }

/* ---- renuntare completa ---- */
.giveup { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--rule); font-size: 13px; color: var(--dim); }
.giveup #btnrenda { border-color: var(--bad-ln); color: var(--bad); background: var(--bad-bg); }

/* ============================== lista ============================== */

.bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.bar input[type=search] { min-width: 230px; }

.chk { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: var(--dim);
  padding: 9px 13px; border: 1px solid var(--rule-2); border-radius: var(--r-m); background: var(--sunk); }
.chk:hover { border-color: var(--flare-dim); color: var(--txt); }
.chk input { width: 17px; height: 17px; accent-color: var(--flare); cursor: pointer; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; padding: 9px 12px; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--rule-2); }
td { padding: 11px 12px; border-bottom: 1px solid var(--rule); color: var(--dim); }
tr.r { cursor: pointer; }
/* firma luata de altcineva nu se deschide: se vede din prima ca nu e a ta */
tr.r.taken { cursor: not-allowed; }
tr.r.taken td { opacity: .5; }
tr.r.taken:hover td { background: var(--bad-bg); opacity: .62; }
tr.r:hover td { background: var(--desk); color: var(--txt); }
/* Randul deschis la tine acum NU se coloreaza ca o rezervare: portocaliul
   inseamna peste tot "e luata", iar aici insemna doar "te uiti la ea". Fetele
   au sarit firme libere crezand ca sunt ale altcuiva. Acum e o dunga la stanga. */
tr.r.cur td { background: var(--desk-2); }
tr.r.cur td:first-child { box-shadow: inset 3px 0 0 var(--flare); }
tr.r.done td.f { opacity: .55; }
td.f { color: var(--txt); font-weight: 600; }
td.t { font-family: var(--f-mono); color: var(--flare); font-size: 13px; }
td .cl { display: block; font-size: 11px; color: var(--faint); }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid; }
.pill.Nou { background: var(--sunk); border-color: var(--rule-2); color: var(--faint); font-weight: 400; }
.pill.Interesat { background: var(--ok-bg); border-color: var(--ok-ln); color: var(--ok); }
.pill[class*="Trimite"] { background: var(--info-bg); border-color: var(--info-ln); color: var(--info); }
.pill[class*="Sunat"] { background: var(--warn-bg); border-color: var(--warn-ln); color: var(--warn); }
.pill[class*="raspuns"] { background: var(--neu-bg); border-color: var(--neu-ln); color: var(--neu); }
.pill.Refuz { background: var(--bad-bg); border-color: var(--bad-ln); color: var(--bad); }
.pill[class*="gresit"] { background: var(--vio-bg); border-color: var(--vio-ln); color: var(--vio); }

.empty { padding: 34px 20px; text-align: center; color: var(--faint); font-size: 13.5px; border: 1px dashed var(--rule-2); border-radius: var(--r-m); }

/* ============================== sectiuni de text ============================== */

.sec { background: var(--desk); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 24px 28px; margin-bottom: 14px; }
.sec h2 { font-size: 17px; font-weight: 700; color: var(--txt); margin-bottom: 5px; letter-spacing: -.01em; }
.sec .sub { font-size: 13px; color: var(--faint); margin-bottom: 18px; }
.step { display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.step:last-child { border-bottom: 0; }
.step .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--flare-bg);
  border: 1px solid var(--flare-dim); color: var(--flare); font-family: var(--f-mono); font-size: 13px; font-weight: 600; }
.step b { display: block; margin-bottom: 6px; }
.sc { font-family: var(--f-serif); font-size: 16px; line-height: 1.55; color: var(--paper-ink); background: var(--paper);
  border-radius: var(--r-s); padding: 11px 14px; margin: 7px 0; }
.sc i { font-style: italic; color: var(--paper-mute); }
/* aceeasi impartire ca in ecranul de apel: hartia e ce SPUI ca sa vinzi, caseta
   intunecata cu marginea aprinsa e ce INTREBI ca sa afli. In sectiunea
   Descoperirea sunt patru intrebari una dupa alta: pe hartie erau patru coli
   albe pe acelasi ecran, adica nicio ierarhie si multa lumina in ochi. */
.sc.q { background: var(--desk-2); color: #f7ede1; border: 1px solid var(--rule-2);
  border-left: 3px solid var(--flare); border-radius: var(--r-m); }
.sc.q i { color: var(--dim); }
.why { font-size: 13px; color: var(--dim); margin-top: 7px; }
.why b { color: var(--txt); }
.no { display: flex; gap: 11px; padding: 8px 0; font-size: 13.5px; color: var(--dim); }
.no i { color: var(--flare); font-style: normal; }
.no b { color: var(--txt); }
.react { display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.react:last-child { border-bottom: 0; }
.react .k { color: var(--txt); font-weight: 600; }
.react .v { color: var(--dim); }
.warn { background: var(--warn-bg); border: 1px solid var(--warn-ln); border-left: 3px solid var(--warn);
  border-radius: var(--r-m); padding: 12px 15px; margin-bottom: 10px; font-size: 13px; color: #f2dfb0; }
.warn b { color: #fff0cf; }

/* ============================== preturi ============================== */

.pricesrc { font-size: 12px; color: var(--faint); margin-bottom: 14px; }
.pricesrc.stale { color: var(--warn); }
.catg { margin-bottom: 22px; }
.catg h3 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--flare); margin-bottom: 10px; }

/* ============================== cum stam ============================== */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--desk); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 14px 16px; }
.kpi .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.kpi b { display: block; font-family: var(--f-mono); font-size: 27px; font-weight: 600; letter-spacing: -.03em; margin-top: 6px; }
.kpi small { display: block; color: var(--faint); font-size: 11.5px; margin-top: 2px; }
.kpi.hi b { color: var(--flare); }
.kpi.good b { color: var(--ok); }
.kpi.bad b { color: var(--bad); }

.dcard { background: var(--desk); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 20px 22px; margin-bottom: 14px; }
.dcard > h3 { font-size: 15px; font-weight: 700; color: var(--txt); margin-bottom: 4px; }
.dcard > .sub { font-size: 12.5px; color: var(--faint); margin-bottom: 16px; }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.bars { display: flex; flex-direction: column; gap: 8px; }
.brow { display: grid; grid-template-columns: 168px 1fr 62px; gap: 12px; align-items: center; font-size: 13px; }
.brow .lb { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .tr { background: var(--sunk); border-radius: 3px; height: 14px; overflow: hidden; }
.brow .fl { display: block; height: 100%; background: var(--flare); border-radius: 3px; min-width: 2px; }
.brow .vl { text-align: right; font-family: var(--f-mono); font-size: 12.5px; color: var(--txt); }
.brow.g2 .fl { background: var(--ok); }
.brow.g3 .fl { background: var(--vio); }

.stack { display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: var(--sunk); }
.stack i { display: block; height: 100%; }
.lgd { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--faint); margin-top: 10px; }
.lgd i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

.funnel { display: flex; flex-direction: column; gap: 6px; }
.fst { display: grid; grid-template-columns: 200px 1fr 86px; gap: 12px; align-items: center; font-size: 13px; }
.fst .lb { color: var(--dim); }
.fst .tr { background: var(--sunk); border-radius: 3px; height: 21px; overflow: hidden; }
.fst .fl { display: block; height: 100%; background: linear-gradient(90deg, var(--flare-dim), var(--flare)); border-radius: 3px; min-width: 2px; }
.fst .vl { text-align: right; font-family: var(--f-mono); font-size: 12.5px; color: var(--txt); }

.heat { display: flex; gap: 4px; align-items: flex-end; margin-top: 8px; }
.hcell { flex: 1; text-align: center; font-size: 10px; color: var(--faint); font-family: var(--f-mono); }
.hcell .bx { height: 48px; background: var(--sunk); border: 1px solid var(--rule); border-radius: 4px;
  display: flex; align-items: flex-end; overflow: hidden; margin-bottom: 4px; }
.hcell .bx i { display: block; width: 100%; background: var(--flare); opacity: .8; }

.due { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  border: 1px solid var(--rule-2); border-radius: var(--r-m); background: var(--sunk); margin-bottom: 8px; font-size: 13.5px; }
.due.late { border-color: var(--bad-ln); background: var(--bad-bg); }
.due.soon { border-color: var(--warn-ln); background: var(--warn-bg); }
.due b { color: var(--txt); }
.due .w { font-size: 12px; color: var(--faint); margin-top: 2px; }

.chain { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-m);
  font-size: 12px; background: var(--ok-bg); border: 1px solid var(--ok-ln); color: var(--ok); }
.chain::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.chain.bad { background: var(--bad-bg); border-color: var(--bad-ln); color: var(--bad); }
.chain.bad::before { background: var(--bad); }

/* ============================== ce s-a facut ============================== */

.jrn { max-height: 68vh; overflow: auto; border: 1px solid var(--rule); border-radius: var(--r-m); }
.jrn td { font-size: 12.5px; vertical-align: top; }
.jrn .sq { font-family: var(--f-mono); color: var(--faint); white-space: nowrap; }
.jrn .ac { color: var(--flare); white-space: nowrap; font-weight: 600; }
.jrn .df { color: var(--dim); word-break: break-word; }
.jrn .df del { text-decoration: none; background: var(--bad-bg); color: var(--bad); padding: 1px 5px; border-radius: 3px; }
.jrn .df ins { text-decoration: none; background: var(--ok-bg); color: var(--ok); padding: 1px 5px; border-radius: 3px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }

/* ============================== conturi ============================== */

.acct { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.ac { background: var(--sunk); border: 1px solid var(--rule-2); border-radius: var(--r-m); padding: 16px; }
.ac .r { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--flare); }
.ac h4 { font-size: 16px; font-weight: 700; margin: 3px 0 2px; }
.ac.off { opacity: .5; }
.ac .acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }
.frm { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; align-items: end; margin-top: 14px; }
.frm label { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.frm input, .frm select { width: 100%; }
.fr { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ============================== poarta, paleta, mesaje, ghid ============================== */

.gate { position: fixed; inset: 0; background: radial-gradient(80% 60% at 50% 0%, #1c1512, var(--ink));
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 900; }
.gate .box { width: 100%; max-width: 390px; background: var(--desk); border: 1px solid var(--rule-2);
  border-radius: var(--r-l); padding: 26px; box-shadow: 0 30px 70px -30px #000; }
.gate h1 { font-size: 20px; margin-bottom: 6px; }
.gate h1::before { width: 11px; height: 11px; }
.gate .sub { color: var(--dim); font-size: 13.5px; margin-bottom: 20px; }
.gate label { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 14px 0 6px; }
.gate input { width: 100%; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: var(--r-m);
  background: var(--sunk); color: var(--txt); font: 400 15px var(--f-sans); }
.gate input:focus { border-color: var(--flare-dim); }
.gate .btn { width: 100%; margin-top: 20px; padding: 13px; }
.gate .err { display: none; margin-top: 14px; background: var(--bad-bg); border: 1px solid var(--bad-ln);
  border-radius: var(--r-m); padding: 10px 13px; font-size: 13px; color: var(--bad); }
.gate .err.on { display: block; }

.pal { position: fixed; inset: 0; background: rgba(8,6,5,.78); display: flex; align-items: flex-start;
  justify-content: center; padding: 12vh 16px 16px; z-index: 800; }
.pal .box { width: 100%; max-width: 580px; background: var(--desk); border: 1px solid var(--flare-dim);
  border-radius: var(--r-l); overflow: hidden; box-shadow: 0 30px 70px -20px #000; }
.pal input { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--rule); background: var(--sunk);
  color: var(--txt); font: 400 15px var(--f-sans); }
.pal ul { list-style: none; max-height: 54vh; overflow: auto; }
.pal li { padding: 11px 18px; display: flex; justify-content: space-between; gap: 14px; cursor: pointer;
  font-size: 13.5px; border-bottom: 1px solid var(--rule); }
.pal li:hover, .pal li.sel { background: var(--desk-2); }
.pal li .s { color: var(--faint); font-size: 12px; white-space: nowrap; }
.pal .none { padding: 16px 18px; color: var(--faint); font-size: 13px; }

.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 9px; z-index: 850; max-width: min(380px, 92vw); }
.toast { background: var(--desk-2); border: 1px solid var(--rule-2); border-left: 3px solid var(--flare);
  border-radius: var(--r-m); padding: 13px 16px; font-size: 13.5px; box-shadow: 0 18px 40px -18px #000; animation: slide .2s ease; }
@keyframes slide { from { opacity: 0; transform: translateX(14px); } }
.toast.bad { border-left-color: var(--bad); }
.toast.good { border-left-color: var(--ok); }
.toast b { display: block; margin-bottom: 3px; color: var(--txt); }
.toast .x { float: right; margin-left: 12px; color: var(--faint); cursor: pointer; }

/* intrebarea de dupa apel */
.pop { position: fixed; inset: 0; background: rgba(8,6,5,.86); display: flex; align-items: center;
  justify-content: center; padding: 20px; z-index: 890; animation: fade .14s ease; }
.pop .box { width: 100%; max-width: 400px; background: var(--desk); border: 1px solid var(--flare-dim);
  border-radius: var(--r-l); padding: 26px 24px; text-align: center; box-shadow: 0 30px 80px -20px #000; }
.popf { font-size: 12.5px; color: var(--faint); margin-bottom: 7px; }
.pop h2 { font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 20px; }
.popa { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.popa .btn { padding: 17px 12px; font-size: 15px; }
.poplink { display: block; width: 100%; margin-top: 15px; padding: 8px; background: none; border: 0;
  color: var(--faint); font: 400 13px var(--f-sans); cursor: pointer; text-decoration: underline; }
.poplink:hover { color: var(--txt); }

.popsuna { width: 100%; margin-top: 9px; padding: 13px; }

/* bula care ramane pe ecran cat timp suna telefonul */
.bula { position: fixed; left: 14px; bottom: 14px; z-index: 860; background: var(--desk-2);
  border: 1px solid var(--flare-dim); border-radius: var(--r-l); padding: 12px 14px;
  box-shadow: 0 18px 44px -16px #000; max-width: min(300px, 92vw); animation: slide .2s ease; }
.bt { font-weight: 600; font-size: 13.5px; color: var(--txt); margin-bottom: 9px; }
.bb2 { display: flex; gap: 6px; flex-wrap: wrap; }
.bb2 .btn { flex: 1 1 auto; }

/* ce se vinde in industria firmei, scris dinainte pentru fiecare domeniu */
.vindem { background: var(--info-bg); border: 1px solid var(--info-ln); border-left: 3px solid var(--info);
  border-radius: var(--r-m); padding: 12px 15px; margin-bottom: 12px; font-size: 13.5px; color: #d3ebf4; }
.vindem b { color: #fff; }

/* cuvintele tehnice: subliniate discret, apesi si iti spun ce inseamna */
.term { border-bottom: 1px dashed currentColor; cursor: help; }
.term:hover, .term:focus-visible { color: var(--flare); }
.say .term, .sc .term, .qa .a .term { border-bottom-color: #a08a6a; }
.say .term:hover, .sc .term:hover, .qa .a .term:hover { color: #8a5a1c; }
/* ...dar caseta intunecata NU e hartie: maroul de mai sus pe fundal inchis face
   cuvantul aproape invizibil exact cand agenta il apasa ca sa afle cum se
   pronunta. Ea foloseste tratamentul normal, pe intuneric. */
.sc.q .term { border-bottom-color: currentColor; }
.sc.q .term:hover, .sc.q .term:focus-visible { color: var(--flare); }

#tdef { position: fixed; z-index: 870; background: var(--desk-2); border: 1px solid var(--flare-dim);
  border-radius: var(--r-m); padding: 14px 16px; box-shadow: 0 20px 46px -16px #000; font-size: 13.5px;
  line-height: 1.55; color: var(--dim); animation: fade .12s ease; }
#tdef .tt { font-weight: 700; font-size: 15px; color: var(--txt); }
#tdef .tz { font-size: 12.5px; color: var(--flare); margin: 2px 0 9px; }
#tdef .tz b { font-family: var(--f-mono); font-weight: 600; }
#tdef .tc { margin-bottom: 10px; }
#tdef .tl { background: var(--sunk); border-radius: var(--r-s); padding: 9px 11px; color: var(--txt); font-style: italic; }
#tdef .tl span { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }

/* ghidul de la prima intrare */
.guide { position: fixed; inset: 0; background: rgba(8,6,5,.86); display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 880; }
.guide .box { width: 100%; max-width: 560px; max-height: 86vh; overflow: auto; background: var(--desk);
  border: 1px solid var(--flare-dim); border-radius: var(--r-l); padding: 26px 28px; box-shadow: 0 30px 80px -20px #000; }
.guide h2 { font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.guide .sub { color: var(--dim); font-size: 13.5px; margin-bottom: 20px; }
.guide ol { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.guide li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; font-size: 14px; color: var(--dim); }
.guide li b { display: block; color: var(--txt); margin-bottom: 3px; }
.guide li .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--flare-bg);
  border: 1px solid var(--flare-dim); color: var(--flare); font-family: var(--f-mono); font-size: 13px; font-weight: 600; }
.guide .acts { display: flex; gap: 9px; flex-wrap: wrap; }

/* ============================== telefon ============================== */
/* Tot ce e pe calculator exista si pe telefon, doar asezat altfel. Singurul
   lucru ascuns sunt scurtaturile de tastatura: pe telefon nu ai tastatura. */

@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .wrap { padding: 12px 13px 96px; }

  input, select, textarea, .bar input, .bar select, .filters input, .filters select,
  .frm input, .frm select, .gate input, .cbk input, .pal input, .selrow select { font-size: 16px; }

  .btn { min-height: 46px; padding: 12px 16px; }
  .btn.sm { min-height: 38px; padding: 8px 12px; }
  .chip { min-height: 48px; padding: 12px 15px; }
  .objs button, .cbk .q, .qp button { min-height: 42px; }
  .hlp { width: 26px; height: 26px; font-size: 13px; }

  h1 { font-size: 14px; }
  /* pe telefon nu ai loc de risipit: cine nu e in aplicatie nu te ajuta cu nimic in timpul apelului */
  .who .u:not(:has(.pdot)) { display: none; }
  .who { gap: 8px; }
  .stats { gap: 12px; margin: 10px 0 6px; }
  .stat.big b { font-size: 21px; }

  .tabs { overflow-x: auto; scrollbar-width: none; margin: 12px -13px 14px; padding: 0 13px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }

  .nav #btnnext { flex: 1 1 100%; }
  .nav .btn { flex: 1 1 auto; }
  .nav .pos { flex: 1 1 100%; text-align: center; margin: 0; }

  .bh { flex-direction: column; gap: 14px; padding: 16px 16px 15px; }
  .bh h2 { font-size: 21px; }
  .bb { padding: 16px 16px 20px; }
  .phone { width: 100%; text-align: left; }
  .phone .pl { justify-content: flex-start; }
  .phone a { text-align: center; font-size: 25px; padding: 15px 12px; }
  .say { font-size: 18.5px; padding: 17px 18px; }
  .hint { display: none; }
  .selrow { grid-template-columns: 1fr; gap: 16px; }
  .askb, .pks { grid-template-columns: 1fr; }
  /* pe telefon bara de pasi se trage cu degetul, iar butonul mare e cat randul */
  .wp { padding: 10px 12px; font-size: 12px; }
  /* numele pachetului si pretul pe randuri separate: altfel numele se
     strange pe patru randuri cand pretul e un interval */
  .pkh { flex-direction: column; align-items: flex-start; gap: 2px; }
  /* pe telefon treptele se aseaza pe doua randuri, nu pe trei coloane */
  .trepte td { display: block; padding: 2px 0; border: 0; }
  .trepte .tn { font-size: 14px; padding-top: 9px; }
  .trepte .tp { text-align: left; padding: 0; }
  .trepte .tp i { display: inline; margin-left: 6px; }
  .trepte tr { display: block; border-bottom: 1px solid var(--rule); padding-bottom: 7px; }
  .pkp { text-align: left; white-space: normal; }
  .pkp i { display: inline; margin-left: 6px; }
  .askb button { padding: 15px; }
  .say-mid { font-size: 16.5px; }
  .pka button { min-height: 40px; }
  .rampick .btn { width: 100%; }
  .lockbar, .due { flex-direction: column; align-items: stretch; }
  .lockbar .btn, .due .btn { width: 100%; }

  .bar input[type=search] { min-width: 0; flex: 1 1 100%; }
  .bar select { flex: 1 1 46%; }
  .bar .btn { flex: 1 1 100%; }
  .chk { width: 100%; min-height: 46px; }

  table.rsp thead { display: none; }
  table.rsp tbody, table.rsp tr, table.rsp td { display: block; }
  table.rsp tr { background: var(--desk); border: 1px solid var(--rule-2); border-radius: var(--r-m);
    padding: 11px 14px; margin-bottom: 9px; }
  table.rsp tr.cur { border-color: var(--flare-dim); }
  table.rsp tr:hover td { background: none; }
  table.rsp td { border: 0; padding: 4px 0; display: flex; gap: 14px; justify-content: space-between;
    align-items: baseline; text-align: right; overflow-wrap: anywhere; }
  table.rsp td::before { content: attr(data-l); flex: 0 0 auto; text-align: left; font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
  table.rsp td:empty { display: none; }
  table.rsp td.f { font-size: 15.5px; }
  .jrn { max-height: none; overflow: visible; border: 0; }

  .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .idle { padding: 24px 18px; }
  .idlea .btn { width: 100%; }
  .giveup .btn { width: 100%; }
  .kpi b { font-size: 23px; }
  .dcard, .sec, .guide .box { padding: 16px 17px; }
  .dgrid { grid-template-columns: 1fr; }
  .brow, .fst { grid-template-columns: 1fr auto; grid-template-areas: "lb vl" "tr tr"; gap: 4px 12px; }
  .brow .lb, .fst .lb { grid-area: lb; white-space: normal; }
  .brow .vl, .fst .vl { grid-area: vl; }
  .brow .tr, .fst .tr { grid-area: tr; }
  .react { grid-template-columns: 1fr; gap: 5px; }
  .step { grid-template-columns: 26px 1fr; gap: 12px; }
  .step .num { width: 26px; height: 26px; font-size: 12px; }
  .acct, .frm { grid-template-columns: 1fr; }
  .frm .btn, .fr .btn, .fr input { width: 100%; }
  .fr { flex-direction: column; align-items: stretch; }
  .filters select, .filters input { flex: 1 1 46%; }
  .filters .btn { flex: 1 1 100%; }
  .pal { padding: 6vh 10px 10px; }
  .toasts { left: 10px; right: 10px; bottom: 76px; max-width: none; }
  .bula { left: 10px; right: 10px; bottom: 76px; max-width: none; }
  /* pe telefon caseta cu explicatia sta jos, pe toata latimea */
  #tdef { left: 10px !important; right: 10px; top: auto !important; bottom: 76px; width: auto !important; }
}

/* bara fixa de jos, doar pe telefon: actiunea urmatoare mereu la indemana */
.dock { display: none; }
@media (max-width: 760px) {
  .dock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 700; gap: 8px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    background: rgba(16,12,11,.94); border-top: 1px solid var(--rule-2); backdrop-filter: blur(8px); }
  .dock .btn { flex: 1 1 auto; min-height: 48px; }
  .dock .btn.p { flex: 2 1 auto; }
}

@media (max-width: 400px) {
  .wrap { padding: 10px 10px 92px; }
  .bh h2 { font-size: 19px; }
  .say { font-size: 17.5px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi b { font-size: 21px; }
  .heat { gap: 2px; }
  .hcell { font-size: 9px; min-width: 22px; }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .bh { flex-direction: row; }
  .phone { width: auto; min-width: 200px; }
  .selrow { grid-template-columns: 1fr 1fr; }
  .dock { display: none; }
}

/* ---- pasul 3: raspunsurile pe grupe, nu un zid de butoane -------------- */
.askg { margin-top: 14px; }
.askg:first-of-type { margin-top: 2px; }
.askgt { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font: 600 11.5px var(--f-sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.askgt span { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--dim); }

/* ---- foaia cu fraza gata legata: titlu, intrebarea pusa, apoi textul ---- */
.say .sayh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--f-sans); font-size: 12px; color: var(--paper-mute);
  padding-bottom: 9px; margin-bottom: 11px; border-bottom: 1px solid var(--paper-edge); }
.say .sayh b { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-mute); }
.say .sayh span { font-weight: 600; color: var(--paper-ink); }
.say .sayq { font-family: var(--f-sans); font-size: 12.5px; color: var(--paper-mute); margin-bottom: 10px; font-style: italic; }
.say .sayt { display: block; }

.avert { margin-bottom: 11px; background: var(--warn-bg); border: 1px solid var(--warn-ln);
  border-radius: var(--r-m); padding: 11px 14px; font-size: 13px; color: #f0dcae; }

/* ---- pachetele, pe raspunsul din care vin si pe categorii -------------- */
.pksec { margin-top: 14px; }
.pksec:first-child { margin-top: 0; }
.pksech { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.pksech b { font-size: 14px; color: var(--flare); }
.pksech span { font-size: 12px; color: var(--faint); }
.pkcat { font: 600 11px var(--f-sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin: 11px 0 7px; }
.pksec .pks + .pkcat { margin-top: 13px; }

/* ---- versiune noua publicata cat timp tabul era deschis ---------------- */
.verbar { display: none; }
.verbar.on { display: block; margin: 0 0 12px;
  background: var(--info-bg); border: 1px solid var(--info-ln); border-left: 3px solid var(--info);
  border-radius: var(--r-m); padding: 12px 15px; font-size: 13.5px; color: #cfe6f0; }
.verbar b { color: #fff; }
.verbar .btn { margin-left: 10px; }

/* ---- pasii apelului: unul pe ecran, nu toti odata -------------------- */
.wiz { margin-top: 18px; }

/* bara de pasi: mereu vizibila, sare oriunde dintr-un click */
.wrail { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px;
  border-bottom: 1px solid var(--rule); margin-bottom: 4px;
  scrollbar-width: none; -ms-overflow-style: none; }
.wrail::-webkit-scrollbar { display: none; }
.wp { display: flex; align-items: center; gap: 7px; white-space: nowrap; flex: 0 0 auto;
  padding: 9px 13px; border: 1px solid var(--rule-2); border-radius: 999px;
  background: var(--sunk); color: var(--dim); font: 600 12.5px var(--f-sans); cursor: pointer;
  transition: border-color .12s, background .12s, color .12s; }
.wp:hover { border-color: var(--flare-dim); color: var(--txt); }
.wp .wn { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: var(--desk-2); color: var(--faint); font: 600 11px var(--f-mono); }
.wp.ok { color: var(--txt); }
.wp.ok .wn { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-ln); }
.wp.on { background: var(--flare-bg); border-color: var(--flare-dim); color: var(--flare); }
.wp.on .wn { background: var(--flare); color: #1a1512; border: 0; }

.wstep { padding-top: 16px; scroll-margin-top: 84px; }

/* butoanele care spun ce tocmai s-a intamplat, chiar sub replica */
.wacts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.wacts .wgo { flex: 1 1 240px; min-height: 52px; font-size: 15px; }
.wacts .wsk { flex: 0 1 auto; min-height: 52px; }

.wnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px;
  padding-top: 14px; border-top: 1px solid var(--rule); }

/* ---- pasii pe telefon ---------------------------------------------------
   ATENTIE la ordine: blocurile @media din acest fisier sunt la MIJLOC, iar
   regulile noi se adauga la sfarsit. O regula de baza scrisa la coada bate
   media query-ul de mai sus, la specificitate egala. Deci suprascrierile
   pentru telefon ale regulilor noi stau AICI, dupa ele, nu acolo sus. */
@media (max-width: 760px) {
  .wp { padding: 10px 12px; font-size: 12px; }
  /* pe coloana, flex-basis se aplica pe INALTIME: fara asta butonul mare
     iesea de 240px, adica un sfert de ecran de telefon */
  .wacts { flex-direction: column; }
  .wacts .wgo, .wacts .wsk { width: 100%; flex: 0 0 auto; min-height: 54px; }
}

/* ---- telefon: ecranul apelului nu incepe cu 900px de cadru ---------------
   Masurat pe 390x760: antetul 188px, cifrele 75, taburile 38 si randul de
   navigare 177 impingeau numarul la 649px si PASUL la 919px. Adica trebuia
   derulata o pagina intreaga ca sa vezi textul de citit, in timp ce omul
   asteapta pe fir. Aici se taie tot ce nu ajuta in timpul apelului. */
@media (max-width: 760px) {
  /* antetul: totul pe un singur rand, controalele mici in dreapta */
  header .htop { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 8px; }
  header .htop > div:first-child { min-width: 0; }
  .sync { flex-wrap: nowrap; white-space: nowrap; }
  .sync .btn.sm { padding: 5px 8px; font-size: 11px; min-height: 0; }
  header h1 { font-size: 13px; }
  .who { font-size: 11px; }
  .who .u { padding: 2px 6px; }
  .sync { font-size: 11px; }

  /* cifrele zilei: un singur rand care se trage cu degetul, ca taburile */
  .stats { flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding-bottom: 4px;
    scrollbar-width: none; -ms-overflow-style: none; }
  .stats::-webkit-scrollbar { display: none; }
  .stats > * { flex: 0 0 auto; }

  /* randul de navigare: pe telefon totul e in bara de jos si in pasul 6.
     "Cea dinainte / cea de dupa" sunt scurtaturi de calculator. */
  .nav { gap: 8px; }
  .nav #btnprev, .nav #btnfwd, .nav #btnnext { display: none; }
  .nav #btnrel { order: 2; }
  .nav .pos { order: 1; margin: 0; }
}

/* ---- telefon: cardul firmei se strange dupa ce ai sunat ------------------
   La pasul 1 numarul trebuie sa fie mare, e singurul lucru de apasat. De la
   pasul 2 incolo ai sunat deja, si atunci cardul mananca jumatate de ecran
   degeaba: textul de citit ajungea la 823px, adica sub doua ecrane de derulat. */
@media (max-width: 760px) {
  .big.mic { padding-bottom: 4px; }
  .big.mic .sub, .big.mic .seg, .big.mic .pl, .big.mic #btnrel2 { display: none; }
  .big.mic h2 { font-size: 15px; margin-bottom: 4px; }
  .big.mic .bh { align-items: center; gap: 10px; }
  .big.mic .phone a { font-size: 15px; padding: 9px 13px; box-shadow: none; }
  .big.mic .timer { margin-top: 8px; }

  /* Codul CAEN pe un rand, nu pe trei. `:not(.mic)` NU e decorativ: fara el
     regula asta are aceeasi specificitate ca `.big.mic .sub { display:none }`
     de mai sus si, fiind scrisa dupa, o bate; cardul strans ramanea cu CAEN-ul. */
  .big:not(.mic) .sub:first-of-type { display: -webkit-box; -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; overflow: hidden; }
  /* "Renunt la firma" e chiar sub numarul de apel: prea aproape de ce apesi
     cel mai des. Pe telefon ramane doar cel din bara de sus. */
  #btnrel2 { display: none; }
}

/* ---- telefon: ultimele randuri de cadru din capul ecranului -------------- */
.doarTel { display: none; }
@media (max-width: 760px) {
  .doarTel { display: block; }
  /* "Nu mai lucrez la ea" s-a mutat in pasul 6 */
  .nav #btnrel { display: none; }
  /* cine mai e in aplicatie nu ajuta cu nimic in timpul apelului */
  .who { display: none; }
  /* ceasul, pe un rand cu numarul, dupa ce ai sunat deja */
  .big.mic .timer { margin-top: 6px; padding: 6px 0; }
  .big.mic .timer .t { font-size: 17px; }
}

/* ---- telefon: cardul strans, pe un singur rand -------------------------- */
@media (max-width: 760px) {
  .big.mic { padding: 10px 12px 6px; }
  /* `flex-wrap: wrap` decide ruperea randului INAINTE de micsorare, deci numele
     nu se scurta, ci sarea numarul pe rand nou. Cu `nowrap` numele se taie cu
     trei puncte si intra amandoua pe un rand. */
  .big.mic .bh { flex-direction: row; flex-wrap: nowrap; align-items: center;
    justify-content: space-between; gap: 10px; padding: 12px 14px; text-align: left; }
  .big.mic .bh > div:first-child { min-width: 0; text-align: left; }
  .big.mic h2 { font-size: 14px; margin: 0 0 3px; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .big.mic .claim { font-size: 10.5px; padding: 2px 7px; }
  /* `.phone { width:100% }` de la telefon il trimitea pe rand nou, fiindca
     `.bh` are flex-wrap. Fara `width:auto` cardul strans ramanea pe trei randuri. */
  .big.mic .phone { margin: 0; flex: 0 0 auto; width: auto; text-align: right; }
  .big.mic .phone a { font-size: 14px; padding: 9px 12px; }
  .big.mic .timer { margin-top: 8px; padding: 6px 0 0; gap: 10px; }
  .big.mic .timer .btn { padding: 8px 12px; min-height: 40px; font-size: 12.5px; }
}

/* butoanele de la pasul 2 arata la fel cu bifele de la pasul 3 */
.js-desc { text-align: left; padding: 13px 15px; border: 1px solid var(--rule-2); border-radius: var(--r-m);
  background: var(--desk); color: var(--txt); font: 600 13.5px var(--f-sans); cursor: pointer;
  transition: border-color .12s, background .12s; }
.js-desc:hover { border-color: var(--flare-dim); background: var(--desk-2); }
.js-desc small { display: block; margin-top: 3px; font-weight: 400; font-size: 11.5px; color: var(--faint); }
.js-desc.on { background: var(--flare-bg); border-color: var(--flare-dim); color: var(--flare); }
.js-desc.on small { color: var(--flare-hi); opacity: .8; }

/* replica pe care NU o spui: pe hartie, dar taiata */
.sc.no-sc { opacity: .62; text-decoration: line-through; text-decoration-color: var(--bad); }

/* ---- ce INTREBI: de citit cu voce tare, dar nu pe hartie ---------------
   Hartia trebuie sa fie UNA singura pe ecran, altfel nu mai lumineaza nimic:
   trei coli albe una sub alta nu mai sunt ierarhie, sunt doar lumina in ochi
   la 8 dimineata cu telefonul in mana. Asa ajunsese pasul 2 (doua) si pasul 3
   (doua). Regula acum:
     hartie  = ce SPUI ca sa vinzi   - deschiderea, oferta, raspunsul la obiectie
     caseta  = ce INTREBI ca sa afli - intuneric, dar cu marginea aprinsa
   Amandoua se citesc cu voce tare, deci amandoua sunt cu serifa si mari. */
.qsay { background: var(--desk-2); border: 1px solid var(--rule-2); border-left: 3px solid var(--flare);
  border-radius: var(--r-m); padding: 14px 16px 15px; margin-bottom: 10px;
  font-family: var(--f-serif); font-size: 17px; line-height: 1.5; color: #f7ede1; }
.qsay.mare { font-size: 20px; padding: 16px 18px 17px; }
.qsay .qt { display: block; }
.qsayh { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font: 600 11px var(--f-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--flare); margin-bottom: 8px; }
.qsayh span { font-weight: 400; letter-spacing: 0; text-transform: none;
  font-size: 12px; color: var(--dim); }
.askg .askgt { margin-top: 2px; }

/* ---- capacul unei sectiuni de pachete ---------------------------------
   Cu cinci raspunsuri bifate ieseau cinci sectiuni deschise una sub alta.
   Acum doar prima e deschisa, restul au numarul de pachete pe capac. */
.pksech { width: 100%; padding: 9px 12px; cursor: pointer; text-align: left;
  background: var(--desk); border: 1px solid var(--rule-2); border-radius: var(--r-m);
  font: inherit; color: inherit; transition: border-color .12s, background .12s; }
.pksech:hover { border-color: var(--flare-dim); background: var(--desk-2); }
.pksech .pkct { margin-left: auto; font: 500 11.5px var(--f-mono); font-style: normal; color: var(--faint); }
.pksech .pkvz { font: 600 11px var(--f-sans); letter-spacing: .07em; text-transform: uppercase;
  font-style: normal; color: var(--flare); }
.pksec.inch .pksech { margin-bottom: 0; }
/* rezultatele cautarii sunt o singura sectiune: capacul lor nu se pliaza, deci
   nu are voie sa arate apasabil. Un antet care pare buton si nu face nimic e o
   minciuna mica pe care agenta o descopera exact cand se grabeste. */
.pksech.plat { background: none; border: 0; padding: 0 2px; cursor: default; }
.pksech.plat:hover { background: none; border: 0; }

@media (max-width: 760px) {
  .qsay { font-size: 16px; padding: 12px 14px 13px; }
  .qsay.mare { font-size: 18px; padding: 14px 15px 15px; }
  .pksech { gap: 4px 9px; }
  .pksech .pkct { margin-left: 0; }
}