/* ============================================================
   SocialAI — sistem de design
   Inspirat de limbajul vizual Apple: tipografie SF, butoane pill,
   suprafețe curate, blur pe navigație, mișcare discretă.
   ============================================================ */

/* ── Variabile ───────────────────────────────────────────── */
:root {
  /* Culori de bază */
  --c-text:          #1d1d1f;
  --c-text-2:        #6e6e73;
  --c-text-3:        #86868b;
  --c-bg:            #ffffff;
  --c-bg-2:          #f5f5f7;
  --c-bg-3:          #fafafa;
  --c-border:        #d2d2d7;
  --c-border-light:  #e8e8ed;

  /* Accent — monocrom, în linia apple.com */
  --c-accent:          #1d1d1f;   /* accent principal (negru) */
  --c-accent-hover:    #000000;
  --c-accent-active:   #000000;
  --c-link:          #1d1d1f;
  --c-accent-soft:     #f0f0f2;   /* fundal discret pentru stări active */
  --c-focus:         rgba(0,0,0,.32);

  /* Semantic — folosite doar pentru stări reale (succes, eroare, atenție) */
  --c-green:         #1d7333;
  --c-green-soft:    #e6f4e9;
  --c-orange:        #96501b;
  --c-orange-soft:   #f8efe6;
  --c-red:           #c00013;
  --c-red-soft:      #fbeaeb;
  --c-purple:        #48484a;
  --c-purple-soft:   #f0f0f2;

  /* Suprafețe întunecate */
  --c-dark:          #000000;
  --c-dark-2:        #1d1d1f;
  --c-dark-3:        #2c2c2e;

  /* Tipografie */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Raze */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  /* Iconiță de calendar pentru câmpurile de dată (SVG inline, fără fișier). */
  --ico-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3C/svg%3E");
  --r-pill: 980px;

  /* Umbre */
  --sh-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --sh-md: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --sh-lg: 0 12px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.04);
  --sh-xl: 0 24px 64px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.06);

  /* Măsuri */
  --nav-h: 48px;
  --side-w: 252px;
  --maxw: 1200px;
  --maxw-narrow: 720px;

  /* Tranziții */
  --t-fast: .18s cubic-bezier(.4,0,.2,1);
  --t-base: .28s cubic-bezier(.4,0,.2,1);
  --t-slow: .5s cubic-bezier(.32,.72,0,1);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -.022em;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
svg.ico { display: inline-block; vertical-align: middle; flex-shrink: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.08; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--c-link); text-decoration: none; transition: color var(--t-fast); }
a:hover { text-decoration: underline; }

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

hr { border: none; border-top: 1px solid var(--c-border-light); margin: 28px 0; }

::selection { background: rgba(0,0,0,.14); }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Tipografie ──────────────────────────────────────────── */
.t-hero    { font-size: clamp(40px, 7vw, 80px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.t-display { font-size: clamp(32px, 5vw, 56px); font-weight: 600; letter-spacing: -.022em; line-height: 1.07; }
.t-h1      { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -.021em; line-height: 1.1; }
.t-h2      { font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.125; }
.t-h3      { font-size: 21px; font-weight: 600; letter-spacing: -.019em; }
.t-h4      { font-size: 17px; font-weight: 600; letter-spacing: -.018em; }
.t-lead    { font-size: clamp(19px, 2.2vw, 24px); font-weight: 400; line-height: 1.38; letter-spacing: .004em; color: var(--c-text-2); }
.t-body    { font-size: 17px; line-height: 1.53; }
.t-sm      { font-size: 15px; line-height: 1.47; letter-spacing: -.012em; }
.t-xs      { font-size: 13px; line-height: 1.4; letter-spacing: -.006em; }
.t-tiny    { font-size: 11px; line-height: 1.35; letter-spacing: .01em; }
.t-mono    { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; }

.t-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-accent);
}

.muted   { color: var(--c-text-2); }
.muted-2 { color: var(--c-text-3); }
.center  { text-align: center; }
.right   { text-align: right; }
.nowrap  { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.balance { text-wrap: balance; }

/* Gradient de accent pentru titluri */
.t-gradient {
  background: linear-gradient(92deg, #1d1d1f 0%, #48484a 55%, #6e6e73 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Layout ──────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.wrap-narrow { width: 100%; max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 22px; }
.wrap-wide { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 22px; }

.section { padding: 88px 0; }
.section-sm { padding: 56px 0; }
.section-lg { padding: 120px 0; }
.section-alt { background: var(--c-bg-2); }
.section-dark { background: var(--c-dark); color: #f5f5f7; }
.section-dark .muted { color: #a1a1a6; }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; }
/*
 * Rândul „ce e · de când · în ce stare”, din cardurile de stare ale adminului.
 *
 * `.row-between` ține cele două coloane pe același rând oricât de îngust ar fi ecranul, iar
 * partea din dreapta e `nowrap` (ora relativă + pastila). La 390px rămâneau ~150px pentru
 * text, deci „Cifre de performanță de la Zernio” curgea pe patru rânduri de câte două
 * cuvinte. Aceeași familie cu pașii `flex: 1` care își tăiau etichetele: partea care nu-și
 * poate strânge textul trebuie să coboare, nu să înghesuie vecinul.
 */
.row-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (max-width: 520px) {
  .row-status { flex-wrap: wrap; }
  .row-status > :first-child { flex: 1 0 100%; }
}
.spacer  { flex: 1 1 auto; }

/* Scara completă — o clasă folosită dar nedefinită nu dă nicio eroare,
   doar lipsește tăcut spațiul. Ține lista sincronizată cu ce folosești. */
.gap-2  { gap: 2px; }  .gap-4  { gap: 4px; }  .gap-5  { gap: 5px; }
.gap-6  { gap: 6px; }  .gap-8  { gap: 8px; }  .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; }
.gap-18 { gap: 18px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }

.mt-4{margin-top:4px}.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}
.mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}
.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}
.mb-4{margin-bottom:4px}.mb-6{margin-bottom:6px}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}
.mb-12{margin-bottom:12px}.mb-14{margin-bottom:14px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-40{margin-bottom:40px}

.grid { display: grid; gap: 20px; }
.grid-1 { grid-template-columns: minmax(0,1fr); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ── Subsol ──────────────────────────────────────────────── */
.foot { padding: 56px 0 40px; border-top: 1px solid var(--c-border-light); background: var(--c-bg-2); }
.foot-grid {
  display: grid; gap: 40px;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
}
.foot-col-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; letter-spacing: -.006em; }
.foot-list { list-style: none; display: grid; gap: 9px; }
.foot-list a { font-size: 15px; color: var(--c-text-2); letter-spacing: -.012em; }
.foot-list a:hover { color: var(--c-text); }
.foot-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-top: 40px;
  padding-top: 22px; border-top: 1px solid var(--c-border-light);
}

/* ── Butoane ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 22px;
  font-size: 17px; font-weight: 400; letter-spacing: -.022em; line-height: 1.2;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--c-accent); color: #fff;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--c-accent-hover); color: #fff; text-decoration: none; }
.btn:active { transform: scale(.975); background: var(--c-accent-active); }

.btn-ghost {
  background: transparent; color: var(--c-accent);
  border-color: var(--c-accent);
}
.btn-ghost:hover { background: var(--c-accent); color: #fff; }

.btn-quiet {
  background: rgba(0,0,0,.05); color: var(--c-text);
}
.btn-quiet:hover { background: rgba(0,0,0,.09); color: var(--c-text); }

.btn-dark { background: var(--c-dark-2); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }

.btn-light { background: #fff; color: var(--c-text); border-color: var(--c-border); }
.btn-light:hover { background: var(--c-bg-2); color: var(--c-text); }

.btn-danger { background: var(--c-red); }
.btn-danger:hover { background: #b8000f; }

.btn-success { background: var(--c-green); }
.btn-success:hover { background: #1d7333; }

.btn-lg { padding: 14px 30px; font-size: 19px; }
.btn-sm { padding: 7px 15px; font-size: 15px; letter-spacing: -.016em; }
.btn-xs { padding: 5px 12px; font-size: 13px; letter-spacing: -.008em; }
.btn-block { display: flex; width: 100%; }

.btn:disabled, .btn.is-disabled { opacity: .42; pointer-events: none; }
.btn.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: spin .6s linear infinite;
}
.btn-ghost.is-loading::after, .btn-light.is-loading::after, .btn-quiet.is-loading::after {
  border-color: rgba(0,0,0,.2); border-top-color: var(--c-accent);
}

/* Buton doar-icoană */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border-radius: 50%; background: transparent; color: var(--c-text-2);
  border: none; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-icon:hover { background: rgba(0,0,0,.06); color: var(--c-text); }
