/* =====================================================================
   YeY, stilul de sticlă: COMPONENTELE, în CSS simplu.
   Se încarcă DUPĂ yey-glass-tokens.css. Toate clasele au prefixul „yg-".

   Cum e făcută sticla, ca să poată fi refăcută oriunde (aceeași rețetă în
   aplicație și în macheta aprobată):
     1. un fond de sub ea care se schimbă (degrade + lumini moi), altfel o
        sticlă peste o culoare plată e doar un dreptunghi mai deschis;
     2. un degrade VERTICAL de alb transparent (mai mult sus, mai puțin jos);
     3. două muchii luminate: sus luminoasă și groasă (1,2px), jos mai stinsă
        (1px), laturile foarte fine (0,5px). O bordură uniformă ar arăta ca o ramă;
     4. pe sticla colorată de pe noapte, un strat de FUM sub culoare, ca eticheta
        să rămână citibilă orice ar fi în spate.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Baza
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--yg-page); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--yg-font);
  font-size: var(--yg-body-size);
  line-height: var(--yg-body-lh);
  font-weight: var(--yg-body-weight);
  color: var(--yg-ink);
  /* Transparent: culoarea paginii stă pe <html>. Pe <body> ar acoperi fundalul cu lumini
     (.yg-ground stă pe z-index -1, deci SUB fondul lui body). */
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------
   1. Fundalul de sub sticlă: trei opriri la 165°, plus trei lumini moi.
      Luminile dispar la 70% din rază, ca marginea lor să nu se vadă.
   --------------------------------------------------------------------- */
.yg-ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 45% at 25% 18%, var(--yg-light-honey) 0%, transparent 70%),
    radial-gradient(65% 40% at 80% 62%, var(--yg-light-titan) 0%, transparent 70%),
    radial-gradient(60% 35% at 15% 88%, var(--yg-light-amber) 0%, transparent 70%),
    linear-gradient(165deg, var(--yg-ground-top) 0%, var(--yg-ground-mid) 55%, var(--yg-ground-bottom) 100%);
}

/* Pânza difuză: fundalul pe care îl aduce o fereastră când în spate e un ecran
   simplu, fără fotografie. Trei cercuri mari, topite de o estompare puternică. */
.yg-diffuse {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--yg-page);
  pointer-events: none;
}
.yg-diffuse::before,
.yg-diffuse::after,
.yg-diffuse > i {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(var(--yg-blur-diffuse));
}
.yg-diffuse::before { top: -180px; left: -160px; background: var(--yg-diffuse-warm); opacity: 0.5; }
.yg-diffuse::after { top: 180px; right: -240px; background: var(--yg-diffuse-cool); opacity: 0.22; }
.yg-diffuse > i { bottom: -240px; left: -40px; background: var(--yg-diffuse-warm); opacity: 0.3; }

/* ---------------------------------------------------------------------
   2. Tipografie: șapte trepte. Una singură „display" pe ecran.
   --------------------------------------------------------------------- */
.yg-display { font-size: var(--yg-display-size); font-weight: var(--yg-display-weight); letter-spacing: var(--yg-display-track); line-height: var(--yg-display-lh); }
.yg-title   { font-size: var(--yg-title-size);   font-weight: var(--yg-title-weight);   letter-spacing: var(--yg-title-track);   line-height: var(--yg-title-lh); }
.yg-heading { font-size: var(--yg-heading-size); font-weight: var(--yg-heading-weight); letter-spacing: var(--yg-heading-track); line-height: var(--yg-heading-lh); }
.yg-body    { font-size: var(--yg-body-size);    font-weight: var(--yg-body-weight);    letter-spacing: var(--yg-body-track);    line-height: var(--yg-body-lh); }
.yg-label   { font-size: var(--yg-label-size);   font-weight: var(--yg-label-weight);   letter-spacing: var(--yg-label-track);   line-height: var(--yg-label-lh); }
.yg-caption { font-size: var(--yg-caption-size); font-weight: var(--yg-caption-weight); letter-spacing: var(--yg-caption-track); line-height: var(--yg-caption-lh); }
.yg-micro   { font-size: var(--yg-micro-size);   font-weight: var(--yg-micro-weight);   letter-spacing: var(--yg-micro-track);   line-height: var(--yg-micro-lh); }
.yg-muted { color: var(--yg-ink-muted); }
.yg-faint { color: var(--yg-ink-faint); }
.yg-money { color: var(--yg-gold); }
.yg-h, .yg-p { margin: 0; }

