/* COLABO — tema „Lumina" (design MIXCUT, Claude Design 2026-08-03) */
:root {
  color-scheme: light;
  --bg: #f4f2fd;
  --panou: #fbfbfe;
  --card: #ffffff;
  --border: #eae8f7;
  --linie: #f2f0fb;
  --ink: #16162a;
  --text2: #57556f;
  --muted: #8b89a8;
  --muted2: #a9a7bd;
  --accent: #5b4df0;
  --accent-soft: #f1effb;
  --accent-shadow: 0 12px 26px rgba(91, 77, 240, .28);
  --good: #1f9d5b;
  --rosu: #e0303a;
  --umbra-card: 0 12px 30px rgba(60, 50, 130, .09);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #dedcec; border-radius: 4px; }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(91,77,240,.28); } 50% { box-shadow: 0 0 0 12px rgba(91,77,240,0); } }

.hidden { display: none !important; }

input, select, button { font-family: inherit; }
button { border: none; background: none; cursor: pointer; color: inherit; font-size: inherit; padding: 0; }

/* height: 100dvh = inaltimea VIZIBILA, fara bara de URL a browserului mobil.
   Cu 100vh (care o ignora) partea de jos a aplicatiei — adica bara de taburi —
   ramanea sub ecran pe iPhone si Android. Randul cu 100vh e fallback-ul
   pentru browserele care nu stiu dvh. */
#app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ===== Sidebar ===== */
#sidebar {
  width: 236px; flex: none;
  background: var(--panou);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 22px 16px;
  overflow-y: auto;
}
.logo { font-size: 17px; font-weight: 600; letter-spacing: .18em; padding: 0 8px; }
.tag { font-size: 12px; color: var(--muted); padding: 6px 8px 0; line-height: 1.5; }

.cta-nou {
  margin-top: 24px; display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-radius: 16px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: var(--accent-shadow);
  transition: transform .1s;
}
.cta-nou:active { transform: scale(.99); }