.btn-icon.is-danger:hover { background: var(--c-red-soft); color: var(--c-red); }
.btn-icon-sm { width: 30px; height: 30px; }

/* Link cu săgeată, în stil Apple */
/* Fără font-size propriu: altfel ar anula .t-xs / .t-sm puse alături pe
   același element, iar linkul ar apărea mai mare decât textul din jur. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--c-link);
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow .ico { transition: transform var(--t-fast); }
.link-arrow:hover .ico { transform: translateX(3px); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Navigație publică ───────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 22px;
  height: 100%; display: flex; align-items: center; gap: 8px;
}
.nav-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 19px; font-weight: 600; letter-spacing: -.02em;
  color: var(--c-text); text-decoration: none; margin-right: 8px;
}
.nav-logo:hover { text-decoration: none; color: var(--c-text); }
.nav-logo-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, #1d1d1f, #48484a);
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
}

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 auto; }
.nav-links a {
  display: block; padding: 6px 12px;
  font-size: 14px; letter-spacing: -.01em; color: var(--c-text);
  border-radius: var(--r-sm); opacity: .88;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.nav-links a:hover { opacity: 1; background: rgba(0,0,0,.045); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: auto; margin-right: -8px;
  border-radius: 50%; color: var(--c-text);
  transition: background var(--t-fast);
}
.nav-toggle:hover { background: rgba(0,0,0,.06); }
.nav-toggle .ico-close { display: none; }
body.nav-open .nav-toggle .ico-close { display: block; }
body.nav-open .nav-toggle .ico-menu { display: none; }

/* Meniu mobil */
.nav-mobile {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  background: rgba(255,255,255,.98);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 20px 22px 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
body.nav-open .nav-mobile { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-mobile ul { list-style: none; }
.nav-mobile li { border-bottom: 1px solid var(--c-border-light); }
.nav-mobile li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 2px; font-size: 21px; font-weight: 500;
  letter-spacing: -.02em; color: var(--c-text);
}
.nav-mobile li a:hover { text-decoration: none; color: var(--c-accent); }
.nav-mobile .nav-mobile-actions { margin-top: 28px; display: grid; gap: 10px; }
body.nav-open { overflow: hidden; }

/* ── Card ────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.card-hover:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); border-color: transparent; }
.card-flat { border: none; background: var(--c-bg-2); }
.card-pad-sm { padding: 16px; }
.card-pad-lg { padding: 32px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 12px;
  margin: -24px -24px 20px; padding: 18px 24px;
  border-bottom: 1px solid var(--c-border-light);
}
.card-head h3 { font-size: 17px; font-weight: 600; min-width: 0; }

/* ── Formulare ───────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

.label {
  display: block; margin-bottom: 7px;
  font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--c-text);
}
.label .req { color: var(--c-red); margin-left: 2px; }
.hint { margin-top: 6px; font-size: 13px; color: var(--c-text-3); line-height: 1.4; }

.input, .select, .textarea {
  width: 100%; display: block;
  padding: 12px 15px;
  font-size: 17px; letter-spacing: -.022em; line-height: 1.35;
  color: var(--c-text); background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--c-text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: #b8b8bf; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(0,0,0,.10);
}
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--c-bg-2); color: var(--c-text-3); cursor: not-allowed;
}
.textarea { min-height: 112px; resize: vertical; line-height: 1.5; }

.select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

.input-sm { padding: 8px 12px; font-size: 15px; }
.input.is-error, .textarea.is-error, .select.is-error { border-color: var(--c-red); }
.field-error { margin-top: 6px; font-size: 13px; color: var(--c-red); }

/* Input cu icoană */
.input-group { position: relative; }
.input-group .ico-lead {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--c-text-3); pointer-events: none;
}
.input-group .input { padding-left: 42px; }
.input-group .btn-reveal {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; color: var(--c-text-3);
}
.input-group .btn-reveal:hover { background: rgba(0,0,0,.06); color: var(--c-text); }
.input-group:has(.btn-reveal) .input { padding-right: 44px; }