/* ---------------------------------------------------------------------
   3. Materialul: un geam. Variantele schimbă doar cele cinci variabile.
   --------------------------------------------------------------------- */
/* Rețeta se aplică direct tuturor pieselor de sticlă, ca să nu trebuiască două clase. */
.yg-pane,
.yg-card,
.yg-topbar,
.yg-tabbar,
.yg-tab--sell .yg-tab__pill,
.yg-btn--primary,
.yg-btn--secondary,
.yg-btn--money,
.yg-photo-panel,
.yg-empty__mark {
  --_base: var(--yg-plate-base);
  --_top: var(--yg-plate-top);
  --_bottom: var(--yg-plate-bottom);
  --_rim-top: var(--yg-plate-rim-top);
  --_rim-bottom: var(--yg-plate-rim-bottom);
  --_shadow: 0 0 #0000;
  background:
    linear-gradient(180deg, var(--_top), var(--_bottom)),
    linear-gradient(var(--_base), var(--_base));
  box-shadow:
    inset 0 var(--yg-rim-top-w) 0 var(--_rim-top),
    inset 0 calc(-1 * var(--yg-rim-bottom-w)) 0 var(--_rim-bottom),
    inset var(--yg-rim-side-w) 0 0 var(--_rim-bottom),
    inset calc(-1 * var(--yg-rim-side-w)) 0 0 var(--_rim-bottom),
    var(--_shadow);
}
.yg-blur {
  -webkit-backdrop-filter: blur(var(--yg-blur-plate)) saturate(var(--yg-sat-plate));
  backdrop-filter: blur(var(--yg-blur-plate)) saturate(var(--yg-sat-plate));
}

/* Cartonașul (placa): suprafața a doua. */
.yg-card {
  border-radius: var(--yg-r-lg);
  padding: var(--yg-s-lg);
  --_shadow: var(--yg-shadow-card);
}
.yg-card--raised { --_shadow: var(--yg-shadow-raised); }

/* Blocul încastrat în placă: mai închis, luminat doar pe muchia de sus. */
.yg-inset {
  background: var(--yg-inset);
  box-shadow: inset 0 1px 0 var(--yg-inset-rim);
  border-radius: var(--yg-r-md);
}

/* ---------------------------------------------------------------------
   4. Bara de sus
   --------------------------------------------------------------------- */
/* a) Peste o fotografie: estompare închisă + fum + placa de NOAPTE, pe ambele teme. */
.yg-topbar {
  position: sticky;
  top: 10px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 10px;
  min-height: var(--yg-touch);
  padding: 6px 12px;
  border-radius: var(--yg-r-lg);
  color: var(--yg-ink-light);
  --_base: var(--yg-panel-fill);
  --_top: rgba(255, 255, 255, 0.10);
  --_bottom: rgba(255, 255, 255, 0.03);
  --_rim-top: rgba(255, 255, 255, 0.42);
  --_rim-bottom: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(var(--yg-blur-panel)) saturate(var(--yg-sat-panel)) brightness(0.85);
  backdrop-filter: blur(var(--yg-blur-panel)) saturate(var(--yg-sat-panel)) brightness(0.85);
}
.yg-topbar__title { flex: 1; font-size: var(--yg-label-size); font-weight: var(--yg-label-weight); }

