/* Prețuri — RO-Terminal's paper, ink and clay (web-terminal/src/app/room/_shell/tokens.ts,
   index.css `.acc-lut`), its type (Season Sans) and its table: every cell a pill, 3px apart. */

@font-face {
  font-family: "Season Sans";
  src: url("/fonts/SeasonSansUprightsVF.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --app: #eae7e1;
  --panel: #f5f2ed;
  --sunk: #eeebe5;
  --hover: #eae7e3;
  --active: #e2ded8;
  --ink: #2d2219;
  --ink-2: #463527;
  --ink-3: #70543f;
  --line: rgba(51, 36, 29, 0.10);
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --acc: #7e3a26;
  --acc-strong: #a6503a;
  --acc-well: #c9a294;
  --acc-licar: #d2a878;
  --acc-tint: #e6d8d1;
  --acc-edge: #d8c4bb;
  --acc-paper: #f4efec;
  --mark: #e0cbc1;
  --good: #455632;
  --warn: #816307;
  --bad: #a6503a;
  --gutter: 16px;
  color-scheme: light;
}
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 56px; } }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: clip; }
html, body { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
  background: var(--app);
  color: var(--ink);
  font-family: "Season Sans", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
::selection { background: transparent; color: #d9480f; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; }

/* ── header ─────────────────────────────────────────────────────────── */
.antet {
  position: sticky; top: 0; z-index: 40;
  background: var(--app); border-bottom: 1px solid var(--line);
}
.antet-in {
  max-width: 1600px; margin: 0 auto; height: 56px;
  display: flex; align-items: center; gap: 12px; padding: 0 var(--gutter);
}
.marca {
  font-family: Futura, "Century Gothic", "Avenir Next", "Season Sans", sans-serif;
  font-weight: 800; font-size: 20px; letter-spacing: 0.03em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--acc); white-space: nowrap; flex: none;
}
.nav { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background-color 120ms; }
.nav a:hover { background: var(--active); }
.nav a.aici { background: var(--acc); color: var(--acc-paper); }
.iesire { font-size: 12.5px; color: var(--ink-3); padding: 6px 8px; border-radius: 8px; flex: none; }
.iesire:hover { background: var(--active); }
@media (max-width: 760px) {
  .antet-in { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
  .nav { order: 3; width: 100%; margin-left: 0; }
  .iesire { margin-left: auto; }
}

/* ── page ───────────────────────────────────────────────────────────── */
main { max-width: 1600px; margin: 0 auto; padding: 20px var(--gutter) 80px; display: flex; flex-direction: column; gap: 16px; }
.inapoi { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; color: var(--ink-2); background: var(--sunk); border: 1px solid var(--line); }
.inapoi:hover { background: var(--active); }

/* hero: the outlined title, as on every RO-Terminal page */
.erou { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0 8px; text-align: center; }
.titlu-contur {
  margin: 0; font-family: Futura, "Century Gothic", "Avenir Next", "Season Sans", sans-serif;
  font-weight: 800; letter-spacing: 0.02em; line-height: 1; color: transparent;
  -webkit-text-stroke: 1.6px rgba(51, 36, 29, 0.62); font-size: min(19vw, 150px);
  /* room for the comma under ț: at line-height 1 it hung into the line below */
  padding-bottom: 0.16em;
}
.erou p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 60ch; }
.caseta {
  width: 100%; max-width: 720px; display: flex; align-items: center; gap: 8px;
  background: var(--panel); border-radius: 18px; padding: 8px 8px 8px 16px; margin-top: 8px;
}
.caseta input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 15px; padding: 8px 0; }
.caseta input::placeholder { color: var(--ink-3); }
.caseta button { height: 36px; padding: 0 16px; border-radius: 12px; background: var(--acc); color: var(--acc-paper); font-weight: 600; font-size: 13.5px; }
@media (pointer: coarse) { .caseta input, .lista-pret input, .intrare input { font-size: 16px; } }