/* Checkbox / radio */
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; line-height: 1.45; }
.check input[type=checkbox], .check input[type=radio] {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; flex-shrink: 0; margin: 1px 0 0;
  border: 1.5px solid var(--c-border); background: #fff;
  border-radius: 6px; cursor: pointer; position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.check input[type=radio] { border-radius: 50%; }
.check input:checked { background: var(--c-accent); border-color: var(--c-accent); }
.check input[type=checkbox]:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check input[type=radio]:checked::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff;
}
.check input:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* Comutator */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 51px; height: 31px; border-radius: var(--r-pill);
  background: #e9e9eb; position: relative; flex-shrink: 0;
  transition: background var(--t-base);
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  transition: transform var(--t-base);
}
.switch input:checked + .switch-track { background: var(--c-green); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* Grup de opțiuni tip card */
.choice-grid { display: grid; gap: 12px; }
.choice {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border: 1px solid var(--c-border);
  border-radius: var(--r-md); cursor: pointer; background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.choice:hover { border-color: #b8b8bf; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-body { flex: 1; min-width: 0; }
.choice-title { font-size: 16px; font-weight: 500; letter-spacing: -.015em; }
.choice-desc { font-size: 13px; color: var(--c-text-2); margin-top: 3px; line-height: 1.4; }
.choice-mark {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  border: 1.5px solid var(--c-border); position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.choice input[type=checkbox] ~ .choice-mark { border-radius: 6px; }
.choice input:checked ~ .choice-mark { background: var(--c-accent); border-color: var(--c-accent); }
.choice input:checked ~ .choice-mark::after {
  content: ""; position: absolute; left: 6px; top: 3px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.choice:has(input:checked) { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(0,0,0,.10); }
.choice:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* Etichete (tags) editabile */
.tags-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 48px; padding: 8px 10px;
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tags-input:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(0,0,0,.10); }
.tags-input input { border: none; outline: none; flex: 1; min-width: 120px; padding: 4px; font-size: 15px; background: transparent; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px 4px 11px; border-radius: var(--r-pill);
  background: var(--c-bg-2); font-size: 13px; font-weight: 500; color: var(--c-text);
}
.tag-chip button { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: var(--c-text-3); }
.tag-chip button:hover { background: rgba(0,0,0,.1); color: var(--c-text); }

/* Pastilă apăsabilă: sugestii pe care utilizatorul le poate alege
   în loc să scrie de la zero. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: transparent; color: var(--c-text-2);
  font-size: 13px; font-weight: 500; line-height: 1.3;
  cursor: pointer; text-align: left;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { background: var(--c-bg-2); color: var(--c-text); border-color: var(--c-text-3); }
.chip:active { transform: scale(.97); }
.chip.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* Miniatură apăsabilă din selectorul de imagini al editorului.
   Clasa se pune din JavaScript, deci `css-check.sh` nu o vede în markup — dacă
   dispare de aici, butoanele rămân fără stil și nimic nu semnalează. */
.media-pick {
  padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-md);
  overflow: hidden; background: var(--c-bg-2); cursor: pointer;
  aspect-ratio: 1; display: block; width: 100%;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.media-pick img,
.media-pick video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-pick:hover { border-color: var(--c-text-3); }
.media-pick:active { transform: scale(.97); }

/* ── Badge / pastile ─────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; letter-spacing: -.005em;
  background: var(--c-bg-2); color: var(--c-text-2); white-space: nowrap;
}
.badge-blue    { background: var(--c-accent-soft);   color: var(--c-accent); }
.badge-green   { background: var(--c-green-soft);  color: var(--c-green); }
.badge-orange  { background: var(--c-orange-soft); color: var(--c-orange); }
.badge-red     { background: var(--c-red-soft);    color: var(--c-red); }
.badge-purple  { background: var(--c-purple-soft); color: var(--c-purple); }
.badge-dark    { background: var(--c-dark-2);      color: #fff; }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Semnalele din admin sunt propoziții, nu stări de un cuvânt: cu `nowrap` moștenit de
   la `.badge`, un text lung lărgește pagina pe telefon (verificat la 390px). */
.badge-text    { white-space: normal; text-align: left; line-height: 1.35; }

/* Butonul al cărui text vine din DATE, nu din markup.
   `.btn` are `white-space: nowrap` — potrivit pentru „Salvează”, greșit pentru o întrebare
   întreagă: lățimea minimă a textului împinge pagina peste marginea ecranului, iar Chrome
   LĂRGEȘTE viewportul în loc să taie (390 → 693 la sugestiile asistentului). Aceeași
   capcană ca `.badge` cu `nowrap`, pe alt element — a treia oară în proiect. */
.btn-text { white-space: normal; text-align: left; max-width: 100%; }

/* Icoană cu culoare proprie într-un element care își impune culoarea (pastila din
   calendar moștenește culoarea stării, iar semnul de avertizare trebuie să iasă din ea). */
.ico-red    { color: var(--c-red); }
.ico-orange { color: var(--c-orange); }

/* ── Alerte ──────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px; border-radius: var(--r-md);
  font-size: 15px; line-height: 1.45; margin-bottom: 16px;
  border: 1px solid transparent;
}
.alert .ico { flex-shrink: 0; margin-top: 1px; }
.alert-info    { background: var(--c-accent-soft);   color: var(--c-text); border-color: rgba(0,0,0,.14); }
.alert-success { background: var(--c-green-soft);  color: var(--c-green); border-color: rgba(36,138,61,.18); }
.alert-warning { background: var(--c-orange-soft); color: var(--c-orange); border-color: rgba(178,80,0,.18); }
.alert-error   { background: var(--c-red-soft);    color: var(--c-red); border-color: rgba(215,0,21,.18); }

/* ── Tabele ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  text-align: left; padding: 11px 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--c-text-3); border-bottom: 1px solid var(--c-border-light);
  white-space: nowrap; background: var(--c-bg-3);
}
.table td { padding: 13px 14px; border-bottom: 1px solid var(--c-border-light); vertical-align: middle; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--c-bg-3); }
.table tbody tr:last-child td { border-bottom: none; }
.table .col-actions { width: 1%; white-space: nowrap; text-align: right; }
.table-fixed { table-layout: fixed; }

/* Pe telefon un tabel cu 5-8 coloane derulează lateral și nu se vede nimic.
   Fiecare rând devine un card, iar celulele își poartă eticheta în
   `data-label`, ca să nu se piardă înțelesul valorilor. */
@media (max-width: 720px) {
  .table-wrap { overflow-x: visible; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }

  .table tbody tr {
    background: #fff;
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    padding: 4px 14px;
    margin-bottom: 10px;
  }
  .table tbody tr:hover { background: #fff; }
  .table tbody tr:last-child { margin-bottom: 0; }

  .table td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 8px 0;
    border-bottom: 1px solid var(--c-border-light);
    text-align: right;
    /* Un șir lung fără spații (listă de cuvinte-cheie, URL) nu are unde să se
       rupă și lărgește viewport-ul în loc să depășească — vezi CLAUDE.md.
       Conținutul unei celule e un element flex ANONIM, care nu primește
       `min-width: 0` de la părinte; singura scăpare e să-l lăsăm să treacă pe
       rândul următor, unde are toată lățimea. */
    flex-wrap: wrap;
    min-width: 0; overflow-wrap: anywhere;
  }
  /* Celula devine container flex, deci orice `.row` dinăuntru e element flex
     cu `min-width: auto` — nu coboară sub `min-content` și împinge pagina.
     Aceeași capcană ca la grid, a treia oară. Vezi CLAUDE.md. */
  .table td > * { min-width: 0; max-width: 100%; }
  /* `nowrap` are sens într-un tabel lat, dar într-un card doar rupe ecranul. */
  .table td.nowrap { white-space: normal; }
  .table tbody tr td:last-child { border-bottom: none; }

  .table td::before {
    content: attr(data-label);
    flex-shrink: 0; text-align: left;
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
    text-transform: uppercase; color: var(--c-text-3);
  }
  /* Celulele fără etichetă (prima coloană, acțiunile) ocupă tot rândul. */
  .table td:not([data-label])::before { content: none; }
  .table td:not([data-label]) { justify-content: flex-start; text-align: left; }

  /* Prima celulă e titlul cardului. */
  .table tbody tr td:first-child {
    padding-top: 12px; font-size: 16px;
  }
  .table .col-actions {
    width: auto; text-align: left; padding-bottom: 12px;
  }
  /* Un rând gol („nicio înregistrare") nu trebuie să arate ca un card. */
  .table tbody tr td[colspan] { border: none; text-align: center; }
  .table tbody tr:has(td[colspan]) { border: none; background: transparent; }
}

/* ── Avatare ─────────────────────────────────────────────── */
.avatar {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-bg-2); color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: 0;
  overflow: hidden; user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 30px; height: 30px; font-size: 12px; }
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }
.avatar-xl { width: 84px; height: 84px; font-size: 30px; }

/* ── Stare goală ─────────────────────────────────────────── */
.empty {
  text-align: center; padding: 56px 24px; color: var(--c-text-2);
}
.empty-icon {
  width: 62px; height: 62px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--c-bg-2); color: var(--c-text-3);
}
.empty h3 { font-size: 19px; margin-bottom: 7px; color: var(--c-text); }
.empty p { font-size: 15px; max-width: 380px; margin: 0 auto 20px; line-height: 1.5; }

/* ── Skeleton ────────────────────────────────────────────── */
.skel {
  background: linear-gradient(90deg, #f0f0f2 25%, #e6e6ea 37%, #f0f0f2 63%);
  background-size: 400% 100%; border-radius: 6px;
  animation: skel 1.3s ease-in-out infinite;
}
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Modal ───────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }
.modal {
  background: #fff; border-radius: var(--r-xl);
  width: 100%; max-width: 540px; max-height: calc(100vh - 40px);
  /* Fără min-width: 0, conținutul lat împinge modalul peste marginea ecranului,
     fiindcă min-width: auto al unui element flex înseamnă min-content. */
  min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--sh-xl);
  transform: scale(.96) translateY(8px);
  transition: transform var(--t-slow);
}
.modal-backdrop.is-open .modal { transform: scale(1) translateY(0); }
.modal-lg { max-width: 760px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 24px; border-bottom: 1px solid var(--c-border-light); flex-shrink: 0;
}
.modal-head h3 { font-size: 19px; font-weight: 600; }
.modal-body { padding: 24px; overflow-y: auto; flex: 1; min-width: 0; }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--c-border-light);
  background: var(--c-bg-3); flex-shrink: 0;
}

/* ── Toast ───────────────────────────────────────────────── */
.toast-host {
  position: fixed; bottom: 22px; right: 22px; z-index: 300;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 11px;
  min-width: 280px; max-width: 400px; padding: 14px 17px;
  background: rgba(29,29,31,.94); color: #fff;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  font-size: 15px; line-height: 1.4; pointer-events: auto;
  animation: toast-in .34s cubic-bezier(.32,.72,0,1);
}
.toast.is-out { animation: toast-out .26s ease forwards; }
.toast .ico { flex-shrink: 0; margin-top: 1px; }
.toast-success .ico { color: #30d158; }
.toast-error .ico { color: #ff453a; }
/* Informativul nu e o stare semantică (verde/roșu/portocaliu sunt), deci nu are
   voie să aducă o culoare nouă. Era `#64d2ff` — un albastru deschis, într-o paletă
   pe care clientul a cerut-o monocromă. */
.toast-info .ico { color: var(--c-text-2); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* ── Panou de aplicație (dashboard) ──────────────────────── */
.app { display: flex; min-height: 100vh; background: var(--c-bg-2); }

.side {
  width: var(--side-w); flex-shrink: 0;
  background: #fff; border-right: 1px solid var(--c-border-light);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  z-index: 50;
}
.side-head { padding: 18px 18px 14px; }
.side-nav { padding: 4px 12px; flex: 1; }
.side-group { margin-bottom: 22px; }
.side-group-label {
  padding: 0 10px 7px; font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--c-text-3);
}
.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; margin-bottom: 1px;
  border-radius: var(--r-sm);
  font-size: 15px; letter-spacing: -.014em; color: var(--c-text);
  transition: background var(--t-fast), color var(--t-fast);
}
.side-link:hover { background: var(--c-bg-2); text-decoration: none; color: var(--c-text); }
.side-link .ico { color: var(--c-text-3); transition: color var(--t-fast); }
.side-link:hover .ico { color: var(--c-text-2); }
.side-link.is-active { background: var(--c-accent-soft); color: var(--c-accent); font-weight: 500; }
.side-link.is-active .ico { color: var(--c-accent); }
.side-link .count {
  margin-left: auto; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--c-bg-2); font-size: 11px; font-weight: 600; color: var(--c-text-2);
}
.side-link.is-active .count { background: rgba(0,0,0,.10); color: var(--c-accent); }
.side-foot { padding: 12px; border-top: 1px solid var(--c-border-light); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 60px; flex-shrink: 0;
  display: flex; align-items: center; gap: 12px; padding: 0 24px;
  background: rgba(255,255,255,.8);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c-border-light);
  position: sticky; top: 0; z-index: 40;
}
.topbar h1 { font-size: 19px; font-weight: 600; letter-spacing: -.019em; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.side-toggle { display: none; }

.content { padding: 26px 24px 60px; flex: 1; }
.content-narrow { max-width: 820px; }

/* Meniu utilizator */
.menu-wrap { position: relative; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 232px; padding: 6px;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--c-border-light); border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.menu-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-sm); width: 100%;
  font-size: 15px; color: var(--c-text); text-align: left;
  transition: background var(--t-fast);
}
.menu-item:hover { background: var(--c-bg-2); text-decoration: none; color: var(--c-text); }
.menu-item .ico { color: var(--c-text-3); }
.menu-item.is-danger { color: var(--c-red); }
.menu-item.is-danger .ico { color: var(--c-red); }
.menu-sep { height: 1px; background: var(--c-border-light); margin: 5px 0; }
.menu-head { padding: 10px 11px 8px; }