/* b) Antetul unui ecran obișnuit: titlu + subtitlu + controale de 44px. */
.yg-header {
  display: flex;
  align-items: center;
  gap: var(--yg-s-sm);
  min-height: var(--yg-touch);
  padding: var(--yg-s-md) 0;
}
.yg-header__titles { flex: 1; }
.yg-header__title { margin: 0; font-size: var(--yg-title-size); font-weight: var(--yg-title-weight); letter-spacing: var(--yg-title-track); line-height: var(--yg-title-lh); color: var(--yg-ink); }
.yg-header__subtitle { margin: 0; font-size: var(--yg-caption-size); font-weight: var(--yg-caption-weight); line-height: var(--yg-caption-lh); color: var(--yg-ink-muted); }

/* Butonul-iconiță (în bare, pe margini): o țintă de 44px, fără fond. */
.yg-icon-btn {
  display: inline-grid;
  place-items: center;
  min-width: var(--yg-touch);
  min-height: var(--yg-touch);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: var(--yg-r-md);
  transition: transform var(--yg-t-press) var(--yg-ease-enter), opacity var(--yg-t-press) linear;
}
.yg-icon-btn:active { transform: scale(var(--yg-press-scale)); opacity: var(--yg-press-opacity); }

/* ---------------------------------------------------------------------
   5. Bara de taburi de jos: plutește la 12px de margini, mai grea decât o placă.
   --------------------------------------------------------------------- */
.yg-tabbar {
  position: fixed;
  left: var(--yg-tabbar-gap);
  right: var(--yg-tabbar-gap);
  bottom: max(var(--yg-tabbar-gap), env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  height: var(--yg-tabbar-h);
  border-radius: var(--yg-r-tabbar);
  --_base: var(--yg-bar-base);
  --_top: var(--yg-bar-top);
  --_bottom: var(--yg-bar-bottom);
  --_shadow: var(--yg-shadow-card);
  -webkit-backdrop-filter: blur(var(--yg-blur-plate)) saturate(var(--yg-sat-plate));
  backdrop-filter: blur(var(--yg-blur-plate)) saturate(var(--yg-sat-plate));
}
/* Pe un ecran lat, bara rămâne cât a unui telefon, centrată. */
@media (min-width: 720px) {
  .yg-tabbar { max-width: 560px; margin: 0 auto; }
}
.yg-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 0 0 6px;
  border: 0;
  background: transparent;
  color: var(--yg-tab-inactive-label);
  font: var(--yg-micro-weight) var(--yg-micro-size) / var(--yg-micro-lh) var(--yg-font);
  letter-spacing: var(--yg-micro-track);
  cursor: pointer;
  transition: color var(--yg-t-within) var(--yg-ease-enter);
}
.yg-tab__pill {
  display: grid;
  place-items: center;
  width: var(--yg-tab-pill-w);
  height: var(--yg-tab-pill-h);
  border-radius: var(--yg-r-md);
  transition: background-color var(--yg-t-within) var(--yg-ease-enter);
}
.yg-tab[aria-current="page"] { color: var(--yg-tab-active-label); }
.yg-tab[aria-current="page"] .yg-tab__pill { background: var(--yg-tab-active-fill); box-shadow: inset 0 1px 0 var(--yg-inset-rim); }
.yg-tab:active .yg-tab__pill { transform: scale(var(--yg-press-scale)); }
/* „Vinde": pastila mai îngustă, din sticla colorată a butonului principal. */
.yg-tab--sell .yg-tab__pill {
  width: var(--yg-tab-sell-w);
  color: var(--yg-tab-sell-icon);
  --_base: var(--yg-primary-base);
  --_top: var(--yg-primary-top);
  --_bottom: var(--yg-primary-bottom);
  --_rim-top: var(--yg-tint-rim-top);
  --_rim-bottom: var(--yg-tint-rim-bottom);
}

/* ---------------------------------------------------------------------
   6. Butoane: fiecare e propriul geam, colț de 10, înălțime 46.
      La apăsare: scade la 97% și la opacitate 0,9, în 80 ms.
   --------------------------------------------------------------------- */
