/*
 * Portalul soferilor (/sofer), cu aspectul din filmul de prezentare.
 * ---------------------------------------------------------------------------
 * Negru, carduri gri inchis, titluri mari si un degrade portocaliu-roz-mov
 * pentru ce se apasa. Totul sta sub body.sofer, deci administrarea si portalul
 * contabilei nu sunt atinse. Ales de utilizator pe 30.10.2026: „culorile
 * aplicatiei soferilor trebuie sa ramana ca in video”.
 */

/* fisierul se incarca doar in portalul soferilor, deci si <html> e al lui:
   negru pana jos, si cand pagina e mai scurta decat ecranul */
html { background: #000; color-scheme: dark; }

body.sofer {
  --sf-fundal: #000;
  --sf-card: #1c1c1e;
  --sf-card-2: #2c2c2e;
  --sf-linie: rgba(255, 255, 255, .08);
  --sf-text: #f5f5f7;
  --sf-text-2: #98989f;
  --sf-text-3: #6e6e73;
  --sf-grad: linear-gradient(90deg, #ff7a1a 0%, #ff3d6e 52%, #a35cff 100%);
  --sf-grad-oblic: linear-gradient(135deg, #ff7a1a 0%, #ff3d6e 60%, #a35cff 100%);
  --sf-portocaliu: #ff8a2a;
  --sf-roz: #ff4f7b;
  --sf-mov: #a970ff;
  --sf-albastru: #4aa8ff;
  --sf-verde: #30d158;
  --sf-rosu: #ff453a;
  --sf-curba: cubic-bezier(0.32, 0.72, 0, 1);
  --sf-sus: env(safe-area-inset-top, 0px);
  --sf-jos: env(safe-area-inset-bottom, 0px);
  background: var(--sf-fundal);
  color: var(--sf-text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
}
body.sofer button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

/* ---------- campuri si butoane ---------- */

.sofer .sf-camp {
  display: block; width: 100%; height: 52px; margin: 0 0 10px; padding: 0 16px;
  background: var(--sf-card); color: var(--sf-text);
  border: 1px solid transparent; border-radius: 14px;
  font: inherit; font-size: 17px; outline: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.sofer .sf-camp::placeholder { color: var(--sf-text-3); }
.sofer .sf-camp:focus { border-color: rgba(255, 79, 123, .6); background: #232326; }
.sofer .sf-cod { text-align: center; letter-spacing: .5em; font-size: 24px; font-weight: 600; }

.sofer .sf-buton, .sofer .sf-buton-gri, .sofer .sf-buton-verde {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 54px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .25s var(--sf-curba), opacity .2s ease, background .3s ease, color .3s ease;
}
.sofer .sf-buton { background: var(--sf-grad); color: #fff; }
.sofer .sf-buton:disabled { opacity: .35; cursor: default; }
.sofer .sf-buton.trimis { background: var(--sf-verde); color: #04210d; }
.sofer .sf-buton-gri { background: var(--sf-card); color: var(--sf-text); }
.sofer .sf-buton-gri.rosu { color: var(--sf-rosu); margin-top: 22px; }
.sofer .sf-buton-text {
  display: block; width: 100%; margin-top: 10px; padding: 12px; border: 0; background: none;
  color: var(--sf-roz); font-size: 16px; font-weight: 500; cursor: pointer;
}
.sofer .sf-buton:active:not(:disabled), .sofer .sf-buton-gri:active,
.sofer .sf-dala:active, .sofer .sf-card.apasabil:active { transform: scale(.97); transition-duration: .08s; }

.sofer .sf-eroare { color: var(--sf-rosu); font-size: 14px; min-height: 0; margin: 2px 2px 10px; }
.sofer .sf-eroare:empty { display: none; }
.sofer .sf-nota { color: var(--sf-text-2); font-size: 13.5px; line-height: 1.45; margin: 6px 2px 12px; }
.sofer .sf-sub { color: var(--sf-text-2); font-size: 15px; line-height: 1.45; margin: 0 0 18px; }

/* ---------- conectarea ---------- */

.sofer .sf-intrare {
  max-width: 440px; margin: 0 auto;
  padding: calc(64px + var(--sf-sus)) 22px calc(40px + var(--sf-jos));
}
.sofer .sf-intrare-cap { text-align: center; margin-bottom: 34px; }
.sofer .sf-intrare-logo {
  width: 84px; height: 84px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 50px rgba(255, 61, 110, .25);
}
.sofer .sf-intrare-cap h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 18px 0 2px; }
.sofer .sf-intrare-cap p { color: var(--sf-text-2); font-size: 15px; margin: 0; }
.sofer .sf-intrare-corp h2 { font-size: 22px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 6px; }
.sofer .sf-tine-minte { display: flex; align-items: center; gap: 10px; color: var(--sf-text-2); font-size: 14.5px; margin: 4px 2px 14px; }
.sofer .sf-tine-minte input { width: 20px; height: 20px; accent-color: var(--sf-roz); }

/* fundalul cu cele doua lumini, ca in film */
.sofer #loginScreen::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(600px 420px at 20% 30%, rgba(255, 61, 110, .16), transparent 65%),
              radial-gradient(600px 420px at 85% 70%, rgba(163, 92, 255, .14), transparent 65%);
}

/* steagurile: in colt doar la conectare, apoi stau in „Eu” */
.sofer.sf-in-aplicatie .steaguri-plutitoare { display: none; }
.sofer .sf-limba .steaguri { display: flex; gap: 10px; }

/* ---------- aplicatia ---------- */

.sofer .sf-app { max-width: 560px; margin: 0 auto; }
/* Ecranul care intra aluneca 36px din dreapta. Fara taietura, in clipa aceea
   pagina iese mai lata decat telefonul, iar Chrome pe Android micsoreaza totul
   ca sa incapa (si bara de jos iese din ecran). */
body.sofer, .sofer .sf-app { overflow-x: clip; }
.sofer .sf-ecran {
  padding: calc(14px + var(--sf-sus)) 20px calc(110px + var(--sf-jos));
  min-height: 100vh;
}
.sofer .sf-ecran[hidden] { display: none; }
/* Trecerea intre ecrane (driver.js, arataEcran): cel care pleaca ramane fixat
   unde se vedea, cel care vine e in pagina. Fundal negru pe amandoua, ca la
   alunecare sa nu se vada unul prin altul. */
.sofer .sf-ecran.sf-pleaca {
  position: fixed; z-index: 1; margin: 0; pointer-events: none;
  background: var(--sf-fundal);
}
.sofer .sf-ecran.sf-vine { position: relative; z-index: 2; background: var(--sf-fundal); }
.sofer .sf-ecran.sf-pleaca.sf-deasupra { z-index: 3; }

.sofer .sf-titlu { font-size: 34px; font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
.sofer .sf-salut { color: var(--sf-text-2); font-size: 17px; margin-top: 18px; }
.sofer .sf-inapoi {
  display: inline-flex; border: 0; background: none; padding: 10px 0 4px; cursor: pointer;
  color: var(--sf-roz); font-size: 17px; font-weight: 500;
}
.sofer .sf-inapoi[hidden] { display: none; }
.sofer .sf-ecran:not(:has(.sf-inapoi:not([hidden]))) .sf-titlu:first-of-type { margin-top: 18px; }
.sofer .sf-sectiune { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin: 28px 2px 10px; }
.sofer .mic-sus, .sofer .sf-mic-sus {
  text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 600; color: var(--sf-text-2);
}

.sofer .sf-card { background: var(--sf-card); border-radius: 22px; padding: 16px 18px; }
.sofer .sf-card + .sf-card { margin-top: 10px; }

/* capul de pe Acasa: salutul si avatarul */
.sofer .sf-cap-acasa { display: flex; justify-content: space-between; align-items: flex-end; }
.sofer .sf-avatar {
  width: 42px; height: 42px; border-radius: 50%; border: 0; flex: 0 0 auto; cursor: pointer;
  background: var(--sf-grad-oblic); color: #fff; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.sofer .sf-avatar.mare { width: 64px; height: 64px; font-size: 22px; cursor: default; }

/* cardurile „de acum” de pe Acasa */
.sofer #sfAcum { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.sofer #sfAcum:empty { display: none; }
.sofer .sf-acum .sf-mare-text { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin: 6px 0 3px; }
.sofer .sf-acum .sf-detalii { color: var(--sf-text-2); font-size: 14px; }
.sofer .sf-acum .sf-progres { height: 5px; border-radius: 3px; background: var(--sf-card-2); margin-top: 14px; overflow: hidden; }
.sofer .sf-acum .sf-progres i { display: block; height: 100%; background: var(--sf-grad); border-radius: 3px; }
.sofer .sf-acum .sf-buton { height: 46px; font-size: 16px; margin-top: 14px; }
.sofer .sf-acum.cu-sageata { display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; width: 100%; border: 0; color: inherit; }
.sofer .sf-acum.cu-sageata > div { flex: 1; }
.sofer .sf-acum.cu-sageata::after { content: "›"; color: var(--sf-text-3); font-size: 24px; }

/* dalele 2x2 */
.sofer .sf-dale { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.sofer .sf-dala {
  background: var(--sf-card); border: 0; border-radius: 22px; height: 118px; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  text-align: left; cursor: pointer; transition: transform .3s var(--sf-curba), background-color .2s ease;
}
.sofer .sf-dala b { display: block; font-size: 16.5px; font-weight: 600; }
.sofer .sf-dala small { display: block; color: var(--sf-text-2); font-size: 12.5px; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sofer .sf-dala > span:last-child { max-width: 100%; }
.sofer .sf-ic { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sofer .sf-ic svg { width: 19px; height: 19px; }
.sofer .sf-ic.portocaliu { background: rgba(255, 138, 42, .16); color: var(--sf-portocaliu); }
.sofer .sf-ic.roz { background: rgba(255, 79, 123, .16); color: var(--sf-roz); }
.sofer .sf-ic.mov { background: rgba(169, 112, 255, .18); color: var(--sf-mov); }
.sofer .sf-ic.albastru { background: rgba(74, 168, 255, .16); color: var(--sf-albastru); }
.sofer .sf-ic.verde { background: rgba(48, 209, 88, .16); color: var(--sf-verde); }

/* ---------- calendarul de concediu ---------- */

.sofer .sf-luna-cap { display: flex; justify-content: space-between; align-items: center; margin: 22px 2px 10px; }
.sofer .sf-luna-cap b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.sofer .sf-luna-cap b::first-letter { text-transform: uppercase; }
.sofer .sf-sageata {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sf-card);
  color: var(--sf-text); font-size: 22px; line-height: 1; cursor: pointer; margin-left: 6px;
}
.sofer .sf-zile-sapt, .sofer .sf-saptamana { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.sofer .sf-zile-sapt span { color: var(--sf-text-3); font-size: 12px; font-weight: 600; padding-bottom: 6px; }
.sofer .sf-saptamana { position: relative; }
/* Calendarul trece pana la marginea ecranului (peste marginile de 20px ale
   ecranului), ca luna care pleaca sa iasa din ecran, nu sa fie taiata la
   jumatatea drumului. pan-y: sus-jos ramane derularea paginii, stanga-dreapta
   schimba luna (driver.js). */
.sofer .sf-cal {
  position: relative; overflow: hidden; margin: 0 -20px; padding: 0 20px;
  touch-action: pan-y;
}
.sofer .sf-cal-pagina.pleaca { position: absolute; top: 0; left: 20px; right: 20px; pointer-events: none; }
.sofer .sf-zi {
  position: relative; z-index: 1; height: 46px; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 500; color: var(--sf-text); font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}
.sofer .sf-zi.alta-luna { color: transparent; pointer-events: none; }
.sofer .sf-zi.liber { color: var(--sf-text-3); }
.sofer .sf-zi.azi { color: var(--sf-roz); font-weight: 700; }
/* concediile care exista deja: aprobat = verde plin estompat, in asteptare = contur */
.sofer .sf-zi.aprobat::before, .sofer .sf-zi.asteapta::before {
  content: ""; position: absolute; width: 38px; height: 38px; border-radius: 50%; z-index: -1;
}
.sofer .sf-zi.aprobat::before { background: rgba(48, 209, 88, .2); }
.sofer .sf-zi.aprobat { color: #7ee89a; }
.sofer .sf-zi.asteapta::before { border: 1.5px dashed rgba(255, 138, 42, .8); }
/* alegerea: banda in degrade, pe fiecare rand al saptamanii */
/* Banda se lungeste si se scurteaza lin cand adaugi sau scoti zile: driver.js
   ii schimba doar left si width (deseneazaAlegerea). */
.sofer .sf-banda {
  position: absolute; top: 4px; height: 38px; border-radius: 19px; background: var(--sf-grad);
  z-index: 0; pointer-events: none;
  transition: left .4s var(--sf-curba), width .4s var(--sf-curba);
}
.sofer .sf-banda.fara-tranzitie { transition: none; }
.sofer .sf-zi.ales { color: #fff; font-weight: 600; }
.sofer .sf-zi.ales::before { display: none; }

.sofer .sf-legenda { display: flex; gap: 16px; margin: 10px 4px 0; color: var(--sf-text-3); font-size: 12.5px; }
.sofer .sf-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.sofer .sf-legenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sofer .sf-legenda i.aprobat { background: rgba(48, 209, 88, .55); }
.sofer .sf-legenda i.asteapta { border: 1.5px dashed var(--sf-portocaliu); }
.sofer .sf-legenda i.azi { background: var(--sf-roz); }

.sofer .sf-rezumat { margin-top: 16px; position: relative; }
.sofer .sf-rezumat .sf-sterge {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .08); color: var(--sf-text-2);
  font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sofer .sf-rezumat .sf-sterge:active { background: rgba(255, 255, 255, .16); }
.sofer .sf-rezumat b { font-size: 18px; font-weight: 600; }
.sofer .sf-rezumat p { color: var(--sf-text-2); font-size: 14px; margin: 3px 0 0; }

.sofer .sf-segment {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--sf-card); border-radius: 14px; margin: 12px 0 10px;
}
.sofer .sf-segment button {
  height: 40px; border: 0; border-radius: 11px; background: none; cursor: pointer;
  color: var(--sf-text-2); font-size: 15px; font-weight: 600;
  transition: background-color .25s ease, color .25s ease;
}
.sofer .sf-segment button.ales { background: var(--sf-card-2); color: var(--sf-text); }

/* cererile mele */
.sofer .sf-cerere { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.sofer .sf-cerere b { font-size: 16px; font-weight: 600; display: block; }
.sofer .sf-cerere p { color: var(--sf-text-2); font-size: 13.5px; margin: 3px 0 0; line-height: 1.4; }
.sofer .sf-stare {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
}
.sofer .sf-stare.approved { background: rgba(48, 209, 88, .16); color: var(--sf-verde); }
.sofer .sf-stare.pending { background: rgba(255, 138, 42, .16); color: var(--sf-portocaliu); }
.sofer .sf-stare.rejected { background: rgba(255, 69, 58, .16); color: var(--sf-rosu); }
.sofer .sf-anuleaza {
  margin-top: 12px; border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--sf-rosu); font-size: 14.5px; font-weight: 500;
}

/* ---------- lunile (cipuri) ---------- */

.sofer .sf-cipuri {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 18px -20px 14px; padding: 0 20px;
}
.sofer .sf-cipuri::-webkit-scrollbar { display: none; }
.sofer .sf-cip {
  flex: 0 0 auto; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px;
  background: var(--sf-card); color: var(--sf-text-2); font-size: 14.5px; font-weight: 600;
  transition: background-color .25s ease, color .25s ease;
}
.sofer .sf-cip span:first-child { text-transform: capitalize; }
.sofer .sf-cip small { font-size: 12px; font-weight: 500; opacity: .7; margin-left: 4px; }
.sofer .sf-cip.ales { background: #fff; color: #000; }

/* ---------- fluturasul si diurna ---------- */

.sofer .sf-bani .sf-mic-sus span:first-child { text-transform: uppercase; }
.sofer .sf-suma { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 4px; }
.sofer .sf-suma small { color: var(--sf-text-2); font-size: 18px; font-weight: 500; }
.sofer .sf-suma b { font-size: 46px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sofer .sf-sub-suma { color: var(--sf-text-2); font-size: 14px; margin-bottom: 12px; }
.sofer .sf-linii > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 15px; border-top: .5px solid var(--sf-linie); }
.sofer .sf-linii > div > span:first-child { color: var(--sf-text-2); }
.sofer .sf-linii > div > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sofer .sf-linii small { display: block; color: var(--sf-text-3); font-size: 12.5px; margin-top: 2px; }
.sofer .sf-linii .gros span { color: var(--sf-text) !important; }
.sofer .sf-buton-pdf {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px;
  height: 52px; border-radius: 999px; background: var(--sf-card); text-decoration: none;
  color: var(--sf-portocaliu); font-weight: 600; font-size: 16px;
}
.sofer .sf-buton-pdf:active { transform: scale(.97); }
.sofer .sf-eticheta-mica {
  display: inline-block; margin: 0 0 10px; padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 138, 42, .14); color: var(--sf-portocaliu); font-size: 12.5px; font-weight: 600;
}
.sofer .sf-gol { text-align: center; color: var(--sf-text-2); font-size: 15px; line-height: 1.5; padding: 34px 18px; }
.sofer .sf-gol svg { width: 44px; height: 44px; color: var(--sf-text-3); display: block; margin: 0 auto 12px; }
.sofer .sf-bani-intra { animation: sf-loc .35s ease both; }

/* ---------- documente ---------- */

.sofer .sf-rand { display: flex; align-items: center; gap: 12px; }
.sofer .sf-rand > div { flex: 1; min-width: 0; }
.sofer .sf-rand b { display: block; font-size: 16px; font-weight: 600; }
.sofer .sf-rand p { color: var(--sf-text-2); font-size: 13.5px; margin: 2px 0 0; }
.sofer .sf-rand a, .sofer .sf-rand .sf-mic-buton {
  flex: 0 0 auto; text-decoration: none; border: 0; cursor: pointer;
  padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
}
.sofer .sf-rand a { background: var(--sf-card-2); color: var(--sf-portocaliu); }
.sofer .sf-rand .sf-mic-buton { background: var(--sf-grad); color: #fff; }
.sofer .sf-rand .sf-ok { color: var(--sf-verde); font-size: 13.5px; font-weight: 600; flex: 0 0 auto; }

/* ---------- eu ---------- */

.sofer .sf-profil { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.sofer .sf-profil b { font-size: 19px; font-weight: 600; }
.sofer .sf-profil p { color: var(--sf-text-2); font-size: 14px; margin: 2px 0 0; }

/* ---------- bara de jos ---------- */

.sofer .sf-bara {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around; align-items: flex-start;
  height: calc(64px + var(--sf-jos)); padding: 8px 0 var(--sf-jos);
  background: rgba(14, 14, 16, .94); border-top: .5px solid var(--sf-linie);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sofer .sf-bara {
    background: rgba(18, 18, 20, .72);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
  }
}
.sofer .sf-bara button {
  width: 76px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--sf-text-3); font-size: 10.5px; font-weight: 600; transition: color .2s ease;
}
.sofer .sf-bara button svg { width: 25px; height: 25px; transition: transform .3s var(--sf-curba); }
.sofer .sf-bara button.activ { color: var(--sf-portocaliu); }
.sofer .sf-bara button:active svg { transform: scale(.88); }

/* bara „Adauga pe ecranul principal” sta deasupra barei de jos */
.sofer.sf-in-aplicatie .pwa-bar { bottom: calc(74px + var(--sf-jos)); }

/* toast: deasupra barei de jos */
.sofer .toast { bottom: calc(84px + var(--sf-jos)); }

@media (prefers-reduced-motion: reduce) {
  .sofer .sf-bani-intra { animation: none; }
  .sofer .sf-banda, .sofer .sf-zi { transition: none; }
}
.sofer .sf-rezumat p.sf-pas { color: var(--sf-roz); font-weight: 500; }
/* sageata din „‹ Acasă” e desenata aici, ca textul sa ramana doar „Acasă” (si
   sa-l gaseasca dictionarul) */
.sofer .sf-inapoi::before { content: "‹"; margin-right: 5px; }

/* ecranul de pornire: negru, cu cele doua lumini, iar dunga de jos in degrade */
html body.sofer .start-ecran {
  background: radial-gradient(520px 380px at 25% 35%, rgba(255, 61, 110, .18), transparent 65%),
              radial-gradient(520px 380px at 80% 70%, rgba(163, 92, 255, .16), transparent 65%), #000;
}
.sofer .start-ecran::after { background: var(--sf-grad); }
.sofer .start-bara i { background: var(--sf-grad); }