/* ── Statistici ──────────────────────────────────────────── */
.stat {
  background: #fff; border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg); padding: 20px;
  transition: box-shadow var(--t-base);
}
.stat:hover { box-shadow: var(--sh-md); }
.stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-label { font-size: 13px; font-weight: 500; color: var(--c-text-2); letter-spacing: -.006em; }
.stat-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--c-bg-2); color: var(--c-text-2);
}
.stat-value { font-size: 32px; font-weight: 600; letter-spacing: -.026em; line-height: 1.05; }
.stat-sub { margin-top: 6px; font-size: 13px; color: var(--c-text-3); display: flex; align-items: center; gap: 4px; }
.stat-up   { color: var(--c-green); }
.stat-down { color: var(--c-red); }

/* ── Calendar ────────────────────────────────────────────── */
.cal { background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--r-lg); overflow: hidden; }
.cal-head {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--c-border-light); background: var(--c-bg-3);
}
.cal-head div {
  padding: 10px 8px; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-text-3);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-day {
  min-height: 118px; min-width: 0; padding: 7px;
  border-right: 1px solid var(--c-border-light);
  border-bottom: 1px solid var(--c-border-light); position: relative;
  transition: background var(--t-fast);
}
.cal-day-items { min-width: 0; }
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: var(--c-bg-3); }

/*
 * „+” = pune o postare în ziua asta.
 *
 * Pe desktop apare la trecerea mouse-ului peste zi: altfel 31 de plusuri ar face grila
 * ilizibilă. Pe ecranele fără mouse nu există hover, deci acolo se vede mereu — aceeași
 * regulă ca la butonul de mutare, care apare exact unde tragerea lipsește.
 */
.cal-add {
  position: absolute; top: 5px; right: 5px;
  width: 24px; height: 24px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  color: var(--c-text-3); background: var(--c-bg);
  border: 1px solid var(--c-border-light);
}
.cal-add:hover { color: var(--c-text); border-color: var(--c-text-3); }
.cal-day:hover .cal-add, .cal-add:focus-visible { display: flex; }
@media (pointer: coarse) {
  .cal-add { display: flex; }
}
.cal-day.is-out { background: var(--c-bg-3); opacity: .55; }
.cal-day.is-today { background: var(--c-accent-soft); }
/* Grila de profil: cum arată postările una lângă alta, ca pe Instagram.
   Rămâne pe trei coloane la orice lățime — asta e chiar ideea. */
.grila-profil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.grila-cell {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--c-bg-2); display: block; text-decoration: none;
}
.grila-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grila-cell:hover img { opacity: .88; }
.grila-gol {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  color: var(--c-text-3); text-align: center; padding: 6px;
}
.grila-eticheta {
  position: absolute; left: 6px; bottom: 6px;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(29,29,31,.78); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .01em;
}
.grila-eticheta.is-live { background: rgba(29,110,58,.85); }
/* Semnul că pastila e un CLIP, nu o poză.
   Stă în colțul opus etichetei de stare, ca să nu se suprapună la o pastilă publicată.
   Miniatura e un `<img>` obișnuit (cadru extras din clip), deci fără semn nu s-ar
   deosebi de o fotografie — iar clientul n-ar ști ce pleacă de fapt pe rețea. */
.grila-clip {
  position: absolute; right: 6px; top: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(29,29,31,.78); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.grila-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Insigna din meniul lateral: câte elemente noi așteaptă într-o pagină. */
.side-badge {
  margin-left: auto; flex: 0 0 auto;
  min-width: 20px; height: 18px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--c-accent); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1;
}
/* Zi de pauză: firma nu publică atunci. Fără semnul ăsta, săptămâna arăta pur și
   simplu goală, iar clientul nu avea de unde ști dacă e pauza lui sau o defecțiune.
   Dungile rămân monocrome — o pauză e o stare a firmei, nu o eroare. */
.cal-day.is-break {
  background-image: repeating-linear-gradient(
    135deg, transparent 0 6px, var(--c-bg-3) 6px 12px);
}
.cal-day.is-break:hover { background-color: var(--c-bg-3); }
/*
 * Zilele unei campanii.
 *
 * Un semn discret pe marginea de sus: campania poate ține 30 de zile, iar o culoare de
 * fundal pe jumătate de calendar ar acoperi tocmai postările. Eticheta cu numele apare o
 * singură dată, pe prima zi din lună a campaniei.
 */
.cal-day.is-camp { box-shadow: inset 0 3px 0 var(--c-border); }
.cal-camp-tag {
  display: flex; align-items: center; gap: 3px; min-width: 0;
  font-size: 10px; line-height: 1.25; font-weight: 600;
  letter-spacing: .02em; color: var(--c-text-2); margin-bottom: 4px;
}
.cal-camp-tag .ico { flex: 0 0 auto; }
.cal-camp-tag:hover { color: var(--c-text); }
.cal-camp-gol {
  display: block; font-size: 10px; line-height: 1.25; font-weight: 600;
  color: var(--c-orange); margin: -2px 0 4px 15px;
}

.cal-break-tag, .cal-holiday-tag {
  display: flex; align-items: center; gap: 3px; min-width: 0;
  font-size: 10px; line-height: 1.25; font-weight: 600;
  letter-spacing: .02em; color: var(--c-text-3); margin-bottom: 4px;
}
/* Sărbătoarea e informație, nu restricție: fără dungile pauzei, dar mai apăsată
   decât textul din jur — altfel se pierde între orele postărilor. */
