/* Companion — alb, gri, accent roșu. SF Pro. Pastile rotunde peste tot. */

:root {
  --sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
  --text: "SF Pro Text", -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --bg: #f2f2f7;
  --card: #ffffff;
  --fill: #eeeef3;
  --fill-2: #e5e5ec;
  --track: #e9e9ef;

  --ink: #1c1c1e;
  --muted: #56565a;
  --faint: #6c6c70;
  --hair: rgba(60, 60, 67, 0.09);

  --red: #c8161f;
  --red-dark: #ae1219;
  --red-soft: rgba(200, 22, 31, 0.10);
  --red-soft-2: rgba(200, 22, 31, 0.18);

  --ok: #1d7a4c;
  --ok-soft: rgba(29, 122, 76, 0.12);
  --warn: #8a5500;
  --warn-soft: rgba(138, 85, 0, 0.12);

  --pill: 999px;
  --r-card: 22px;
  --r-tile: 16px;

  --sh: 0 0.5px 1px rgba(28,28,30,0.04), 0 2px 6px rgba(28,28,30,0.04), 0 10px 26px rgba(28,28,30,0.055);
  --sh-red: 0 1px 2px rgba(174,18,25,0.18), 0 6px 16px rgba(200,22,31,0.22);
  --sh-bar: 0 -6px 24px rgba(28,28,30,0.05);

  /* Zone sigure ale telefonului. Pe planșe sunt 0; pe telefon le umple sistemul. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

/* ---------- Schelet ---------- */

.scr {
  position: relative;
  width: 100%; height: 100dvh; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: var(--bg); overflow: hidden;
}
@supports not (height: 100dvh) { .scr { height: 100vh; } }

.hdr {
  flex: none; box-sizing: border-box;
  padding: calc(16px + var(--sat)) calc(16px + var(--sar)) 14px calc(16px + var(--sal));
  background: rgba(242,242,247,0.86);
  backdrop-filter: blur(22px) saturate(1.8);
  display: flex; flex-direction: column; gap: 14px;
}
.hdr__bar { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.hdr__grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hdr__title { margin: 0; font-family: var(--sans); font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.028em; }
.hdr__name { font-family: var(--sans); font-size: 17px; line-height: 21px; font-weight: 600; letter-spacing: -0.015em; }
.hdr__sub { font-size: 13px; line-height: 17px; color: var(--faint); letter-spacing: -0.005em; }

.body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  scroll-padding-bottom: 28px;
  box-sizing: border-box;
  padding: 2px calc(16px + var(--sar)) 24px calc(16px + var(--sal));
  display: flex; flex-direction: column; gap: 16px;
}
/* Pe ecrane mici conținutul nu se turtește, se derulează. */
.body > *, .grp > * { flex: 0 0 auto; }

.grp { display: flex; flex-direction: column; gap: 8px; }
.grp__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px; min-height: 28px; }
.lbl { margin: 0; font-family: var(--sans); font-size: 12px; line-height: 15px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--faint); }

.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Card ---------- */

.card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh); padding: 18px; }
.card--list { padding: 6px; }
.card__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card__t { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.015em; }
.card__s { font-size: 13px; line-height: 17px; color: var(--faint); }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh); padding: 20px; }
.hero::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 210px; height: 210px; border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(200,22,31,0.09), rgba(200,22,31,0));
}
.hero__eye { position: relative; font-family: var(--sans); font-size: 12px; line-height: 15px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--red); }
.hero__t { position: relative; margin: 7px 0 18px; font-family: var(--sans); font-size: 34px; line-height: 38px; font-weight: 700; letter-spacing: -0.032em; }
.hero__row { position: relative; display: flex; gap: 8px; }
.hero__cell { flex: 1 1 0; min-width: 0; padding: 12px 14px; border-radius: var(--r-tile); background: var(--fill); }
.hero__n { font-family: var(--sans); font-size: 25px; line-height: 27px; font-weight: 700; letter-spacing: -0.028em; }
.hero__l { margin-top: 4px; font-size: 12px; line-height: 15px; color: var(--faint); }

/* ---------- Rânduri ---------- */