.yg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yg-s-sm);
  min-height: var(--yg-button-h);
  padding: 0 var(--yg-s-xl);
  border: 0;
  border-radius: var(--yg-r-md);
  font: var(--yg-label-weight) var(--yg-label-size) / var(--yg-label-lh) var(--yg-font);
  letter-spacing: var(--yg-label-track);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform var(--yg-t-press) var(--yg-ease-enter), opacity var(--yg-t-press) linear;
}
.yg-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(var(--yg-press-scale)); opacity: var(--yg-press-opacity); }
.yg-btn:focus-visible { outline: 2px solid var(--yg-field-focus); outline-offset: 2px; }
.yg-btn--block { display: flex; width: 100%; }

/* Principal: sticlă de chihlimbar (pe noapte, peste fum). */
.yg-btn--primary {
  color: var(--yg-primary-label);
  --_base: var(--yg-primary-base);
  --_top: var(--yg-primary-top);
  --_bottom: var(--yg-primary-bottom);
  --_rim-top: var(--yg-tint-rim-top);
  --_rim-bottom: var(--yg-tint-rim-bottom);
  -webkit-backdrop-filter: blur(var(--yg-blur-button)) saturate(var(--yg-sat-button));
  backdrop-filter: blur(var(--yg-blur-button)) saturate(var(--yg-sat-button));
}
/* Secundar: placa de sticlă obișnuită. */
.yg-btn--secondary {
  color: var(--yg-ink-control);
  -webkit-backdrop-filter: blur(var(--yg-blur-button));
  backdrop-filter: blur(var(--yg-blur-button));
}
/* Fantomă: doar eticheta, în cerneală (nu în aur). */
.yg-btn--ghost { background: transparent; color: var(--yg-ink-control); }
/* Bani: pielea lui proprie, pe orice ecran. Aurul înseamnă BANI și nimic altceva. */
.yg-btn--money {
  color: var(--yg-money-label);
  --_base: var(--yg-money-base);
  --_top: var(--yg-money-top);
  --_bottom: var(--yg-money-bottom);
  --_rim-top: var(--yg-tint-rim-top);
  --_rim-bottom: var(--yg-tint-rim-bottom);
  --_shadow: var(--yg-shadow-button);
  -webkit-backdrop-filter: blur(var(--yg-blur-button)) saturate(var(--yg-sat-button));
  backdrop-filter: blur(var(--yg-blur-button)) saturate(var(--yg-sat-button));
}
/* Blocat: un geam mai palid, cu eticheta stinsă dar CITIBILĂ (contrast ≥ 4,5). */
.yg-btn:disabled,
.yg-btn[aria-disabled="true"] {
  background: var(--yg-blocked-fill);
  box-shadow: none;
  color: var(--yg-ink-off);
  cursor: default;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Pătrat, pentru o iconiță (ex. săgeata de lângă căutare). */
.yg-btn--square { min-width: var(--yg-button-h); padding: 0; }

/* ---------------------------------------------------------------------
   7. Câmpuri de formular
   --------------------------------------------------------------------- */
.yg-field { display: flex; flex-direction: column; gap: var(--yg-s-sm); }
.yg-field__label { font: var(--yg-label-weight) var(--yg-label-size) / var(--yg-label-lh) var(--yg-font); color: var(--yg-ink); }
.yg-input {
  width: 100%;
  min-height: var(--yg-field-h);
  padding: 0 var(--yg-s-lg);
  font: var(--yg-body-weight) var(--yg-body-size) / var(--yg-body-lh) var(--yg-font);
  color: var(--yg-ink);
  background: var(--yg-field);
  border: var(--yg-field-border-w) solid var(--yg-line);
  border-top-color: var(--yg-plate-rim-top);   /* și câmpul prinde lumina pe muchia de sus */
  border-radius: var(--yg-r-md);
  outline: none;
  transition: border-color var(--yg-t-within) var(--yg-ease-enter);
  -webkit-backdrop-filter: blur(var(--yg-blur-button));
  backdrop-filter: blur(var(--yg-blur-button));
}
textarea.yg-input { padding-top: 13px; padding-bottom: 13px; resize: vertical; min-height: 96px; }
.yg-input::placeholder { color: var(--yg-ink-faint); }
.yg-input:focus { border-color: var(--yg-field-focus); }
.yg-field--error .yg-input { border-color: var(--yg-field-error); }
.yg-field__hint { font: var(--yg-caption-weight) var(--yg-caption-size) / var(--yg-caption-lh) var(--yg-font); color: var(--yg-ink-faint); }
.yg-field__error { font: var(--yg-caption-weight) var(--yg-caption-size) / var(--yg-caption-lh) var(--yg-font); color: var(--yg-danger); }
/* Căutarea: un câmp de sticlă cu iconiță. */
.yg-search { position: relative; display: flex; align-items: center; }
.yg-search .yg-input { padding-left: 44px; }
.yg-search__icon { position: absolute; left: 14px; z-index: 1; color: var(--yg-ink-faint); pointer-events: none; }

/* ---------------------------------------------------------------------
   8. Chipuri și etichete (insigne): blocuri ÎNCASTRATE, nu plăci separate.
   --------------------------------------------------------------------- */
.yg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--yg-chip-h);
  padding: 3px var(--yg-s-md);
  border: 0;
  border-radius: var(--yg-r-chip);
  background: var(--yg-chip-fill);
  box-shadow: inset 0 1px 0 var(--yg-inset-rim);
  color: var(--yg-ink);
  font: var(--yg-micro-weight) var(--yg-micro-size) / var(--yg-micro-lh) var(--yg-font);
  letter-spacing: var(--yg-micro-track);
  white-space: nowrap;
}
button.yg-chip { cursor: pointer; transition: transform var(--yg-t-press) var(--yg-ease-enter); }
button.yg-chip:active { transform: scale(var(--yg-press-scale)); }
/* Încredere dovedită (escrow, verificat): singurul chip cu aur. Un filtru nu-l primește niciodată. */
.yg-chip--trust { background: var(--yg-chip-trust-fill); color: var(--yg-chip-trust-text); }
/* Filtru ales: placa de sticlă (din machetă, nu există ca atare în aplicație). */
.yg-chip--selected {
  background: linear-gradient(180deg, var(--yg-plate-top), var(--yg-plate-bottom));
  box-shadow: inset 0 var(--yg-rim-top-w) 0 var(--yg-plate-rim-top), inset 0 -1px 0 var(--yg-plate-rim-bottom);
}
/* Numărul de pe o iconiță (ex. notificări necitite). */
.yg-count {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 17px;
  height: 16px;
  padding: 0 4px;
  border-radius: 5px;
  background: var(--yg-ink);
  color: var(--yg-page);
  font: 700 10px/16px var(--yg-font);
  text-align: center;
}