.cal-holiday-tag { color: var(--c-text-2); }
.cal-break-tag .ico, .cal-holiday-tag .ico { flex: 0 0 auto; }
.cal-daynum { font-size: 13px; font-weight: 500; color: var(--c-text-2); margin-bottom: 5px; }
.cal-day.is-today .cal-daynum {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--c-accent); color: #fff; font-weight: 600;
}
.cal-item {
  display: block; padding: 4px 7px; margin-bottom: 3px;
  border-radius: 6px; font-size: 11px; line-height: 1.3;
  background: var(--c-bg-2); color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-left: 2.5px solid var(--c-text-3);
  transition: background var(--t-fast);
}
.cal-item:hover { background: #e9e9ee; text-decoration: none; }
.cal-item.st-published { background: var(--c-green-soft);  border-left-color: var(--c-green); color: var(--c-green); }
.cal-item.st-scheduled { background: var(--c-accent-soft);   border-left-color: var(--c-accent);  color: var(--c-accent); }
.cal-item.st-draft     { background: var(--c-bg-2);        border-left-color: var(--c-text-3); }
.cal-item.st-pending   { background: var(--c-orange-soft); border-left-color: var(--c-orange); color: var(--c-orange); }
.cal-item.st-failed    { background: var(--c-red-soft);    border-left-color: var(--c-red);   color: var(--c-red); }
.cal-more { font-size: 11px; color: var(--c-text-3); padding: 2px 7px; display: block; }

/* Mutarea postărilor prin tragere — doar pe dispozitive cu mouse */
@media (pointer: fine) {
  .cal-item[draggable="true"] { cursor: grab; }
  .cal-item.is-dragging { opacity: .35; cursor: grabbing; }
  .cal-day.is-drop {
    background: var(--c-accent-soft);
    box-shadow: inset 0 0 0 2px var(--c-accent);
  }
  .cal-day.is-nodrop {
    background: var(--c-red-soft);
    box-shadow: inset 0 0 0 2px rgba(192,0,19,.35);
    cursor: not-allowed;
  }
}
.cal-item.is-saving { opacity: .5; pointer-events: none; }

/* Mutarea pe touch.
   Tragerea HTML5 nu se declanșează pe ecrane tactile, deci pe telefon calendarul
   nu avea nicio cale de a muta o postare — deși „mereu mobile friendly” e regulă.
   Butonul apare exact acolo unde tragerea lipsește: la `pointer: coarse`. */
.cal-row { display: block; }
.cal-move { display: none; }

/*
 * Legătura către postarea de pe rețea.
 *
 * NU folosește `.cal-move`: acela e ascuns pe desktop, fiindcă acolo mutarea se face
 * prin tragere — dar „deschide postarea pe Facebook” nu are alternativă la mouse, deci
 * ar fi dispărut exact pentru jumătate dintre utilizatori. Prima variantă a reparației a
 * căzut chiar în capcana asta; s-a văzut doar în captura de pe desktop.
 */
.cal-live {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 22px; height: 22px; margin-left: 4px;
  border-radius: 6px; color: var(--c-text-3);
  vertical-align: middle;
}
.cal-live:hover { background: var(--c-bg-3); color: var(--c-text); }
/* Rândul cu legătură devine flex și pe desktop, altfel icoana pică sub pastilă. */
.cal-row.has-live { display: flex; align-items: center; gap: 2px; }
.cal-row.has-live .cal-item { flex: 1; min-width: 0; }
@media (pointer: coarse) {
  /* Pe touch stă în rând, lângă pastilă, la fel de mare ca butonul de mutare. */
  .cal-live { width: 28px; height: 28px; margin-left: 0; border: 1px solid var(--c-border); }
}

@media (pointer: coarse) {
  .cal-row { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
  .cal-row .cal-item { flex: 1; min-width: 0; margin-bottom: 0; }
  .cal-move {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 28px; height: 28px;
    border: 1px solid var(--c-border); border-radius: 7px;
    background: var(--c-bg); color: var(--c-text-3);
    cursor: pointer; padding: 0;
  }
  .cal-move:active { background: var(--c-bg-3); }
}

/* Selecția multiplă din calendar (ștergerea în masă).
   Bifele din lista de postări nu încap într-o celulă: pastila are 11px și împarte rândul
   cu butonul de mutare. Deci selecția e un MOD — pornit, clicul alege în loc să deschidă,
   iar butoanele care ar duce în altă parte (deschide pe rețea, mută, adaugă) se retrag,
   ca să nu existe două înțelesuri pentru același clic. Regulile stau DUPĂ `.st-*`:
   aceeași specificitate, deci fundalul ales câștigă doar fiind scris mai jos. */
.cal.is-selecting .cal-item { cursor: pointer; }
.cal.is-selecting .cal-live,
.cal.is-selecting .cal-move,
.cal.is-selecting .cal-add { display: none; }
.cal-item.is-picked {
  background: var(--c-accent-soft); color: var(--c-accent);
  box-shadow: inset 0 0 0 2px var(--c-accent);
}

/* Legenda de sub calendar */
.cal-legend {
  width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0;
  background: var(--c-bg-2); border-left: 3px solid var(--c-text-3);
}
.cal-legend.st-published { background: var(--c-green-soft);  border-left-color: var(--c-green); }
.cal-legend.st-scheduled { background: var(--c-accent-soft);   border-left-color: var(--c-accent); }
.cal-legend.st-pending   { background: var(--c-orange-soft); border-left-color: var(--c-orange); }
.cal-legend.st-failed    { background: var(--c-red-soft);    border-left-color: var(--c-red); }

/* ── Previzualizare postare pe rețea ─────────────────────── */
.prev-tabs {
  display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px;
  margin-bottom: 18px; -webkit-overflow-scrolling: touch;
}
.prev-tab {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 7px 13px; border-radius: var(--r-pill);
  font-size: 14px; letter-spacing: -.01em; color: var(--c-text-2);
  background: transparent; border: 1px solid transparent; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.prev-tab:hover { background: var(--c-bg-2); color: var(--c-text); }
.prev-tab.is-on { background: var(--c-dark-2); color: #fff; }
.prev-tab.is-on .plat { border: 1.5px solid rgba(255,255,255,.35); }

.prev-pane { display: none; }
.prev-pane.is-on { display: block; }

/* Rama care sugerează un telefon */
.prev-frame {
  max-width: 420px; margin: 0 auto;
  background: #fff; border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-md);
}
.prev-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
}
.prev-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  color: #fff; font-size: 15px; font-weight: 600;
}
.prev-avatar img { width: 100%; height: 100%; object-fit: cover; }
.prev-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.prev-meta { font-size: 12px; color: var(--c-text-3); margin-top: 2px; }
.prev-body {
  padding: 0 14px 12px;
  font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.prev-tags { color: var(--c-text-3); }
.prev-media {
  width: 100%; aspect-ratio: 1; background: var(--c-bg-2);
  display: grid; place-items: center; color: var(--c-text-3);
}
/* Fără imagine nu are rost să ocupăm un pătrat întreg */
.prev-media.is-empty {
  aspect-ratio: auto; min-height: 92px; padding: 18px;
  border-top: 1px dashed var(--c-border); border-bottom: 1px dashed var(--c-border);
}
.prev-media img { width: 100%; height: 100%; object-fit: cover; }
.prev-media-note { font-size: 12px; text-align: center; padding: 0 20px; }
.prev-actions {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 14px; border-top: 1px solid var(--c-border-light);
  color: var(--c-text-3);
}
.prev-actions .spacer { flex: 1; }

/* Instagram pune imaginea deasupra textului */
.prev-frame.is-instagram .prev-media { border-top: 1px solid var(--c-border-light); }
.prev-frame.is-instagram .prev-body { padding-top: 10px; }

/* Textul lung se taie, ca în aplicațiile reale */
.prev-body.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; white-space: pre-wrap;
  /* fără asta, rândul următor se vede prin zona de padding */
  padding-bottom: 0;
}
.prev-more {
  padding: 0 14px 12px; font-size: 13px; color: var(--c-text-3); cursor: pointer;
}
.prev-more:hover { color: var(--c-text-2); }

.prev-warn {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; padding: 11px 13px; border-radius: var(--r-md);
  background: var(--c-red-soft); color: var(--c-red);
  font-size: 13px; line-height: 1.45;
}
.prev-note {
  margin-top: 12px; text-align: center;
  font-size: 12px; color: var(--c-text-3);
}

@media (max-width: 640px) {
  .prev-frame { max-width: 100%; }
}

/* ── Rând cu link pe toată suprafața și acțiuni deasupra ─── */
.rowlink { position: relative; padding: 13px 12px; margin: 0 -12px; border-radius: var(--r-sm); }
.rowlink:hover { background: var(--c-bg-3); }
.rowlink-hit {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; text-indent: -9999px; overflow: hidden;
}
.rowlink-hit:hover { text-decoration: none; }
.rowlink > *:not(.rowlink-hit) { position: relative; z-index: 1; }
.rowlink-act { pointer-events: auto; }

/* ── Notificări ──────────────────────────────────────────── */
.notif {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 14px; border-radius: var(--r-md);
  color: inherit; text-decoration: none;
  transition: background var(--t-fast);
}
a.notif:hover { background: var(--c-bg-3); text-decoration: none; color: inherit; }
.notif.is-unread { background: var(--c-bg-2); }
a.notif.is-unread:hover { background: #ebebef; }

.notif-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
}
.notif-body { flex: 1; min-width: 0; }
.notif-title {
  display: block; font-size: 15px; font-weight: 500;
  letter-spacing: -.012em; line-height: 1.35;
}
.notif-text {
  display: block; font-size: 14px; color: var(--c-text-2);
  line-height: 1.45; margin-top: 3px;
}
.notif-time { display: block; font-size: 12px; color: var(--c-text-3); margin-top: 5px; }
.notif-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-accent); margin-top: 13px;
}
.notif-go { color: var(--c-text-3); flex-shrink: 0; margin-top: 8px; }
a.notif:hover .notif-go { color: var(--c-text); }
.notif-sep { height: 1px; background: var(--c-border-light); margin: 0 14px; }