/* figure tiles */
.cifre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1024px) { .cifre { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cifra { background: var(--panel); border-radius: var(--r-lg); padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cifra .e { font-size: 12.5px; color: var(--ink-2); }
.cifra .v { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.cifra .n { font-size: 12px; color: var(--ink-3); }

/* panel with a table (RO-Terminal's Ledger) */
.panou { background: var(--panel); border-radius: var(--r-lg); padding: 14px 20px; min-width: 0; }
.panou-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0 12px; margin-bottom: 18px; }
.panou-cap h2 { margin: 0; font-size: 13.5px; font-weight: 600; }
.panou-cap .dr { margin-left: auto; font-size: 12.5px; color: var(--ink-2); }
.doua { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1100px) { .doua { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the table: one pill per cell */
.tabel { overflow-x: auto; scrollbar-width: none; }
.tabel::-webkit-scrollbar { display: none; }
.tabel-in { display: flex; flex-direction: column; gap: 3px; min-width: var(--min, 0); }
.r { display: grid; grid-template-columns: var(--cols); gap: 3px; }
.r > span { background: var(--sunk); border-radius: 8px; padding: 9px 12px; font-size: 13px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent); }
.r > span.dr { text-align: right; -webkit-mask-image: none; mask-image: none; font-variant-numeric: tabular-nums; }
.r > span.intreg { white-space: normal; -webkit-mask-image: none; mask-image: none; }
.r.cap > span { background: var(--active); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.r.cap > button { background: var(--active); font-size: 11.5px; font-weight: 600; color: var(--ink-2); border-radius: 8px; padding: 9px 12px; text-align: left; }
.r.cap > button.dr { text-align: right; }
a.r:hover > span, button.r:hover > span { background: var(--hover); }
button.r { text-align: left; width: 100%; }
.r.al > span { background: var(--mark); }
.gol { padding: 18px 12px; color: var(--ink-3); font-size: 13px; }
.bun { color: var(--good); } .rau { color: var(--bad); } .stins { color: var(--ink-3); }
.pastila { display: inline-block; padding: 2px 8px; border-radius: 7px; font-size: 12px; font-weight: 500; background: var(--active); color: var(--ink-2); }
.pastila.promo { background: var(--acc-tint); color: var(--acc); }

/* tabs */
.file { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 14px; background: var(--panel); align-self: flex-start; }
.file a { padding: 7px 12px; border-radius: 11px; font-size: 13px; color: var(--ink-2); }
.file a.aici { background: var(--acc); color: var(--panel); }

/* product header card */
.antet-fisa { background: var(--panel); border-radius: var(--r-lg); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .antet-fisa { padding: 24px 28px; } }
.antet-fisa .fel { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.antet-fisa .fel i { width: 8px; height: 8px; border-radius: 2px; background: var(--acc); display: inline-block; }
.antet-fisa h1 { margin: 0; font-size: 26px; line-height: 31px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
@media (min-width: 640px) { .antet-fisa h1 { font-size: 32px; line-height: 38px; } }
.antet-fisa .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-3); }

/* my list / add form */
.adauga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.adauga input, .lista-pret input { width: 110px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--app); padding: 0 10px; outline: none; }
.btn { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 600; background: var(--acc); color: var(--acc-paper); }
.btn.sec { background: var(--active); color: var(--ink-2); font-weight: 500; }
.btn:disabled { opacity: 0.55; cursor: default; }

/* chart */
.grafic { width: 100%; height: 240px; display: block; }
.grafic text { font-size: 11px; fill: var(--ink-3); font-family: inherit; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-2); padding: 0 12px; margin-top: 8px; }
.legenda i { display: inline-block; width: 18px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* categories */
.placi { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.placa { background: var(--panel); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; transition: background-color 120ms; }
.placa:hover { background: var(--hover); }
.placa b { font-size: 14px; font-weight: 600; }
.placa span { font-size: 12.5px; color: var(--ink-3); }
.subcategorii { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
.subcategorii a { padding: 5px 10px; border-radius: 9px; background: var(--sunk); font-size: 12.5px; color: var(--ink-2); }
.subcategorii a:hover { background: var(--active); }

/* chains matrix */
.celula { display: flex; justify-content: space-between; gap: 8px; }

/* waiting */
@keyframes asteapta { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.bara { display: block; height: 13px; border-radius: 4px; background: var(--active); animation: asteapta 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bara { animation: none; opacity: 0.7; } }

/* login */
.intrare { max-width: 420px; margin: 8vh auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.intrare form { width: 100%; display: flex; flex-direction: column; gap: 10px; background: var(--panel); border-radius: var(--r-lg); padding: 20px; }
.intrare input { height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--app); padding: 0 14px; outline: none; }
.intrare .mesaj { min-height: 18px; font-size: 13px; color: var(--bad); }
.nota { font-size: 12.5px; color: var(--ink-3); padding: 0 12px; }
.subsol { max-width: 1600px; margin: 0 auto; padding: 0 var(--gutter) 40px; font-size: 12px; color: var(--ink-3); }

/* the wait between two pages: a thin bar under the header, never a blank page */
body.incarca::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: linear-gradient(90deg, transparent, var(--acc), transparent); background-size: 40% 100%;
  animation: bara-sus 0.9s linear infinite;
}
@keyframes bara-sus { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { body.incarca::before { animation: none; background: var(--acc); } }
.file a .nr { font-size: 12px; opacity: 0.7; margin-left: 4px; }