nav { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 14px;
  color: var(--text2); font-weight: 500; font-size: 14px;
  transition: background .18s; text-align: left; width: 100%;
}
.nav-item .nic {
  width: 26px; height: 26px; border-radius: 13px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.nav-item.activ { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.nav-item.activ .nic { background: #fff; }
.nav-item svg { stroke: var(--muted); }
.nav-item.activ svg { stroke: var(--accent); }

.proc-mini {
  margin-top: 18px; padding: 12px 13px; border-radius: 16px;
  background: var(--accent-soft); cursor: pointer; animation: rise .25s ease;
  width: 100%; text-align: left;
}
.proc-mini .rand { display: flex; align-items: center; gap: 9px; }
.proc-mini .puls { width: 9px; height: 9px; border-radius: 5px; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; flex: none; }
.proc-mini .et { font-size: 13px; font-weight: 600; }
.proc-mini .pct { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bara { height: 5px; border-radius: 3px; background: #e2dff5; overflow: hidden; margin-top: 9px; }
.bara > div { height: 100%; background: var(--accent); border-radius: 3px; width: 0; transition: width .4s linear; }

.plan-card { margin-top: auto; padding: 14px; border-radius: 18px; background: var(--bg); }
.plan-card .sus { display: flex; align-items: baseline; }
.plan-card .nume { font-size: 13px; font-weight: 600; }
.plan-card .pret { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-card .bara { height: 6px; margin-top: 10px; }
.plan-card .bara > div { transition: width .5s cubic-bezier(.2,.8,.2,1); }
.plan-card .jos { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 7px; font-variant-numeric: tabular-nums; }
.plan-card .schimba {
  margin-top: 11px; padding: 9px; text-align: center; border-radius: 12px;
  background: #fff; color: var(--accent); font-size: 12px; font-weight: 600; width: 100%;
}
.plan-card .topups { display: flex; gap: 6px; margin-top: 8px; }
.plan-card .topups button {
  flex: 1; padding: 7px; border-radius: 10px; background: #fff;
  color: var(--muted); font-size: 11.5px; font-weight: 600;
}

.cont-chip {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding: 8px; border-radius: 14px; width: 100%; text-align: left;
}
.cont-chip:hover { background: var(--bg); }
.avatar {
  width: 32px; height: 32px; border-radius: 16px; flex: none;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cont-chip .n { font-size: 13px; font-weight: 600; }
.cont-chip .s { font-size: 11px; color: var(--muted); }

/* ===== Coloana piese ===== */
#col-piese {
  width: 352px; flex: none;
  border-right: 1px solid var(--border); background: var(--panou);
  display: flex; flex-direction: column;
}
#col-piese .cap { padding: 24px 22px 0; }
.h1 { font-size: 24px; font-weight: 700; letter-spacing: -.6px; }
.filtre { display: flex; gap: 8px; margin-top: 16px; }
.filtru {
  padding: 8px 13px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border); color: #7a7898; font-size: 12.5px; font-weight: 500;
}
.filtru.activ { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
#lista-piese { flex: 1; overflow: auto; padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 10px; }

.piesa-card {
  display: flex; gap: 12px; padding: 11px; border-radius: 20px;
  background: #fff; border: 1px solid var(--border);
  cursor: pointer; transition: background .18s; text-align: left; width: 100%;
}
.piesa-card.activ { background: var(--accent-soft); border-color: #d9d3fb; }
.piesa-card .poza {
  width: 62px; height: 80px; border-radius: 14px; flex: none;
  background: #eeecfa center/cover no-repeat;
}
.piesa-card .corp { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.piesa-card .titlu { font-size: 15px; font-weight: 600; line-height: 1.25; }
.piesa-card .artist { font-size: 12px; color: var(--muted); margin-top: 3px; }
.piesa-card .jos { margin-top: auto; }
.piesa-card .mini-bara { height: 5px; border-radius: 3px; background: #eeecfa; overflow: hidden; }
.piesa-card .mini-bara > div { height: 100%; border-radius: 3px; }
.piesa-card .meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ===== Panoul principal ===== */
#principal { flex: 1; min-width: 0; overflow: auto; position: relative; }
.vedere { padding: 26px 30px 40px; animation: rise .25s ease; }
.vedere-centrata { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px; }

/* Detaliu piesa */
.det-cap { display: flex; align-items: flex-start; gap: 20px; }
.det-poza {
  width: 132px; height: 174px; border-radius: 22px; flex: none;
  box-shadow: 0 14px 34px rgba(60,50,130,.18);
  background: #eeecfa center/cover no-repeat;
}
.det-titlu { font-size: 30px; font-weight: 700; letter-spacing: -.8px; line-height: 1.15; }
.det-meta { font-size: 14px; color: var(--muted); margin-top: 7px; }
.det-actiuni { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.btn-primar {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px; border-radius: 15px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: var(--accent-shadow);
}
.chip {
  padding: 11px 15px; border-radius: 15px; background: #fff;
  border: 1px solid var(--border); font-size: 13.5px; font-weight: 600;
  color: var(--ink); text-decoration: none; display: inline-block;
}
.chip:hover { border-color: #d9d3fb; }
.chip-rosu { color: var(--rosu) !important; }
.chip-rosu:hover { border-color: var(--rosu) !important; }

.grila-2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-top: 24px; align-items: start; }
.card { background: var(--card); border-radius: 24px; padding: 20px; box-shadow: var(--umbra-card); }

.scor-rand { display: flex; align-items: center; gap: 20px; }
.scor-inel { position: relative; width: 112px; height: 112px; flex: none; }
.scor-inel .val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scor-inel .nr { font-size: 33px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.scor-inel .din { font-size: 11px; color: var(--muted); margin-top: 2px; }
.bare { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bara-rand .cap { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bara-rand .pista { height: 6px; border-radius: 3px; background: #eeecfa; overflow: hidden; margin-top: 5px; }
.bara-rand .pista > div { height: 100%; border-radius: 3px; background: var(--accent); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.separator { height: 1px; background: var(--linie); margin: 18px 0 14px; }
.card-sub { display: flex; align-items: baseline; }
.card-sub .t { font-size: 15px; font-weight: 600; }
.card-sub .dupa { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--good); font-variant-numeric: tabular-nums; }
.lista-reteta { margin: 12px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.65; color: var(--text2); }
.lista-reteta li { margin-bottom: 8px; }

.versuri-scroll { margin-top: 12px; max-height: 260px; overflow: auto; }
.vers-rand { display: flex; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid #f6f5fc; }
.vers-rand .timp { font-size: 11.5px; color: var(--muted2); font-variant-numeric: tabular-nums; width: 40px; flex: none; text-align: right; }
.vers-rand input { flex: 1; min-width: 0; background: transparent; border: none; font-size: 14px; color: var(--ink); outline: none; padding: 2px 0; }
.btn-soft {
  margin-top: 14px; padding: 12px; text-align: center; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 600; width: 100%;
}

/* Shorts */
.sh-cap { display: flex; align-items: center; margin-top: 26px; }
.h2 { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.sh-nr { margin-left: 12px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sh-taburi { margin-left: auto; display: flex; padding: 3px; border-radius: 999px; background: #fff; border: 1px solid var(--border); }
.sh-tab { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #7a7898; }
.sh-tab.activ { background: var(--ink); color: #fff; }
.sh-zip { margin-left: 10px; }

.sh-grila { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; margin-top: 16px; }
.sh-card { cursor: pointer; text-align: left; display: block; width: 100%; }
.sh-card .rama {
  display: block; position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 9/16;
  box-shadow: 0 10px 24px rgba(60,50,130,.12); background: var(--ink);
}
.sh-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-card .durata {
  position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 8px;
  background: rgba(0,0,0,.45); color: #fff; font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.sh-card .nume { display: block; font-size: 12.5px; font-weight: 600; margin-top: 8px; }
.sh-gol { margin-top: 16px; color: var(--muted); font-size: 14px; }

/* Player */
#player-fundal {
  position: fixed; inset: 0; background: rgba(22,22,42,.55);
  backdrop-filter: blur(4px); z-index: 70; animation: fadein .18s ease;
}
#player {
  position: fixed; inset: 0; z-index: 71;
  display: flex; align-items: center; justify-content: center; gap: 26px;
  pointer-events: none;
}
.p-nav {
  width: 52px; height: 52px; border-radius: 26px; background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center; pointer-events: auto;
}
.p-corp {
  width: min(392px, 90vw, calc(78vh * 9 / 16));
  background: #0e0e18; border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(10,8,30,.5); pointer-events: auto; animation: rise .2s ease;
}
.p-video { position: relative; aspect-ratio: 9/16; background: #16162a; cursor: pointer; }
.p-video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.p-grad {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0) 30%, rgba(0,0,0,.7));
}
.p-pauza {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.p-pauza svg { filter: drop-shadow(0 4px 14px rgba(0,0,0,.6)); }
.p-jos { position: absolute; left: 18px; right: 18px; bottom: 18px; color: #fff; pointer-events: none; }
.p-pips { display: flex; gap: 4px; margin-bottom: 12px; pointer-events: auto; }
.p-pips > div {
  flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3);
  cursor: pointer; overflow: hidden;
}
.p-pips > div > span { display: block; height: 100%; background: #fff; width: 0; }
.p-index { font-size: 12.5px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.p-nume { font-size: 19px; font-weight: 700; margin-top: 2px; }
.p-bara { display: flex; align-items: center; gap: 10px; padding: 14px 16px; flex-wrap: wrap; }
.p-desc { padding: 11px 16px; border-radius: 14px; background: #23233a; color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; flex: none; }
.p-share { display: flex; gap: 10px; }
.p-share button {
  width: 40px; height: 40px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
}
.p-inchide { margin-left: auto; font-size: 13.5px; color: #8f8daf; }

/* Upload */
.up-cutie { width: 520px; max-width: 100%; animation: rise .25s ease; }
.h0 { font-size: 30px; font-weight: 700; letter-spacing: -.8px; }
.sub0 { color: var(--muted); font-size: 15px; margin-top: 8px; }
.drop {
  margin-top: 22px; padding: 52px 24px; border-radius: 26px;
  border: 2px dashed #cfc9f0; background: var(--panou); text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; display: block; width: 100%;
}
.drop:hover, .drop.hover { border-color: var(--accent); background: #f7f5ff; }
.drop .ic {
  width: 56px; height: 56px; border-radius: 28px; background: var(--accent-soft);
  margin: 0 auto; display: flex; align-items: center; justify-content: center;
}
.drop .t { font-size: 17px; font-weight: 600; margin-top: 14px; }
.drop .s { font-size: 13px; color: var(--muted); margin-top: 5px; }
.up-campuri { display: flex; gap: 12px; margin-top: 16px; }
.up-campuri input {
  flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border);
  border-radius: 15px; padding: 14px; font-size: 15px; outline: none; color: var(--ink);
}
.up-campuri input:focus { border-color: var(--accent); }
.up-jos { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.btn-mare { padding: 15px 26px; border-radius: 16px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; box-shadow: var(--accent-shadow); }
.btn-mare:disabled { opacity: .4; box-shadow: none; }
.btn-alb { padding: 15px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--border); font-size: 15px; font-weight: 600; }
.up-nota { margin-left: auto; font-size: 12.5px; color: var(--muted2); font-variant-numeric: tabular-nums; }

/* Progres */
.prog-cutie { text-align: center; animation: rise .25s ease; }
.prog-inel { position: relative; width: 196px; height: 196px; margin: 0 auto; }
.prog-inel .val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -2px; }
.prog-titlu { margin-top: 32px; font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.prog-sub { margin-top: 8px; color: var(--muted); font-size: 15px; }
.prog-pips { margin-top: 28px; display: flex; gap: 8px; justify-content: center; }
.prog-pips > div { width: 44px; height: 4px; border-radius: 2px; background: #e7e4f7; transition: background .3s; }
.prog-pips > div.acum { background: var(--accent); }
.prog-pips > div.gata { background: var(--good); }
.prog-eroare { margin-top: 20px; color: var(--rosu); font-size: 14px; max-width: 480px; white-space: pre-wrap; }
.prog-btns { margin-top: 34px; display: flex; gap: 10px; justify-content: center; }

/* Marketing / Bio / Cont */
.mkt-grila { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-top: 22px; align-items: start; }
.mkt-rez { font-size: 15px; line-height: 1.7; color: var(--text2); }
.mkt-eticheta { font-size: 13px; color: var(--muted); margin: 22px 0 12px; }
.mkt-actiune { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--linie); }
.mkt-actiune .nr {
  width: 28px; height: 28px; border-radius: 14px; background: var(--accent-soft);
  color: var(--accent); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.mkt-actiune .a { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.mkt-actiune .d { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.55; }
.mkt-plat { padding: 14px 0; border-top: 1px solid var(--linie); margin-top: 12px; }
.mkt-plat .p { font-size: 14px; font-weight: 600; }
.mkt-plat ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.65; color: var(--text2); }
.mkt-plat li { margin-bottom: 4px; }
.mkt-gol { max-width: 560px; margin-top: 24px; text-align: center; padding: 30px; }
.mkt-gol .t { font-size: 15px; line-height: 1.6; color: var(--text2); }
.mkt-stale { margin-top: 14px; font-size: 13px; color: var(--good); }

.bio-grila { display: grid; grid-template-columns: 1fr 320px; gap: 22px; margin-top: 22px; align-items: start; }
.slug-rand { display: flex; align-items: center; gap: 12px; }
.slug-cutie { flex: 1; display: flex; align-items: center; background: #f7f6fd; border-radius: 14px; padding: 0 14px; }
.slug-cutie span { color: var(--muted); }
.slug-cutie input { flex: 1; min-width: 0; background: transparent; border: none; padding: 14px 6px; font-size: 15px; outline: none; color: var(--ink); }
.btn-mediu { padding: 14px 20px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--accent-shadow); }
.bio-rand { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--linie); }
.bio-rand span { font-size: 13.5px; color: var(--muted); width: 130px; flex: none; }
.bio-rand input { flex: 1; min-width: 0; background: transparent; border: none; font-size: 14.5px; outline: none; color: var(--ink); }
.bio-tel { background: var(--ink); border-radius: 28px; padding: 18px; box-shadow: 0 18px 40px rgba(22,22,42,.28); }
.bio-ecran { border-radius: 20px; overflow: hidden; background: var(--panou); }
.bio-cover { width: 100%; height: 150px; object-fit: cover; display: block; background: #eeecfa; }
.bio-int { padding: 16px; text-align: center; }
.bio-avatar {
  width: 56px; height: 56px; border-radius: 28px; margin: -44px auto 0;
  border: 3px solid var(--panou); background: var(--accent); color: #fff;
  font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.bio-nume { font-size: 16px; font-weight: 700; margin-top: 10px; }
.bio-slug { font-size: 12px; color: var(--muted); margin-top: 3px; }
.bio-wa { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--good); color: #fff; font-size: 13px; font-weight: 600; }
.bio-chips { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.bio-chips > div { flex: 1 1 40%; padding: 11px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 12px; font-weight: 600; }
.bio-prev-eticheta { text-align: center; color: #8f8daf; font-size: 11.5px; margin-top: 12px; }

.cont-card { max-width: 560px; margin-top: 22px; }
.cont-sus { display: flex; align-items: center; gap: 14px; }
.cont-sus .avatar { width: 56px; height: 56px; border-radius: 28px; font-size: 22px; }
.cont-sus .nume { font-size: 17px; font-weight: 700; }
.cont-sus .email { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cont-sus .schimba { margin-left: auto; padding: 11px 16px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 600; }
.cont-rand { display: flex; align-items: center; padding: 15px 0; border-top: 1px solid var(--linie); font-size: 14.5px; width: 100%; text-align: left; }
.cont-rand span { margin-left: auto; color: var(--muted2); font-size: 13.5px; }
.cont-rand.rosu { color: var(--rosu); }

/* Autentificare */
.auth-cutie { width: 400px; max-width: 100%; }
.auth-camp { margin-top: 12px; }
.auth-camp label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.auth-camp input {
  width: 100%; background: #fff; border: 1px solid var(--border);
  border-radius: 15px; padding: 14px; font-size: 15px; outline: none; color: var(--ink);
}
.auth-camp input:focus { border-color: var(--accent); }
.auth-nota { font-size: 12px; color: var(--muted2); margin-top: 8px; line-height: 1.5; }
.auth-eroare { color: var(--rosu); font-size: 13.5px; margin-top: 12px; }
.auth-switch { margin-top: 16px; text-align: center; color: var(--muted); font-size: 14px; }
.auth-switch a { color: var(--accent); text-decoration: none; cursor: pointer; font-weight: 600; }

/* Grafica (wizard existent, restilizat) */
.gf-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.gf-frames img { width: 100%; border-radius: 14px; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .15s; display: block; }
.gf-frames img:hover { transform: scale(1.02); }
.gf-frames img.sel { border-color: var(--accent); }
.gf-base-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 4px; }
.gf-base { max-width: 260px; border-radius: 14px; border: 1px solid var(--border); display: block; }
.gf-editata { width: 100%; max-width: 560px; border-radius: 16px; border: 1px solid var(--border); display: block; }
.gf-desc {
  width: 100%; margin-top: 12px; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 13px; font-size: 14px; outline: none; color: var(--ink);
}
.gf-q { font-size: 16px; font-weight: 600; margin: 14px 0 0; }
.gf-acts { display: flex; gap: 8px; margin-top: 6px; }
.gf-mini { padding: 6px 10px; font-size: 12px; font-weight: 500; color: var(--muted); border: 1px solid var(--border); border-radius: 10px; }
.gf-mini:hover { color: var(--ink); border-color: #d9d3fb; }
.gf-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 10px; }
.gf-out img { width: 100%; border-radius: 14px; border: 1px solid var(--border); margin-bottom: 6px; display: block; }
.gf-out video.gf-video { width: 100%; aspect-ratio: 9/16; border-radius: 14px; border: 1px solid var(--border); margin-bottom: 6px; display: block; background: #000; }
.ed-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.ed-buttons button, .ed-buttons .dl { width: auto; margin: 0; }
.ed-note { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; }
.ed-status { font-size: 13px; margin-top: 10px; }
.ed-status.ok { color: var(--good); }
.ed-status.err { color: var(--rosu); }
.dl {
  display: inline-block; padding: 10px 15px; border-radius: 14px;
  background: #fff; border: 1px solid var(--border);
  color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.dl:hover { border-color: #d9d3fb; }
button.mic { padding: 11px 15px; border-radius: 15px; background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 600; }

/* Editor secțiuni */
.ed-sec { display: grid; grid-template-columns: 1fr 110px 110px; gap: 10px; margin-bottom: 6px; }
.ed-sec input, .ed-head { font-size: 13.5px; }
.ed-sec input { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; outline: none; color: var(--ink); }
.ed-head { display: grid; grid-template-columns: 1fr 110px 110px; gap: 10px; color: var(--muted); font-size: 12px; margin: 12px 0 4px; }

/* ===== coTransfer ===== */
.ct-cap { display: flex; align-items: flex-end; gap: 16px; }
.ct-cap > div:first-child { flex: 1; min-width: 0; }
.ct-nou-btn { flex: none; }
.chip-soft { background: var(--accent-soft) !important; border-color: transparent !important; }

.ct-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; max-width: 860px; }
.ct-card {
  display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1px solid var(--border); border-radius: 20px; padding: 14px;
  cursor: pointer; text-align: left; width: 100%; animation: rise .25s ease both;
  transition: box-shadow .18s;
}
.ct-card:hover { box-shadow: 0 14px 32px rgba(60,50,130,.12); }
.ct-card .poza { width: 76px; height: 48px; border-radius: 12px; flex: none; background: #eeecfa center/cover no-repeat; }
.ct-card .corp { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ct-card .titlu { font-size: 15px; font-weight: 600; }
.ct-card .meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.ct-card .stare, .ct-detaliu-cap .stare { padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; flex: none; }

.ct-form { max-width: 620px; margin-top: 22px; animation: rise .25s ease; }
.ct-campuri { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.ct-campuri input, .ct-rand input {
  background: #f7f6fd; border: none; border-radius: 15px; padding: 15px;
  font-size: 15px; outline: none; color: var(--ink); width: 100%;
}
.ct-rand { display: flex; gap: 12px; }
.ct-rand input { flex: 1; min-width: 0; }

.ct-detaliu-cap { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.ct-detaliu-cap .titlu { font-size: 15px; font-weight: 700; }

.ct-asteapta { max-width: 620px; margin-top: 16px; padding: 30px; text-align: center; }
.puls-cerc {
  width: 52px; height: 52px; border-radius: 26px; background: var(--accent-soft);
  margin: 0 auto; display: flex; align-items: center; justify-content: center;
  animation: pulse 1.8s ease-in-out infinite; flex: none;
}
.puls-cerc > div { width: 12px; height: 12px; border-radius: 6px; background: var(--accent); }
.ct-asteapta .t { font-size: 17px; font-weight: 700; margin-top: 16px; }
.ct-asteapta .s { font-size: 13.5px; color: var(--muted); margin-top: 7px; line-height: 1.6; }
.ct-centru { justify-content: center; }

.ct-grila { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-top: 16px; align-items: start; }
.ct-coloana { display: flex; flex-direction: column; gap: 18px; }
.ct-video { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16/9; background: var(--ink); cursor: pointer; }
.ct-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ct-video .grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)); pointer-events: none; }
.ct-video .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 58px; height: 58px; border-radius: 29px; background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.ct-video .vchip {
  position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px;
  background: rgba(0,0,0,.5); color: #fff; font-size: 12px; font-weight: 600;
}
.ct-bara-wrap { margin-top: 14px; }
.ct-bara {
  position: relative; height: 34px; border-radius: 10px; background: var(--accent-soft);
  cursor: pointer; touch-action: none;
}
.ct-bara .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 10px; background: #ddd8fb; pointer-events: none; }
.ct-bara .playhead {
  position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; left: 0;
  background: var(--accent); border-radius: 2px; pointer-events: none; z-index: 3;
}
.ct-bara .playhead::after {
  content: ""; position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 8px; background: var(--accent);
  border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(91,77,240,.45);
}
.ct-bara .marker {
  position: absolute; top: 50%; margin-top: -6px; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 6px; border: 2px solid #fff; cursor: pointer; padding: 0; z-index: 2;
}
.ct-bara-sub { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted2); margin-top: 9px; font-variant-numeric: tabular-nums; }
.ct-bara-sub .acum { color: var(--accent); font-weight: 700; }
.ct-cadru-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ct-cadru-btn {
  padding: 10px 14px; border-radius: 13px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: #fff; transition: transform .1s;
}
.ct-cadru-btn:active { transform: scale(.98); }
.ct-cadru-btn.schimba { background: #fff4e2; color: #b07d15; border-color: transparent; }
.ct-cadru-btn.sterge { background: #fdecee; color: #a1242d; border-color: transparent; }
.ct-cadru-btn.nota { color: var(--accent); }
.ct-badge {
  display: inline-block; padding: 2.5px 8px; border-radius: 999px; font-size: 10px;
  font-weight: 800; letter-spacing: .06em; margin-bottom: 4px;
}
.ct-badge.schimba { background: #fff4e2; color: #b07d15; }
.ct-badge.sterge { background: #fdecee; color: #a1242d; }
.ct-nota-noua.schimba { background: #fff9ef; }
.ct-nota-noua.schimba .t { color: #b07d15; }
.ct-nota-noua.sterge { background: #fdf2f3; }
.ct-nota-noua.sterge .t { color: #a1242d; }
.ct-actiuni { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ct-flex { flex: 1; }
.ct-aproba { padding: 14px 20px; border-radius: 15px; background: #e6fbef; color: var(--good); font-size: 14.5px; font-weight: 600; }

.ct-nota { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--linie); margin-top: 11px; align-items: flex-start; }
.ct-nota .t { font-size: 12.5px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; width: 40px; flex: none; }
.ct-nota .corp { flex: 1; min-width: 0; }
.ct-nota .x { font-size: 13.5px; line-height: 1.55; color: var(--text2); }
.ct-nota .st { font-size: 11.5px; color: var(--muted2); margin-top: 5px; }
.ct-nota-tgl {
  flex: none; width: 26px; height: 26px; border-radius: 13px; background: var(--accent-soft);
  color: var(--accent); font-size: 12.5px; font-weight: 700;
}
.ct-nota-tgl:hover { background: #e3e0fa; }
.ct-nota-noua { margin-top: 14px; padding: 14px; border-radius: 14px; background: #f7f6fd; }
.ct-nota-noua .t { font-size: 13px; font-weight: 600; color: var(--accent); }
.ct-nota-noua input {
  width: 100%; margin-top: 10px; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 11px; font-size: 13.5px; outline: none; color: var(--ink);
}
.ct-versiune { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--linie); margin-top: 11px; }
.ct-versiune .v {
  width: 34px; height: 34px; border-radius: 17px; background: var(--accent-soft);
  color: var(--accent); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.ct-versiune .c { font-size: 13.5px; font-weight: 600; }
.ct-versiune .m { font-size: 11.5px; color: var(--muted2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ct-versiune > div:nth-child(2) { flex: 1; min-width: 0; }
.ct-dl { flex: none; font-size: 14px; color: var(--muted); text-decoration: none; padding: 6px 8px; border-radius: 10px; }
.ct-dl:hover { background: var(--accent-soft); color: var(--accent); }

/* ===== YouTube Check ===== */
.yt-gol, .yt-loading { max-width: 620px; margin-top: 26px; animation: rise .25s ease; }
.yt-input-rand { display: flex; gap: 12px; margin-top: 18px; }
.yt-input-rand .cutie { flex: 1; display: flex; align-items: center; background: #f7f6fd; border-radius: 15px; padding: 0 14px; }
.yt-input-rand input { flex: 1; min-width: 0; background: transparent; border: none; padding: 15px 10px; font-size: 15px; outline: none; color: var(--ink); }
.yt-promis { display: flex; gap: 22px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); }
.yt-promis > div { flex: 1; }
.yt-promis .t { font-size: 13.5px; font-weight: 600; }
.yt-promis .x { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.yt-loading { padding: 34px; display: flex; align-items: center; gap: 18px; }
.yt-loading .puls-cerc { margin: 0; width: 38px; height: 38px; animation-duration: 1.4s; }
.yt-loading .t { font-size: 15px; font-weight: 600; }
.yt-loading .s { font-size: 13px; color: var(--muted); margin-top: 4px; }

.yt-demo {
  margin-top: 16px; padding: 11px 16px; border-radius: 14px; background: #fff4e2;
  color: #b07d15; font-size: 12.5px; font-weight: 600; max-width: fit-content;
}
.yt-antet { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 20px; border-radius: 22px; animation: rise .25s ease; }
.yt-antet .avatar { width: 48px; height: 48px; border-radius: 24px; font-size: 17px; }
.yt-antet .n { font-size: 16px; font-weight: 700; }
.yt-antet .m { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.yt-antet .sanatate { margin-left: auto; padding: 8px 14px; border-radius: 999px; background: #e6fbef; color: var(--good); font-size: 12.5px; font-weight: 700; }
.yt-chips { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.yt-chips > div { padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.yt-taburi { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.yt-tab {
  padding: 9px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--border);
  color: #7a7898; font-size: 13px; font-weight: 600; transition: background .18s;
}
.yt-tab.activ { background: var(--ink); border-color: var(--ink); color: #fff; }

.yt-sect { margin-top: 18px; }
.yt-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.yt-kpis.patru { grid-template-columns: repeat(4, 1fr); }
.yt-kpi { padding: 18px; border-radius: 20px; }
.yt-kpi .n { font-size: 12.5px; color: var(--muted); }
.yt-kpi .v { font-size: 26px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.yt-kpi .d { font-size: 12px; margin-top: 5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.yt-grila-13 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.yt-grila-11 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.yt-bare { display: flex; align-items: flex-end; gap: 8px; height: 170px; margin-top: 18px; }
.yt-bare.ore { height: 150px; gap: 9px; }
.yt-bare .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 7px; }
.yt-bare .bar { width: 100%; border-radius: 7px; background: var(--accent); transition: height .8s cubic-bezier(.2,.8,.2,1); }
.yt-bare .et { font-size: 10.5px; color: var(--muted2); height: 13px; font-variant-numeric: tabular-nums; }
.yt-cta { width: 100%; margin-top: 14px; }
.yt-format { margin-top: 16px; }
.yt-format .cap { display: flex; justify-content: space-between; font-size: 13px; font-variant-numeric: tabular-nums; }
.yt-format .cap span:first-child { font-weight: 600; }
.yt-format .cap span:last-child { color: var(--muted); }
.yt-format .pista { height: 8px; border-radius: 4px; background: #eeecfa; overflow: hidden; margin-top: 7px; }
.yt-format .pista > div { height: 100%; border-radius: 4px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.yt-format .sub { font-size: 12px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.yt-tehnic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.yt-tehnic > div { background: #f7f6fd; border-radius: 14px; padding: 12px 14px; }
.yt-tehnic .n { font-size: 12px; color: var(--muted); }
.yt-tehnic .v { font-size: 15px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.yt-cuvinte { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.yt-cuvinte > div { padding: 8px 14px; border-radius: 999px; background: #f7f6fd; color: var(--text2); font-size: 13px; }

.yt-tabel-cap, .yt-tabel-rand { display: grid; grid-template-columns: 1fr 108px 92px 78px 104px; gap: 14px; align-items: center; }
.yt-tabel-cap { padding: 14px 0 10px; border-bottom: 1px solid var(--linie); font-size: 12px; color: var(--muted); }
.yt-tabel-cap > div:not(:first-child) { text-align: right; }
.yt-tabel-rand { padding: 13px 0; border-bottom: 1px solid #f6f5fc; }
.yt-tabel-rand .v1 { display: flex; align-items: center; gap: 12px; min-width: 0; }
.yt-tabel-rand .poza { width: 64px; height: 38px; border-radius: 9px; flex: none; background: #eeecfa center/cover no-repeat; }
.yt-tabel-rand .mi { min-width: 0; }
.yt-tabel-rand .t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-tabel-rand .m { font-size: 11.5px; color: var(--muted2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.yt-tabel-rand .nr { text-align: right; font-size: 13px; color: var(--text2); font-variant-numeric: tabular-nums; }
.yt-tabel-rand .nr.b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.yt-tabel-rand .nr.m { font-size: 12.5px; color: var(--muted); }

.yt-zile { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.yt-zile > div { display: grid; grid-template-columns: 28px 1fr 34px; align-items: center; gap: 12px; }
.yt-zile span { font-size: 12.5px; color: var(--muted); }
.yt-zile .nr { color: var(--text2); text-align: right; font-variant-numeric: tabular-nums; }
.yt-zile .pista { height: 10px; border-radius: 5px; background: #eeecfa; overflow: hidden; }
.yt-zile .pista > div { height: 100%; border-radius: 5px; background: var(--accent); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.yt-nota-rand { font-size: 13.5px; line-height: 1.65; color: var(--text2); padding: 12px 0; border-top: 1px solid var(--linie); margin-top: 10px; }
.yt-coment { padding: 14px 0; border-top: 1px solid var(--linie); margin-top: 12px; }
.yt-coment .cap { display: flex; align-items: baseline; gap: 10px; }
.yt-coment .a { font-size: 13.5px; font-weight: 600; }
.yt-coment .c { font-size: 12px; color: var(--muted2); }
.yt-coment .l { margin-left: auto; font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; }
.yt-coment .x { font-size: 13.5px; line-height: 1.6; color: var(--text2); margin-top: 6px; }
.yt-coment .r { font-size: 12px; color: var(--muted2); margin-top: 6px; }
.yt-playlist { padding: 13px 0; border-top: 1px solid var(--linie); margin-top: 11px; }
.yt-playlist .t { font-size: 13.5px; font-weight: 600; }
.yt-playlist .m { font-size: 12.5px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.yt-sursa { display: grid; grid-template-columns: 210px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--linie); margin-top: 12px; }
.yt-sursa .e { font-size: 13.5px; font-weight: 600; }
.yt-sursa .p { font-size: 11.5px; color: var(--muted2); margin-top: 4px; line-height: 1.5; }
.yt-sursa .c { font-size: 13.5px; line-height: 1.6; color: var(--text2); }
.yt-blocate { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.yt-blocate > div { background: #f7f6fd; border-radius: 16px; padding: 14px 16px; }
.yt-blocate .cap { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; }
.yt-blocate .m { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ===== Admin ===== */
.ad-kpis { grid-template-columns: repeat(3, 1fr); }
.ad-chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 18px; }
.ad-chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; min-width: 0; }
.ad-chart .bar { width: 100%; border-radius: 6px; background: var(--accent); transition: height .8s cubic-bezier(.2,.8,.2,1); }
.ad-chart .et { font-size: 10px; color: var(--muted2); height: 12px; }
.ad-stocare { display: grid; grid-template-columns: 160px 1fr 80px; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--linie); margin-top: 8px; }
.ad-stocare .n { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-stocare .pista { height: 10px; border-radius: 5px; background: #eeecfa; overflow: hidden; }
.ad-stocare .pista > div { height: 100%; border-radius: 5px; background: var(--accent); }
.ad-stocare .v { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.ad-tabel-card { overflow-x: auto; }
.ad-tabel-cap, .ad-rand { display: grid; grid-template-columns: minmax(200px, 1.4fr) 150px 92px 130px 80px 70px minmax(190px, 1fr); gap: 12px; align-items: center; min-width: 940px; }
.ad-tabel-cap { padding: 4px 0 12px; border-bottom: 1px solid var(--linie); font-size: 12px; color: var(--muted); }
.ad-rand { padding: 13px 0; border-bottom: 1px solid #f6f5fc; }
.ad-rand.inactiv { opacity: .55; }
.ad-rand .cine { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ad-rand .cine .n { font-size: 13.5px; font-weight: 600; }
.ad-rand .cine .e { font-size: 12px; color: var(--muted); }
.ad-rand .rol { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 999px; }
.ad-rand .off { font-size: 10.5px; font-weight: 700; color: var(--rosu); background: #fdecee; padding: 2px 7px; border-radius: 999px; }
.ad-rand .din, .ad-rand .gb { font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; }
.ad-rand .cota { font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; line-height: 1.4; }
.ad-rand .cota .m { color: var(--muted2); font-size: 11.5px; }
.ad-plan {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 9px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink); outline: none;
}
.ad-data {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 10px; font-size: 12px; color: var(--ink); outline: none; width: 100%;
}
.ad-rand .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ad-rand .acts .chip { padding: 8px 12px; font-size: 12.5px; }
.ad-suport { background: #f7f6fd; border-radius: 18px; padding: 18px; margin: 4px 0 14px; animation: rise .2s ease; }
.ad-suport .cap { display: flex; align-items: center; gap: 12px; }
.ad-suport .cap .t { font-size: 15px; font-weight: 700; flex: 1; }
.ad-suport .info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; margin-top: 14px; }
.ad-suport .info .k { color: var(--muted); font-size: 12px; display: block; }
.ad-suport .info .v { font-size: 13.5px; font-weight: 600; }
.ad-suport .sect { margin-top: 16px; }
.ad-suport .et { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.ad-suport .gol { font-size: 13px; color: var(--muted2); }
.ad-suport .proiect { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid #ecebf8; }
.ad-suport .proiect .t { font-size: 13.5px; font-weight: 600; flex: none; max-width: 45%; }
.ad-suport .proiect .s { font-size: 12.5px; color: var(--muted); min-width: 0; }
.ad-suport .proiect.err .s { color: var(--rosu); }

@media (max-width: 1180px) {
  .yt-kpis, .ad-kpis { grid-template-columns: repeat(2, 1fr); }
  .yt-grila-13, .yt-grila-11 { grid-template-columns: 1fr; }
  .ct-grila { grid-template-columns: 1fr; }
  .ad-suport .info { grid-template-columns: 1fr 1fr; }
}

/* ===== Abonament: paywall, lacate, banner ===== */
.chip-lacat { color: var(--muted) !important; background: var(--panou) !important; }
.chip-lacat:hover { color: var(--accent) !important; border-color: #d9d3fb !important; }
.nav-item .nav-lacat { margin-left: auto; color: var(--muted2); display: flex; align-items: center; }
.nav-item.blocat { color: var(--muted); }

#abon-banner {
  position: sticky; top: 0; z-index: 60;
  padding: 13px 30px; font-size: 13.5px; line-height: 1.5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
#abon-banner.gratie { background: #fff4e2; color: #8a6210; }
#abon-banner.inghetat { background: #fdecee; color: #a1242d; }
#abon-banner button {
  padding: 9px 15px; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: 12.5px; font-weight: 600; flex: none;
}

#paywall-fundal {
  position: fixed; inset: 0; background: rgba(22,22,42,.55);
  backdrop-filter: blur(4px); z-index: 84; animation: fadein .18s ease;
}
#paywall {
  position: fixed; inset: 0; z-index: 85; display: flex;
  align-items: center; justify-content: center; padding: 24px; pointer-events: none;
}
.pw-cutie {
  width: 640px; max-width: 100%; max-height: 92vh; overflow: auto;
  background: #fff; border-radius: 28px; padding: 30px;
  box-shadow: 0 30px 70px rgba(10,8,30,.35); pointer-events: auto; animation: rise .22s ease;
  text-align: center;
}
.pw-titlu { font-size: 24px; font-weight: 700; letter-spacing: -.6px; }
.pw-sub { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.pw-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; text-align: left; }
.pw-plan { border: 1px solid var(--border); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; }
.pw-plan.elite { border-color: #d9d3fb; background: #faf9ff; }
.pw-plan .nume { font-size: 14px; font-weight: 700; }
.pw-plan .pret { font-size: 28px; font-weight: 700; letter-spacing: -.8px; margin-top: 4px; }
.pw-plan .pret span { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* Oferta de bun venit — roșu #ff3040, elemente SEPARATE: badge / preț / timp */
.of-badge { display: inline-block; align-self: flex-start; background: #ff3040; color: #fff;
  font-size: 19px; font-weight: 800; letter-spacing: -.01em; padding: 6px 16px;
  border-radius: 999px; margin-top: 10px; box-shadow: 0 8px 22px rgba(255, 48, 64, .35);
  animation: of-puls 1.6s ease-in-out infinite; }
@keyframes of-puls { 50% { box-shadow: 0 0 0 9px rgba(255, 48, 64, .12); } }
.pret-vechi { color: var(--muted2); font-size: 17px; font-weight: 600; margin-right: 6px; }
.of-pret { color: #ff3040; }
.pw-plan .pret .of-pret { font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: #ff3040; }
.of-timer { margin-top: 10px; display: flex; align-items: center; gap: 10px;
  background: #fff0f1; border: 1.5px solid #ffd0d5; border-radius: 14px; padding: 9px 14px; }
.of-timer .et { font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #c2222e; }
.of-timer .of-cd { margin-left: auto; font-size: 24px; font-weight: 800;
  color: #ff3040; letter-spacing: .02em; }
.of-btn { background: #ff3040 !important; box-shadow: 0 12px 26px rgba(255, 48, 64, .35) !important; }
.of-btn:hover { background: #e0212f !important; }
#plan-switch.of-rosu { background: #ff3040; border-color: #ff3040; color: #fff;
  font-weight: 800; animation: of-puls 1.6s ease-in-out infinite; }
.of-cd { font-variant-numeric: tabular-nums; }
.pw-plan ul { margin: 12px 0 16px; padding-left: 17px; font-size: 12.5px; line-height: 1.7; color: var(--text2); flex: 1; }
.pw-plan .btn-mediu { width: 100%; }
.pw-nota { font-size: 12px; color: var(--muted2); margin-top: 16px; line-height: 1.6; }
.pw-inchide { margin-top: 12px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) { .pw-plans { grid-template-columns: 1fr; } }

.ar-teaser-drept { flex: 1; min-width: 0; }
.ar-teaser-drept .t { font-size: 15px; font-weight: 600; }
.ar-teaser-drept .s { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.ar-lock {
  margin-top: 14px; padding: 13px; width: 100%; text-align: center; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600;
}
.lista-inghetata {
  background: #fff; border: 1px solid #f4c8cc; border-radius: 20px; padding: 20px; text-align: center;
}
.lista-inghetata .t { font-size: 14.5px; font-weight: 700; color: #a1242d; }
.lista-inghetata .s { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.lista-inghetata .btn-mediu { margin-top: 14px; }

/* ===== Facturare ===== */
#facturare-corp { max-width: 560px; margin-top: 14px; }
.fact-stare { font-size: 14px; color: var(--text2); margin-top: 10px; line-height: 1.6; }
.fact-plata {
  display: grid; grid-template-columns: 84px 1fr 100px 60px 56px; gap: 12px;
  align-items: baseline; padding: 11px 0; border-top: 1px solid var(--linie); font-size: 13px;
}
.fact-plata .f {
  font-size: 11.5px; font-weight: 600; color: var(--accent); text-decoration: none;
  text-align: right; white-space: nowrap;
}
.fact-plata .f:hover { text-decoration: underline; }
.fact-plata .d { color: var(--muted2); font-variant-numeric: tabular-nums; }
.fact-plata .c { color: var(--ink); font-weight: 600; min-width: 0; }
.fact-plata .c .p { color: var(--muted2); font-weight: 400; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fact-plata .st { color: var(--good); font-size: 12px; text-align: right; }
.fact-plata .st.sim { color: #b07d15; }
.fact-plata .s { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  padding: 14px 22px; border-radius: 18px; background: rgba(22,22,42,.94);
  color: #fff; font-size: 14px; font-weight: 500; z-index: 90;
  animation: rise .2s ease; box-shadow: 0 16px 34px rgba(22,22,42,.3);
  max-width: 80vw;
}

.doar-ingust { display: none; }

@media (max-width: 1180px) {
  #col-piese { width: 300px; }
}
@media (max-width: 860px) {
  #sidebar { width: 190px; }
  .grila-2, .mkt-grila, .bio-grila { grid-template-columns: 1fr; }
  #col-piese { width: auto; flex: 1; }
  body.vad-detaliu #col-piese { display: none !important; }
  body:not(.vad-detaliu) #principal.mod-piese { display: none; }
  .doar-ingust { display: inline-block; }
}

/* ===== Telefon (≤700px): navigarea devine bară de taburi jos, stil OS ===== */
@media (max-width: 700px) {
  /* sidebarul iese din flux și se lipește jos; --vv-jos compensează
     diferența layout/visual viewport (bugul „butonul invizibil" de pe LP) */
  #sidebar { position: fixed; left: 0; right: 0; top: auto; z-index: 50;
    bottom: var(--vv-jos, 0px);
    width: auto; height: auto; flex-direction: row; align-items: stretch;
    padding: 6px 6px calc(7px + env(safe-area-inset-bottom));
    background: rgba(251, 251, 254, .94);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-right: 0; border-top: 1px solid var(--border); overflow: visible; }
  #sidebar .logo, #sidebar .tag, #sidebar .plan-card, #sidebar .cont-chip { display: none; }
  #nav { display: flex; flex-direction: row; flex: 1; gap: 2px; margin-top: 0; }
  .nav-item { flex: 1; width: auto; flex-direction: column; gap: 4px; padding: 6px 2px;
    font-size: 9.5px; font-weight: 600; text-align: center; align-items: center;
    justify-content: flex-start; border-radius: 12px; min-width: 0; }
  .nav-item .nic { width: 30px; height: 30px; border-radius: 15px; }
  .nav-item .nav-lacat { display: none; } /* lacătul înghesuie tabul; paywall-ul apare oricum la tap */
  /* «Piesă nouă» = buton rotund plutitor, deasupra barei */
  .cta-nou { position: fixed; right: 14px; z-index: 51; margin: 0;
    bottom: calc(78px + env(safe-area-inset-bottom) + var(--vv-jos, 0px));
    width: 56px; height: 56px; border-radius: 50%;
    justify-content: center; padding: 0; gap: 0; font-size: 0;
    box-shadow: 0 14px 30px rgba(91, 77, 240, .42); }
  .cta-nou svg { width: 22px; height: 22px; }
  /* progresul din fundal: chip plutitor deasupra barei */
  .proc-mini { position: fixed; left: 12px; right: 84px; z-index: 51; margin: 0;
    bottom: calc(78px + env(safe-area-inset-bottom) + var(--vv-jos, 0px)); }
  /* conținutul primește aer sub el, să nu-l acopere bara */
  #principal .vedere { padding: 18px 16px calc(104px + env(safe-area-inset-bottom)); }
  /* oferta de bun venit: chip roșu plutitor stânga-jos (mutat în body de app.js) */
  body > #plan-switch { display: none; position: fixed; left: 12px; z-index: 51;
    bottom: calc(78px + env(safe-area-inset-bottom) + var(--vv-jos, 0px));
    width: auto; margin: 0; padding: 11px 15px; border-radius: 999px; border: 0; }
  body > #plan-switch.of-rosu { display: block; }
}

/* ===== Telefon: stive glisabile (swipe pe orizontală) ===== */
@media (max-width: 700px) {
  .det-poza { width: 96px; height: 128px; border-radius: 16px; }
  .det-titlu { font-size: 23px; }
  /* acțiunile piesei: un singur rând, îl tragi cu degetul spre dreapta */
  .det-actiuni { flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 0;
    padding: 2px 16px 10px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .det-actiuni::-webkit-scrollbar { display: none; }
  .det-actiuni > * { flex: none; white-space: nowrap; scroll-snap-align: start; }
  /* shorturile: bandă orizontală cu snap, ca un rând de story-uri */
  .sh-grila { display: flex; overflow-x: auto; gap: 10px; margin: 16px -16px 0;
    padding: 2px 16px 10px; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; }
  .sh-grila::-webkit-scrollbar { display: none; }
  .sh-grila .sh-card { flex: 0 0 138px; scroll-snap-align: start; }
  /* cadrele din videoclip: bandă glisabilă */
  .gf-frames { display: flex; overflow-x: auto; gap: 10px; margin: 14px -16px 0;
    padding: 2px 16px 8px; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; }
  .gf-frames::-webkit-scrollbar { display: none; }
  .gf-frames img { flex: 0 0 45%; width: auto; scroll-snap-align: start; }
  /* materialele generate stau stivuite normal (decizia MIXCUT: fără bandă);
     promo s-a mutat la Shorts */
}

/* ===== Telefon: audit cap-coadă (upload, cont, youtube) ===== */
@media (max-width: 700px) {
  /* Upload: câmpuri stivuite, butoane late, nota sub ele; fără golul de sus */
  .vedere-centrata { align-items: flex-start; padding: 26px 16px calc(110px + env(safe-area-inset-bottom)); }
  .up-campuri { flex-direction: column; gap: 10px; }
  .up-jos { flex-wrap: wrap; gap: 10px; }
  .up-jos .btn-mare, .up-jos .btn-alb { flex: 1 1 40%; }
  .up-nota { flex-basis: 100%; text-align: center; margin-top: 2px; }
  /* Cont: chip-ul «Plan» din header e redundant (cardul Abonament e fix sub) */
  #cont-plan { display: none; }
  /* Istoricul plăților: descriere + sumă / dată + PDF / status — fără suprapuneri */
  .fact-plata { grid-template-columns: 1fr auto; row-gap: 3px; column-gap: 10px; align-items: start; }
  .fact-plata .c { grid-column: 1; grid-row: 1; font-weight: 600; }
  .fact-plata .c .p { display: block; font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 2px; }
  .fact-plata .s { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }
  .fact-plata .d { grid-column: 1; grid-row: 2; font-size: 12px; }
  .fact-plata .st { grid-column: 1; grid-row: 3; font-size: 11.5px; }
  .fact-plata .f { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
  /* YouTube Check: inputul și butonul unul sub altul, promisiunile stivuite */
  .yt-input-rand { flex-direction: column; gap: 10px; }
  .yt-input-rand .btn-mare { width: 100%; }
  .yt-promis { flex-direction: column; gap: 14px; }
  /* grilele pe o coloană nu au voie să se umfle la min-content (grid blowout) */
  .bio-grila > *, .mkt-grila > *, .grila-2 > * { min-width: 0; }
  .bio-rand span { width: 108px; }
  .bio-tel { max-width: 340px; margin: 0 auto; }
  .slug-rand { flex-direction: column; align-items: stretch; gap: 10px; }
  .slug-rand .btn-mediu { width: 100%; }
}

/* ===== Ilustrații de marketing (.mi) — desenate local, evocă platforma ===== */
.mi { width: 54px; height: 54px; flex: none; border-radius: 15px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  position: relative; overflow: hidden; }
.mkt-plat-cap { display: flex; align-items: center; gap: 12px; }
.mkt-plat-cap .mi { width: 40px; height: 40px; border-radius: 12px; }
.mkt-plat-cap .p { font-size: 14px; font-weight: 700; }
/* profil cu link în bio (avatar + nume + buton) */
.mi-bio { flex-direction: column; gap: 4px; }
.mi-bio .av { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); }
.mi-bio .ln { width: 22px; height: 4px; border-radius: 3px; background: #cdc7ee; }
.mi-bio .pill { width: 28px; height: 9px; border-radius: 6px; background: #ff3040; }
/* stivă de shorturi 9:16 */
.mi-shorts .s1, .mi-shorts .s2 { width: 17px; height: 30px; border-radius: 5px;
  background: #cdc7ee; }
.mi-shorts .s2 { background: linear-gradient(160deg, #262347, #4a3f8f); margin-left: -8px;
  display: flex; align-items: center; justify-content: center; }
.mi-shorts .s2 i { border-left: 6px solid #fff; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; margin-left: 2px; }
/* videoclip / YouTube: card cu play */
.mi-yt .play { width: 34px; height: 24px; border-radius: 7px; background: #ff6a6a;
  display: flex; align-items: center; justify-content: center; }
.mi-yt .play::after { content: ""; border-left: 9px solid #fff; border-top: 6px solid transparent;
  border-bottom: 6px solid transparent; margin-left: 2px; }
/* Instagram / story: ramă cu obiectiv, inel de story */
.mi-ig .cam { width: 26px; height: 26px; border-radius: 9px;
  border: 2.5px solid transparent;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box,
              linear-gradient(135deg, #ff6aa2, #fa8e57) border-box;
  display: flex; align-items: center; justify-content: center; }
.mi-ig .cam i { width: 11px; height: 11px; border-radius: 50%;
  border: 2.5px solid #ff6aa2; display: block; }
/* postare Facebook: avatar albastru + rânduri de text */
.mi-fb { flex-direction: column; align-items: flex-start; padding-left: 12px; gap: 4px; }
.mi-fb .fav { width: 12px; height: 12px; border-radius: 50%; background: #4a7cf7; }
.mi-fb .l1, .mi-fb .l2 { height: 4px; border-radius: 3px; background: #cdc7ee; }
.mi-fb .l1 { width: 30px; } .mi-fb .l2 { width: 22px; }
/* TikTok: notă pe ecran închis + bare de progres */
.mi-tiktok { background: linear-gradient(160deg, #1b1930, #322b5e); flex-direction: column; gap: 4px; }
.mi-tiktok .nota { color: #25f4ee; font-size: 17px; font-weight: 800;
  text-shadow: 2px 2px 0 rgba(255, 48, 64, .8); }
.mi-tiktok .bare { display: flex; gap: 3px; }
.mi-tiktok .bare i { width: 3px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.7); }
.mi-tiktok .bare i:nth-child(2) { height: 12px; }
/* LIVE */
.mi-live b { background: #ff3040; color: #fff; font-size: 10px; font-weight: 800;
  padding: 4px 8px; border-radius: 7px; letter-spacing: .06em;
  animation: of-puls 1.6s ease-in-out infinite; }
/* comentarii / comunitate: bule */
.mi-chat { flex-direction: column; align-items: flex-start; padding-left: 11px; gap: 4px; }
.mi-chat .b1, .mi-chat .b2 { height: 11px; border-radius: 7px 7px 7px 3px; background: #cdc7ee; width: 26px; }
.mi-chat .b2 { background: var(--accent); width: 32px; border-radius: 7px 7px 3px 7px; align-self: flex-end; margin-right: 11px; }
/* streaming: equalizer verde */
.mi-sp i { width: 4px; border-radius: 3px; background: #1ed760; height: 10px; }
.mi-sp i:nth-child(2) { height: 20px; } .mi-sp i:nth-child(3) { height: 14px; }
.mi-sp i:nth-child(4) { height: 22px; }
/* calendar de postări */
.mi-cal { display: grid; grid-template-columns: repeat(3, 9px); gap: 4px; }
.mi-cal i { width: 9px; height: 9px; border-radius: 3px; background: #cdc7ee; }
.mi-cal i.a { background: var(--accent); }
/* hashtag */
.mi-tag { color: var(--accent); font-size: 24px; font-weight: 800; }
/* creștere (implicit): bare care urcă */
.mi-crestere { align-items: flex-end; padding-bottom: 12px; }
.mi-crestere i { width: 7px; border-radius: 3px 3px 0 0; background: #cdc7ee; height: 12px; }
.mi-crestere i:nth-child(2) { height: 19px; }
.mi-crestere i.a { height: 26px; background: var(--accent); }

/* iconițele acțiunilor — pe desktop: cerc mic în pastilă, lângă text */
.det-actiuni > * { display: inline-flex; align-items: center; gap: 8px; }
.det-actiuni .ci { display: flex; width: 22px; height: 22px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent);
  align-items: center; justify-content: center; flex: none; }
.det-actiuni .ci svg { width: 13px; height: 13px; }
.det-actiuni > .chip-rosu .ci { background: #ffecee; color: #e0303a; }

/* ===== Telefon: acțiunile piesei = grilă de plăcuțe; Grafica = pași de app ===== */
@media (max-width: 700px) {
  .det-actiuni { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    overflow: visible; flex-wrap: initial; scroll-snap-type: none;
    margin: 14px -16px 0; padding: 0 16px; }
  .det-actiuni > * { display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; gap: 7px; white-space: normal; text-align: center;
    padding: 11px 4px 9px; border-radius: 16px; font-size: 10px; font-weight: 600;
    line-height: 1.15; min-height: 74px; scroll-snap-align: none; }
  .det-actiuni .ci { display: flex; width: 32px; height: 32px; border-radius: 16px;
    background: var(--accent-soft); color: var(--accent);
    align-items: center; justify-content: center; flex: none; }
  .det-actiuni > .btn-primar { grid-column: 1 / -1; flex-direction: row;
    justify-content: center; gap: 9px; font-size: 14.5px; min-height: 48px;
    padding: 13px; border-radius: 16px; }
  .det-actiuni > .chip-rosu { color: #e0303a; }
  .det-actiuni > .chip-rosu .ci { background: #ffecee; color: #e0303a; }
  /* Grafica pe telefon: fiecare pas = butoane late, unul sub altul */
  .card-grafica .ed-buttons { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .card-grafica .ed-buttons > * { width: 100%; text-align: center; margin: 0; }
  .card-grafica .gf-desc { width: 100%; padding: 14px; border-radius: 14px; font-size: 15px; }
  .card-grafica .gf-base, .card-grafica .gf-editata { width: 100%; border-radius: 16px; }
  .card-lansare .ed-buttons { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .card-lansare .ed-buttons > * { width: 100%; text-align: center; margin: 0; }
  .vedere .card { padding: 18px 16px; }
}

/* ===== Shorts: bara de sub stivă + cardul PROMO ===== */
.sh-scrollbar { display: none; position: relative; height: 4px; border-radius: 3px;
  background: var(--linie); margin-top: 12px; overflow: hidden; }
.sh-scrollbar i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  border-radius: 3px; background: var(--accent); opacity: .85;
  transition: left .12s linear, width .2s; }
.sh-card.sh-promo .rama { border: 2px solid #ff3040; }
.sh-badge { position: absolute; top: 8px; left: 8px; background: #ff3040; color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; padding: 3px 8px;
  border-radius: 7px; z-index: 2; }
.sh-promo .rama video { width: 100%; height: 100%; object-fit: cover; }
.sh-promo-gol .rama-gol { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; background: var(--accent-soft);
  border: 1.5px dashed #c6bff0; text-align: center; color: var(--accent);
  font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.sh-promo-gol .rama-gol b { font-size: 22px; }

@media (max-width: 700px) {
  /* capul Shorts pe două rânduri: titlu + nr + Descarcă sus, taburile LATE jos */
  .sh-cap { flex-wrap: wrap; row-gap: 10px; }
  .sh-cap .h2 { white-space: nowrap; }
  .sh-zip { margin-left: auto; }
  .sh-taburi { order: 5; flex-basis: 100%; display: flex; margin: 0; }
  .sh-taburi .sh-tab { flex: 1; text-align: center; }
  .sh-scrollbar { display: block; }
}

/* ===== v1.15 — Artiști, Bio-linkuri, Pachetul YouTube ===== */
.card-sub .s { margin-left: 10px; font-size: 12.5px; color: var(--muted); }

.art-start { margin-top: 22px; max-width: 560px; }
.art-start .t { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.art-start .d { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }

.art-card { margin-top: 16px; }
.art-cap { display: flex; align-items: center; gap: 12px; }
.art-cap .avatar { width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--accent), #8a5ef5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; }
.art-mij { min-width: 0; }
.art-mij .n { font-size: 15.5px; font-weight: 700; }
.art-mij .s { font-size: 12.5px; color: var(--muted); }
.art-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.art-chip { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: #f2f0fb; color: #a9a7bd; }
.art-chip.ok { background: #e6fbef; color: #1f9d5b; }
.art-ed-titlu { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
#artist-editor { margin-top: 22px; }

.bl-rand { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; }
.bl-rand .avatar { width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, var(--accent), #8a5ef5); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.bl-cover { width: 42px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.bl-mij { min-width: 0; flex: 1; }
.bl-mij .n { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-mij .u { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-btns { display: flex; align-items: center; gap: 10px; flex: none; }
.bl-gol { margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.bl-gol .btn-mediu { margin-top: 12px; }
#bio-linkuri .mkt-eticheta { margin-top: 22px; }

.ytp-rand { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linie); }
.ytp-rand:first-child { border-top: none; }
.ytp-st { min-width: 0; flex: 1; }
.ytp-st .e { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.ytp-st .v { font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.ytp-text { width: 100%; border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px;
  font: inherit; font-size: 12.5px; line-height: 1.55; color: var(--ink); background: #fafafd; resize: vertical; }
.ytp-rand .chip { flex: none; margin-top: 18px; }

.up-artist { flex: 1; display: flex; gap: 10px; min-width: 0; }
.up-artist input, .up-artist select { flex: 1; min-width: 0; }
.up-artist select { background: #fff; border: 1.5px solid var(--linie); border-radius: 14px;
  padding: 13px 12px; font: inherit; font-size: 14.5px; color: var(--ink); outline: none; }
.up-artist select:focus { border-color: var(--accent); }
.up-artist-nota { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 700px) {
  .art-card .ed-buttons { flex-wrap: wrap; }
  .bl-rand { flex-wrap: wrap; }
  .bl-btns { width: 100%; }
  .bl-btns .btn-mediu { flex: 1; }
  .ytp-rand { flex-wrap: wrap; }
  .ytp-rand .chip { margin-top: 0; width: 100%; text-align: center; }
}

/* ===== v1.16 — fețele Piesa/Lansarea, meniuri grupate, intrări mutate ===== */
.det-fete { display: flex; gap: 6px; margin-top: 22px; background: #eceafa;
  border-radius: 14px; padding: 4px; width: max-content; }
.df-tab { border: none; background: transparent; font: inherit; font-size: 13.5px;
  font-weight: 700; color: var(--muted); padding: 9px 22px; border-radius: 11px;
  cursor: pointer; transition: all .15s; }
.df-tab.activ { background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgba(60,50,130,.10); }

.meniu-pop { position: fixed; z-index: 90; background: #fff; border-radius: 14px;
  border: 1px solid var(--linie); box-shadow: 0 14px 34px rgba(60,50,130,.16);
  padding: 6px; min-width: 190px; }
.mp-rand { display: block; width: 100%; text-align: left; border: none;
  background: transparent; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink); padding: 10px 12px; border-radius: 10px; cursor: pointer;
  text-decoration: none; }
.mp-rand:hover { background: #f4f2fd; }
.mp-rand.rosu { color: #e0303a; }
.mp-rand.rosu:hover { background: #fdeef0; }

.yl-input { width: 100%; border: 1.5px solid var(--linie); border-radius: 12px;
  padding: 11px 12px; font: inherit; font-size: 13.5px; color: var(--ink);
  outline: none; margin-top: 2px; }
.yl-input:focus { border-color: var(--accent); }
.yl-nota { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

.up-cotransfer { display: block; width: 100%; margin-top: 18px; border: none;
  background: transparent; font: inherit; font-size: 13px; color: var(--muted);
  cursor: pointer; text-align: center; padding: 10px; }
.up-cotransfer b { color: var(--accent); font-weight: 700; }
.up-cotransfer:hover b { text-decoration: underline; }

.art-strat { margin-top: 26px; max-width: 560px; }
.art-strat .t { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.art-strat .d { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }

@media (max-width: 700px) {
  .det-fete { width: 100%; }
  .df-tab { flex: 1; text-align: center; padding: 10px 8px; }
  .meniu-pop { min-width: 220px; }
}

/* ============================================================
   v1.17 — „LUMINA 2": stratul de eleganță (cerut de MIXCUT:
   «apple style, curat, frumos aranjat, distinctiv» + animații
   ca pe landing). DOAR proprietăți vizuale la nivel global;
   orice ține de layout stă scoped pe desktop (min-width: 701px),
   ca să nu atingă regulile de telefon (bara jos, FAB, --vv-jos).
   ============================================================ */

:root {
  --ease: cubic-bezier(.2, .8, .2, 1);
  --grad-accent: linear-gradient(135deg, #5b4df0, #7c5cf4 60%, #8a5ef5);
  --umbra-card: 0 1px 2px rgba(22, 18, 60, .04), 0 12px 34px rgba(60, 50, 130, .10);
  --umbra-sus: 0 2px 6px rgba(22, 18, 60, .05), 0 18px 44px rgba(60, 50, 130, .14);
  --accent-shadow: 0 6px 16px rgba(91, 77, 240, .25), 0 14px 34px rgba(91, 77, 240, .22);
}

/* aerul din spate: aceleași halouri violet ca pe landing și pe paginile
   publice — camera în care stau cardurile, nu un fundal mort */
body {
  background-image:
    radial-gradient(640px 420px at 8% -6%, rgba(91, 77, 240, .10), transparent 62%),
    radial-gradient(560px 380px at 96% 2%, rgba(151, 77, 240, .08), transparent 62%);
  background-attachment: fixed;
}

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: rgba(120, 112, 180, .28); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 112, 180, .45); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- mișcarea de bază: totul răspunde moale, nimic nu sare brusc ---- */
button, .chip, a.chip, .filtru, .nav-item, .piesa-card, .cta-nou,
.btn-primar, .btn-mediu, .btn-mare, .btn-soft, .btn-alb, .df-tab, .sh-tab {
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background .18s ease, border-color .18s ease, color .18s ease;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.985); }
                    to { opacity: 1; transform: none; } }
.vedere { animation: rise .32s var(--ease); }
.card { animation: cardIn .45s var(--ease) both; }
.card:nth-child(2) { animation-delay: .04s; }
.card:nth-child(3) { animation-delay: .08s; }
.card:nth-child(4) { animation-delay: .12s; }
.card:nth-child(n+5) { animation-delay: .16s; }
.grila-2 > .card:nth-child(2) { animation-delay: .07s; }

/* ---- adâncime: carduri cu contur-fir și umbră în straturi ---- */
.card {
  border: 1px solid rgba(234, 232, 247, .9);
  box-shadow: var(--umbra-card);
  padding: 24px;
}
.piesa-card, .chip, .filtru, .btn-alb, .sh-taburi, .pw-plan {
  border-color: rgba(228, 225, 245, .95);
}

/* ---- tipografie: titluri mari, respirate, à la Apple ---- */
.h0 { font-size: 34px; letter-spacing: -.022em; }
.sub0 { font-size: 15.5px; margin-top: 9px; }
.h1 { font-size: 26px; letter-spacing: -.022em; }
.det-titlu { font-size: 34px; letter-spacing: -.024em; }
.mkt-eticheta {
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted2);
}
.card-sub .t { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }

/* ---- butoanele: gradient viu, se ridică la hover, se strâng la apăsare ---- */
.btn-primar, .btn-mediu, .btn-mare, .cta-nou {
  background: var(--grad-accent);
}
.btn-primar:hover, .btn-mediu:hover, .btn-mare:not(:disabled):hover, .cta-nou:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 10px 22px rgba(91, 77, 240, .32), 0 20px 44px rgba(91, 77, 240, .26);
}
.btn-primar:active, .btn-mediu:active, .btn-mare:active, .cta-nou:active,
.chip:active, .btn-soft:active, .btn-alb:active, .filtru:active { transform: scale(.965); }
.btn-soft, .btn-alb { border-radius: 16px; }
.btn-soft:hover, .btn-alb:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(60, 50, 130, .10); }

/* chips = pastile adevărate */
.chip { border-radius: 999px; padding: 11px 17px; }
.chip:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(60, 50, 130, .10); border-color: #cfc8f6; }
.filtru { transition: all .18s ease; }
.filtru:hover { border-color: #cfc8f6; color: var(--ink); }

/* ---- lista de piese: cardurile plutesc la hover, activul are inel violet ---- */
.piesa-card { box-shadow: 0 2px 10px rgba(60, 50, 130, .05); }
.piesa-card:hover { transform: translateY(-2px); box-shadow: var(--umbra-card); border-color: #d9d3fb; }
.piesa-card.activ {
  background: #fff; border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent), 0 10px 26px rgba(91, 77, 240, .18);
}
.piesa-card .poza { box-shadow: inset 0 0 0 1px rgba(22, 18, 60, .05); }
.det-poza { box-shadow: 0 8px 20px rgba(60, 50, 130, .16), 0 22px 54px rgba(60, 50, 130, .22); }

/* ---- navigarea: iconițe în pastile, activul cu gradient ---- */
.nav-item:hover { background: rgba(91, 77, 240, .06); color: var(--ink); }
.nav-item .nic { transition: all .22s var(--ease); }
.nav-item.activ .nic { background: var(--grad-accent); box-shadow: 0 6px 14px rgba(91, 77, 240, .35); }
.nav-item.activ svg { stroke: #fff; }

/* ---- segmentul Piesa/Lansarea + taburile de shorts: alunecare moale ---- */
.det-fete { box-shadow: inset 0 1px 3px rgba(22, 18, 60, .06); }
.df-tab.activ { box-shadow: 0 3px 10px rgba(60, 50, 130, .14); }

/* ---- formulare: focus cu inel, nu doar contur ---- */
.up-campuri input:focus, .up-artist select:focus, .yl-input:focus,
.slug-cutie:focus-within, .ytp-text:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(91, 77, 240, .12);
}
.slug-cutie, .up-campuri input, .up-artist select { transition: border-color .18s, box-shadow .18s; }

/* ---- zona de upload: prinde viață când te apropii ---- */
@keyframes drop-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.drop { transition: border-color .2s, background .2s, transform .2s var(--ease); }
.drop:hover, .drop.hover { border-color: var(--accent); background: rgba(91, 77, 240, .045); }
.drop:hover .ic, .drop.hover .ic { animation: drop-bob 1.4s ease-in-out infinite; }
.drop .ic { transition: transform .2s var(--ease); }

/* ---- stările de așteptare respiră, nu stau moarte ---- */
@keyframes respira { 50% { opacity: .45; } }
.sh-gol { animation: respira 1.6s ease-in-out infinite; }

/* ---- toast: sare de jos ca la iOS ---- */
@keyframes toast-sus { from { opacity: 0; transform: translate(-50%, 18px) scale(.96); }
                       to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
#toast { animation: toast-sus .32s var(--ease); border-radius: 999px;
  backdrop-filter: blur(8px); background: rgba(22, 22, 42, .9); }

/* ---- paywall: intră cu un pop, fundalul e sticlă ---- */
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.96); }
                    to { opacity: 1; transform: none; } }
.pw-cutie { animation: pop-in .3s var(--ease); border-radius: 30px; }
#paywall-fundal { backdrop-filter: blur(10px) saturate(1.2); }

/* ---- rânduri care se simt vii peste tot ---- */
.mkt-actiune, .bl-rand, .fact-plata { transition: background .16s ease; }
.mkt-actiune:hover { background: rgba(91, 77, 240, .035); border-radius: 14px; }
.bl-rand:hover { transform: translateY(-1.5px); box-shadow: var(--umbra-card); }
.bl-rand { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.art-card:hover { box-shadow: var(--umbra-sus); }
.art-card { transition: box-shadow .25s var(--ease); }
.scor-inel svg { filter: drop-shadow(0 6px 14px rgba(91, 77, 240, .22)); }
.meniu-pop { animation: pop-in .18s var(--ease); }

/* ---- doar pe DESKTOP: sidebarul devine sticlă (pe telefon bara jos are deja) ---- */
@media (min-width: 701px) {
  #sidebar {
    background: rgba(251, 251, 254, .78);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
    border-right: 1px solid rgba(234, 232, 247, .8);
  }
  #col-piese { background: rgba(251, 251, 254, .6); }
  .nav-item { padding: 12px 12px; border-radius: 15px; }
  .plan-card { background: #fff; box-shadow: var(--umbra-card); border: 1px solid rgba(234, 232, 247, .9); }
  .plan-card .schimba { background: var(--accent-soft); transition: background .18s; }
  .plan-card .schimba:hover { background: #e6e2fb; }
}

/* ---- telefon: apăsările se simt (scale), tabul activ are pastilă ---- */
@media (max-width: 700px) {
  .nav-item.activ { background: var(--accent-soft); }
  .det-actiuni button:active, .det-actiuni a:active { transform: scale(.94); }
  .card { border-radius: 22px; }
}

/* respectăm cine nu vrea mișcare */
@media (prefers-reduced-motion: reduce) {
  .card, .vedere, .pw-cutie, #toast, .meniu-pop { animation: none; }
  .sh-gol, .drop:hover .ic, .drop.hover .ic { animation: none; }
  button, .chip, .piesa-card, .bl-rand { transition: none; }
}

/* v1.17.1 — plăcuțele de pe telefon rămân plăcuțe (pastila-999px de pe
   desktop nu are ce căuta în grila de quick-actions) */
@media (max-width: 700px) {
  .det-actiuni > .chip, .det-actiuni > a.chip {
    border-radius: 16px; padding: 11px 4px 9px;
  }
  .det-actiuni .chip-sufix { display: none; }
  .det-actiuni > .chip:hover, .det-actiuni > a.chip:hover { transform: none; box-shadow: none; }
}

/* ===== v1.17.2 — LANSAREA pronunțată: tab roșu, traseu în pași numerotați ===== */
/* segmentul stă lipit sus la scroll — Lansarea e mereu la vedere */
.det-fete { position: sticky; top: 10px; z-index: 6;
  background: rgba(236, 234, 250, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4); }
.df-tab { font-size: 14.5px; padding: 11px 26px; }
/* tabul Lansării poartă roșul lansării (pulsul sfânt) și când NU e activ */
.df-tab.df-lans { color: #d02836; }
.df-tab.df-lans.activ { background: linear-gradient(135deg, #ff3040, #ff5a4d);
  color: #fff; box-shadow: 0 6px 16px rgba(255, 48, 64, .35); }

/* traseul: bulina numerotată + firul punctat care leagă pașii (ca pe landing) */
.lans-pas { position: relative; margin-top: 30px; padding-left: 56px; }
.lans-pas:first-child { margin-top: 18px; }
.lans-pas::before { content: ""; position: absolute; left: 19px; top: 46px; bottom: -30px;
  border-left: 2px dashed #f3c0c7; }
.lans-pas:last-child::before { display: none; }
.lp-nr { position: absolute; left: 0; top: -2px; width: 40px; height: 40px;
  border-radius: 50%; background: linear-gradient(135deg, #ff3040, #ff5a4d);
  color: #fff; font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(255, 48, 64, .32); }
.lp-cap { margin-bottom: 12px; min-height: 40px; display: flex; align-items: center; }
.lp-tx .t { font-size: 17.5px; font-weight: 800; letter-spacing: -.015em; }
.lp-tx .s { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.lans-pas .card { animation-delay: 0s; }

/* puntea de pe fața «Piesa» spre Lansarea */
.spre-lansare { display: block; width: 100%; margin-top: 26px; padding: 17px;
  border-radius: 20px; text-align: center; font-size: 14.5px; color: #a1242d;
  background: linear-gradient(135deg, rgba(255, 48, 64, .07), rgba(255, 90, 77, .10));
  border: 1.5px dashed #f3b7bf;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.spre-lansare b { color: #ff3040; }
.spre-lansare:hover { transform: translateY(-1.5px); border-color: #ff3040;
  box-shadow: 0 10px 26px rgba(255, 48, 64, .16); }

@media (max-width: 700px) {
  .det-fete { top: 6px; }
  .lans-pas { padding-left: 0; padding-top: 2px; }
  .lans-pas::before { display: none; }
  .lp-nr { position: static; width: 34px; height: 34px; font-size: 15px; flex: none; }
  .lp-cap { gap: 11px; }
}

/* ===== v1.17.3 — pasul 2 cu STARE + ZIP-urile ilustrate ===== */
/* lipsește linkul: roșu care cere atenție */
.lans-pas-lipsa .lp-nr { animation: of-puls 1.6s ease-in-out infinite; }
.lans-pas-lipsa .yl-input { border-color: #f2b3bb; background: #fffbfb; }
.lans-pas-lipsa .yl-input:focus { border-color: #ff3040; box-shadow: 0 0 0 4px rgba(255, 48, 64, .12); }
.lans-pas-lipsa .yl-nota { color: #c2222e; }
/* legat: bulina devine albastră, cu bifă */
.lans-pas-gata .lp-nr { background: linear-gradient(135deg, #2f7cf6, #4f66f0);
  box-shadow: 0 8px 20px rgba(47, 108, 246, .35); font-size: 19px; }
.lans-pas-gata::before { border-color: #c4d7fb; }
.lans-pas-gata .yl-input { border-color: #bcd3fb; background: #fafcff; }
.lans-pas-gata .yl-nota { color: #2f6bd8; font-weight: 600; }
/* scuturarea când încearcă să copieze fără link */
@keyframes scutura { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.lans-pas.atentie { animation: scutura .5s ease; }
.chip-pal { opacity: .55; }

/* ZIP-urile: două carduri cu mini-telefoane 9:16, ca ilustrațiile de pe landing */
.zip-bloc { padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--linie); }
.zip-bloc .e { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 12px; }
.zip-grila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zip-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 18px; border: 1.5px solid var(--border);
  background: linear-gradient(180deg, #fff, #faf9ff);
  text-decoration: none; color: var(--ink);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .18s; }
.zip-card:hover { transform: translateY(-2.5px); border-color: #cfc8f6;
  box-shadow: 0 12px 28px rgba(60, 50, 130, .13); }
.zip-card:active { transform: scale(.97); }
.zc-stiva { position: relative; width: 36px; height: 54px; flex: none; }
.zc-stiva::before, .zc-stiva::after { content: ""; position: absolute; inset: 0;
  border-radius: 10px; background: #e6e2fa; transition: transform .25s var(--ease); }
.zc-stiva::before { transform: rotate(-7deg) translateX(-4px); opacity: .7; }
.zc-stiva::after { transform: rotate(4deg) translateX(3px); opacity: .5; }
.zc-tel { position: absolute; inset: 0; z-index: 1; border-radius: 10px;
  background: linear-gradient(160deg, #6c5ce7, #8a5ef5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 6px 14px rgba(91, 77, 240, .3); transition: transform .25s var(--ease); }
.zc-tel i { width: 20px; height: 3.5px; border-radius: 2px; background: rgba(255, 255, 255, .95); }
.zc-tel i:nth-child(2) { width: 14px; opacity: .8; }
.zc-tel i:nth-child(3) { width: 17px; opacity: .55; }
.zc-curat .zc-tel::after { content: "\25B6\FE0E"; color: rgba(255, 255, 255, .95); font-size: 13px; }
.zip-card:hover .zc-tel { transform: rotate(-4deg) scale(1.06); }
.zip-card:hover .zc-stiva::before { transform: rotate(-11deg) translateX(-6px); }
.zip-card:hover .zc-stiva::after { transform: rotate(8deg) translateX(5px); }
.zc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zc-tx b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.zc-tx span { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.zc-dl { flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; color: var(--accent);
  background: var(--accent-soft); padding: 9px 13px; border-radius: 999px;
  transition: background .2s, color .2s; }
.zip-card:hover .zc-dl { background: var(--grad-accent); color: #fff; }

@media (max-width: 700px) {
  .zip-grila { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lans-pas-lipsa .lp-nr, .lans-pas.atentie { animation: none; }
}

/* ============================================================
   v1.19 — TELEFON REAL (bug-uri raportate de MIXCUT pe iPhone
   si Samsung: „iconitele de jos nu se vad", „daca trag dreapta
   merge in dreapta", „arata a site, nu a aplicatie").
   Emularea din panou NU le reproduce — sunt comportamente de
   browser mobil real, de-asta stau documentate aici.
   ============================================================ */

/* 1. Pagina nu se mai poate trage lateral. Regula sta pe <body>: de acolo
      se propaga la viewport fara sa atinga scroll-ul vertical. CAPCANE
      prinse la verificare, notate ca sa nu se repete: pe <html> `clip`
      taie si scroll-ul paginii, iar pe html+body impreuna body-ul devine
      container de scroll si window.scrollY ingheata la 0. */
body { overflow-x: hidden; }

/* 2. Fara bounce-ul de pagina si fara pull-to-refresh — miscarea
      aia „de site" care apare cand tragi de marginea ecranului. */
html, body { overscroll-behavior: none; }

/* 3. Fara flash-ul gri la atingere si fara zoom la dublu-tap
      (dublu-tap-ul zooma pagina, iar pagina zoomata se putea trage
      lateral). Pinch-zoom ramane disponibil — accesibilitatea nu se taie. */
body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

@media (max-width: 700px) {
  /* 4. CAUZA PRINCIPALA a „tragerii spre dreapta": Safari pe iOS face
        ZOOM AUTOMAT cand atingi un camp cu text sub 16px, iar dupa zoom
        pagina ramane mai lata decat ecranul si se plimba lateral.
        16px peste tot pe telefon = fara zoom, fara plimbare.
        `!important` fiindca regulile de componenta (.bio-rand input etc.)
        sunt mai specifice — si asa orice camp NOU e acoperit automat. */
  input, textarea, select { font-size: 16px !important; }

  /* 5. Continutul se opreste in interiorul lui: gestul de scroll nu mai
        „scapa" in pagina de dedesubt la capatul listei. */
  .vedere, .lista, #detaliu { overscroll-behavior: contain; }
}
/* Bara de taburi, FAB-ul si chip-urile plutitoare aveau DEJA
   env(safe-area-inset-bottom) in regulile de mai sus — dar env() returna 0
   fiindca lipsea viewport-fit=cover din index.html. Acum ca meta-ul exista,
   ele se ridica singure deasupra home indicator-ului. */