/* Filele dintr-un rând adâncit, cu cea aleasă ca placă de sticlă (ex. foaia anunțului). */
.yg-segment {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: var(--yg-r-md);
  background: var(--yg-inset);
  box-shadow: inset 0 1px 0 var(--yg-inset-rim);
}
.yg-segment > button {
  flex: 1;
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--yg-ink-muted);
  font: 600 11px / 14px var(--yg-font);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
}
.yg-segment > button[aria-selected="true"] {
  color: var(--yg-ink);
  background: linear-gradient(180deg, var(--yg-plate-top), var(--yg-plate-bottom));
  box-shadow: inset 0 var(--yg-rim-top-w) 0 var(--yg-plate-rim-top), inset 0 -1px 0 var(--yg-plate-rim-bottom);
}

/* ---------------------------------------------------------------------
   9. Liste: fiecare rând e o placă proprie.
   --------------------------------------------------------------------- */
.yg-list { display: flex; flex-direction: column; gap: var(--yg-s-sm); margin: 0; padding: 0; list-style: none; }
.yg-row {
  display: flex;
  align-items: center;
  gap: var(--yg-s-md);
  padding: var(--yg-s-lg);
  border-radius: var(--yg-r-row);
  color: inherit;
  text-decoration: none;
  transition: opacity var(--yg-t-press) linear;
}
a.yg-row:active, button.yg-row:active { opacity: 0.8; }
button.yg-row { width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; }
.yg-row--highlighted { outline: 1px solid var(--yg-gold-dim); outline-offset: -1px; }
.yg-row__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--yg-r-md); background: var(--yg-inset); box-shadow: inset 0 1px 0 var(--yg-inset-rim); }
.yg-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.yg-row__title { font: var(--yg-heading-weight) var(--yg-heading-size) / var(--yg-heading-lh) var(--yg-font); color: var(--yg-ink); }
.yg-row__subtitle { font: var(--yg-body-weight) var(--yg-body-size) / var(--yg-body-lh) var(--yg-font); color: var(--yg-ink-muted); }
.yg-row__caption { font: var(--yg-caption-weight) var(--yg-caption-size) / var(--yg-caption-lh) var(--yg-font); color: var(--yg-ink-faint); }
.yg-row__chevron { flex: none; color: var(--yg-ink-faint); }