.rows { display: flex; flex-direction: column; }
.row {
  position: relative; display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 66px; box-sizing: border-box;
  padding: 13px 12px; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--text); color: var(--ink); text-decoration: none;
}
.row::before { content: ""; position: absolute; inset: 3px; border-radius: var(--r-tile); background: transparent; transition: background-color 120ms cubic-bezier(.32,.72,0,1); }
.row > * { position: relative; }
.row + .row::after { content: ""; position: absolute; left: 65px; right: 12px; top: 0; height: 1px; background: var(--hair); }
.row:hover::before, .row.is-hover::before { background: var(--fill); }
.row:active::before, .row.is-pressed::before { background: var(--fill-2); }
.row:focus-visible { outline: 3px solid var(--red-soft-2); outline-offset: -4px; border-radius: var(--r-tile); }
.row--plain { padding-left: 16px; }
.row--plain + .row--plain::after { left: 16px; }

.row__m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row__t { font-family: var(--sans); font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: -0.015em; }
.row__s { font-size: 13px; line-height: 17px; color: var(--muted); letter-spacing: -0.005em; }
.row__r { flex: none; display: flex; align-items: center; gap: 9px; }
.chev { display: inline-flex; color: #c3c3c8; }
.chev svg { width: 17px; height: 17px; }

/* ---------- Plăcuță ---------- */

.tile {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; background: var(--fill); color: var(--muted);
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
}
.tile svg { width: 19px; height: 19px; }
.tile--red { background: var(--red-soft); color: var(--red); }
.tile--warn { background: var(--warn-soft); color: var(--warn); }
.tile--ok { background: var(--ok-soft); color: var(--ok); }

/* ---------- Insignă ---------- */

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--pill);
  background: var(--fill); color: var(--muted);
  font-family: var(--sans); font-size: 12px; line-height: 15px; font-weight: 600; letter-spacing: 0;
  white-space: nowrap;
}
.tag--red { background: var(--red-soft); color: var(--red); }
.tag--warn { background: var(--warn-soft); color: var(--warn); }
.tag--ok { background: var(--ok-soft); color: var(--ok); }
.tag__d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Butoane: pastile pline ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px; box-sizing: border-box;
  border: 0; border-radius: var(--pill); cursor: pointer;
  background: var(--fill); color: var(--ink); text-decoration: none;
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
  transition: background-color 120ms cubic-bezier(.32,.72,0,1);
}
.btn:hover { background: var(--fill-2); }
.btn:active { background: #dcdce4; }
.btn:focus-visible { outline: 3px solid var(--red-soft-2); outline-offset: 2px; }
.btn[disabled] { opacity: 0.4; cursor: default; }
.btn svg { width: 19px; height: 19px; }

.btn--red { background: var(--red); color: #fff; box-shadow: var(--sh-red); }
.btn--red:hover { background: #bd1420; }
.btn--red:active { background: var(--red-dark); }
.btn--ok { background: var(--ok); color: #fff; }
.btn--ok:hover { background: #196a42; }
.btn--teal { background: #0b6e5b; color: #fff; }
.btn--teal:hover { background: #09604f; }

.btn--sm { min-height: 36px; padding: 0 15px; font-size: 14px; }
.btn--sm svg { width: 16px; height: 16px; }
.btn--ico { width: 44px; min-height: 44px; padding: 0; flex: none; }
.btn--full { width: 100%; }
.btn--quiet { background: transparent; color: var(--red); }
.btn--quiet:hover { background: var(--red-soft); }

/* ---------- Segmentat ---------- */

.seg { display: flex; width: 100%; box-sizing: border-box; padding: 3px; gap: 3px; border-radius: var(--pill); background: var(--track); }
.seg__i {
  flex: 1 1 0; min-height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; border-radius: var(--pill); background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--muted); white-space: nowrap;
}
.seg__i.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(28,28,30,0.08), 0 3px 8px rgba(28,28,30,0.06); }
.seg__n { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: var(--pill); background: rgba(60,60,67,0.10); }
.seg__i.is-on .seg__n { background: var(--red-soft); color: var(--red); }

/* ---------- Chipsuri ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 14px; border: 0; border-radius: var(--pill); cursor: pointer;
  background: var(--red-soft); color: var(--red);
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.chip--off { background: var(--fill); color: var(--muted); }
.chip svg { width: 11px; height: 11px; }

/* ---------- Căutare ---------- */

.search { position: relative; display: flex; align-items: center; }
.search__i { position: absolute; left: 17px; display: inline-flex; color: var(--faint); pointer-events: none; }
.search__i svg { width: 18px; height: 18px; }
.field {
  width: 100%; min-height: 46px; box-sizing: border-box;
  padding: 0 18px 0 46px; border: 0; border-radius: var(--pill);
  background: var(--track); color: var(--ink);
  font-family: var(--text); font-size: 16px; letter-spacing: -0.01em;
}
.field::placeholder { color: var(--faint); }
.field:focus { outline: 0; background: var(--card); box-shadow: 0 0 0 3px var(--red-soft-2), var(--sh); }

/* ---------- Comutator ---------- */

.sw { width: 51px; height: 31px; flex: none; padding: 0; border: 0; cursor: pointer; border-radius: var(--pill); background: #dedee5; position: relative; transition: background-color 150ms cubic-bezier(.32,.72,0,1); }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(28,28,30,0.14), 0 3px 8px rgba(28,28,30,0.12); transition: transform 150ms cubic-bezier(.32,.72,0,1); }
.sw.is-on { background: var(--red); }
.sw.is-on::after { transform: translateX(20px); }

/* ---------- Indicatori ---------- */

.stats { display: flex; gap: 10px; }
.stat { flex: 1 1 0; min-width: 0; padding: 16px 18px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh); }
.stat__v { font-family: var(--sans); font-size: 30px; line-height: 32px; font-weight: 700; letter-spacing: -0.03em; }
.stat--red .stat__v { color: var(--red); }
.stat__l { margin-top: 5px; font-size: 12px; line-height: 15px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--faint); }

.bar { height: 8px; border-radius: var(--pill); background: var(--track); overflow: hidden; }
.bar__f { height: 100%; border-radius: var(--pill); background: var(--red); }

/* Pastilă numerică — o singură cifră, fără text înăuntru */
.num {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; background: var(--fill); color: var(--muted);
  font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.num--red { background: var(--red-soft); color: var(--red); }
.num--warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- Bara de jos ---------- */

.tabs {
  flex: none; display: flex; gap: 4px;
  box-sizing: border-box; min-height: 72px;
  padding: 6px calc(8px + var(--sar)) calc(14px + var(--sab)) calc(8px + var(--sal));
  background: rgba(255,255,255,0.84);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: var(--sh-bar);
}
.tab {
  flex: 1 1 0; min-width: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: var(--pill); color: var(--faint); text-decoration: none; padding: 0;
}
.tab.is-on { background: var(--red-soft); color: var(--red); }
.tab svg { width: 22px; height: 22px; }
.tab__l { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: -0.005em; }

.actions {
  flex: none; display: flex; gap: 10px; align-items: center;
  box-sizing: border-box;
  padding: 12px calc(16px + var(--sar)) calc(18px + var(--sab)) calc(16px + var(--sal));
  background: rgba(255,255,255,0.84);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: var(--sh-bar);
}

/* ---------- Stări ---------- */

.skel { display: block; border-radius: var(--pill); background: rgba(60,60,67,0.09); }
.spin { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid rgba(60,60,67,0.13); border-top-color: var(--red); animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 34px 22px; }
.empty__a { width: 62px; height: 62px; margin: 0 auto 15px; border-radius: 20px; display: grid; place-items: center; background: var(--red-soft); color: var(--red); }
.empty__t { margin: 0 0 7px; font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.empty__s { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }

/* ---------- Foi, meniuri, alerte ---------- */

.ovl { position: absolute; inset: 0; background: rgba(28,28,30,0.32); }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  max-height: 88%;
  background: var(--bg);
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -10px 50px rgba(28,28,30,0.26);
  padding: 10px 16px calc(22px + var(--sab));
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
.grip { width: 38px; height: 5px; flex: none; border-radius: var(--pill); background: #d7d7de; margin: 0 auto; }
.sheet__hd { display: flex; align-items: center; gap: 12px; }
.sheet__g { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sheet__t { margin: 0; font-family: var(--sans); font-size: 22px; line-height: 27px; font-weight: 700; letter-spacing: -0.024em; }
.sheet__s { font-size: 13px; line-height: 18px; color: var(--muted); }
.sheet__b { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }

.menu { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh); padding: 6px; }
.mi {
  display: flex; align-items: center; gap: 13px; width: 100%; box-sizing: border-box;
  min-height: 54px; padding: 10px 12px; border: 0; border-radius: var(--r-tile);
  background: transparent; cursor: pointer; text-align: left; text-decoration: none;
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
}
.mi:hover { background: var(--fill); }
.mi svg { width: 20px; height: 20px; flex: none; color: var(--faint); }
.mi--red { color: var(--red); }
.mi--red svg { color: var(--red); }
.mi__g { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mi__s { font-family: var(--text); font-size: 13px; line-height: 17px; font-weight: 400; color: var(--muted); }

.alert {
  position: absolute; left: 30px; right: 30px; top: 50%; transform: translateY(-50%);
  box-sizing: border-box; background: var(--card); border-radius: 26px;
  box-shadow: 0 24px 64px rgba(28,28,30,0.32);
  padding: 26px 22px 18px; text-align: center;
}
.alert__t { margin: 0 0 8px; font-family: var(--sans); font-size: 18px; line-height: 23px; font-weight: 700; letter-spacing: -0.02em; }
.alert__s { margin: 0 0 20px; font-size: 14px; line-height: 20px; color: var(--muted); }

/* ---------- Formular ---------- */

.fld { display: flex; flex-direction: column; gap: 7px; }
.fld__l { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--muted); padding-left: 16px; }
.inp {
  width: 100%; min-height: 50px; box-sizing: border-box;
  padding: 0 18px; border: 0; border-radius: var(--pill);
  background: var(--card); color: var(--ink); box-shadow: var(--sh);
  font-family: var(--text); font-size: 16px; letter-spacing: -0.01em;
}
.inp::placeholder { color: var(--faint); }
.inp:focus { outline: 0; box-shadow: 0 0 0 3px var(--red-soft-2), var(--sh); }
.inp--area { min-height: 92px; padding: 14px 18px; border-radius: 22px; resize: none; font-family: var(--text); line-height: 21px; }
.picks { display: flex; flex-wrap: wrap; gap: 7px; }
.pick {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--pill); cursor: pointer;
  background: var(--card); color: var(--muted); box-shadow: var(--sh);
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
}
.pick.is-on { background: var(--red); color: #fff; box-shadow: var(--sh-red); }

/* ---------- Perechi cheie–valoare ---------- */

.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 11px 0; }
.kv + .kv { box-shadow: inset 0 1px 0 var(--hair); }
.kv__k { flex: none; font-size: 13px; line-height: 18px; color: var(--faint); }
.kv__v { font-family: var(--sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.015em; text-align: right; }

/* ---------- Avatar ---------- */

.ava {
  flex: none; display: grid; place-items: center; border-radius: 50%;
  width: 44px; height: 44px; background: var(--fill); color: var(--muted);
  font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
}
.ava--red { background: var(--red-soft); color: var(--red); }
.ava--lg { width: 76px; height: 76px; font-size: 27px; }

/* ---------- Cronologie ---------- */

.tl { display: flex; flex-direction: column; }
.tl__i { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.tl__i:last-child { padding-bottom: 0; }
.tl__i::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: 0; width: 2px; background: var(--hair); }
.tl__i:last-child::before { display: none; }
.tl__d { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; }
.tl__d::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b9b9c0; }
.tl__d--red { background: var(--red-soft); }
.tl__d--red::after { background: var(--red); }
.tl__d--ok { background: var(--ok-soft); }
.tl__d--ok::after { background: var(--ok); }
.tl__g { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tl__t { font-family: var(--sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.015em; }
.tl__s { font-size: 13px; line-height: 18px; color: var(--muted); }

/* ---------- Toast, tooltip, dropdown ---------- */

.toast {
  display: flex; align-items: center; gap: 12px; box-sizing: border-box;
  padding: 13px 18px; border-radius: var(--pill);
  background: #1c1c1e; color: #fff;
  box-shadow: 0 8px 28px rgba(28,28,30,0.3);
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.015em;
}
.toast svg { width: 19px; height: 19px; flex: none; }
.toast--ok svg { color: #4ade80; }
.toast--red svg { color: #ff8a92; }
.toast__a { margin-left: auto; padding: 0; border: 0; background: transparent; cursor: pointer; color: #ff8a92; font-family: inherit; font-size: inherit; font-weight: 600; letter-spacing: inherit; }

.tip {
  display: inline-block; box-sizing: border-box; max-width: 230px;
  padding: 9px 13px; border-radius: 14px;
  background: #1c1c1e; color: #fff;
  font-size: 13px; line-height: 18px; letter-spacing: -0.005em;
  box-shadow: 0 6px 20px rgba(28,28,30,0.26);
}

.dd {
  box-sizing: border-box; width: 240px; padding: 6px;
  background: var(--card); border-radius: 18px;
  box-shadow: 0 2px 6px rgba(28,28,30,0.08), 0 14px 40px rgba(28,28,30,0.16);
}
.dd__i {
  display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box;
  min-height: 42px; padding: 8px 12px; border: 0; border-radius: 12px;
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
}
.dd__i:hover { background: var(--fill); }
.dd__i.is-on { color: var(--red); }
.dd__i svg { width: 18px; height: 18px; flex: none; color: var(--faint); }
.dd__i.is-on svg { color: var(--red); }
.dd__sep { height: 1px; margin: 5px 12px; background: var(--hair); }

/* ---------- Planșe de specificație ---------- */

.spec { box-sizing: border-box; padding: 48px; display: flex; flex-direction: column; gap: 40px; background: var(--bg); }
.spec__h { margin: 0; font-family: var(--sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.spec__t { margin: 0 0 6px; font-family: var(--sans); font-size: 38px; line-height: 42px; font-weight: 700; letter-spacing: -0.03em; }
.spec__s { margin: 0; font-size: 16px; line-height: 23px; color: var(--muted); max-width: 640px; }
.spec__g { display: flex; flex-direction: column; gap: 16px; }
.panel { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh); padding: 24px; }

.sws { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sw-c { display: flex; flex-direction: column; gap: 9px; }
.sw-c__p { height: 62px; border-radius: var(--r-tile); box-shadow: inset 0 0 0 1px rgba(28,28,30,0.07); }
.sw-c__n { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.sw-c__v { font-family: var(--mono); font-size: 11px; color: var(--faint); }

.specrow { display: flex; align-items: flex-end; gap: 20px; padding: 13px 0; }
.specrow + .specrow { box-shadow: inset 0 1px 0 var(--hair); }
.specrow__l { flex: none; width: 150px; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.specrow__d { flex: none; width: 170px; font-size: 12px; color: var(--faint); }

.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: center; }
.grid5 { display: grid; grid-template-columns: 110px repeat(5, minmax(0, 1fr)); gap: 14px; align-items: center; }
.cellh { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--faint); }

.icn { border-radius: 22%; box-shadow: 0 2px 6px rgba(28,28,30,0.1), 0 10px 26px rgba(28,28,30,0.14); display: grid; place-items: center; background: linear-gradient(160deg, #e8232e 0%, #c8161f 55%, #9d0f16 100%); }
.icn__m { font-family: var(--sans); font-weight: 700; color: #fff; letter-spacing: -0.04em; }

@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
  .row::before, .btn, .sw, .sw::after { transition: none; }
}

/* ---------- Ecran mai lung decât telefonul (planșă de derulare) ---------- */

.scr--tall { height: auto; min-height: 100dvh; }
.scr--tall .body { overflow: visible; }
.scr--tall .hdr { position: sticky; top: 0; z-index: 2; }