@media (max-width: 640px) {
  .notif { padding: 13px 10px; gap: 11px; }
  .notif-go { display: none; }
}

/* ── Selecție multiplă și bară de acțiuni ────────────────── */
.pick {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; flex-shrink: 0; cursor: pointer;
  border: 1.5px solid var(--c-border); border-radius: 6px;
  background: #fff; position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pick:hover { border-color: #b8b8bf; }
.pick:checked { background: var(--c-accent); border-color: var(--c-accent); }
.pick:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pick:indeterminate { background: var(--c-accent); border-color: var(--c-accent); }
.pick:indeterminate::after {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 10px; height: 2px; background: #fff; border: none; transform: none;
}
.pick:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.card.is-picked { border-color: var(--c-accent); box-shadow: 0 0 0 2px rgba(0,0,0,.07); }

.bulkbar {
  position: sticky; bottom: 18px; z-index: 30;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 18px; padding: 12px 16px;
  background: rgba(29,29,31,.95); color: #fff;
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--r-lg); box-shadow: var(--sh-xl);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.bulkbar.is-on { opacity: 1; visibility: visible; transform: none; }
.bulkbar-count { font-size: 15px; font-weight: 500; white-space: nowrap; }
.bulkbar .btn { padding: 7px 14px; font-size: 14px; }
.bulkbar .btn-light { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.bulkbar .btn-light:hover { background: rgba(255,255,255,.24); color: #fff; }
.bulkbar .btn-clear { color: #a1a1a6; font-size: 14px; margin-left: auto; }
.bulkbar .btn-clear:hover { color: #fff; }
.bulkbar select {
  padding: 7px 30px 7px 12px; font-size: 14px; border-radius: var(--r-pill);
  background-color: rgba(255,255,255,.14); color: #fff; border: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.bulkbar select option { color: var(--c-text); }

@media (max-width: 640px) {
  .bulkbar { bottom: 10px; padding: 10px 12px; gap: 7px; }
  .bulkbar-count { width: 100%; font-size: 14px; }
  .bulkbar .btn { flex: 1; padding: 8px 10px; font-size: 13px; }
  .bulkbar .btn-clear { flex: 0 0 auto; margin-left: 0; }
}

/* ── Platforme ───────────────────────────────────────────── */
.plat {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-bg-2); color: var(--c-text-2);
}
.plat-sm { width: 26px; height: 26px; }
.plat-lg { width: 46px; height: 46px; }
.plat.instagram       { background: linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); color: #fff; }
.plat.facebook        { background: #1877f2; color: #fff; }
.plat.linkedin        { background: #0a66c2; color: #fff; }
.plat.tiktok          { background: #010101; color: #fff; }
.plat.youtube         { background: #ff0000; color: #fff; }
.plat.pinterest       { background: #e60023; color: #fff; }
.plat.threads         { background: #000000; color: #fff; }
.plat.google_business { background: #4285f4; color: #fff; }
.plat.twitter         { background: #000000; color: #fff; }

.plat-stack { display: flex; }
.plat-stack .plat { margin-left: -8px; border: 2px solid #fff; }
.plat-stack .plat:first-child { margin-left: 0; }

/* ── Progres ─────────────────────────────────────────────── */
.progress { height: 6px; border-radius: var(--r-pill); background: var(--c-bg-2); overflow: hidden; }
.progress-bar { height: 100%; border-radius: var(--r-pill); background: var(--c-accent); transition: width var(--t-slow); }
.progress-bar.is-warn { background: var(--c-orange); }
.progress-bar.is-full { background: var(--c-red); }

/* Pași (stepper) */
.steps { display: flex; align-items: center; gap: 0; margin-bottom: 34px; }
/* Pașii își păstrează lățimea textului; liniile dintre ei absorb restul.
   Cu `flex: 1` pe pas, etichetele se tăiau la „Fir…” pe ecrane medii. */
.step { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; min-width: 0; }
.step-dot {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  background: var(--c-bg-2); color: var(--c-text-3);
  transition: background var(--t-base), color var(--t-base);
}
.step-label {
  font-size: 14px; color: var(--c-text-3); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step-line { flex: 1 1 8px; min-width: 8px; height: 1.5px; background: var(--c-border-light); margin: 0 10px; }

/* Pe ecrane înguste păstrăm doar eticheta pasului curent — mai util
   decât cinci etichete tăiate sau niciuna. */
@media (max-width: 900px) {
  .step:not(.is-active) .step-label { display: none; }
  .step-line { margin: 0 6px; }
}
.step.is-done .step-dot   { background: var(--c-green); color: #fff; }
.step.is-active .step-dot { background: var(--c-accent); color: #fff; }
.step.is-active .step-label { color: var(--c-text); font-weight: 500; }
.step.is-done .step-label { color: var(--c-text-2); }

/* ============================================================
   Pagina de prezentare
   ============================================================ */

.hero {
  position: relative; overflow: hidden;
  padding: 92px 0 72px; text-align: center;
  background: radial-gradient(120% 90% at 50% -10%, #f2f2f4 0%, #fafafb 44%, #ffffff 78%);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border-light) 30%, var(--c-border-light) 70%, transparent);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 10px; margin-bottom: 26px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.8); border: 1px solid var(--c-border-light);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 500; letter-spacing: -.008em; color: var(--c-text-2);
  box-shadow: var(--sh-sm);
}
.hero-badge .ico { color: var(--c-accent); }
.hero h1 { max-width: 15ch; margin: 0 auto 22px; }
.hero-sub { max-width: 46ch; margin: 0 auto 34px; }
.hero-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.hero-note { font-size: 13px; color: var(--c-text-3); }

/* Machetă de produs */
.mock {
  max-width: 940px; margin: 56px auto 0;
  border-radius: var(--r-xl); overflow: hidden;
  background: #fff; border: 1px solid var(--c-border-light);
  box-shadow: var(--sh-xl);
}
.mock-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px; border-bottom: 1px solid var(--c-border-light);
  background: var(--c-bg-3);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: #dedee3; }
.mock-dot:nth-child(1) { background: #ff5f57; }
.mock-dot:nth-child(2) { background: #febc2e; }
.mock-dot:nth-child(3) { background: #28c840; }
.mock-url {
  margin-left: 10px; padding: 3px 12px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--c-border-light);
  font-size: 11px; color: var(--c-text-3);
}
.mock-body { display: grid; grid-template-columns: 178px minmax(0,1fr); min-height: 380px; text-align: left; }
.mock-side { border-right: 1px solid var(--c-border-light); padding: 14px 10px; background: #fff; }
.mock-side-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--c-text-2);
}
.mock-side-item.is-on { background: var(--c-accent-soft); color: var(--c-accent); font-weight: 500; }
.mock-main { padding: 18px; background: var(--c-bg-2); }

.mock-post {
  background: #fff; border: 1px solid var(--c-border-light);
  border-radius: var(--r-md); padding: 14px; margin-bottom: 10px;
}
.mock-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.mock-line { height: 8px; border-radius: 4px; background: #e9e9ee; margin-bottom: 7px; }

/* Fâșie de platforme */
.strip { padding: 40px 0; border-bottom: 1px solid var(--c-border-light); }
.strip-title {
  text-align: center; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3);
  margin-bottom: 26px;
}
.strip-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 14px 30px;
}
.strip-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--c-text-2);
  letter-spacing: -.012em;
}
.strip-item .ico { color: var(--c-text-3); }

/* Carduri de funcții */
.feat {
  background: #fff; border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg); padding: 28px;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.feat:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: transparent; }
.feat-icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: var(--c-dark-2); color: #ffffff;
}
.feat-body { min-width: 0; }
.feat h3 { font-size: 19px; margin-bottom: 9px; }
.feat p { font-size: 15px; line-height: 1.5; color: var(--c-text-2); }

/* Pe telefon icoana stă lângă text, nu deasupra: altfel rândul ei rămâne
   gol pe toată lățimea și cardul crește degeaba pe verticală. */
@media (max-width: 720px) {
  .feat { display: flex; gap: 16px; align-items: flex-start; padding: 20px; }
  .feat-icon { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 0; flex-shrink: 0; }
  .feat h3 { font-size: 17px; margin-bottom: 6px; }
  .feat p { font-size: 14px; }
}

/* Pași */
.stepcard { position: relative; padding-left: 58px; }
.stepcard-num {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-dark-2); color: #fff;
  font-size: 16px; font-weight: 600;
}
.stepcard h3 { font-size: 19px; margin-bottom: 8px; }
.stepcard p { font-size: 15px; line-height: 1.55; color: var(--c-text-2); }
/* Un pas poate avea mai multe paragrafe: fără spațiu între ele curg ca un bloc unic. */
.stepcard p + p { margin-top: 10px; }

/* Dale de platformă */
.plat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  padding: 26px 14px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--c-border-light);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.plat-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.plat-tile span { font-size: 14px; font-weight: 500; letter-spacing: -.012em; }

/* Prețuri */
.price {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-border-light);
  border-radius: var(--r-xl); padding: 32px 28px; position: relative;
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.price:hover { box-shadow: var(--sh-lg); }
.price.is-featured {
  border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(0,0,0,.10), var(--sh-md);
}
.price-tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 14px; border-radius: var(--r-pill);
  background: var(--c-accent); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.price-name { font-size: 21px; font-weight: 600; letter-spacing: -.019em; }
.price-tagline { font-size: 14px; color: var(--c-text-2); margin-top: 5px; min-height: 40px; line-height: 1.4; }
.price-amount { display: flex; align-items: baseline; gap: 5px; margin: 20px 0 4px; }
.price-amount b { font-size: 44px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.price-amount span { font-size: 15px; color: var(--c-text-2); }
.price-list { list-style: none; display: grid; gap: 11px; margin: 24px 0; }
.price-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; line-height: 1.45; }
.price-list .ico { color: var(--c-green); flex-shrink: 0; margin-top: 2px; }
.price .btn { margin-top: auto; }

/* Întrebări frecvente */
.faq { border-top: 1px solid var(--c-border-light); }
.faq details { border-bottom: 1px solid var(--c-border-light); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 500; letter-spacing: -.019em;
  transition: color var(--t-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-accent); }
.faq summary .ico { flex-shrink: 0; color: var(--c-text-3); transition: transform var(--t-base); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq-body { padding: 0 4px 24px; font-size: 16px; line-height: 1.6; color: var(--c-text-2); max-width: 76ch; }

/* Apel final la acțiune */
.cta-final {
  text-align: center; padding: 96px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f4 100%);
}

@media (max-width: 834px) {
  .mock-body { grid-template-columns: minmax(0,1fr); }
  .mock-side { display: none; }
}

@media (max-width: 640px) {
  .hero { padding: 56px 0 48px; }
  .hero h1 { max-width: 100%; }
  .hero-cta .btn { width: 100%; }
  .mock { margin-top: 36px; border-radius: var(--r-lg); }
  .mock-body { min-height: 0; }
  .feat { padding: 22px; }
  .price { padding: 26px 22px; }
  .price-tagline { min-height: 0; }
  .faq summary { font-size: 17px; padding: 18px 2px; }
  .faq-body { font-size: 15px; padding-bottom: 20px; }
  .cta-final { padding: 64px 0; }
  .stepcard { padding-left: 50px; }
  .stepcard-num { width: 34px; height: 34px; font-size: 14px; }
}

/* ── Divers ──────────────────────────────────────────────── */
.divider-text {
  display: flex; align-items: center; gap: 14px;
  color: var(--c-text-3); font-size: 13px; margin: 22px 0;
}
.divider-text::before, .divider-text::after {
  content: ""; flex: 1; height: 1px; background: var(--c-border-light);
}

.kbd {
  display: inline-block; padding: 2px 6px; border-radius: 5px;
  background: var(--c-bg-2); border: 1px solid var(--c-border-light);
  font-family: var(--font-mono); font-size: 12px; color: var(--c-text-2);
}

.code-block {
  background: var(--c-dark-2); color: #f5f5f7;
  padding: 16px 18px; border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.55;
  overflow-x: auto; white-space: pre;
}

/*
 * „Ce pleacă exact” — textul compus pe server, cum ajunge la rețea.
 *
 * `white-space: pre-wrap` păstrează rândurile goale dintre text, îndemn și hashtaguri
 * (exact cum le pune `publish_compose()`), dar lasă rândul lung să se rupă: fără
 * `word-break`, un link cu etichete UTM are peste 120 de caractere fără spațiu și ar
 * lărgi fereastra pe telefon.
 */
.final-group {
  border: 1px solid var(--c-border-light); border-radius: var(--r-md);
  background: var(--c-bg); padding: 14px;
}
.final-group + .final-group { margin-top: 12px; }
.final-nets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.final-text {
  margin: 10px 0 0; padding: 12px 14px;
  background: var(--c-bg-2); border-radius: var(--r-md);
  white-space: pre-wrap; word-break: break-word;
  font-size: 15px; line-height: 1.55; color: var(--c-text);
  max-height: 320px; overflow-y: auto;
}
.final-meta {
  margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; font-size: 13px; color: var(--c-text-3);
}

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hide { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Apariție la scroll — ascunderea se aplică doar dacă JS rulează,
   altfel conținutul ar rămâne invizibil la o eroare de script. */
.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  :root { --side-w: 228px; }
}

@media (max-width: 834px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: flex; }

  /* Sidebar devine sertar */
  .side {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform var(--t-slow);
    box-shadow: var(--sh-xl); width: 280px;
  }
  body.side-open .side { transform: translateX(0); }
  body.side-open { overflow: hidden; }
  .side-toggle { display: inline-flex; }
  .side-scrim {
    position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.35);
    opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility var(--t-base);
  }
  body.side-open .side-scrim { opacity: 1; visibility: visible; }

  .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; }
  .content { padding: 20px 18px 48px; }
  .topbar { padding: 0 18px; height: 56px; }
  .section { padding: 64px 0; }
  .section-lg { padding: 80px 0; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap, .wrap-narrow, .wrap-wide { padding: 0 18px; }

  /* Grilele cu conținut lat (formulare, carduri cu text) cad pe o coloană.
     `grid-4` ține însă elemente compacte — cifre, logo-uri de rețele — care
     încap două pe rând și altfel lasă jumătate de ecran gol. */
  .grid-2, .grid-3 { grid-template-columns: minmax(0,1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Cifrele rămân două pe rând indiferent de grila în care stau. Un card de
     statistică e o etichetă scurtă și un număr — pe o coloană lăsa jumătate de
     ecran gol și împingea conținutul util cu câteva ecrane mai jos.
     Regula se uită la copii, ca să nu depindă de ce clasă de grilă a nimerit
     fiecare pagină: `grid-3` pe evenimente, `grid-4` pe panoul de admin. */
  .grid:has(> .stat) { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid { gap: 14px; }
  .foot { padding: 44px 0 32px; }
  /* Subsolul: marca pe toată lățimea, cele trei liste de linkuri pe două
     coloane. Pe o singură coloană se întindea inutil pe verticală. */
  .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px 20px; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .foot-bottom { margin-top: 30px; }

  .card { padding: 18px; border-radius: var(--r-md); }
  .card-head { margin: -18px -18px 16px; padding: 14px 18px; }
  .card-pad-lg { padding: 22px; }

  .btn { padding: 10px 20px; font-size: 16px; }
  .btn-lg { padding: 12px 26px; font-size: 17px; }

  .section { padding: 52px 0; }
  .section-sm { padding: 36px 0; }
  .section-lg { padding: 64px 0; }

  .modal { max-width: 100%; border-radius: var(--r-lg); }
  .modal-body { padding: 18px; }
  .modal-head, .modal-foot { padding: 15px 18px; }
  /*
   * Subsolul se rupe pe rânduri.
   *
   * Cu `flex: 1` și butoane care nu-și taie textul (`nowrap`), trei butoane cer mai mult
   * decât 390px — iar `justify-content: flex-end` împinge surplusul spre STÂNGA, în afara
   * ferestrei: butonul „Renunț” pur și simplu nu se mai vedea, deși era în DOM. Aceeași
   * capcană `min-width: auto` ca la antetele de card, prima dată într-un modal, fiindcă
   * până acum niciunul nu avea trei butoane.
   */
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; min-width: 120px; }

  .toast-host { left: 14px; right: 14px; bottom: 14px; }
  .toast { min-width: 0; max-width: none; }

  /* Calendarul devine listă pe mobil */
  .cal-head { display: none; }
  .cal-grid { grid-template-columns: 1fr; }
  .cal-day {
    min-height: 0; border-right: none; display: flex; gap: 12px;
    padding: 11px 14px; align-items: flex-start;
  }
  /* Pe mobil arătăm doar zilele cu conținut, plus ziua curentă */
  .cal-day.is-out { display: none; }
  .cal-day.is-empty:not(.is-today) { display: none; }
  /* …dar o zi de pauză e goală tocmai fiindcă e pauză. Ascunsă, funcționalitatea
     dispărea complet de pe telefon, exact ca tragerea postărilor înainte de
     butonul de mutare. Doar prima zi a pauzei: șapte rânduri identice ar fi listă
     de umplutură, nu informație. */
  .cal-day.is-empty.is-break-start { display: flex; }
  /* Aceeași capcană pentru sărbători: 1 Decembrie e goală tocmai fiindcă nu s-a
     scris încă nimic pentru ea, deci ascunsă pe telefon dispare exact ziua despre
     care voiam să spunem ceva. */
  .cal-day.is-empty.is-holiday { display: flex; }
  /* Aceeași grijă pentru campanii: ziua în care începe una e goală tocmai fiindcă nu s-a
     scris încă nimic pentru ea — ascunsă pe telefon, dispare exact ce voiam să arătăm. */
  .cal-day.is-empty.is-camp-start { display: flex; }
  .cal-daynum { min-width: 46px; margin-bottom: 0; font-size: 14px; }
  .cal-day-items { flex: 1; min-width: 0; }
  /* Ziua cu etichetă (pauză, campanie, sărbătoare): eticheta și postările sunt frați în
     același rând flex, deci pastila rămânea cu ~60px, iar textul curgea pe șase rânduri de
     câte un cuvânt. Aici lista trece pe rândul ei, sub etichetă. Doar la zilele marcate:
     forțată peste tot, ar coborî pastila sub numărul zilei și ar înălța fiecare rând. */
  .cal-day.has-tag { flex-wrap: wrap; }
  .cal-day.has-tag .cal-day-items { flex: 1 0 100%; }
  /* În rândul de pe telefon, „+” stă la capătul rândului, nu peste ziua următoare. */
  .cal-add { position: static; flex: 0 0 auto; margin-left: auto; }
  .cal-item { font-size: 13px; padding: 6px 9px; white-space: normal; }
  .cal-empty-note { display: block; }

  /* Butoanele din bara de sus rămân doar cu icoana */
  .topbar-actions .btn .btn-label { display: none; }
  .topbar-actions .btn { padding: 9px 13px; }

  /* Contorul „3 din 8” de lângă săgețile din editor: sub 640px spațiul luat de el
     îl fura de la TITLUL paginii, care se tăia („Editeaz…”). Pe telefon numele
     paginii e singurul reper — capcană deja documentată o dată. Săgețile rămân;
     poziția se citește oricum din listă. */
  .nav-pozitie { display: none; }

  /* Sub 640px nu mai încape nici eticheta pasului curent */
  .steps { gap: 4px; }
  .step-label { display: none; }
  .step-line { min-width: 12px; margin: 0 4px; }

  .table th, .table td { padding: 10px 11px; font-size: 14px; }

  .stat-value { font-size: 27px; }
  .topbar h1 { font-size: 17px; }
}

@media (max-width: 400px) {
  .btn { padding: 9px 17px; font-size: 15px; }
  .content { padding: 16px 14px 40px; }

  /* Titlul paginii pierdea litere în fața butoanelor din bara de sus: „Surse de
     conținut” ieșea „Surse de conți…”, iar „Conturi sociale” ajungea „Conturi s…”.
     Numele paginii e singurul reper pe ecranul pe care omul are cel mai puțin
     context, deci spațiul îl primește el: butoanele rotunde se strâng, dar rămân
     toate — un control ascuns pe telefon e o funcționalitate pierdută. */
  .topbar h1 { font-size: 16px; }
  .topbar { gap: 8px; padding: 0 14px; }
  .topbar-actions { gap: 4px; }
  .topbar-actions .btn { padding: 8px 9px; }
  .topbar-actions .btn-icon { width: 34px; height: 34px; }
}

/* ── Preferințe de sistem ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .nav, .side, .topbar, .btn, .toast-host { display: none !important; }
  .app, .content { display: block; padding: 0; background: #fff; }
}

/* ── Căutare globală ─────────────────────────────────────── */
.search-backdrop {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.search-backdrop.is-open { opacity: 1; visibility: visible; }
.search-box {
  background: #fff; border-radius: var(--r-xl);
  width: 100%; max-width: 580px; max-height: 70vh;
  /* Ca la .modal: fără min-width: 0 conținutul lat împinge cutia peste ecran. */
  min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--sh-xl);
  transform: scale(.97) translateY(-8px);
  transition: transform var(--t-slow);
}
.search-backdrop.is-open .search-box { transform: scale(1) translateY(0); }

.search-head {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 17px; border-bottom: 1px solid var(--c-border-light);
  flex-shrink: 0; color: var(--c-text-3);
}
.search-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 17px; color: var(--c-text); font-family: inherit;
}
.search-input::placeholder { color: var(--c-text-3); }

.search-results { overflow-y: auto; flex: 1; min-height: 0; padding: 6px; }
.search-hint { padding: 26px 16px; text-align: center; }

.search-group-label {
  padding: 10px 11px 5px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-3);
}
.search-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--c-text);
}
.search-item:hover { text-decoration: none; }
.search-item.is-active { background: var(--c-bg-2); }
.search-item-label {
  flex: 1; min-width: 0; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-item-meta {
  flex-shrink: 0; max-width: 45%; font-size: 12px; color: var(--c-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.search-foot {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 10px 17px; border-top: 1px solid var(--c-border-light); flex-shrink: 0;
}
.search-foot kbd {
  display: inline-block; min-width: 17px; padding: 1px 4px; margin-right: 3px;
  border: 1px solid var(--c-border); border-radius: 4px;
  background: var(--c-bg-2); font: inherit; font-size: 11px; text-align: center;
}

/* Pe telefon indiciile de tastatură nu ajută pe nimeni. */
@media (max-width: 640px) {
  .search-backdrop { padding: 0; }
  .search-box { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
  .search-foot { display: none; }
  /* Pe lățimea unui telefon, meta pe același rând ar tăia și titlul, și data.
     Mai bine îl trecem dedesubt, întreg. */
  .search-item { flex-direction: column; align-items: stretch; gap: 2px; }
  .search-item-meta { max-width: none; }
}

/* Miniatura imaginii unei postări, în listă. */
.post-thumb {
  flex-shrink: 0; width: 72px; height: 72px;
  object-fit: cover; border-radius: var(--r-sm);
  background: var(--c-bg-2);
}
@media (max-width: 640px) {
  .post-thumb { width: 56px; height: 56px; }
}

/* Rând din „cele mai bune postări”, cu acțiune la capăt. */
.top-post {
  padding: 11px 12px; margin: 0 -12px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.top-post:hover { background: var(--c-bg-2); }

/* Câmp de dată/oră în format românesc: textul zz-ll-aaaa e ce se vede, iar
   inputul nativ stă peste iconiță, transparent, doar ca să deschidă calendarul
   sistemului. Pe telefon asta păstrează selectorul nativ, care e cel mai bun. */
.datefield { position: relative; display: block; }
.datefield-native {
  position: absolute; right: 0; top: 0; bottom: 0; width: 46px;
  opacity: 0; border: none; background: none; padding: 0; cursor: pointer;
}
.datefield::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 15px; height: 15px;
  margin-top: -7px; pointer-events: none; opacity: .45;
  background: currentColor;
  -webkit-mask: var(--ico-cal) center / contain no-repeat;
          mask: var(--ico-cal) center / contain no-repeat;
}
.datefield .input { padding-right: 42px; }
.input.is-invalid { border-color: var(--c-red); }
.input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192,0,19,.12); }

/* Bulina unui pas din „Primii pași”. */
.step-check {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
  background: var(--c-bg-2); color: var(--c-text-3);
  border: 1px solid var(--c-border-light);
}
.step-check.is-done { background: var(--c-green); color: #fff; border-color: transparent; }

/* Pe telefon butonul pasului curent înghesuia titlul pe trei rânduri.
   Îl trecem dedesubt, pe toată lățimea. */
@media (max-width: 560px) {
  .firstrun-row { flex-wrap: wrap; }
  .firstrun-row > .btn { width: 100%; margin-left: 38px; }
}