/* ---------------------------------------------------------------------
   10. Ferestrele: sticlă NEAGRĂ pe ambele teme. Pe ea, literele sunt de noapte.
   --------------------------------------------------------------------- */
.yg-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--yg-sheet-scrim);
  opacity: 0;
  transition: opacity var(--yg-t-sheet) var(--yg-ease-enter);
}
.yg-scrim--dialog { background: var(--yg-dialog-scrim); }
.yg-scrim.is-open { opacity: 1; }
.yg-scrim.is-leaving { opacity: 0; transition: opacity var(--yg-t-within) var(--yg-ease-exit); }

.yg-glass-dark {
  --yg-ink: var(--yg-glass-ink);
  --yg-ink-muted: var(--yg-glass-ink-muted);
  --yg-ink-faint: var(--yg-glass-ink-faint);
  --yg-ink-control: var(--yg-glass-ink);
  --yg-gold: var(--yg-glass-gold);
  --yg-danger: var(--yg-glass-error);
  /* Pe sticla neagră se folosesc plăcile de NOAPTE, oricare ar fi tema. */
  --yg-plate-top: rgba(255, 255, 255, 0.10);
  --yg-plate-bottom: rgba(255, 255, 255, 0.03);
  --yg-plate-rim-top: rgba(255, 255, 255, 0.42);
  --yg-plate-rim-bottom: rgba(255, 255, 255, 0.14);
  --yg-inset: rgba(0, 0, 0, 0.28);
  --yg-inset-rim: rgba(255, 255, 255, 0.10);
  --yg-chip-fill: rgba(0, 0, 0, 0.28);
  --yg-chip-trust-fill: rgba(255, 181, 71, 0.18);
  --yg-chip-trust-text: #FFB547;
  --yg-line: rgba(255, 255, 255, 0.16);
  --yg-field: rgba(255, 255, 255, 0.06);
  --yg-field-focus: #FFB547;
  --yg-primary-base: rgba(8, 10, 12, 0.55);
  --yg-primary-top: rgba(255, 181, 71, 0.36);
  --yg-primary-bottom: rgba(255, 181, 71, 0.12);
  --yg-primary-label: #FFE3A3;
  --yg-money-base: rgba(8, 10, 12, 0.55);
  --yg-money-top: rgba(255, 181, 71, 0.40);
  --yg-money-bottom: rgba(255, 181, 71, 0.14);
  --yg-money-label: #FFF0CF;
  --yg-blocked-fill: rgba(0, 0, 0, 0.5);
  --yg-ink-off: rgba(244, 241, 234, 0.52);
  color: var(--yg-ink);
  -webkit-backdrop-filter: blur(var(--yg-blur-modal)) saturate(var(--yg-sat-modal));
  backdrop-filter: blur(var(--yg-blur-modal)) saturate(var(--yg-sat-modal));
}
:root[data-theme="light"] .yg-glass-dark { background-color: rgba(24, 21, 17, 0.80); border-color: rgba(255, 244, 228, 0.22); }

/* Foaia care urcă de jos: colț de 24 sus, mâner de 40 × 4. */
.yg-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  max-height: 92vh;
  overflow: auto;
  padding: var(--yg-s-md) var(--yg-s-xl) calc(var(--yg-s-xl) + env(safe-area-inset-bottom));
  border-radius: var(--yg-r-sheet) var(--yg-r-sheet) 0 0;
  background-color: rgba(18, 18, 18, 0.80);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--yg-sheet-shadow);
  transform: translateY(100%);
  transition: transform var(--yg-t-sheet) var(--yg-ease-enter);
  touch-action: none;
}
.yg-sheet.is-open { transform: translateY(0); }
.yg-sheet.is-leaving { transform: translateY(100%); transition: transform var(--yg-t-within) var(--yg-ease-exit); }
.yg-sheet.is-dragging { transition: none; }
.yg-sheet__handle { width: 40px; height: 4px; margin: 0 auto var(--yg-s-sm); border-radius: var(--yg-r-pill); background: var(--yg-sheet-handle); }
@media (min-width: 720px) {
  /* Pe un ecran lat, foaia rămâne cât un telefon, centrată. */
  .yg-sheet { left: 50%; right: auto; width: 480px; margin-left: -240px; }
}

/* Dialogul: colț de 20, „se așază" de la 12px, cu opacitate. */
.yg-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 51;
  width: min(400px, calc(100vw - 2 * var(--yg-s-xl)));
  display: flex;
  flex-direction: column;
  gap: var(--yg-s-md);
  padding: var(--yg-s-xl);
  border-radius: var(--yg-r-xl);
  background-color: rgba(18, 18, 18, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--yg-dialog-shadow);
  opacity: 0;
  transform: translate(-50%, calc(-50% + var(--yg-dialog-rise)));
  transition: opacity var(--yg-t-sheet) var(--yg-ease-enter), transform var(--yg-t-sheet) var(--yg-ease-enter);
}
.yg-dialog.is-open { opacity: 1; transform: translate(-50%, -50%); }
.yg-dialog.is-leaving { opacity: 0; transform: translate(-50%, calc(-50% + var(--yg-dialog-rise))); transition-duration: var(--yg-t-within); transition-timing-function: var(--yg-ease-exit); }
.yg-dialog__title { margin: 0; font: var(--yg-heading-weight) var(--yg-heading-size) / var(--yg-heading-lh) var(--yg-font); color: var(--yg-ink); }
.yg-dialog__body { margin: 0; color: var(--yg-ink-muted); }
.yg-dialog__actions { display: flex; flex-direction: column; gap: var(--yg-s-sm); margin-top: var(--yg-s-sm); }

/* ---------------------------------------------------------------------
   11. Notificarea scurtă (toast). NU există în YeY: aplicația răspunde la locul
       acțiunii. E construită aici din același material ca ferestrele.
   --------------------------------------------------------------------- */
.yg-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--yg-tabbar-h) + 2 * var(--yg-tabbar-gap) + 8px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--yg-s-md);
  width: min(420px, calc(100vw - 2 * var(--yg-tabbar-gap)));
  padding: var(--yg-s-md) var(--yg-s-lg);
  border-radius: var(--yg-r-lg);
  background-color: rgba(18, 18, 18, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--yg-shadow-raised);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity var(--yg-t-appear) var(--yg-ease-enter), transform var(--yg-t-appear) var(--yg-ease-enter);
  pointer-events: none;
}
.yg-toast.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.yg-toast.is-leaving { opacity: 0; transform: translate(-50%, 12px); transition-duration: var(--yg-t-within); transition-timing-function: var(--yg-ease-exit); }
.yg-toast__icon { flex: none; color: var(--yg-chip-trust-text); }
.yg-toast--error .yg-toast__icon { color: var(--yg-danger); }
.yg-toast__text { flex: 1; font: 500 var(--yg-body-size) / var(--yg-body-lh) var(--yg-font); }

/* ---------------------------------------------------------------------
   12. Anunțul peste fotografie: voal, panou de sticlă, preț subțire, margine de iconițe.
   --------------------------------------------------------------------- */
.yg-photo { position: relative; overflow: hidden; background: #000; }
.yg-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Voalul: trei opriri, ca întunericul să nu aibă un început vizibil. */
.yg-veil { position: absolute; left: 0; right: 0; pointer-events: none; }
.yg-veil--top {
  top: 0;
  height: var(--yg-veil-top-reach);
  background: linear-gradient(180deg, rgba(var(--yg-veil-tint), var(--yg-veil-floor)) 0%, rgba(var(--yg-veil-tint), calc(var(--yg-veil-floor) * 0.35)) 50%, rgba(var(--yg-veil-tint), 0) 100%);
}
.yg-veil--bottom {
  bottom: 0;
  height: var(--yg-veil-bottom-reach);
  background: linear-gradient(0deg, rgba(var(--yg-veil-tint), var(--yg-veil-floor)) 0%, rgba(var(--yg-veil-tint), calc(var(--yg-veil-floor) * 0.35)) 50%, rgba(var(--yg-veil-tint), 0) 100%);
}
/* Panoul: estompare închisă + fum + placa temei. */
.yg-photo-panel {
  border-radius: var(--yg-r-lg);
  padding: 12px 14px;
  color: var(--yg-ink-light);
  --_base: var(--yg-panel-fill);
  -webkit-backdrop-filter: blur(var(--yg-blur-panel)) saturate(var(--yg-sat-panel)) brightness(0.85);
  backdrop-filter: blur(var(--yg-blur-panel)) saturate(var(--yg-sat-panel)) brightness(0.85);
}
.yg-photo-panel__handle { width: 40px; height: 4px; margin: 0 auto 8px; border-radius: var(--yg-r-pill); background: rgba(255, 255, 255, 0.34); }
.yg-photo-title { margin: 0; font-size: var(--yg-photo-title-size); font-weight: var(--yg-photo-title-weight); letter-spacing: var(--yg-photo-title-track); text-transform: uppercase; color: var(--yg-photo-title-color); }
.yg-photo-price { margin: 0; font-family: var(--yg-font-thin); font-size: var(--yg-photo-price-size); font-weight: var(--yg-photo-price-weight); letter-spacing: var(--yg-photo-price-track); line-height: 1.1; color: var(--yg-photo-price-color); font-variant-numeric: tabular-nums; white-space: nowrap; }
.yg-photo-meta { margin: 0; font-size: var(--yg-photo-meta-size); font-weight: var(--yg-photo-meta-weight); letter-spacing: var(--yg-photo-meta-track); line-height: 1.6; color: var(--yg-photo-meta-color); }
.yg-rail { position: absolute; right: 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--yg-photo-icon); }
.yg-rail .yg-icon-btn { position: relative; }
.yg-rail__label { margin-top: -10px; font: var(--yg-micro-weight) var(--yg-micro-size) / var(--yg-micro-lh) var(--yg-font); letter-spacing: var(--yg-micro-track); color: var(--yg-photo-icon); }

/* ---------------------------------------------------------------------
   13. Ecranul gol: o plăcuță de sticlă cu o iconiță.
   --------------------------------------------------------------------- */
.yg-empty { display: flex; flex-direction: column; align-items: center; gap: var(--yg-s-md); padding: var(--yg-s-xxl) var(--yg-s-xl); text-align: center; }
.yg-empty__mark { display: grid; place-items: center; width: var(--yg-empty-size); height: var(--yg-empty-size); border-radius: var(--yg-r-xl); color: var(--yg-ink-muted); --_shadow: var(--yg-shadow-card); }

/* ---------------------------------------------------------------------
   14. Mișcare redusă: elementul e pur și simplu ACOLO, nu o variantă mai scurtă.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}