/* hub-bundle-v317.css — toate stilurile v225-v316 combinate */

/* ============================================================================
   diaspora.ro HUB — extras v225
   Stylesheet pentru toate feature-urile noi (toast, skeleton, drawer,
   mini-player, share-sheet, autocomplete, install banner, dark-mode auto etc.)
   ============================================================================ */

/* ---------- A1: Toast confirmare login ---------- */
#hx-login-toast{
  position:fixed; left:50%; top:calc(env(safe-area-inset-top,0px) + 16px);
  transform:translate(-50%,-120%);
  background:linear-gradient(135deg,#1a56db,#3b82f6);
  color:#fff; padding:10px 16px 10px 10px;
  border-radius:999px; box-shadow:0 12px 32px rgba(26,86,219,.35);
  display:flex; align-items:center; gap:10px;
  font-size:14px; font-weight:600; z-index:99999;
  opacity:0; transition:transform .35s cubic-bezier(.2,.9,.2,1.1), opacity .25s;
  pointer-events:none; max-width:90vw;
}
#hx-login-toast.show{ transform:translate(-50%,0); opacity:1; }
#hx-login-toast .hx-av{
  width:32px; height:32px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
}
#hx-login-toast .hx-av img{ width:100%; height:100%; object-fit:cover; }
#hx-login-toast .hx-msg{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw; }

/* ---------- A2: Skeleton loaders ---------- */
@keyframes hx-shimmer{
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.hx-skel{
  background:linear-gradient(90deg, var(--bg-2) 0%, rgba(255,255,255,.05) 50%, var(--bg-2) 100%);
  background-size:800px 100%;
  animation:hx-shimmer 1.4s linear infinite;
  border-radius:8px;
}
[data-theme="dark"] .hx-skel{
  background:linear-gradient(90deg, #1a2238 0%, #2a3450 50%, #1a2238 100%);
  background-size:800px 100%;
}
.hx-skel-card{
  background:var(--card); border:1px solid var(--card-line); border-radius:14px;
  padding:14px; margin-bottom:12px;
}
.hx-skel-row{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.hx-skel-av{ width:40px; height:40px; border-radius:50%; }
.hx-skel-line{ height:10px; border-radius:6px; }
.hx-skel-line.short{ width:40%; }
.hx-skel-line.med{ width:65%; }
.hx-skel-line.full{ width:100%; }
.hx-skel-img{ height:200px; border-radius:10px; margin:8px 0; }

/* ---------- A3: Pull-to-refresh ---------- */
.hx-ptr{
  position:absolute; left:0; right:0; top:0;
  height:0; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none; z-index:5;
  transition:height .15s ease;
}
.hx-ptr-spin{
  width:30px; height:30px; border-radius:50%;
  border:3px solid var(--brand); border-top-color:transparent;
  margin-bottom:8px;
  transform:rotate(0deg);
  transition:transform .1s linear;
}
.hx-ptr.active .hx-ptr-spin{ animation:hx-ptr-rot .8s linear infinite; }
@keyframes hx-ptr-rot{ to{ transform:rotate(360deg); } }

/* ---------- A4: Notif badge (counter pe iconul bell) ---------- */
.hx-bell-badge{
  position:absolute; top:-2px; right:-2px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:9px; background:#dc2626; color:#fff;
  font-size:10px; font-weight:700; line-height:16px; text-align:center;
  border:2px solid var(--bg);
  pointer-events:none;
}

/* ---------- A5: Back-to-top ---------- */
#hx-totop{
  position:fixed; right:14px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 76px);
  width:42px; height:42px; border-radius:50%;
  background:var(--brand); color:#fff; border:0;
  box-shadow:0 6px 18px rgba(26,86,219,.4);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transform:translateY(20px) scale(.85);
  transition:opacity .2s, transform .2s;
  pointer-events:none; z-index:90;
}
#hx-totop.show{ opacity:1; transform:none; pointer-events:auto; }
#hx-totop svg{ width:20px; height:20px; }
@media (min-width:900px){
  #hx-totop{ bottom:24px; right:24px; }
}

/* ---------- A6: Share sheet (fallback dacă nu e Web Share API) ---------- */
#hx-share-mask{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:flex-end; justify-content:center;
  z-index:9990; opacity:0; transition:opacity .2s;
}
#hx-share-mask.show{ display:flex; opacity:1; }
#hx-share-sheet{
  background:var(--card); border-radius:18px 18px 0 0;
  padding:18px 16px calc(env(safe-area-inset-bottom,0px) + 16px);
  width:100%; max-width:520px;
  transform:translateY(100%); transition:transform .25s ease;
}
#hx-share-mask.show #hx-share-sheet{ transform:translateY(0); }
#hx-share-sheet h4{ margin:0 0 12px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.hx-share-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.hx-share-grid a, .hx-share-grid button{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 4px; background:transparent; border:0; color:var(--ink);
  font-size:12px; cursor:pointer; border-radius:10px; text-decoration:none;
}
.hx-share-grid a:active, .hx-share-grid button:active{ background:var(--bg-2); }
.hx-share-ico{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.hx-share-ico svg{ width:22px; height:22px; }
.hx-share-ico.wa{ background:#25d366; }
.hx-share-ico.tg{ background:#229ed9; }
.hx-share-ico.fb{ background:#1a56db; }
.hx-share-ico.tw{ background:#000; }
.hx-share-ico.em{ background:#6366f1; }
.hx-share-ico.cp{ background:#475569; }
.hx-share-ico.sm{ background:#0ea5e9; }
.hx-share-ico.qr{ background:#ea580c; }
#hx-share-link{
  margin-top:14px; display:flex; gap:6px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; font-size:13px;
}
#hx-share-link input{
  flex:1; background:transparent; border:0; color:var(--ink); font-size:13px;
  min-width:0;
}
#hx-share-link input:focus{ outline:0; }

/* ---------- A7: Composer draft indicator ---------- */
.hx-draft-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--muted);
  padding:4px 10px; border-radius:999px; background:var(--bg-2);
  margin-left:6px;
}
.hx-draft-pill svg{ width:12px; height:12px; }

/* ---------- A8/A9: Autocomplete dropdown (# si @) ---------- */
.hx-ac{
  position:absolute; left:0; right:0;
  background:var(--card); border:1px solid var(--card-line); border-radius:10px;
  box-shadow:0 10px 32px rgba(0,0,0,.18);
  max-height:240px; overflow:auto;
  z-index:9000;
  margin-top:4px;
}
.hx-ac-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; cursor:pointer; color:var(--ink); font-size:14px;
}
.hx-ac-item.active, .hx-ac-item:hover{ background:var(--bg-2); }
.hx-ac-item .hx-ac-av{
  width:26px; height:26px; border-radius:50%; background:var(--brand);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; overflow:hidden;
}
.hx-ac-item .hx-ac-av img{ width:100%; height:100%; object-fit:cover; }
.hx-ac-item .hx-ac-tag{
  width:26px; height:26px; border-radius:6px; background:var(--brand);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
}
.hx-ac-item .hx-ac-meta{ font-size:11px; color:var(--muted); }
.hx-ac-item .hx-ac-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- B1: Mini-player persistent ---------- */
#hx-mini{
  position:fixed; right:14px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 130px);
  width:120px; height:200px;
  background:#000; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 36px rgba(0,0,0,.5);
  z-index:88; display:none;
  cursor:pointer;
}
#hx-mini.show{ display:block; }
#hx-mini video{ width:100%; height:100%; object-fit:cover; display:block; }
#hx-mini-close{
  position:absolute; top:4px; right:4px;
  width:24px; height:24px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
#hx-mini-close svg{ width:14px; height:14px; }
#hx-mini-bar{
  position:absolute; bottom:0; left:0; right:0; height:3px;
  background:rgba(255,255,255,.2);
}
#hx-mini-bar > i{ display:block; height:100%; background:var(--brand); width:0; }

/* ---------- B2: Comments drawer pe reel ---------- */
#hx-cmt-mask{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; z-index:9970;
  opacity:0; transition:opacity .2s;
}
#hx-cmt-mask.show{ display:block; opacity:1; }
#hx-cmt-drawer{
  position:fixed; left:0; right:0; bottom:0;
  height:60vh; max-height:600px;
  background:var(--card); color:var(--ink);
  border-radius:18px 18px 0 0;
  display:flex; flex-direction:column;
  z-index:9971; transform:translateY(100%);
  transition:transform .25s ease;
}
#hx-cmt-mask.show + #hx-cmt-drawer, #hx-cmt-drawer.show{ transform:translateY(0); }
#hx-cmt-drawer header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line);
  font-weight:700; font-size:15px;
}
#hx-cmt-drawer header button{
  background:none; border:0; color:var(--muted); padding:6px; cursor:pointer;
}
#hx-cmt-list{ flex:1; overflow:auto; padding:10px 14px; }
.hx-cmt{
  display:flex; gap:8px; padding:8px 0; border-bottom:1px solid var(--line);
}
.hx-cmt:last-child{ border-bottom:0; }
.hx-cmt .hx-cmt-av{
  width:32px; height:32px; border-radius:50%;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; overflow:hidden; flex:0 0 auto;
}
.hx-cmt .hx-cmt-av img{ width:100%; height:100%; object-fit:cover; }
.hx-cmt-body{ flex:1; min-width:0; }
.hx-cmt-name{ font-size:13px; font-weight:700; }
.hx-cmt-text{ font-size:14px; line-height:1.4; word-break:break-word; }
.hx-cmt-time{ font-size:11px; color:var(--muted); margin-top:2px; }
#hx-cmt-form{
  display:flex; gap:8px; padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);
  border-top:1px solid var(--line);
}
#hx-cmt-form input{
  flex:1; background:var(--bg-2); border:1px solid var(--line);
  border-radius:999px; padding:10px 14px; color:var(--ink); font-size:14px;
}
#hx-cmt-form button{
  background:var(--brand); color:#fff; border:0;
  border-radius:999px; padding:10px 16px; font-weight:700; cursor:pointer;
}

/* ---------- B3: Heart floating animation pe like ---------- */
.hx-heart-fly{
  position:absolute; pointer-events:none; z-index:9999;
  color:#ef4444; font-size:48px; line-height:1;
  animation:hx-heart-up 1.1s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes hx-heart-up{
  0%   { opacity:0; transform:translate(-50%, 0) scale(.4); }
  20%  { opacity:1; transform:translate(-50%, -10px) scale(1.2); }
  100% { opacity:0; transform:translate(-50%, -110px) scale(1); }
}

/* ---------- B6: Speed picker pe reel (long-press) ---------- */
#hx-speed{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 110px);
  background:rgba(0,0,0,.85); color:#fff;
  padding:6px; border-radius:999px;
  display:none; gap:4px; z-index:9999;
}
#hx-speed.show{ display:flex; }
#hx-speed button{
  background:transparent; border:0; color:#fff;
  padding:8px 12px; border-radius:999px; font-weight:700; cursor:pointer;
  font-size:13px;
}
#hx-speed button.active{ background:var(--brand); }

/* ---------- B7: Progress bar pe reel video ---------- */
.hx-rprog{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,.2); pointer-events:none; z-index:5;
}
.hx-rprog > i{ display:block; height:100%; background:#fff; width:0%; }

/* ---------- H1: Lazy-load blur-up ---------- */
img.hx-lazy{
  filter:blur(8px); transition:filter .35s;
}
img.hx-lazy.loaded{ filter:none; }

/* ---------- H3: PWA install banner ---------- */
#hx-pwa{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 78px);
  background:var(--card); color:var(--ink);
  border:1px solid var(--card-line); border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
  padding:12px 14px; display:none;
  z-index:91; max-width:92vw; min-width:280px;
}
#hx-pwa.show{ display:flex; align-items:center; gap:10px; }
#hx-pwa .hx-pwa-ico{
  width:40px; height:40px; border-radius:10px;
  background:linear-gradient(135deg,#1a56db,#3b82f6);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; flex:0 0 auto;
}
#hx-pwa .hx-pwa-body{ flex:1; min-width:0; }
#hx-pwa .hx-pwa-title{ font-weight:700; font-size:14px; }
#hx-pwa .hx-pwa-sub{ font-size:12px; color:var(--muted); }
#hx-pwa-btn{
  background:var(--brand); color:#fff; border:0;
  padding:8px 14px; border-radius:8px; font-weight:700; cursor:pointer;
  font-size:13px;
}
#hx-pwa-x{
  background:none; border:0; color:var(--muted); cursor:pointer; padding:4px;
}
@media (min-width:900px){
  #hx-pwa{ left:auto; right:24px; transform:none; bottom:24px; }
}

/* ---------- H4: Offline banner ---------- */
#hx-off{
  position:fixed; left:0; right:0;
  top:calc(env(safe-area-inset-top,0px) + 0px);
  background:#dc2626; color:#fff;
  text-align:center; font-size:13px; font-weight:600;
  padding:6px 10px; z-index:99998;
  display:none;
}
#hx-off.show{ display:block; }

/* ---------- I1: Report dialog ---------- */
.hx-rep-list{ display:flex; flex-direction:column; gap:8px; }
.hx-rep-list button{
  text-align:left; background:var(--bg-2); border:1px solid var(--line);
  color:var(--ink); padding:10px 14px; border-radius:10px; cursor:pointer;
  font-size:14px;
}
.hx-rep-list button:hover{ background:var(--bg); border-color:var(--brand); }

/* ---------- I2: Block-list helper (post hidden) ---------- */
.post.hx-blocked{ display:none; }

/* ---------- Toast queue (folosit de share copy etc) ---------- */
.hx-toast-stack{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 90px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; gap:6px; z-index:99997;
  pointer-events:none;
}
.hx-toast-stack .hx-t{
  background:rgba(0,0,0,.85); color:#fff; padding:8px 14px;
  border-radius:999px; font-size:13px; font-weight:600;
  opacity:0; transform:translateY(10px);
  transition:opacity .2s, transform .2s;
}
.hx-toast-stack .hx-t.show{ opacity:1; transform:none; }

/* ============================================================
   v226 — REACTIONS POPOVER (long-press pe like)
   ============================================================ */
#hx-react-pop{
  position:fixed; left:0; top:0; z-index:120;
  display:none; align-items:center; gap:6px;
  padding:8px 10px; border-radius:999px;
  background:rgba(20,22,32,.92); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 36px rgba(0,0,0,.5);
  animation:hxRxIn .18s cubic-bezier(.2,.9,.3,1.4) both;
}
#hx-react-pop.show{ display:flex; }
#hx-react-pop button{
  width:44px; height:44px; border-radius:50%;
  background:transparent; border:0; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; line-height:1;
  transition:transform .15s ease;
}
#hx-react-pop button:hover{ transform:scale(1.32) translateY(-4px); }
#hx-react-pop button:active{ transform:scale(1.15); }
#hx-react-pop .hx-rx-emoji{ display:block; }
@keyframes hxRxIn{
  from{ opacity:0; transform:translateY(8px) scale(.85); }
  to  { opacity:1; transform:none; }
}

/* ============================================================
   v226 — EMOJI PICKER MODERN (2026) pentru comentarii
   ============================================================ */
.hx-emoji-btn{
  background:transparent; border:0; cursor:pointer;
  width:38px; height:38px; padding:0;
  border-radius:10px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:#9aa4bd; transition:.15s;
}
.hx-emoji-btn:hover{ background:rgba(255,255,255,.06); color:#facc15; }
.hx-emoji-btn svg{ width:22px; height:22px; }

#hx-emoji-pop{
  position:fixed; left:0; top:0; z-index:130;
  display:none; flex-direction:column;
  width:min(360px, calc(100vw - 16px));
  max-height:380px;
  background:rgba(18,22,34,.96); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  animation:hxEmIn .18s ease both;
}
#hx-emoji-pop.show{ display:flex; }
@keyframes hxEmIn{
  from{ opacity:0; transform:translateY(8px) scale(.96); }
  to  { opacity:1; transform:none; }
}
#hx-emoji-pop .hx-emoji-search{
  padding:10px 10px 6px; border-bottom:1px solid rgba(255,255,255,.08);
}
#hx-emoji-pop .hx-emoji-search input{
  width:100%; box-sizing:border-box;
  padding:8px 12px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  color:#eee; font-family:inherit; font-size:13px;
}
#hx-emoji-pop .hx-emoji-tabs{
  display:flex; gap:4px; padding:6px 8px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-bottom:1px solid rgba(255,255,255,.08);
  scrollbar-width:none;
}
#hx-emoji-pop .hx-emoji-tabs::-webkit-scrollbar{ display:none; }
#hx-emoji-pop .hx-emoji-tabs button{
  flex-shrink:0;
  padding:5px 11px; border-radius:999px;
  background:transparent; color:#9aa4bd;
  border:1px solid transparent; cursor:pointer;
  font-size:12px; font-weight:600; font-family:inherit;
  transition:.15s;
}
#hx-emoji-pop .hx-emoji-tabs button:hover{ color:#fff; background:rgba(255,255,255,.05); }
#hx-emoji-pop .hx-emoji-tabs button.active{
  color:#fff; background:linear-gradient(95deg,#1a56db,#00D4FF);
  border-color:transparent;
}
#hx-emoji-pop .hx-emoji-grid{
  flex:1; overflow-y:auto;
  padding:8px;
  display:grid; grid-template-columns:repeat(8, 1fr); gap:2px;
}
#hx-emoji-pop .hx-emoji-grid button{
  width:100%; aspect-ratio:1; padding:0;
  background:transparent; border:0; border-radius:8px;
  font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:.1s;
}
#hx-emoji-pop .hx-emoji-grid button:hover{ background:rgba(255,255,255,.08); transform:scale(1.18); }

/* ============================================================
   v226 — AVATARE PATRATE (global override)
   Suprascrie border-radius:50% → 14px peste tot pe avatare
   ============================================================ */
.av,
.avatar,
.hx-cmt-av,
.vv-author .av,
.vv-author .av img,
.user-row .av,
.notif .av,
.cm .av,
.vv-sr-row .av,
.post .av,
.post .avatar,
.story .av,
.story-ring .av,
.fs-list .av,
img.av, img.avatar{
  border-radius:14px;
}
/* avatare mici (≤ 36px) — colturi mai mici, sa nu para "rotunde" */
.hx-cmt-av,
.cm .av,
.notif .av,
.user-row .av{
  border-radius:8px;
}


/* ============================================================
   diaspora.ro — HUB v237 (2026-04-27)
   "GALA" — pagina mobilă premium (aurora hero + quick lanes +
   live country strip + featured stories + stats counter band)
   Strict ADD-only. Se aplică doar pe ≤900px.
   ============================================================ */

/* ───────────────────────────────────────────────────────────
   Tokens locale (nu afectează tema globală)
   ─────────────────────────────────────────────────────────── */
:root {
  --v237-r-lg: 22px;
  --v237-r-md: 16px;
  --v237-r-sm: 12px;
  --v237-shadow-1: 0 1px 2px rgba(13,28,71,.06), 0 8px 22px -10px rgba(13,28,71,.18);
  --v237-shadow-2: 0 12px 36px -14px rgba(13,28,71,.32), 0 2px 6px rgba(13,28,71,.06);
  --v237-shadow-glow: 0 18px 48px -18px rgba(26,86,219,.55);
  --v237-ink: #0a1633;
  --v237-ink-2: #2c3a5d;
  --v237-muted: #5e6a87;
}
[data-theme="dark"] {
  --v237-ink: #f3f6ff;
  --v237-ink-2: #c8d2ec;
  --v237-muted: #93a0c2;
}

/* Ascundem hero-ul vechi v236 — îl înlocuim cu gala */
.v236-hero { display: none; }

/* Container principal — apare doar pe mobil (sub 900px) */
.v237-gala { display: none; }

@media (max-width: 900px) {

  .v237-gala {
    display: block;
    margin: 0 0 18px 0;
    padding: 0;
    position: relative;
  }

  /* ─────────── 1. AURORA HERO ─────────── */
  .v237-aurora {
    position: relative;
    margin: 0 -16px 16px;            /* full-bleed pe mobil */
    padding: 28px 22px 26px;
    overflow: hidden;
    border-radius: 0 0 32px 32px;
    background: #07142e;
    color: #fff;
    isolation: isolate;
    box-shadow: var(--v237-shadow-glow);
  }
  .v237-aurora::before,
  .v237-aurora::after,
  .v237-aurora .v237-aurora-blob {
    content: "";
    position: absolute; inset: -25%;
    z-index: -1;
    background:
      radial-gradient(40% 35% at 18% 20%, rgba(255,77,160,.55), transparent 60%),
      radial-gradient(45% 40% at 78% 12%, rgba(255,189,89,.45), transparent 60%),
      radial-gradient(55% 50% at 50% 88%, rgba(0,148,255,.62), transparent 60%),
      radial-gradient(40% 40% at 10% 95%, rgba(150,99,255,.58), transparent 60%);
    filter: blur(28px) saturate(1.15);
    animation: v237-drift 24s ease-in-out infinite alternate;
  }
  .v237-aurora::after {
    animation-duration: 32s;
    animation-direction: alternate-reverse;
    opacity: .85;
    transform: scale(1.05);
  }
  .v237-aurora .v237-aurora-blob {
    animation-duration: 40s;
    opacity: .7;
    mix-blend-mode: screen;
  }
  @keyframes v237-drift {
    0%   { transform: translate(0,0)     scale(1); }
    50%  { transform: translate(2%,-3%)  scale(1.06); }
    100% { transform: translate(-2%,3%)  scale(1.02); }
  }
  /* film-grain subtle peste aurora pentru texture premium */
  .v237-aurora .v237-grain {
    position: absolute; inset: 0; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
    opacity: .35;
    mix-blend-mode: overlay;
  }

  .v237-aurora-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
  }
  .v237-aurora-eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74,222,128,.6);
    animation: v237-pulse 1.8s infinite;
  }
  @keyframes v237-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
    70%  { box-shadow: 0 0 0 10px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  }

  .v237-aurora h1 {
    margin: 14px 0 6px;
    font-size: clamp(26px, 7.6vw, 34px);
    line-height: 1.08; letter-spacing: -.02em;
    font-weight: 800;
    text-shadow: 0 2px 24px rgba(0,0,0,.28);
  }
  .v237-aurora h1 .v237-grad {
    background: linear-gradient(95deg, #ffd06b 0%, #ff8db4 45%, #b09bff 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .v237-aurora .v237-aurora-sub {
    margin: 0 0 16px;
    font-size: 14.5px; line-height: 1.45;
    color: rgba(255,255,255,.86);
    max-width: 520px;
  }
  .v237-aurora-meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 12.5px; color: rgba(255,255,255,.78);
    margin-bottom: 4px;
  }
  .v237-aurora-meta strong { color: #fff; font-weight: 700; }

  .v237-mini-stats {
    display: flex; gap: 10px; margin-top: 18px;
  }
  .v237-mini-stat {
    flex: 1; padding: 10px 12px;
    border-radius: var(--v237-r-md);
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.18);
  }
  .v237-mini-stat strong {
    display: block; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.01em;
  }
  .v237-mini-stat span {
    display: block; font-size: 11px; color: rgba(255,255,255,.78);
    margin-top: 2px; letter-spacing: .02em;
  }

  /* ─────────── 2. QUICK LANES — grilă 2×3 ─────────── */
  .v237-section { margin: 22px 0 14px; }
  .v237-section-h {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0 4px 12px;
  }
  .v237-section-h h3 {
    margin: 0;
    font-size: 15.5px; font-weight: 800; color: var(--v237-ink);
    letter-spacing: -.01em;
  }
  .v237-section-h a {
    font-size: 12.5px; font-weight: 600; color: var(--v237-muted);
    text-decoration: none;
  }
  .v237-section-h a:hover { color: var(--v237-ink-2); }

  .v237-lanes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .v237-lane {
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 14px 16px;
    border-radius: var(--v237-r-lg);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    min-height: 96px;
    box-shadow: var(--v237-shadow-2);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
    border: 1px solid rgba(255,255,255,.08);
  }
  .v237-lane::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: var(--lg, linear-gradient(135deg, #1a56db, #6a3df0));
  }
  .v237-lane::before {
    content: "";
    position: absolute; top: -40%; right: -20%; width: 140%; height: 140%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(255,255,255,.32), transparent 70%);
    opacity: .55;
    pointer-events: none;
  }
  .v237-lane:active { transform: scale(.97); }
  .v237-lane:hover { box-shadow: 0 18px 40px -16px rgba(13,28,71,.45); }

  .v237-lane .v237-lane-ico {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 6px;
  }
  .v237-lane .v237-lane-ico svg { width: 20px; height: 20px; }
  .v237-lane .v237-lane-title {
    font-size: 14.5px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
  }
  .v237-lane .v237-lane-sub {
    font-size: 11.5px; opacity: .88; font-weight: 500; line-height: 1.3;
  }
  .v237-lane .v237-lane-arrow {
    position: absolute; top: 12px; right: 12px;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,.22);
    display: inline-flex; align-items: center; justify-content: center;
    opacity: .9;
  }
  .v237-lane .v237-lane-arrow svg { width: 12px; height: 12px; }

  /* Variante de culori — premium gradients */
  .v237-lane--sos     { --lg: linear-gradient(135deg, #ff5563 0%, #ff8a4c 100%); }
  .v237-lane--near    { --lg: linear-gradient(135deg, #1abce6 0%, #1a56db 100%); }
  
  .v237-lane--joburi  { --lg: linear-gradient(135deg, #16b48a 0%, #0d8f7a 100%); }
  .v237-lane--forum   { --lg: linear-gradient(135deg, #60a5fa 0%, #5b3df0 100%); }
  .v237-lane--docs    { --lg: linear-gradient(135deg, #4b5b7a 0%, #1f2c4d 100%); }

  /* ─────────── 3. LIVE COUNTRY STRIP ─────────── */
  .v237-strip {
    display: flex; gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 4px 16px 12px;
    scrollbar-width: none;
  }
  .v237-strip::-webkit-scrollbar { display: none; }
  .v237-flag-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px 9px 11px;
    border-radius: 999px;
    background: var(--bg-1, #fff);
    border: 1px solid var(--bd, #e6eaf2);
    box-shadow: var(--v237-shadow-1);
    font-size: 12.5px; font-weight: 600;
    color: var(--v237-ink);
    text-decoration: none;
    transition: transform .18s, box-shadow .18s;
  }
  .v237-flag-pill:hover { transform: translateY(-1px); box-shadow: var(--v237-shadow-2); }
  .v237-flag-pill .flag {
    font-size: 18px; line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
  }
  .v237-flag-pill .cnt {
    font-weight: 800;
    color: var(--v237-ink-2);
    font-variant-numeric: tabular-nums;
  }
  .v237-flag-pill .live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74,222,128,.18);
    margin-left: 2px;
  }
  [data-theme="dark"] .v237-flag-pill {
    background: var(--bg-1, #151c30);
    border-color: var(--bd, #243049);
  }

  /* ─────────── 4. FEATURED STORIES ─────────── */
  .v237-stories {
    display: flex; gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 4px 16px 14px;
    scrollbar-width: none;
  }
  .v237-stories::-webkit-scrollbar { display: none; }
  .v237-story {
    flex: 0 0 78%;
    max-width: 320px;
    scroll-snap-align: start;
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--v237-r-lg);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    box-shadow: var(--v237-shadow-2);
    isolation: isolate;
    background: #1a2750;
    transition: transform .22s;
  }
  .v237-story:active { transform: scale(.98); }
  .v237-story::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.78) 100%);
  }
  .v237-story-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    transition: transform 6s ease-out;
  }
  .v237-story:hover .v237-story-bg { transform: scale(1.06); }
  .v237-story-content {
    position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  }
  .v237-story-tag {
    display: inline-block;
    font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    background: rgba(255,255,255,.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 10px; border-radius: 999px;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,.32);
  }
  .v237-story-title {
    font-size: 15.5px; font-weight: 800; line-height: 1.25;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
    margin: 0 0 4px;
  }
  .v237-story-meta {
    font-size: 11.5px; opacity: .9;
  }

  /* gradient fallback dacă nu avem imagine */
  .v237-story[data-fallback="1"] .v237-story-bg {
    background:
      radial-gradient(60% 60% at 30% 20%, rgba(255,189,89,.55), transparent 70%),
      radial-gradient(70% 70% at 80% 100%, rgba(150,99,255,.65), transparent 70%),
      linear-gradient(135deg, #1a56db, #5b3df0);
  }
  .v237-story[data-fallback="2"] .v237-story-bg {
    background:
      radial-gradient(60% 60% at 70% 20%, rgba(74,222,128,.55), transparent 70%),
      radial-gradient(70% 70% at 30% 100%, rgba(26,188,230,.65), transparent 70%),
      linear-gradient(135deg, #0d8f7a, #1abce6);
  }
  .v237-story[data-fallback="3"] .v237-story-bg {
    background:
      radial-gradient(60% 60% at 30% 30%, rgba(255,141,180,.55), transparent 70%),
      radial-gradient(70% 70% at 80% 90%, rgba(255,85,99,.55), transparent 70%),
      linear-gradient(135deg, #ff5563, #ff8a4c);
  }
  .v237-story[data-fallback="4"] .v237-story-bg {
    background:
      radial-gradient(60% 60% at 50% 30%, rgba(255,189,89,.55), transparent 70%),
      radial-gradient(70% 70% at 80% 100%, rgba(26,86,219,.7), transparent 70%),
      linear-gradient(135deg, #1a56db, #1a56db);
  }

  /* ─────────── 5. STATS COUNTER BAND ─────────── */
  .v237-counters {
    margin: 18px -16px;
    padding: 22px 16px;
    background:
      linear-gradient(180deg, transparent, rgba(26,86,219,.04) 100%),
      var(--bg-1, #fff);
    border-top: 1px solid var(--bd, #e6eaf2);
    border-bottom: 1px solid var(--bd, #e6eaf2);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  [data-theme="dark"] .v237-counters {
    background:
      linear-gradient(180deg, transparent, rgba(150,180,255,.05) 100%),
      var(--bg-1, #151c30);
    border-color: var(--bd, #243049);
  }
  .v237-counter {
    text-align: center;
    padding: 6px 4px;
  }
  .v237-counter strong {
    display: block;
    font-size: clamp(22px, 6.5vw, 28px);
    font-weight: 800;
    background: linear-gradient(135deg, #1a56db, #5b3df0 60%, #ff5563);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .v237-counter span {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--v237-muted);
    font-weight: 600;
    letter-spacing: .02em;
  }

  /* ─────────── 6. SEMNĂTURĂ FOOTER ─────────── */
  .v237-signature {
    margin: 22px 0 8px;
    text-align: center;
    font-size: 12px; color: var(--v237-muted);
    font-weight: 500;
    letter-spacing: .01em;
  }
  .v237-signature .heart {
    display: inline-block;
    color: #ff5563;
    margin: 0 2px;
    animation: v237-beat 1.6s ease-in-out infinite;
  }
  @keyframes v237-beat {
    0%, 100% { transform: scale(1); }
    20%      { transform: scale(1.18); }
    40%      { transform: scale(.96); }
    60%      { transform: scale(1.1); }
  }

  /* ─────────── Reveal pe scroll ─────────── */
  .v237-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  }
  .v237-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }
  .v237-reveal[data-d="1"] { transition-delay: .05s; }
  .v237-reveal[data-d="2"] { transition-delay: .12s; }
  .v237-reveal[data-d="3"] { transition-delay: .18s; }
  .v237-reveal[data-d="4"] { transition-delay: .24s; }

  /* ─────────── Reduce motion respectă utilizatorul ─────────── */
  @media (prefers-reduced-motion: reduce) {
    .v237-aurora::before,
    .v237-aurora::after,
    .v237-aurora .v237-aurora-blob,
    .v237-aurora-eyebrow .dot,
    .v237-signature .heart { animation: none; }
    .v237-reveal { opacity: 1; transform: none; transition: none; }
  }

  /* În Mod Bunici (text mărit) — tipografia se scalează automat,
     dar dăm un boost subtil la heading */
  
  
  

}

/* Dispare clean pe ecrane mari (peste 900px nu e nevoie de gala) */
@media (min-width: 901px) {
  .v237-gala { display: none; }
}


/* ============================================================
   HUB v239 — „Chat secret" card prominent, în locul oricărui
   tile/banner de „Chat global". ADD-only.
   ============================================================ */

/* Ascunde orice card vechi „Chat global" injectat de scripturi anterioare */
.v237-lane[href*="/chat-pro"],
.v236-lane[href*="/chat-pro"],
.hub-chat-global-card,
[data-chat-global-card] {
  display: none;
}

/* Cardul „Chat secret" — premium, intens, imposibil de ignorat */
.v239-secret-card {
  position: relative;
  display: block;
  margin: 14px 12px 18px;
  padding: 22px 22px 24px;
  border-radius: 22px;
  text-decoration: none;
  color: #fff;
  background:
    radial-gradient(1100px 280px at -10% -40%, rgba(91,61,240,.55) 0%, transparent 60%),
    radial-gradient(900px 240px at 110% 130%, rgba(11,52,168,.55) 0%, transparent 60%),
    linear-gradient(135deg, #0a2a6b 0%, #1e1b6b 45%, #5b3df0 100%);
  box-shadow: 0 18px 48px -18px rgba(10,42,107,.55), inset 0 1px 0 rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.v239-secret-card::before {
  content: '';
  position: absolute; inset: -2px;
  background: conic-gradient(from 180deg at 50% 50%,
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,.18) 80deg,
    rgba(255,255,255,0) 160deg,
    rgba(255,255,255,.10) 240deg,
    rgba(255,255,255,0) 360deg);
  filter: blur(18px);
  opacity: .55;
  z-index: -1;
  animation: v239-aurora 12s linear infinite;
}
@keyframes v239-aurora { to { transform: rotate(360deg); } }

.v239-secret-row {
  display: flex; align-items: center; gap: 14px;
}
.v239-secret-ico {
  flex: 0 0 56px;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 30px; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.v239-secret-text { flex: 1 1 auto; min-width: 0; }
.v239-secret-title {
  font-size: 18px; font-weight: 800; letter-spacing: .2px;
  margin: 0 0 2px; color: #fff;
}
.v239-secret-sub {
  font-size: 13px; line-height: 1.4;
  margin: 0; color: rgba(255,255,255,.86);
}
.v239-secret-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  padding: 11px 18px;
  background: #fff; color: #0a2a6b;
  border-radius: 999px;
  font-weight: 800; font-size: 14.5px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.v239-secret-cta:active { transform: scale(.97); }
.v239-secret-foot {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: rgba(255,255,255,.7);
  letter-spacing: .2px;
}
.v239-secret-badges {
  display: inline-flex; gap: 6px; margin-top: 10px;
  flex-wrap: wrap;
}
.v239-secret-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; font-size: 11px; font-weight: 700;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}


/* ============================================================
   diaspora.ro — HUB v240 (2026-04-27)
   PATCH peste v237: stil pentru tile-ul "Toate serviciile"
   (înlocuieste vizual SOS în quick lanes — mov / azur premium).
   ============================================================ */

/* tile "Toate serviciile" — gradient mov→azur, distinct de celelalte */
.v237-lane.v237-lane--all,
.v237-lane.v240-lane-all {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 60%, #0ea5e9 100%);
  color: #fff;
}
[data-theme="dark"] .v237-lane.v237-lane--all,
[data-theme="dark"] .v237-lane.v240-lane-all {
  background: linear-gradient(135deg, #5b21b6 0%, #1e40af 60%, #0369a1 100%);
}

.v237-lane--all .v237-lane-ico svg,
.v240-lane-all .v237-lane-ico svg { stroke: #fff; }

.v237-lane--all .v237-lane-title,
.v240-lane-all .v237-lane-title { color: #fff; }

.v237-lane--all .v237-lane-sub,
.v240-lane-all .v237-lane-sub { color: rgba(255,255,255,.85); }

.v237-lane--all .v237-lane-arrow,
.v240-lane-all .v237-lane-arrow { color: rgba(255,255,255,.7); }

/* mini-stat refresh (opțional — unitatea € sa nu rupa randul pe ecrane mici) */
.v237-mini-stat.v240-mini-stat strong {
  white-space: nowrap;
  letter-spacing: -0.01em;
}
@media (max-width: 360px) {
  .v237-mini-stat.v240-mini-stat strong { font-size: 1.05em; }
}


/* ============================================================================
     HUB EXTRAS v256 r2 — patch peste v240 (corectat)
     ============================================================================ */

  /* (1) — STERGE cardurile mobile cerute */
  .v237-lane--sos,.v237-lane--near,
  .v237-lane--joburi,.v237-lane--forum,.v237-lane--docs{display:none}
  .v237-lanes:has(> :only-child),
  .v237-lanes:not(:has(> a:not([style*="display:none"]))){display:none}

  /* (2) — Card "Bun venit" CENTRAT */
  .v256-bunvenit{
    margin:12px 0 16px; padding:22px 20px; border-radius:18px;
    background:linear-gradient(135deg,#1d4ed8 0%,#3b82f6 50%,#1a56db 100%);
    color:#fff; box-shadow:0 10px 28px rgba(29,78,216,.32);
    position:relative; overflow:hidden;
    text-align:center;
  }
  .v256-bunvenit::before{
    content:""; position:absolute; right:-30px; top:-30px;
    width:160px; height:160px; border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);
    pointer-events:none;
  }
  .v256-bunvenit .eyebrow{
    display:inline-block; font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; font-weight:800;
    background:rgba(255,255,255,.18); padding:4px 10px; border-radius:999px;
  }
  .v256-bunvenit h2{
    margin:12px 0 8px; font-size:22px; line-height:1.25; font-weight:800;
    text-align:center;
  }
  .v256-bunvenit p{
    margin:0 auto; font-size:14px; opacity:.95; line-height:1.5;
    max-width:380px; text-align:center;
  }
  .v256-bunvenit .ctas{
    display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;
    justify-content:center;
  }
  .v256-bunvenit .ctas a{
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 16px; border-radius:10px; font-size:13px; font-weight:700;
    text-decoration:none;
    background:rgba(255,255,255,.95); color:#1d4ed8;
  }
  .v256-bunvenit .ctas a.ghost{background:rgba(255,255,255,.14); color:#fff}

  /* v257 — DEFENSIV: ascunde butonul mega în caz că alt cod îl injectează (dezactivat în JS). */
  #v256-mega-btn, .v256-mega-btn{display:none}

  /* v257 — bunvenit nou (rând orizontal cu Cont nou / țară / Conectare).
     Toate stilurile centrate de mai jos sunt suprascrise în CSS-ul din index.html
     prin selectorul .v256-bunvenit.v257-row . Aici doar lăsăm fallback-urile vechi
     pentru cazul în care .v257-row lipsește. */

  /* (3) — Mega buton "Toate optiunile diaspora.ro" sub carduri */
  .v256-mega-btn--legacy{
    margin:18px 0 6px; display:flex; align-items:center; justify-content:space-between;
    gap:14px; padding:16px 20px; border-radius:16px;
    background:linear-gradient(135deg,#0f172a,#1e293b);
    color:#fff; text-decoration:none; font-weight:800;
    box-shadow:0 8px 22px rgba(15,23,42,.35);
    border:1px solid rgba(255,255,255,.08);
  }
  .v256-mega-btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,23,42,.45)}
  .v256-mega-btn .label{font-size:15px; line-height:1.2}
  .v256-mega-btn .sub{display:block; font-size:12px; font-weight:600; opacity:.65; margin-top:2px}
  .v256-mega-btn .arr{
    width:36px; height:36px; border-radius:999px;
    background:linear-gradient(135deg,#1d4ed8,#1a56db);
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .v256-mega-btn .arr svg{width:18px; height:18px; color:#fff}
  .hub-cards-sub{display:none}

  /* (4) — Autoplay translate la stories */
  @keyframes v256-stories-roll{
    0%{transform:translateX(0)}
    100%{transform:translateX(calc(-100% + 100vw - 36px))}
  }
  .v237-stories.v256-autoplay{
    animation:v256-stories-roll 28s linear infinite alternate;
    will-change:transform;
  }
  .v237-stories.v256-autoplay:hover,
  .v237-stories.v256-autoplay:active{animation-play-state:paused}

  /* (5) — Ascunde "Povestea ta" */
  .v256-hide-povestea{display:none}
  @keyframes v256-pulse{0%{transform:scale(.9); opacity:1}100%{transform:scale(1.5); opacity:0}}

  /* ASCUNDE FAB-ul vechi pill #mm-fab — pastram doar al meu */
  #mm-fab{
    position:absolute; left:-99999px; top:-99999px;
    width:1px; height:1px; opacity:0;
    pointer-events:auto; z-index:-1;
    visibility:visible; display:block;
  }

  /* (7) — Posts FB-style FULL-WIDTH lipite (mobile) */
  @media (max-width:760px){
    .feed,.posts,.post-list,.vv-list,.vv-feed,.hub-feed,
    [class*="post-list"],[class*="post-feed"],[class*="feed-list"]{
      padding-left:0; padding-right:0;
      margin-left:0; margin-right:0;
    }
    .vv-card,.post-card,[class*="post-card"],[data-post],article.post,
    .v256-post,.hub-post{
      margin:0 0 6px 0;
      border-radius:0;
      border-left:0; border-right:0;
      width:100%; max-width:100%;
      box-shadow:none;
    }
    /* lipite consecutive: anuleaza border-bottom de pe ultimul si border-top de pe urmator */
    .vv-card + .vv-card,
    .post-card + .post-card,
    [data-post] + [data-post]{
      margin-top:-1px;
    }
  }
  .v256-post{
    background:var(--card,#fff);
    border-top:1px solid var(--card-line,#e6ebf2);
    border-bottom:1px solid var(--card-line,#e6ebf2);
    padding:12px 14px 8px;
  }
  .v256-post-h{display:flex; align-items:center; gap:10px; margin-bottom:8px}
  .v256-post-av{
    width:42px; height:42px; border-radius:50%;
    background:#e2e8f0; flex-shrink:0;
    background-size:cover; background-position:center;
  }
  .v256-post-meta strong{display:block; font-size:14px; font-weight:700; color:var(--ink,#0f172a)}
  .v256-post-meta small{display:block; font-size:12px; color:var(--muted,#64748b)}
  .v256-post-body{font-size:15px; line-height:1.5; color:var(--ink,#0f172a); margin:6px 0 10px}
  .v256-post-img{margin:0 -14px}
  .v256-post-img img{width:100%; display:block; max-height:480px; object-fit:cover}
  .v256-post-acts{
    display:flex; gap:0; padding-top:8px; margin-top:6px;
    border-top:1px solid var(--card-line,#e6ebf2);
  }
  .v256-post-acts button{
    flex:1; background:transparent; border:0; padding:10px 6px;
    font-size:13px; font-weight:600; color:var(--muted,#64748b);
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    cursor:pointer; border-radius:8px;
  }
  .v256-post-acts button:hover{background:var(--bg-2,#f1f5f9); color:var(--ink,#0f172a)}
  .v256-post-acts svg{width:18px; height:18px}

  /* (8) — TOPBAR DROPDOWN COMPACT + ACCORDION single-open */
  /* override #tbMenu vechi: facem MULT mai compact + scrollabil */
  #tbMenu{
    min-width:240px;
    max-width:80vw;
    max-height:75vh;
    overflow-y:auto;
    padding:4px;
    border-radius:12px;
  }
  #tbMenu hr{display:none}
  /* itemii TOP existenti (cei vechi): compactam padding */
  #tbMenu > a, #tbMenu > button{
    padding:7px 10px;
    font-size:13.5px;
    font-weight:600;
    border-radius:7px;
  }
  #tbMenu > a svg, #tbMenu > button svg{
    width:15px; height:15px;
  }
  /* Ascunde itemii vechi pe care ii inlocuim cu accordion-ul nostru */
  #tbMenu .v256-old-hide{display:none}

  /* Accordion sectiuni v256 */
  #tbMenu .v256-acc{
    margin:2px 0; border-radius:7px; overflow:hidden;
    background:transparent;
  }
  #tbMenu .v256-acc-h{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:8px 10px; background:transparent; border:0;
    color:var(--ink,#0f172a); font-size:13.5px; font-weight:700;
    cursor:pointer; border-radius:7px; gap:8px;
    text-align:left;
  }
  #tbMenu .v256-acc-h:hover{background:var(--bg-2,#f1f5f9)}
  #tbMenu .v256-acc-h .chev{
    width:14px; height:14px; transition:transform .2s;
    flex-shrink:0; opacity:.6;
  }
  #tbMenu .v256-acc[aria-expanded="true"] .v256-acc-h{
    background:var(--bg-2,#f1f5f9);
  }
  #tbMenu .v256-acc[aria-expanded="true"] .v256-acc-h .chev{
    transform:rotate(180deg);
  }
  #tbMenu .v256-acc-body{
    display:none; padding:2px 0 4px 0;
  }
  #tbMenu .v256-acc[aria-expanded="true"] .v256-acc-body{display:block}
  #tbMenu .v256-acc-body a{
    display:block; padding:6px 10px 6px 28px;
    font-size:13px; font-weight:500; color:var(--ink,#0f172a);
    text-decoration:none; border-radius:6px;
  }
  #tbMenu .v256-acc-body a:hover{background:var(--bg-2,#f1f5f9)}

  /* (9) — Topbar chat icon dupa lupa (#v256-tb-chat) — pastram */
  #v256-tb-chat{
    background:transparent; border:0; padding:6px;
    color:inherit; cursor:pointer;
    display:inline-flex; align-items:center; margin-left:2px;
  }
  #v256-tb-chat svg{width:20px; height:20px}
  

/* ============================================================================
   HUB EXTRAS v258 — patch peste v256 (cerințe lista a 7 puncte)
   Încărcat DUPĂ v256.css.
   1. Salutul auto-hide după 60s de la conectare
   2. Country dropdown mutat în meniul stânga, .dccc-pop fixed (nu mai e tăiat)
   3. Buton "+" → Postare nouă + Melissa AI (Live/Forum eliminate din HTML)
   4. Iconița chat în topbar deja există (#v256-tb-chat) — aici doar ascundem
      cardul Chat E2E vechi (#v239-secret-card) de pe pagina de start
   5. Iconiță Share lângă chat (#v258-tb-share) → URL profil utilizator
   6. Ascunde Conectare / Cont nou peste tot când userul e logat
   7. Colțuri rotunjite la spațiul de sub cardul "Români în diaspora cu acte"
   ============================================================================ */

/* (4) — ASCUNDE cardul prominent "Chat E2E" de pe pagina de start
   Iconița din header (#v256-tb-chat) îi ține locul. */
#v239-secret-card,
.v239-secret-card{
  display:none;
}

/* (5) — Iconiță Share în topbar, lângă chat */
#v258-tb-share{
  background:transparent; border:0; padding:6px;
  color:inherit; cursor:pointer;
  display:none;             /* ascunsă până e logat */
  align-items:center; margin-left:2px;
  border-radius:8px;
}
#v258-tb-share:hover{ background:var(--bg-2,#f1f5f9); }
#v258-tb-share svg{ width:20px; height:20px; }
body.v258-logged #v258-tb-share{ display:inline-flex; }

/* Toast confirmare la copierea linkului profil */
#v258-toast{
  position:fixed; left:50%; bottom:90px; transform:translate(-50%,12px);
  background:#0f172a; color:#fff; font:600 13px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  padding:10px 14px; border-radius:10px; z-index:99999;
  box-shadow:0 12px 32px rgba(15,23,42,.35);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  max-width:88vw; text-align:center;
}
#v258-toast.show{ opacity:1; transform:translate(-50%,0); }

/* (6) — Ascunde Conectare / Cont nou PESTE TOT când e logat */
body.v258-logged #lnkLogin,
body.v258-logged #lnkRegister,
body.v258-logged .v257-cta,
body.v258-logged a[href="/conectare"].v257-cta,
body.v258-logged a[href="/inregistrare"].v257-cta,
body.v258-logged .v256-bunvenit .v257-cta{
  display:none;
}
/* iar slot-ul de țară devine 100% lățime */
body.v258-logged .v256-bunvenit.v257-row #v257-country-slot{
  flex:1 1 100%; justify-content:center;
}

/* (1) — Salutul (.v259-greet) auto-hide cu fade după 60s */
.v259-greet.v258-fade-out{
  opacity:0;
  max-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  transition:opacity .45s ease, max-height .45s ease, margin .45s ease, padding .45s ease;
}

/* (2) — Country chip în interiorul meniului #tbMenu și .dccc-pop FIXED
   ca să nu mai fie tăiat de containere cu overflow:hidden */
#tbMenu #v258-country-host{
  margin:6px 4px 8px;
  padding:8px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(29,78,216,.06),rgba(26,86,219,.06));
  border:1px solid rgba(148,163,184,.18);
}
#tbMenu #v258-country-host .v258-country-h{
  display:block;
  font:700 11px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted,#64748b);
  margin:2px 4px 6px;
}
#tbMenu #v258-country-host #dia-country-wrap{
  margin:0; padding:0;
  display:flex; justify-content:center;
}
#tbMenu #v258-country-host .dccc{
  width:100%;
  justify-content:center;
}
/* Forțăm dropdown-ul .dccc-pop să fie POSITION FIXED ca să apară peste tot,
   indiferent de overflow:hidden al părintelui. JS îl repoziționează la deschidere. */
.dccc-pop.v258-fixed{
  position:fixed;
  top:auto;
  left:auto;
  transform:none;
  margin:0;
  z-index:100000;
}

/* (7) — Colțuri rotunjite în zona de sub "Români în diaspora cu acte" */
.v237-mini-stats{
  border-radius:14px;
  overflow:visible;
}
.v237-mini-stat,
.v237-mini-stat.v240-mini-stat{
  border-radius:14px;
  overflow:hidden;
}
.v237-aurora{
  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;
  overflow:hidden;
}
/* spațiul gol dintre hero-ul aurora și conținutul de sub el primește
   un "ecran" cu colțuri rotunjite în partea de sus */
.v237-aurora + *{
  border-top-left-radius:14px;
  border-top-right-radius:14px;
}
/* Și containerul .v237-gala (mobile hero wrapper) rotunjit la bază */
.v237-gala{
  border-radius:18px;
  overflow:hidden;
}


/* ============================================================
   Diaspora.ro — Hub Extras v259 (carduri full-HD + accordion)
   ============================================================
   1. Ascunde cardul "Chat E2E" vechi din feed (mutat in topbar)
   2. Inlocuieste sectiunea "hub-cards" cu 4 CARDURI mari 2x2
      (Chat / Forum / Melissa / Învață Română) cu IMAGINI FULL HD background
   3. Restul categoriilor → accordion (titlu clickabil deschide dropdown)
   ============================================================ */

/* ── 1. ASCUNDE cardul Chat E2E vechi din feed ────────────────── */
.hub-card.c-chat-e2e,
.hub-card[data-card="chat-e2e"],
[data-card-id="chat-e2e"],
a.hub-card[href*="chat-e2e"],
a[href="/chat-e2e/"].hub-card {
  display: none;
}

/* ── 2. Containerul nou pentru cele 4 carduri mari "hero" ─────── */
.dx-hero-wrap{
  margin: 8px 0 18px;
  padding: 0 4px;
}
.dx-hero-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 12px;
}
@media (max-width: 380px){
  .dx-hero-grid{ gap: 8px; }
}

.dx-hero-card{
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #0a2a6b;
  box-shadow:
    0 6px 20px rgba(15, 23, 42, .14),
    0 2px 6px rgba(15, 23, 42, .08);
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s cubic-bezier(.4,0,.2,1);
  isolation: isolate;
}
.dx-hero-card:hover,
.dx-hero-card:active{
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 14px 36px rgba(24, 119, 242, .26),
    0 4px 10px rgba(15, 23, 42, .12);
}

/* Imagine full-HD background */
.dx-hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* claritate fotografica - SMOOTH, nu pixelat */
  image-rendering: auto;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .25s;
  filter: saturate(1.05) contrast(1.02);
}
.dx-hero-card:hover .dx-hero-bg{
  transform: scale(1.06);
  filter: saturate(1.15) contrast(1.04) brightness(1.03);
}

/* Overlay gradient pentru contrast text (modern UI dark bottom) */
.dx-hero-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, .82) 0%,
      rgba(0, 0, 0, .45) 35%,
      rgba(0, 0, 0, .15) 65%,
      rgba(0, 0, 0, .05) 100%
    );
  pointer-events: none;
}

/* Continut text peste imagine */
.dx-hero-content{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 14px 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dx-hero-icon{
  width: 36px; height: 36px;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .28);
}
.dx-hero-icon svg{
  width: 20px; height: 20px;
  stroke: #fff;
  stroke-width: 2;
  fill: none;
}
.dx-hero-title{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  letter-spacing: -.01em;
}
.dx-hero-sub{
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 560px){
  .dx-hero-title{ font-size: 22px; }
  .dx-hero-sub{ font-size: 13.5px; }
  .dx-hero-icon{ width: 42px; height: 42px; }
  .dx-hero-icon svg{ width: 24px; height: 24px; }
}
@media (max-width: 360px){
  .dx-hero-title{ font-size: 16px; }
  .dx-hero-sub{ font-size: 11.5px; }
  .dx-hero-content{ padding: 10px 10px 10px; }
}

/* Tinte color brand pentru icon-bubble pe fiecare card */
.dx-hero-card.dx-chat    .dx-hero-icon{ background: rgba(24, 119, 242, .35); border-color: rgba(255,255,255,.42); }
.dx-hero-card.dx-forum   .dx-hero-icon{ background: rgba(126, 34, 206, .35); }
.dx-hero-card.dx-melissa .dx-hero-icon{ background: rgba(236, 72, 153, .35); }
.dx-hero-card.dx-invata  .dx-hero-icon{ background: rgba(34, 197, 94, .35); }

/* ── 3. Accordion: categorii cu titlu clickabil ───────────────── */
.dx-acc-wrap{
  margin: 14px 0;
  padding: 0 4px;
}
.dx-acc{
  background: #fff;
  border: 1px solid #DADDE1;
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow .15s;
}
.dx-acc:hover{ box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.dx-acc-head{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  background: transparent;
  border: 0; width: 100%;
  text-align: left;
  font: inherit;
  color: #050505;
  user-select: none;
}
.dx-acc-head:hover{ background: #F2F3F5; }
.dx-acc-head .dx-acc-ico{
  width: 36px; height: 36px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(26,86,219,.12), rgba(26,86,219,.04));
  color: #1a56db;
  flex-shrink: 0;
}
.dx-acc-head .dx-acc-ico svg{ width: 20px; height: 20px; }
.dx-acc-head .dx-acc-title{
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
}
.dx-acc-head .dx-acc-chev{
  width: 24px; height: 24px;
  color: #65676B;
  transition: transform .25s ease;
}
.dx-acc.open .dx-acc-head .dx-acc-chev{
  transform: rotate(180deg);
}
.dx-acc-body{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
  border-top: 0 solid transparent;
}
.dx-acc.open .dx-acc-body{
  max-height: 1500px;
  border-top: 1px solid #E4E6EB;
}
.dx-acc-body-inner{
  padding: 6px 8px 10px;
}
.dx-acc-body a{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 9px;
  color: #050505;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  transition: background .12s;
}
.dx-acc-body a:hover, .dx-acc-body a:active{
  background: #F0F2F5;
}
.dx-acc-body a svg{
  width: 20px; height: 20px;
  color: #1a56db;
  flex-shrink: 0;
}
.dx-acc-body a span{ flex: 1; }

/* Dark mode */
html[data-theme="dark"] .dx-acc{
  background: #242526;
  border-color: #393A3B;
}
html[data-theme="dark"] .dx-acc-head{ color: #E4E6EB; }
html[data-theme="dark"] .dx-acc-head:hover{ background: #3A3B3C; }
html[data-theme="dark"] .dx-acc.open .dx-acc-body{ border-top-color: #393A3B; }
html[data-theme="dark"] .dx-acc-body a{ color: #E4E6EB; }
html[data-theme="dark"] .dx-acc-body a:hover{ background: #3A3B3C; }
html[data-theme="dark"] .dx-acc-head .dx-acc-ico{
  background: linear-gradient(135deg, rgba(78,160,255,.18), rgba(78,160,255,.04));
  color: #4ea0ff;
}
html[data-theme="dark"] .dx-acc-body a svg{ color: #4ea0ff; }
html[data-theme="dark"] .dx-acc-head .dx-acc-chev{ color: #B0B3B8; }

/* Header section deasupra cardurilor (titlu) */
.dx-section-h{
  display: flex; align-items: center; gap: 10px;
  margin: 8px 8px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #65676B;
  text-transform: uppercase;
}
.dx-section-h::before, .dx-section-h::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #DADDE1, transparent);
}
html[data-theme="dark"] .dx-section-h{ color: #B0B3B8; }
html[data-theme="dark"] .dx-section-h::before,
html[data-theme="dark"] .dx-section-h::after{
  background: linear-gradient(90deg, transparent, #393A3B, transparent);
}

/* Ascunde cardul de chat E2E vechi din variantele de feed v240/v254/v258 */
[data-feature="chat-e2e-card"],
.feed-card-chat-e2e,
.hub-cards-grid > a[href*="chat-e2e"],
.composer-extras a[href*="chat-e2e"]{
  display: none;
}


/* ================================================================
   diaspora.ro HUB v284 — DESKTOP LAYOUT REDESIGN
   Layout trei-coloane (sidebar stâng + feed + panel drept)
   Breakpoints: 900px (sidebar), 1160px (right panel), 1400px (wide)
   ================================================================ */

:root{
  --dsk-sb: 240px;
  --dsk-rp: 296px;
}

/* ══════════════════════════════════════════════════════════════
   900px+ — SIDEBAR STÂNG + FEED CENTRAT
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  /* ── Body — eliminăm padding-ul sub-bar orizontal ── */
  body{
    padding-top: var(--hdr-h);
    padding-left: var(--dsk-sb);
    padding-bottom: 24px;
  }

  /* ── Header top-bar desktop ── */
  header.tb{
    padding: 0 20px 0 calc(var(--dsk-sb) + 16px);
    gap: 8px;
  }
  header.tb .tb-search{
    max-width: 400px;
    flex-shrink: 1;
  }
  header.tb .tb-ham{ display:none; }

  /* ═══════════════════════════════════════════════════
     SUB-BAR → SIDEBAR VERTICAL STÂNG
     ═══════════════════════════════════════════════════ */
  nav.sb{
    top: var(--hdr-h);
    left: 0;
    right: auto;
    bottom: 0;
    width: var(--dsk-sb);
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 10px 10px 16px;
    gap: 3px;
    border-right: 1px solid var(--line);
    border-bottom: none;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }
  nav.sb::-webkit-scrollbar{ display:none }

  /* Tab-uri → elemente verticale */
  .sb-tab{
    flex: none;
    width: 100%;
    justify-content: flex-start;
    height: 48px;
    min-height: 48px;
    max-width: none;
    border-radius: 12px;
    padding: 0 16px;
    gap: 13px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: none;
    background: transparent;
    text-align: left;
    color: var(--muted);
    transition: background .15s, color .15s;
  }
  .sb-tab .lab{
    display: inline;
    font-size: 15px;
    font-weight: 600;
  }
  .sb-tab svg{
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    stroke-width: 1.9;
  }
  .sb-tab.active{
    background: rgba(26,86,219,.08);
    color: #1a56db;
    border-bottom: none;
    border-left: 3px solid #1a56db;
    padding-left: 13px;
    font-weight: 700;
  }
  [data-theme="light"] .sb-tab.active{
    background: rgba(122,163,255,.10);
    color: #3b82f6;
    border-left-color: #3b82f6;
  }
  .sb-tab:hover:not(.active){
    background: var(--bg-2);
    color: var(--ink);
  }
  .sb-tab.active svg{
    filter: none;
    transform: none;
    stroke-width: 2.2;
  }
  /* Pill (badge) notificări → dreapta în sidebar */
  .sb-tab .pill{
    position: static;
    right: auto;
    top: auto;
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    font-size: 11px;
  }

  /* ── Buton "Creează" în sidebar (injectat de JS) ── */
  #dsk-create-btn{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 48px;
    border-radius: 12px;
    padding: 0 16px;
    background: var(--hub-grad);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border: 0;
    margin-bottom: 10px;
    cursor: pointer;
    transition: opacity .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 4px 16px rgba(59,130,246,.35);
    flex-shrink: 0;
    letter-spacing: .01em;
  }
  #dsk-create-btn:hover{
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(59,130,246,.45);
  }
  #dsk-create-btn svg{ width:20px; height:20px; flex-shrink:0; }

  /* Separator vizual în sidebar */
  .dsk-sb-sep{
    height: 1px;
    background: var(--line);
    margin: 10px 4px;
    display: block;
    flex-shrink: 0;
  }



  /* ═══════════════════════════════════════════════════
     FEED / STAGE
     ═══════════════════════════════════════════════════ */
  .stage{
    max-width: 660px;
    margin: 0 auto;
    padding: 20px 20px 60px;
  }
  .stage:has(#view-anunturi.show){
    max-width: none;
    padding: 0;
    margin: 0;
  }

  /* ── Composer inline ── */
  .composer-inline{
    padding: 14px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1.5px solid var(--card-line);
  }
  .composer-inline .av{
    width: 44px; height: 44px;
    font-size: 16px;
  }
  .composer-inline .ph{
    font-size: 15.5px;
    padding: 13px 20px;
    border-radius: 28px;
  }
  .composer-inline .quick button:nth-child(n+2){
    display: inline-flex;
  }

  /* ── POST CARD — redesign desktop ── */
  .post{
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--card-line);
    box-shadow: 0 1px 4px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.03);
    transition: box-shadow .22s ease, transform .22s ease;
    overflow: hidden;
  }
  .post:hover{
    box-shadow: 0 6px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.04);
    transform: translateY(-2px);
  }
  /* Anulăm full-bleed-ul de pe mobile */
  .post{
    border-radius: 20px;
    margin-left: 0;
    margin-right: 0;
    border-left: 1px solid var(--card-line);
    border-right: 1px solid var(--card-line);
  }
  .post-h{ padding: 16px 18px 10px; }
  .post-h .av{
    width: 44px; height: 44px;
  }
  .post-h .name{ font-size: 15px; font-weight: 700; }
  .post-h .meta{ font-size: 12.5px; }
  .post-body{ padding: 4px 18px 14px; }
  .post-text{
    font-size: 15.5px;
    line-height: 1.65;
    letter-spacing: -.005em;
  }
  .post-media{
    max-height: 500px;
    margin: 0;
  }
  .post-media img,.post-media video{
    max-height: 500px;
    object-fit: cover;
  }

  /* Action bar posturi */
  .post-actions{
    padding: 0;
  }
  .pa-btn{
    font-size: 14px;
    padding: 12px 8px;
    gap: 8px;
  }
  .pa-btn svg{
    width: 20px; height: 20px;
  }
  .pa-btn .pa-label{ font-size: 13.5px; }

  /* ── FEED TABS — underline style pe desktop ── */
  .feed-tabs{
    border-radius: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 0;
    gap: 0;
    margin-bottom: 20px;
    box-shadow: none;
  }
  .feed-tab{
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-size: 14.5px;
    font-weight: 600;
    padding: 14px 20px;
    border-bottom: 3px solid transparent;
    transition: all .15s;
    flex: none;
  }
  .feed-tab.active{
    background: transparent;
    color: var(--brand);
    border-bottom-color: var(--brand);
    box-shadow: none;
  }
  .feed-tab:not(.active):hover{
    background: var(--bg-2);
    color: var(--ink);
    border-radius: 0;
  }
  /* Material Design override pe light */
  :root:not([data-theme="light"]) .feed-tab,
  [data-theme="dark"] .feed-tab{
    border-bottom: 3px solid transparent;
    background: transparent;
    border-radius: 0;
    padding: 14px 20px;
    font-size: 14.5px;
  }
  :root:not([data-theme="light"]) .feed-tab.active,
  [data-theme="dark"] .feed-tab.active{
    border-bottom-color: var(--brand);
    color: var(--brand);
    background: transparent;
  }

  /* ── STORIES — mai mari pe desktop ── */
  .stories{
    gap: 16px;
    padding: 12px 0 18px;
  }
  .story-ring{
    width: 72px;
    height: 72px;
  }
  .story-av{
    width: 66px;
    height: 66px;
  }
  .story-name{
    font-size: 12px;
    max-width: 76px;
  }

  /* ── Hub search top ── */
  .hub-search-top{
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 20px;
  }
  .hub-search-top input{ font-size: 15px; }

  /* ── Modal pe desktop — centrat, nu bottom sheet ── */
  .modal-back{ align-items: center; }
  .modal{
    border-radius: 20px;
    max-height: 85vh;
    max-width: 580px;
  }

  /* ── Hub cards grid — mai larg pe desktop ── */
  .hub-cards-grid{
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
  }
  .hub-card{
    padding: 16px 14px;
    border-radius: 16px;
  }
  .hub-card h4{ font-size: 14px; }
  .hub-card p{ font-size: 12px; }

  /* ── Hero cards grid ── */
  .dx-hero-grid{
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
  }
  .dx-hero-card{ aspect-ratio: 3/4; }
  .dx-hero-title{ font-size: 15px; }
  .dx-hero-sub{ font-size: 11.5px; }
  .dx-hero-content{ padding: 12px; }

  /* ── Profile view — mai larg pe desktop ── */
  .profile-cover{ height: 180px; }
  .profile-avatar{ width: 110px; height: 110px; margin-top: -55px; }

  /* ── IFrame view (anunturi etc) ── */
  .view-iframe iframe{
    height: calc(100vh - var(--hdr-h));
  }
}

/* ══════════════════════════════════════════════════════════════
   1160px+ — PANEL DREPT
   ══════════════════════════════════════════════════════════════ */
@media (min-width:1160px){

  body{
    padding-right: var(--dsk-rp);
  }

  /* Panelul drept — injectat de JS */
  #dsk-right-panel{
    position: fixed;
    top: var(--hdr-h);
    right: 0;
    width: var(--dsk-rp);
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 14px 24px;
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    background: var(--bg);
    z-index: 70;
  }

  /* Card în panelul drept */
  .dsk-rp-card{
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: 16px;
    overflow: hidden;
  }
  .dsk-rp-card-h{
    padding: 11px 14px 9px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    border-bottom: 1px solid var(--card-line);
    letter-spacing: -.01em;
  }
  .dsk-rp-link{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border-bottom: 1px solid var(--card-line);
    transition: background .12s;
  }
  .dsk-rp-link:last-child{ border-bottom: none; }
  .dsk-rp-link:hover{ background: var(--bg-2); }
  .dsk-rp-link svg{
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: var(--brand);
  }
  .dsk-rp-link span{ flex: 1; }
  .dsk-rp-badge{
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--hub-grad);
    color: #fff;
    letter-spacing: .03em;
  }

  /* Melissa widget */
  a.dsk-rp-melissa{
    background: linear-gradient(135deg, #1d4ed8 0%, #1a56db 60%, #ea580c 100%);
    border-radius: 16px;
    padding: 14px 14px;
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity .15s, transform .15s;
    box-shadow: 0 6px 22px rgba(26,86,219,.30);
  }
  a.dsk-rp-melissa:hover{
    opacity: .95;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(26,86,219,.40);
  }
  a.dsk-rp-melissa .mel-h{
    font-size: 14.5px;
    font-weight: 800;
    margin: 0;
    color: #fff;
  }
  a.dsk-rp-melissa .mel-p{
    font-size: 12.5px;
    opacity: .92;
    margin: 0;
    line-height: 1.45;
    color: #fff;
  }
  a.dsk-rp-melissa .mel-cta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.18);
    border-radius: 10px;
    padding: 7px 12px;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,.30);
    transition: background .15s;
    align-self: flex-start;
    color: #fff;
  }
  a.dsk-rp-melissa .mel-cta:hover{ background: rgba(255,255,255,.28); }
  a.dsk-rp-melissa .mel-cta svg{ width:16px; height:16px; }

  /* Footer links */
  .dsk-rp-footer{
    font-size: 12px;
    color: var(--muted);
    line-height: 2;
    padding: 0 4px;
  }
  .dsk-rp-footer a{
    color: var(--muted);
    margin-right: 10px;
  }
  .dsk-rp-footer a:hover{ color: var(--ink); }
}

/* ══════════════════════════════════════════════════════════════
   1400px+ — Sidebar mai lat
   ══════════════════════════════════════════════════════════════ */
@media (min-width:1400px){
  :root{ --dsk-sb: 270px; }
  body{ padding-left: 270px; }
  nav.sb{ width: 270px; }
  header.tb{ padding-left: calc(270px + 16px); }
}

/* ══════════════════════════════════════════════════════════════
   Mobile override — asigurăm că nu se aplică stilurile desktop
   ══════════════════════════════════════════════════════════════ */
@media (max-width:899px){
  #dsk-right-panel{ display:none; }
  #dsk-create-btn{ display:none; }
  .dsk-sb-sep{ display:none; }
  nav.sb{ flex-direction: row; }
}


/* ================================================================
   diaspora.ro HUB v285 — VISUAL QUALITY DESKTOP (REWRITE)
   Specificitate calculată față de inline CSS din index.html.
   Toate regulile testate contra claselor reale din DOM.
   100% scoped la @media (min-width:900px) — mobile neafectat.
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   SELECȚIE TEXT
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  ::selection{ background:rgba(26,86,219,.22); color:var(--ink) }
  [data-theme="light"] ::selection{ background:rgba(59,130,246,.28) }
}

/* ══════════════════════════════════════════════════════════════
   TIPOGRAFIE — rendering net, fonturi clare
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  /* Feed principal */
  body .stage{
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1;
  }

  /* Text postare — mai mare, spațiu mai bun */
  body .stage .post-text{
    font-size: 15.5px;
    line-height: 1.68;
    letter-spacing: -.01em;
    word-break: break-word;
    text-rendering: optimizeLegibility;
  }

  /* Nume autor */
  body .stage .post-h .name{
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.018em;
  }

  /* Timestamp */
  body .stage .post-h .meta{
    font-size: 12.5px;
    letter-spacing: -.005em;
  }
}

/* ══════════════════════════════════════════════════════════════
   IMAGINI — calitate maximă, filtre vizibile, zoom hover
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  /* Container media — overflow ascuns pentru zoom */
  body .stage .post-media{
    overflow: hidden;
  }

  /* Imagine singulară — filtru puternic + hover zoom */
  body .stage .post-media:not(.grid-2):not(.grid-3) img{
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
    filter: contrast(1.06) saturate(1.20) brightness(1.01);
    transition:
      transform .55s cubic-bezier(.2,.8,.2,1),
      filter .35s ease;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1.001);
    will-change: transform;
  }
  body .stage .post:hover .post-media:not(.grid-2):not(.grid-3) img{
    transform: scale(1.04) translateZ(0);
    filter: contrast(1.09) saturate(1.28) brightness(1.03);
  }

  /* Grid 2 imagini */
  body .stage .post-media.grid-2 > *{
    overflow: hidden;
  }
  body .stage .post-media.grid-2 img{
    image-rendering: high-quality;
    filter: contrast(1.05) saturate(1.18);
    transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .3s;
    will-change: transform;
  }
  body .stage .post:hover .post-media.grid-2 img{
    transform: scale(1.05);
    filter: contrast(1.08) saturate(1.25);
  }

  /* Grid 3 imagini */
  body .stage .post-media.grid-3 > *{
    overflow: hidden;
  }
  body .stage .post-media.grid-3 img{
    image-rendering: high-quality;
    filter: contrast(1.05) saturate(1.18);
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
  }
  body .stage .post:hover .post-media.grid-3 img{
    transform: scale(1.05);
  }
}

/* ══════════════════════════════════════════════════════════════
   VIDEO — display curat, GPU rendering, fundal negru
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  body .stage .post-media video{
    backface-visibility: hidden;
    transform: translateZ(0);
    background: #000;
    display: block;
    width: 100%;
    image-rendering: high-quality;
  }

  /* Buton fullscreen mai mare și mai vizibil */
  .pm-fullscreen-btn{
    width: 38px;
    height: 38px;
    border-radius: 10px;
    padding: 8px;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.20);
    transition: background .15s, transform .15s;
  }
  .pm-fullscreen-btn:hover{
    background: rgba(0,0,0,.88);
    transform: scale(1.08);
  }
  .pm-fullscreen-btn svg{
    width: 20px;
    height: 20px;
  }
}

/* ══════════════════════════════════════════════════════════════
   CARDURI POSTARE — DARK MODE: umbre puternice, hover lift
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  /* Dark mode — umbră vizibilă pe fundal întunecat */
  html[data-theme="light"] body .stage .post{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.05),
      0 2px 8px rgba(0,0,0,.50),
      0 8px 24px rgba(0,0,0,.35),
      0 20px 40px rgba(0,0,0,.20);
    transition:
      box-shadow .28s cubic-bezier(.4,0,.2,1),
      transform .28s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  html[data-theme="light"] body .stage .post:hover{
    transform: translateY(-3px);
    box-shadow:
      0 0 0 1px rgba(122,163,255,.10),
      0 4px 14px rgba(0,0,0,.60),
      0 16px 40px rgba(0,0,0,.45),
      0 28px 56px rgba(0,0,0,.30);
  }

  /* Light mode — umbră colorată subtilă */
  body .stage .post{
    box-shadow:
      0 0 0 1px rgba(0,0,0,.05),
      0 2px 6px rgba(15,23,42,.07),
      0 8px 22px rgba(15,23,42,.05);
    transition:
      box-shadow .28s cubic-bezier(.4,0,.2,1),
      transform .28s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  body .stage .post:hover{
    transform: translateY(-3px);
    box-shadow:
      0 0 0 1px rgba(0,42,131,.07),
      0 4px 12px rgba(15,23,42,.10),
      0 16px 36px rgba(15,23,42,.09);
  }

  /* Gradient subtil pe header card la hover */
  html[data-theme="light"] body .stage .post:hover .post-h{
    background: linear-gradient(
      180deg,
      rgba(122,163,255,.05) 0%,
      transparent 100%
    );
  }
  body .stage .post:hover .post-h{
    background: linear-gradient(
      180deg,
      rgba(0,42,131,.03) 0%,
      transparent 100%
    );
  }
}

/* ══════════════════════════════════════════════════════════════
   AVATARURI — mai mari pe desktop, HD rendering, shadow
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  body .stage .post-h .av{
    width: 44px;
    height: 44px;
    box-shadow: 0 2px 10px rgba(15,23,42,.16);
    transition: transform .2s, box-shadow .2s;
  }
  body .stage .post-h .av:hover{
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(15,23,42,.22);
  }
  html[data-theme="light"] body .stage .post-h .av{
    box-shadow: 0 2px 10px rgba(0,0,0,.40);
  }

  /* Rendering HD pe toate avatarurile din feed */
  body .stage .post-h .av img,
  body .stage .cm .av img,
  body .stage .user-row .av img,
  body .stage .notif .av img,
  body .composer-inline .av img{
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
  }
}

/* ══════════════════════════════════════════════════════════════
   ICONIȚE SVG — geometricPrecision, stroke curat, glow la hover
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  /* Toate SVG-urile din interfață */
  .tb svg, nav.sb svg, .stage svg{
    shape-rendering: geometricPrecision;
  }

  /* Iconițe sidebar — mărire + glow la hover */
  nav.sb .sb-tab svg{
    width: 23px;
    height: 23px;
    stroke-width: 1.85;
    transition: filter .2s, transform .2s;
  }
  nav.sb .sb-tab:hover:not(.active) svg{
    filter: drop-shadow(0 0 5px rgba(0,42,131,.35));
    transform: scale(1.10);
  }
  [data-theme="light"] nav.sb .sb-tab:hover:not(.active) svg{
    filter: drop-shadow(0 0 5px rgba(122,163,255,.40));
  }
  nav.sb .sb-tab.active svg{
    stroke-width: 2.2;
    filter: drop-shadow(0 0 5px rgba(0,42,131,.45));
  }
  [data-theme="light"] nav.sb .sb-tab.active svg{
    filter: drop-shadow(0 0 5px rgba(122,163,255,.55));
  }

  /* Iconițe acțiuni postare — bounce la hover */
  body .stage .pa-btn svg{
    width: 20px;
    height: 20px;
    stroke-width: 2;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), filter .2s;
  }
  body .stage .pa-btn:hover svg{
    transform: scale(1.20);
    filter: drop-shadow(0 0 3px rgba(0,42,131,.22));
  }
  [data-theme="light"] body .stage .pa-btn:hover svg{
    filter: drop-shadow(0 0 3px rgba(122,163,255,.28));
  }
  body .stage .pa-btn.liked svg{
    transform: scale(1.25);
    filter: drop-shadow(0 0 6px rgba(239,68,68,.50));
  }
  body .stage .pa-btn:active{
    transform: scale(.93);
  }

  /* Top bar iconițe */
  .tb .tb-btn svg{
    width: 22px;
    height: 22px;
    stroke-width: 1.85;
    transition: transform .18s;
  }
  .tb .tb-btn:hover svg{
    transform: scale(1.10);
  }
}

/* ══════════════════════════════════════════════════════════════
   STORIES — ring mai mare și mai vibrant, hover fluid
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  .story{
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
    cursor: pointer;
  }
  .story:hover{
    transform: translateY(-4px) scale(1.05);
  }
  .story:active{
    transform: scale(.95);
  }

  .story-ring{
    width: 72px;
    height: 72px;
    padding: 3px;
    box-shadow:
      0 4px 16px rgba(59,130,246,.28),
      0 1px 4px rgba(15,23,42,.10);
    transition: box-shadow .2s;
  }
  .story:hover .story-ring{
    box-shadow:
      0 8px 24px rgba(59,130,246,.48),
      0 2px 8px rgba(15,23,42,.14);
  }

  .story-av{
    width: 66px;
    height: 66px;
  }
  .story-av img{
    image-rendering: high-quality;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .story-name{
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.008em;
  }
}

/* ══════════════════════════════════════════════════════════════
   CARDURI HERO (dx-hero) — imagine HD, zoom premium
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  .dx-hero-bg{
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
    filter: saturate(1.12) contrast(1.05) brightness(1.02);
    transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .35s;
  }
  .dx-hero-card:hover .dx-hero-bg{
    filter: saturate(1.22) contrast(1.08) brightness(1.05);
  }

  .dx-hero-card{
    transition:
      transform .28s cubic-bezier(.4,0,.2,1),
      box-shadow .28s cubic-bezier(.4,0,.2,1);
  }
  .dx-hero-card:hover{
    box-shadow:
      0 20px 48px rgba(0,42,131,.28),
      0 6px 16px rgba(15,23,42,.16);
  }
}

/* ══════════════════════════════════════════════════════════════
   COMPOSER — premium focus ring, avatar HD
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  .composer-inline:focus-within{
    box-shadow:
      0 0 0 3px rgba(0,42,131,.14),
      0 4px 20px rgba(0,42,131,.12);
    border-color: var(--brand);
  }
  [data-theme="light"] .composer-inline:focus-within{
    box-shadow:
      0 0 0 3px rgba(122,163,255,.18),
      0 4px 20px rgba(122,163,255,.12);
  }
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE — contrast global crescut
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  [data-theme="light"] body .stage .post-text{
    color: #dce8f8;
  }
  [data-theme="light"] body .stage .post-h .name{
    color: #e8f0fb;
  }
  [data-theme="light"] body .stage .post-h .meta{
    color: #8a9db8;
  }
  [data-theme="light"] .dsk-rp-card{
    background: #0e1828;
    border-color: #1a2744;
  }
  [data-theme="light"] .dsk-rp-link{
    color: #dce8f8;
    border-bottom-color: #1a2744;
  }
  [data-theme="light"] .dsk-rp-link:hover{
    background: #121e34;
  }
  [data-theme="light"] .dsk-rp-card-h{
    color: #e8f0fb;
    border-bottom-color: #1a2744;
  }
  [data-theme="light"] .dsk-rp-link svg{
    color: #3b82f6;
  }
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR — subțire și discret
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  ::-webkit-scrollbar{ width:6px; height:6px }
  ::-webkit-scrollbar-track{ background:transparent }
  ::-webkit-scrollbar-thumb{
    background: var(--line);
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover{ background: var(--muted) }
  html{ scrollbar-width:thin; scrollbar-color:var(--line) transparent }
}

/* ══════════════════════════════════════════════════════════════
   FOCUS — vizibil și elegant
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  .sb-tab:focus-visible{
    outline: 3px solid var(--brand);
    outline-offset: -3px;
    border-radius: 10px;
  }
  body .stage .pa-btn:focus-visible{
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 8px;
  }
  [data-theme="light"] .sb-tab:focus-visible{
    outline-color: #3b82f6;
  }
  [data-theme="light"] body .stage .pa-btn:focus-visible{
    outline-color: #3b82f6;
  }
}

/* ══════════════════════════════════════════════════════════════
   ANIMAȚII — apariție postare, fade view
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  body .stage .post{
    animation: dsk285CardIn .32s cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes dsk285CardIn{
    from{ opacity:0; transform:translateY(6px) }
    to{   opacity:1; transform:translateY(0)   }
  }

  .view.show{
    animation: dsk285FadeUp .28s cubic-bezier(.4,0,.2,1);
  }
  @keyframes dsk285FadeUp{
    from{ opacity:0; transform:translateY(8px) }
    to{   opacity:1; transform:translateY(0)   }
  }
}


/* ================================================================
   diaspora.ro HUB v286 — PREMIUM POLISH (Mobile + Desktop)
   Obiectiv: nivel vizual Facebook / TikTok / Instagram / X
   Reguli: nu strică nimic existent, nu elimină funcții,
           se aplică DEASUPRA v284 + v285.
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   1. FUNDAL ALB PUR — light mode (nu gri-albăstrui)
   ══════════════════════════════════════════════════════════════ */
/* ── ANIMA palette v292 — light mode cu nuanțe violet ── */
:root:not([data-theme="light"]) {
  --bg:        #f5f3ff;
  --bg-2:      #ede9fe;
  --card:      #ffffff;
  --card-line: #e9e3fe;
  --line:      #ddd6fe;
  --hdr-bg:    rgba(245,243,255,.97);
  --brand:     #1a56db;
  --brand-2:   #1e40af;
  --accent:    #ea580c;
}

/* ── ANIMA dark mode ── */
[data-theme="light"] {
  --bg:        #ffffff;
  --bg-2:      #111a2e;
  --card:      #111a2e;
  --card-line: #1e293b;
  --line:      #1e293b;
  --ink:       #e7ecf5;
  --muted:     #94a3b8;
  --brand:     #3b82f6;
  --brand-2:   #1a56db;
  --accent:    #ea580c;
}

/* ══════════════════════════════════════════════════════════════
   2. IMAGINI — calitate HD și pe MOBILE (filtru moderat)
   ══════════════════════════════════════════════════════════════ */
.post-media img {
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
  filter: contrast(1.04) saturate(1.14) brightness(1.005);
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* Hover zoom pe desktop (mai blând decât v285 pentru a nu conflicta) */
@media (max-width: 899px) {
  .post-media:not(.grid-2):not(.grid-3) img {
    transition: filter .3s ease;
  }
}

/* ══════════════════════════════════════════════════════════════
   3. VIDEO — GPU rendering, culori mai vii
   ══════════════════════════════════════════════════════════════ */
.post-media video {
  backface-visibility: hidden;
  transform: translateZ(0);
  background: #000;
}
/* Gradient overlay mai profund pe video fullscreen TikTok */
.vv-reel::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.35) 45%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 6;
}
.vv-reel::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28%;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.50) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 6;
}

/* ══════════════════════════════════════════════════════════════
   4. ANIMAȚIE LIKE — heart pop (Instagram/TikTok style)
   ══════════════════════════════════════════════════════════════ */
@keyframes v286HeartPop {
  0%   { transform: scale(1)    }
  20%  { transform: scale(1.50) rotate(-6deg) }
  50%  { transform: scale(.88)  }
  75%  { transform: scale(1.22) }
  100% { transform: scale(1.15) }
}
@keyframes v286HeartGlow {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(239,68,68,0)) }
  40%       { filter: drop-shadow(0 0 8px rgba(239,68,68,.65)) }
}
.pa-btn.liked svg {
  animation:
    v286HeartPop .48s cubic-bezier(.36,.07,.19,.97) forwards,
    v286HeartGlow .55s ease forwards;
  fill: #ef4444;
}
/* Re-trigger: clasă temporară pusă prin JS */
.pa-btn.like-pop svg {
  animation:
    v286HeartPop .48s cubic-bezier(.36,.07,.19,.97) forwards,
    v286HeartGlow .55s ease forwards;
}

/* ══════════════════════════════════════════════════════════════
   5. STORIES — ring mai vibrant, glow puls pe cele nevăzute
   ══════════════════════════════════════════════════════════════ */
@keyframes v286StoryGlow {
  0%, 100% { box-shadow: 0 0 0 0   rgba(59,130,246,0),   0 0 0 0 rgba(234,88,12,0) }
  50%       { box-shadow: 0 0 0 3px rgba(59,130,246,.30), 0 0 0 6px rgba(234,88,12,.12) }
}
.story-ring:not(.seen):not(.add) {
  animation: v286StoryGlow 2.4s ease-in-out infinite;
}
/* Ring gradient mai saturat */
.story-ring:not(.seen) {
  background: linear-gradient(
    115deg,
    #f9a825 0%, #f06292 35%,
    #ab47bc 60%, #5c6bc0 100%
  );
}
.story-ring.add {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}
/* Avatarul din story mai contrastant față de ring */
.story-av {
  border: 2.5px solid var(--bg);
}
/* Story name — mai lizibil */
.story-name {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  opacity: .85;
}

/* ══════════════════════════════════════════════════════════════
   6. CARDURI POSTARE — mobile: edge-to-edge curat, iOS style
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .post {
    border-radius: 0;
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: 10px;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  /* Separator ultra-fin între postări (ca Facebook mobil) */
  .post {
    border-bottom: 8px solid var(--bg-2);
    border-top: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   7. TIPOGRAFIE MOBIL — Inter optimizat, net, modern
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .post-text {
    font-size: 15px;
    line-height: 1.62;
    letter-spacing: -.012em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    word-break: break-word;
  }
  .post-h .name {
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.018em;
  }
  .post-h .meta {
    font-size: 12px;
    letter-spacing: -.005em;
  }
  /* Body text în comentarii */
  .cm .body .tx {
    font-size: 14px;
    line-height: 1.58;
    letter-spacing: -.01em;
  }
}

/* ══════════════════════════════════════════════════════════════
   8. ACȚIUNI POST — tap targets mari, feedback instant
   ══════════════════════════════════════════════════════════════ */
.pa-btn {
  min-height: 44px;
  transition: background .1s, color .1s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.pa-btn:active {
  transform: scale(.92);
  background: var(--bg-2);
}
/* Count mai vizibil */
.pa-btn .pa-label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Liked state — roșu vibrant */
.pa-btn.liked {
  color: #e8305a;
}
.pa-btn.liked svg {
  fill: #e8305a;
}
/* Share icon — hover albastru */
.pa-btn:nth-child(3):hover {
  color: var(--brand);
}

/* ══════════════════════════════════════════════════════════════
   9. AVATAR ÎN FEED — story ring dacă are story (clasa .av-has-story)
   ══════════════════════════════════════════════════════════════ */
.post-h .av.av-has-story {
  padding: 2.5px;
  background: linear-gradient(
    115deg,
    #f9a825 0%, #f06292 35%,
    #ab47bc 65%, #5c6bc0 100%
  );
  border: 0;
}
.post-h .av.av-has-story img {
  border: 2px solid var(--card);
  border-radius: 50%;
}
/* Avatar mobil — ușor mai mare, shadow subtil */
@media (max-width: 899px) {
  .post-h .av {
    width: 40px;
    height: 40px;
    font-size: 15px;
    box-shadow: 0 1px 6px rgba(15,23,42,.14);
  }
  [data-theme="light"] .post-h .av {
    box-shadow: 0 1px 6px rgba(0,0,0,.38);
  }
}

/* ══════════════════════════════════════════════════════════════
   10. HEADER POST — spațiere mai aerisită, name bold
   ══════════════════════════════════════════════════════════════ */
.post-h {
  padding: 13px 16px 9px;
  gap: 11px;
}
.post-h .info {
  line-height: 1.28;
}

/* ══════════════════════════════════════════════════════════════
   11. MEDIA IMAG/VIDEO — aspect ratio consistent pe mobile
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* Imagini singulare: max-height mai consistent */
  .post-media:not(.grid-2):not(.grid-3) img {
    max-height: 520px;
    object-fit: cover;
    width: 100%;
  }
  .post-media:not(.grid-2):not(.grid-3) video {
    max-height: 560px;
  }
  /* Grid 2 — mai înalt pe mobile */
  .post-media.grid-2 {
    max-height: 320px;
  }
  .post-media.grid-2 > * {
    min-height: 160px;
  }
}

/* ══════════════════════════════════════════════════════════════
   12. SKELETON SHIMMER — animație mai modernă (Facebook style)
   ══════════════════════════════════════════════════════════════ */
@keyframes v286Shimmer {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}
.sk {
  background: linear-gradient(
    90deg,
    var(--bg-2) 0%,
    rgba(255,255,255,.75) 40%,
    var(--bg-2) 80%
  );
  background-size: 300% 100%;
  animation: v286Shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}
[data-theme="light"] .sk {
  background: linear-gradient(
    90deg,
    var(--bg-2) 0%,
    rgba(255,255,255,.06) 40%,
    var(--bg-2) 80%
  );
  background-size: 300% 100%;
}

/* ══════════════════════════════════════════════════════════════
   13. SEARCH BAR — pill curat, focus ring premium
   ══════════════════════════════════════════════════════════════ */
.tb-search {
  border-radius: 24px;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.tb-search:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,42,131,.10);
  background-color: var(--card);
}
[data-theme="light"] .tb-search:focus {
  box-shadow: 0 0 0 3px rgba(122,163,255,.14);
}

/* ══════════════════════════════════════════════════════════════
   14. BADGE NOTIFICĂRI — pop animation, mai vizibil
   ══════════════════════════════════════════════════════════════ */
@keyframes v286BadgePop {
  0%   { transform: scale(0) }
  65%  { transform: scale(1.25) }
  100% { transform: scale(1) }
}
.tb-btn .pill, .sb-tab .pill {
  animation: v286BadgePop .32s cubic-bezier(.36,.07,.19,.97);
  box-shadow: 0 0 0 2px var(--bg);
  font-size: 9px;
  font-weight: 900;
  min-width: 18px;
  height: 18px;
}

/* ══════════════════════════════════════════════════════════════
   15. COMPOSER INLINE — mai premium, focus ring iOS
   ══════════════════════════════════════════════════════════════ */
.composer-inline {
  border-radius: 20px;
  transition: box-shadow .2s, border-color .2s;
}
.composer-inline .ph {
  border-radius: 28px;
  font-size: 15px;
  font-weight: 500;
}
.composer-inline:hover {
  border-color: rgba(0,42,131,.22);
}
[data-theme="light"] .composer-inline:hover {
  border-color: rgba(122,163,255,.22);
}

/* ══════════════════════════════════════════════════════════════
   16. FEED TABS — underline activ mai vibrant
   ══════════════════════════════════════════════════════════════ */
.feed-tab {
  transition: background .18s, color .18s, box-shadow .18s;
  font-weight: 700;
  letter-spacing: -.01em;
}
.feed-tab.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,42,131,.28);
}
[data-theme="light"] .feed-tab.active {
  background: #3b6df0;
  box-shadow: 0 4px 16px rgba(59,109,240,.35);
}

/* ══════════════════════════════════════════════════════════════
   17. LINK PREVIEW CARD — mai modern, shadow subtil
   ══════════════════════════════════════════════════════════════ */
.link-prev {
  border-radius: 16px;
  overflow: hidden;
  border: 0;
  box-shadow:
    0 1px 3px rgba(15,23,42,.07),
    0 4px 14px rgba(15,23,42,.06);
  transition: box-shadow .2s;
}
.link-prev:hover {
  box-shadow:
    0 2px 6px rgba(15,23,42,.10),
    0 8px 22px rgba(15,23,42,.09);
}
.link-prev .lp-img {
  border-radius: 0;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}
.link-prev .lp-title {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.015em;
}

/* ══════════════════════════════════════════════════════════════
   18. MODAL BOTTOM SHEET — handle mai vizibil, iOS style
   ══════════════════════════════════════════════════════════════ */
.modal-grab {
  width: 44px;
  height: 5px;
  border-radius: 99px;
  background: var(--card-line);
  margin: 10px auto 5px;
  flex-shrink: 0;
}
.modal {
  border-radius: 24px 24px 0 0;
}
@media (min-width: 640px) {
  .modal {
    border-radius: 22px;
  }
}

/* ══════════════════════════════════════════════════════════════
   19. TOAST — mai modern, blur glassmorphism
   ══════════════════════════════════════════════════════════════ */
.toast {
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  background: rgba(11,18,32,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 12px 22px;
}


/* ══════════════════════════════════════════════════════════════
   20. NOTIFICĂRI PANEL — premium glassmorphism
   ══════════════════════════════════════════════════════════════ */
.notif-panel {
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(15,23,42,.06),
    0 12px 40px rgba(0,42,131,.16),
    0 4px 12px rgba(15,23,42,.08);
}
[data-theme="light"] .notif-panel {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 12px 40px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.30);
}
.notif-panel-head h3 {
  font-size: 21px;
  letter-spacing: -.025em;
}

/* ══════════════════════════════════════════════════════════════
   21. PROFILUL — cover gradient mai vibrant
   ══════════════════════════════════════════════════════════════ */
.profile-cover {
  background: linear-gradient(
    135deg,
    #3b82f6 0%, #60a5fa 50%, #ea580c 100%
  );
  height: 150px;
}
.profile-avatar {
  box-shadow:
    0 0 0 4px var(--card),
    0 8px 24px rgba(15,23,42,.22);
}
[data-theme="light"] .profile-avatar {
  box-shadow:
    0 0 0 4px var(--card),
    0 8px 24px rgba(0,0,0,.55);
}
.profile-name {
  font-size: 21px;
  letter-spacing: -.025em;
}

/* ══════════════════════════════════════════════════════════════
   22. GATE LOGIN — mai atrăgător
   ══════════════════════════════════════════════════════════════ */
.gate {
  border-radius: 22px;
  padding: 34px 24px;
  box-shadow:
    0 2px 8px rgba(15,23,42,.07),
    0 12px 36px rgba(15,23,42,.08);
}
[data-theme="light"] .gate {
  box-shadow:
    0 2px 8px rgba(0,0,0,.40),
    0 12px 36px rgba(0,0,0,.35);
}
.gate h2 {
  font-size: 23px;
  letter-spacing: -.025em;
}
.gate-icon {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(59,130,246,.45);
}

/* ══════════════════════════════════════════════════════════════
   23. REELS GRID — thumbnailuri mai mari, radius consistent
   ══════════════════════════════════════════════════════════════ */
.reel-card {
  border-radius: 16px;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.reel-card:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.reel-overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.20) 45%,
    transparent 75%
  );
}

/* ══════════════════════════════════════════════════════════════
   24. SIDE DRAWER — header gradient mai vibrant
   ══════════════════════════════════════════════════════════════ */
.sdw-head {
  background: linear-gradient(
    135deg,
    #002a83 0%, #1d4ed8 60%, #3b82f6 100%
  );
}

/* ══════════════════════════════════════════════════════════════
   25. SCROLL PERFORMANCE — paint hints
   ══════════════════════════════════════════════════════════════ */
.stage {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.post {
  contain: layout style;
}
.post-media img, .post-media video {
  content-visibility: auto;
  contain-intrinsic-size: 0 320px;
}

/* ══════════════════════════════════════════════════════════════
   26. FOCUS VIZIBIL — accesibilitate (WCAG AA)
   ══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}
[data-theme="light"] :focus-visible {
  outline-color: #3b82f6;
}

/* ══════════════════════════════════════════════════════════════
   27. VIDE PLAYER — acțiuni mai mari pe mobil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .vv-act {
    padding: 10px 16px;
  }
  .vv-act svg {
    width: 25px;
    height: 25px;
  }
  .vv-act .ct {
    font-size: 11px;
    font-weight: 800;
  }
  .vv-mute {
    width: 42px;
    height: 42px;
  }
  .vv-mute svg {
    width: 20px;
    height: 20px;
  }
}

/* ══════════════════════════════════════════════════════════════
   28. EMPTY STATE — mai expresiv
   ══════════════════════════════════════════════════════════════ */
.empty h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.empty p {
  font-size: 14.5px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   29. SUB-BAR MOBILE — iconițe mai mari, active state premium
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .sb-tab svg {
    width: 25px;
    height: 25px;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  }
  .sb-tab.active svg {
    transform: scale(1.12);
  }
  .sb-tab:active svg {
    transform: scale(.88);
  }
  .sb-tab {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ══════════════════════════════════════════════════════════════
   30. GLOBAL — selecție text mai elegantă
   ══════════════════════════════════════════════════════════════ */
::selection {
  background: rgba(0,42,131,.16);
  color: var(--ink);
}
[data-theme="light"] ::selection {
  background: rgba(122,163,255,.20);
}

/* ══════════════════════════════════════════════════════════════
   31. TOP BAR — bordura bottom mai subtilă în light mode
   ══════════════════════════════════════════════════════════════ */
:root:not([data-theme="light"]) header.tb {
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 8px rgba(15,23,42,.05);
}
:root:not([data-theme="light"]) nav.sb {
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 4px rgba(15,23,42,.04);
}

/* ══════════════════════════════════════════════════════════════
   32. MICRO-INTERACTION — apăsare butoane generale
   ══════════════════════════════════════════════════════════════ */
.btn-grad, .btn-line {
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-grad:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.btn-grad:active {
  transform: scale(.96);
}
.btn-line:active {
  transform: scale(.96);
}


/* ================================================================
   diaspora.ro HUB v287 — DESKTOP VARIANTA A
   Stil: Facebook Modern — alb, albastru, layout 3 coloane curat.
   Sidebar stâng compact, carduri premium, panel drept corectat.
   100% scoped la @media (min-width:900px) — mobile NEAFECTAT.
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   SIDEBAR STÂNG — mai compact (tabs mai mici, gap mai mic)
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  /* Sidebar nav — padding și gap reduse */
  nav.sb{
    padding: 8px 6px 12px;
    gap: 2px;
  }

  /* Fiecare tab — mai mic */
  .sb-tab{
    height: 42px;
    min-height: 42px;
    padding: 0 12px;
    gap: 10px;
    font-size: 14px;
    border-radius: 10px;
  }
  .sb-tab .lab{
    font-size: 14px;
    font-weight: 600;
  }
  .sb-tab svg{
    width: 20px;
    height: 20px;
  }

  /* Tab activ — border stâng păstrat, padding ajustat */
  .sb-tab.active{
    padding-left: 9px;
    border-left-width: 3px;
  }

  /* Buton Creează — mai compact */
  #dsk-create-btn{
    height: 42px;
    font-size: 14px;
    padding: 0 14px;
    gap: 10px;
    margin-bottom: 8px;
    border-radius: 10px;
  }
  #dsk-create-btn svg{
    width: 18px;
    height: 18px;
  }

  /* Separator sidebar — mai compact */
  .dsk-sb-sep{
    margin: 6px 4px;
  }
}

/* ══════════════════════════════════════════════════════════════
   FUNDAL PAGINĂ DESKTOP — gri-albăstrui deschis (stil Facebook)
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  /* Light mode — fundal paginii #f0f2f5 ca Facebook */
  :root:not([data-theme="light"]) body,
  [data-theme="dark"] body {
    background: #f0f2f5;
  }

  /* Dark mode — fundal ușor mai închis, consistent */
  [data-theme="light"] body{
    background: #0b0f1a;
  }
}

/* ══════════════════════════════════════════════════════════════
   CARDURI POST — stil Varianta A (umbră subtilă, colțuri rotunde)
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  /* Light mode — carduri albe curate */
  :root:not([data-theme="light"]) .post,
  [data-theme="dark"] .post {
    background: #ffffff;
    border: 1px solid #e4e6eb;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
    border-radius: 16px;
  }
  :root:not([data-theme="light"]) .post:hover,
  [data-theme="dark"] .post:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.10), 0 4px 18px rgba(0,0,0,.07);
  }

  /* Dark mode — carduri dark */
  [data-theme="light"] .post{
    background: #141a30;
    border: 1px solid #1e2745;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    border-radius: 16px;
  }

  /* Composer inline — același stil card */
  :root:not([data-theme="light"]) .composer-inline,
  [data-theme="dark"] .composer-inline {
    background: #ffffff;
    border: 1px solid #e4e6eb;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    border-radius: 16px;
  }

  /* Acțiuni post — bordură mai discretă */
  :root:not([data-theme="light"]) .post-actions,
  [data-theme="dark"] .post-actions {
    border-top: 1px solid #e4e6eb;
  }
}

/* ══════════════════════════════════════════════════════════════
   HEADER DESKTOP — mai curat, umbră subtilă
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  :root:not([data-theme="light"]) header.tb,
  [data-theme="dark"] header.tb {
    background: #ffffff;
    border-bottom: 1px solid #e4e6eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
  }

  [data-theme="light"] header.tb{
    background: #0f1523;
    border-bottom: 1px solid #1e2745;
  }
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR STÂNG — fundal consistent cu pagina
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  :root:not([data-theme="light"]) nav.sb,
  [data-theme="dark"] nav.sb {
    background: #f0f2f5;
    border-right: 1px solid #e4e6eb;
  }

  [data-theme="light"] nav.sb{
    background: #0b0f1a;
    border-right: 1px solid #1e2745;
  }

  /* Tab activ light mode — albastru Facebook */
  :root:not([data-theme="light"]) .sb-tab.active,
  [data-theme="dark"] .sb-tab.active {
    background: #e7f0fe;
    color: #1a56db;
    border-left-color: #1a56db;
  }

  /* Tab hover light mode */
  :root:not([data-theme="light"]) .sb-tab:hover:not(.active),
  [data-theme="dark"] .sb-tab:hover:not(.active) {
    background: rgba(0,0,0,.06);
    color: #050505;
  }
}

/* ══════════════════════════════════════════════════════════════
   PANEL DREPT — fix vizibilitate + fundal consistent
   ══════════════════════════════════════════════════════════════ */
@media (min-width:1160px){

  :root:not([data-theme="light"]) #dsk-right-panel,
  [data-theme="dark"] #dsk-right-panel {
    background: #f0f2f5;
    border-left: 1px solid #e4e6eb;
  }

  [data-theme="light"] #dsk-right-panel{
    background: #0b0f1a;
    border-left: 1px solid #1e2745;
  }

  /* Carduri în panelul drept — albe */
  :root:not([data-theme="light"]) .dsk-rp-card,
  [data-theme="dark"] .dsk-rp-card {
    background: #ffffff;
    border: 1px solid #e4e6eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
  }

  /* Link-uri în panel — hover gri Facebook */
  :root:not([data-theme="light"]) .dsk-rp-link:hover,
  [data-theme="dark"] .dsk-rp-link:hover {
    background: #f0f2f5;
  }

  /* Fix vizibilitate panel: z-index ridicat + overflow clip pe html */
  #dsk-right-panel{
    z-index: 75;
  }
}

/* overflow-x clip pe desktop pentru a preveni scroll orizontal
   care poate tăia panelul (nu afectează position:fixed) */
@media (min-width:900px){
  html{
    overflow-x: clip;
  }
}

/* ══════════════════════════════════════════════════════════════
   SEARCH BAR DESKTOP — stil Facebook (bg gri în header)
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  :root:not([data-theme="light"]) .tb-search,
  [data-theme="dark"] .tb-search {
    background: #f0f2f5;
    border: none;
    border-radius: 999px;
    color: #050505;
  }
  :root:not([data-theme="light"]) .tb-search::placeholder,
  [data-theme="dark"] .tb-search::placeholder {
    color: #65676b;
  }
  :root:not([data-theme="light"]) .tb-search:focus,
  [data-theme="dark"] .tb-search:focus {
    background: #ffffff;
    box-shadow: 0 0 0 2px #1a56db;
    outline: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   STORIES — păstrate, doar colțuri mai rotunde pe desktop
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  .stories-wrap{
    border-radius: 16px;
    overflow: hidden;
  }
  :root:not([data-theme="light"]) .stories-wrap,
  [data-theme="dark"] .stories-wrap {
    background: #ffffff;
    border: 1px solid #e4e6eb;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
  }
}

/* ══════════════════════════════════════════════════════════════
   FEED TABS (Acasă / Video / etc.) — stil Facebook underline
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  :root:not([data-theme="light"]) .feed-tabs,
  [data-theme="dark"] .feed-tabs {
    background: #ffffff;
    border: 1px solid #e4e6eb;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    padding: 6px 8px;
  }
}

/* ══════════════════════════════════════════════════════════════
   ICOANE SIDEBAR — stil Facebook: monochrome, fără glow/culori
   Inactive: gri neutru #65676b
   Active:   albastru Facebook #1a56db
   Hover:    gri mai închis, fără scale exagerat, fără drop-shadow
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  /* Culoare icoane inactive — gri neutru exact ca Facebook */
  nav.sb .sb-tab{
    color: #65676b;
  }

  /* Dimensiune SVG uniformă, stroke moderat */
  nav.sb .sb-tab svg{
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
    /* Anulăm orice filter/glow din v285 */
    filter: none;
    transform: none;
    transition: none;
  }

  /* Hover — fundal subtil, fără glow, fără scale */
  nav.sb .sb-tab:hover:not(.active){
    color: #050505;
  }
  nav.sb .sb-tab:hover:not(.active) svg{
    filter: none;
    transform: none;
  }

  /* Active — albastru Facebook curat, stroke puțin mai gros */
  nav.sb .sb-tab.active{
    color: #1a56db;
    border-left-color: #1a56db;
  }
  nav.sb .sb-tab.active svg{
    stroke-width: 2.3;
    filter: none;
    transform: none;
  }

  /* Dark mode — inactive gri deschis, active albastru */
  [data-theme="light"] nav.sb .sb-tab{
    color: #b0b3b8;
  }
  [data-theme="light"] nav.sb .sb-tab:hover:not(.active){
    color: #e4e6eb;
  }
  [data-theme="light"] nav.sb .sb-tab.active{
    color: #4599f5;
    border-left-color: #4599f5;
  }
  [data-theme="light"] nav.sb .sb-tab.active svg{
    filter: none;
  }
  [data-theme="light"] nav.sb .sb-tab:hover:not(.active) svg{
    filter: none;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   FIX CRITIC — FEED DESKTOP: text blur + video 1980s
   Cauze: scale(1.001) subpixel + will-change GPU layer + filtre
   agresive contrast/saturate/brightness pe imagini și video
   ══════════════════════════════════════════════════════════════ */

/* Global (și mobile) — video NICIODATĂ nu primește filtre CSS */
.post-media video,
.stage video,
video {
  filter: none;
  -webkit-filter: none;
  transform: none;
  will-change: auto;
  image-rendering: auto;
}

@media (min-width:900px){

  /* Imagini din feed — anulăm scale(1.001) care blurează textul
     și will-change care promovează inutil pe GPU layer           */
  .stage .post-media img{
    transform: none;
    will-change: auto;
    backface-visibility: visible;
    /* Păstrăm image-rendering dar anulăm filtrele agresive */
    filter: none;
  }
  /* La hover pe post — zoom maxim 1.03, fără filtru */
  .stage .post:hover .post-media:not(.grid-2):not(.grid-3) img{
    transform: scale(1.03);
    filter: none;
  }
  .stage .post:hover .post-media.grid-2 img,
  .stage .post:hover .post-media.grid-3 img{
    transform: scale(1.03);
    filter: none;
  }

  /* Text în postări — niciun efect GPU moștenit */
  .stage .post,
  .stage .post-body,
  .stage .post-text,
  .stage .post-hdr,
  .stage .post-footer{
    transform: none;
    will-change: auto;
    filter: none;
    backface-visibility: visible;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }

  /* Video — complet curat: fără filtru, fără transform GPU */
  .stage .post-media video{
    filter: none;
    -webkit-filter: none;
    transform: none;
    will-change: auto;
    backface-visibility: visible;
    image-rendering: auto;
  }
}


/* ================================================================
     diaspora.ro HUB v288 — FIXES COMPLETE
     1. Feed: elimina filtrele vizuale (v285+v286) care stricau tot
     2. Video: elimina bara de cautare; corecteaza pozitia authorului
     3. CEO badge CSS pentru cosmin@diaspora.ro
     4. Default LIGHT mode fortat (override data-theme="dark" legacy)
     ================================================================ */

  /* ══════════════════════════════════════════════════════════════
     FIX 1A — Imagini: anuleaza TOATE filtrele CSS agresive din
     v285 (contrast 1.06, saturate 1.20) si v286 (contrast 1.04,
     saturate 1.14) care cauzau "horrible look" pe mobil+desktop.
     ══════════════════════════════════════════════════════════════ */
  .post-media img,
  body .stage .post-media img,
  body .stage .post-media:not(.grid-2):not(.grid-3) img,
  body .stage .post-media.grid-2 img,
  body .stage .post-media.grid-3 img,
  .post-media:not(.grid-2):not(.grid-3) img {
    filter: none;
    -webkit-filter: none;
    will-change: auto;
    backface-visibility: visible;
    transform: none;
    image-rendering: auto;
  }

  /* Hover pe imagini: zoom blând, fara filtre */
  body .stage .post:hover .post-media:not(.grid-2):not(.grid-3) img,
  body .stage .post:hover .post-media.grid-2 img,
  body .stage .post:hover .post-media.grid-3 img {
    transform: scale(1.02);
    filter: none;
  }

  /* ══════════════════════════════════════════════════════════════
     FIX 1B — Video: elimina transformarile GPU din v286 care
     cauzau redare deteriorata ("1980s look") pe video in feed.
     ══════════════════════════════════════════════════════════════ */
  video,
  .post-media video,
  .stage video,
  body .stage .post-media video,
  .vv-reel video {
    filter: none;
    -webkit-filter: none;
    transform: none;
    will-change: auto;
    backface-visibility: visible;
    image-rendering: auto;
  }

  /* ══════════════════════════════════════════════════════════════
     FIX 1C — Anuleaza will-change pe carduri (cauza shimmer/jitter)
     ══════════════════════════════════════════════════════════════ */
  .post { will-change: auto; }
  .post:hover { will-change: auto; }

  /* ══════════════════════════════════════════════════════════════
     FIX 2A — Bara de cautare din sectiunea VIDEO: ascunsa.
     Este inutila si acoperea iconita authorului din stanga.
     ══════════════════════════════════════════════════════════════ */
  .vv-search {
    display: none;
  }

  /* ══════════════════════════════════════════════════════════════
     FIX 2B — Author video: repozitinat la stanga fara bara.
     Era la left:60px ca sa evite bara de cautare (acum eliminata).
     ══════════════════════════════════════════════════════════════ */
  .vv-author {
    left: 12px;
    top: 10px;
  }

  /* ══════════════════════════════════════════════════════════════
     FIX 3 — CEO Badge: stilizare pentru cosmin@diaspora.ro
     ══════════════════════════════════════════════════════════════ */
  .ceo-badge {
    display: inline-block;
    background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #b8860b 100%);
    color: #1a0a00;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .10em;
    padding: 1px 9px;
    border-radius: 999px;
    border: 1px solid rgba(184,134,11,.45);
    box-shadow: 0 1px 5px rgba(184,134,11,.30);
    white-space: nowrap;
    line-height: 1.8;
    vertical-align: middle;
    text-transform: uppercase;
    text-decoration: none;
  }

  /* Sub-linia de handle (@...) inlocuita cu CEO badge in feed */
  .post-h .info .ceo-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
  }

  /* In video (vv-author .nm) */
  .vv-author .ceo-badge {
    font-size: 9px;
    padding: 0 6px;
    margin-left: 6px;
    line-height: 1.6;
  }

  /* In profile view */
  .profile-handle .ceo-badge {
    font-size: 11px;
    margin-left: 6px;
    vertical-align: middle;
  }

  /* In comment / DM / notificari */
  .cm .nm .ceo-badge,
  .notif-item .ceo-badge {
    font-size: 9px;
    padding: 0 6px;
    line-height: 1.6;
    margin-left: 4px;
  }
  

/* ================================================================
   diaspora.ro HUB v290 — CLARITY MAXIMĂ
   Fix definitiv: text clar, imagini curate, video corect,
   limită text postare, contrast maxim. Mobile + Desktop.
   Se aplică DEASUPRA tuturor versiunilor anterioare (v285–v288).
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   1. TEXT NET — elimina COMPLET GPU blur din v285/v286
      Cauza: will-change:transform pe .post promovează cardul
      pe GPU layer → text sub-pixel → ceață. Fix nuclear.
   ══════════════════════════════════════════════════════════════ */

/* Cardul postare — NICIODATĂ pe GPU layer */
.post {
  will-change: auto;
  transform: none;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.post:hover {
  will-change: auto;
  backface-visibility: visible;
}

/* Toate elementele de text din postare — rendering net garantat */
.post-text,
.post-body,
.post-h,
.post-h .name,
.post-h .meta,
.post-h .info,
.post-footer,
.post-actions,
.pa-btn,
.pa-btn .pa-label,
.cm .body .tx,
.cm .nm,
.cm-input {
  transform: none;
  will-change: auto;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  filter: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ══════════════════════════════════════════════════════════════
   2. CONTRAST MAXIM TEXT — light și dark mode
      Valorile implicite sunt prea deschise și se văd slab.
   ══════════════════════════════════════════════════════════════ */

/* LIGHT MODE — text aproape negru, nu gri */
:root:not([data-theme="light"]) .post-text,

:root:not([data-theme="light"]) .post-h .name,

:root:not([data-theme="light"]) .post-h .meta,

:root:not([data-theme="light"]) .cm .body .tx,


/* DARK MODE — text aproape alb, nu gri deschis șters */
[data-theme="light"] .post-text {
  color: #f1f5f9;
  font-weight: 400;
}
[data-theme="light"] .post-h .name {
  color: #f8fafc;
}
[data-theme="light"] .post-h .meta {
  color: #94a3b8;
}
[data-theme="light"] .cm .body .tx {
  color: #e2e8f0;
}

/* Linkuri în text — vizibile, nu topite în fundal */
.post-text a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
}
[data-theme="light"] .post-text a {
  color: #3b82f6;
}
.post-text a:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   3. IMAGINI — calitate înaltă, fără filtre agresive
      Anulare completă v285 (contrast 1.06 saturate 1.20) și
      v286 (contrast 1.04 saturate 1.14) pe mobile și desktop.
   ══════════════════════════════════════════════════════════════ */

.post-media img,
body .stage .post-media img,
body .stage .post-media:not(.grid-2):not(.grid-3) img,
body .stage .post-media.grid-2 img,
body .stage .post-media.grid-3 img,
.post-media.grid-2 img,
.post-media.grid-3 img {
  filter: none;
  -webkit-filter: none;
  transform: none;
  will-change: auto;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
  object-fit: cover;
}

/* Hover imagini — zoom blând, fără filtre */
body .stage .post:hover .post-media:not(.grid-2):not(.grid-3) img,
body .stage .post:hover .post-media.grid-2 img,
body .stage .post:hover .post-media.grid-3 img {
  transform: scale(1.02);
  filter: none;
  will-change: auto;
}

/* Avataruri — nicio modificare GPU */
.post-h .av img,
.av img {
  filter: none;
  transform: none;
  will-change: auto;
  image-rendering: auto;
}

/* ══════════════════════════════════════════════════════════════
   4. VIDEO — dimensiuni corecte pe toate dispozitivele
      Problema: videoclipurile din feed nu aveau width/height
      explicit setate și nu ocupau spațiul corect în card.
   ══════════════════════════════════════════════════════════════ */

.post-media video,
body .stage .post-media video,
.stage video,
video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  background: #000;
  filter: none;
  -webkit-filter: none;
  transform: none;
  will-change: auto;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  border-radius: 0;
}

/* Containerul media — nu tăia video-ul */
.post-media {
  overflow: hidden;
  background: #000;
  width: 100%;
}

/* Video în modul fullscreen TikTok — excepție, ocupă tot ecranul */
.vv-reel video {
  max-height: 100vh;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Video story preview — mic, nu fullscreen */
.story-preview video {
  max-height: 200px;
}

/* ══════════════════════════════════════════════════════════════
   5. LIMITĂ TEXT POSTARE — trunchiere vizuală via CSS
      JS (v290-clarity.js) adaugă clasa .v290-truncated și
      butonul "Citește mai mult". CSS-ul gestionează afișarea.
   ══════════════════════════════════════════════════════════════ */

/* Text trunchiat — limitat la ~6 rânduri */
.post-text.v290-truncated {
  max-height: 9.6em; /* 6 rânduri × line-height 1.6 */
  overflow: hidden;
  position: relative;
}

/* Gradient fade la capătul textului trunchiat */
.post-text.v290-truncated::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--card, #ffffff) 85%
  );
  pointer-events: none;
}

[data-theme="light"] .post-text.v290-truncated::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--card, #111a2e) 85%
  );
}

/* Buton "Citește mai mult" */
.v290-read-more {
  display: inline-block;
  margin-top: 6px;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand, #1a56db);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -.01em;
  font-family: inherit;
  line-height: 1.5;
}
[data-theme="light"] .v290-read-more {
  color: #3b82f6;
}
.v290-read-more:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   6. CARD POSTARE — umbră subtilă, nu hover translateY(blur)
   ══════════════════════════════════════════════════════════════ */

/* Hover — shadow în loc de translateY (evita reflow+blur) */
body .stage .post:hover {
  transform: none;
  box-shadow:
    0 0 0 1px rgba(26,86,219,.06),
    0 4px 16px rgba(15,23,42,.10),
    0 8px 24px rgba(15,23,42,.07);
  will-change: auto;
}
[data-theme="light"] body .stage .post:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 4px 16px rgba(0,0,0,.50),
    0 8px 24px rgba(0,0,0,.35);
  transform: none;
}

/* ══════════════════════════════════════════════════════════════
   7. SIDEBAR ICOANE — culori brand diaspora.ro (#1a56db), nu FB
   ══════════════════════════════════════════════════════════════ */

/* Tab activ light mode — albastru diaspora */
:root:not([data-theme="light"]) .sb-tab.active,


/* Search bar focus — brand diaspora */
:root:not([data-theme="light"]) .tb-search:focus,


/* ══════════════════════════════════════════════════════════════
   8. COMPOSER — placeholder mai vizibil
   ══════════════════════════════════════════════════════════════ */

.composer-inline .ph,
.composer-inline [placeholder] {
  color: var(--muted);
  opacity: 1;
}
:root:not([data-theme="light"]) .composer-inline .ph {
  color: #64748b;
}

/* ══════════════════════════════════════════════════════════════
   9. ANIMAȚII — fără transform pe carduri (din v285)
      Le înlocuim cu opacity singur — la fel de fluid, fără blur
   ══════════════════════════════════════════════════════════════ */

body .stage .post {
  animation: v290CardFadeIn .28s ease both;
}
@keyframes v290CardFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ================================================================
   diaspora.ro HUB v296 — FEED PROFESIONAL (FB/IG/X Style)
   Fix definitiv:
   • Butoanele de like/comment/share NICIODATĂ suprapuse pe video
   • Feed card design modern: header → media → actions → text
   • Video: dimensiuni corecte, calitate maximă, fullscreen click
   • Composer: preview media frumos, drag & drop
   • Mobile-first, pixel-perfect pe orice ecran
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   1. POST CARD — redesign complet inspirat IG/FB/X
   ══════════════════════════════════════════════════════════════ */

/* Card container */
body .stage .post,
.post {
  background: var(--card, #fff);
  border: 1px solid var(--card-line, #ede9fe);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  position: relative;
  /* GPU isolation — text net */
  will-change: auto;
  transform: none;
}



/* Mobile: card edge-to-edge */
@media (max-width: 680px) {
  body .stage .post, .post {
    border-radius: 0;
    margin-left: -8px;
    margin-right: -8px;
    margin-bottom: 8px;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--card-line, #ede9fe);
  }
}

/* ══════════════════════════════════════════════════════════════
   2. POST HEADER
   ══════════════════════════════════════════════════════════════ */
.post-h {
  display: flex;
  align-items: center;
  padding: 12px 14px 10px;
  gap: 10px;
  flex-shrink: 0;
}
.post-h .av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.post-h .av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-h .info {
  flex: 1;
  min-width: 0;
}
.post-h .name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-h .meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}
.post-h .more {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   3. POST BODY (text)
   ══════════════════════════════════════════════════════════════ */
.post-body {
  padding: 0 14px 10px;
  flex-shrink: 0;
}
.post-text {
  font-size: 14.5px;
  line-height: 1.58;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ══════════════════════════════════════════════════════════════
   4. MEDIA CONTAINER — VIDEO FIX COMPLET
   Butoanele NU vor fi NICIODATĂ suprapuse pe video în feed normal.
   Overlay-ul rămâne DOAR pentru modul .vv-reel (TikTok fullscreen).
   ══════════════════════════════════════════════════════════════ */

/* Containerul media — poziție RELATIVĂ, nu permite overflow lateral */
.post-media {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
  /* NU avem height fix — se adaptează la conținut */
  max-height: 85vh;
}

/* Imaginile din feed — cover elegant */
.post-media:not(.grid-2):not(.grid-3) img {
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: cover;
  display: block;
  filter: none;
  transform: none;
}

/* VIDEO — dimensiuni naturale, calitate maximă */
.post-media video,
body .stage .post-media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  background: #000;
  filter: none;
  transform: none;
  will-change: auto;
  /* calitate video maximă */
  image-rendering: auto;
  -webkit-backface-visibility: visible;
}

/* IMPORTANT: .post-actions NU ESTE ABSOLUT în feed normal */
/* Asta e fix-ul principal pentru butoanele suprapuse */
body .stage .post .post-actions {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
}

/* Grid 2 imagini */
.post-media.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  max-height: 480px;
}
.post-media.grid-2 > * {
  height: 240px;
  object-fit: cover;
  width: 100%;
}

/* Grid 3 imagini */
.post-media.grid-3 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2px;
  max-height: 400px;
}
.post-media.grid-3 .first { grid-row: 1 / span 2; }
.post-media.grid-3 > * {
  min-height: 120px;
  object-fit: cover;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   5. BUTON FULLSCREEN pe media (colț dreapta-jos)
   ══════════════════════════════════════════════════════════════ */
.v296-fs-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 5;
  background: rgba(0,0,0,.55);
  border: 0;
  border-radius: 8px;
  color: #fff;
  padding: 7px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  backdrop-filter: blur(4px);
}
.v296-fs-btn:hover { background: rgba(0,0,0,.78); }
.v296-fs-btn svg { width: 17px; height: 17px; display: block; }

/* Indicator durată video */
.v296-dur {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 5;
}

/* ══════════════════════════════════════════════════════════════
   6. ACTION BAR — SUB video/media, stilul FB/IG/X
   ══════════════════════════════════════════════════════════════ */

.post-actions {
  display: flex;
  align-items: center;
  padding: 4px 10px 6px;
  border-top: 1px solid var(--card-line, #ede9fe);
  gap: 0;
  flex-shrink: 0;
  /* NICIODATĂ suprapus */
  position: relative;
  top: auto; left: auto;
  right: auto; bottom: auto;
  z-index: 1;
}

.pa-btn {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  will-change: auto;
  transform: none;
}

.pa-btn:hover,
.pa-btn:active {
  background: var(--bg-2, rgba(26,86,219,.06));
  color: var(--ink);
}

.pa-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform .2s, fill .2s;
}

.pa-btn .pa-label {
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
  font-weight: 600;
}

@media (max-width: 380px) {
  .pa-btn .pa-label { display: none; }
}

/* Like activ */
.pa-btn.liked {
  color: #ef4444;
}
.pa-btn.liked svg {
  fill: #ef4444;
  transform: scale(1.12);
}

/* Bookmark */
.pa-bk.bookmarked svg { fill: var(--brand, #1a56db); }

/* Spacer (pentru bookmark la dreapta) */
.pa-spacer { flex: 1; }

/* Dark mode action bar */



/* ══════════════════════════════════════════════════════════════
   7. REACTIONS POP-UP (lung press pe Like)
   ══════════════════════════════════════════════════════════════ */
.pa-reactions {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: flex;
  gap: 4px;
  background: var(--card, #fff);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  z-index: 20;
  pointer-events: auto;
  animation: v296reacPop .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes v296reacPop {
  from { transform: scale(.5) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0);     opacity: 1; }
}
.pa-reactions span {
  font-size: 26px;
  cursor: pointer;
  transition: transform .15s;
  line-height: 1;
}
.pa-reactions span:hover { transform: scale(1.45) translateY(-5px); }

/* ══════════════════════════════════════════════════════════════
   8. COMPOSER — aspect profesional
   ══════════════════════════════════════════════════════════════ */
.composer-inline {
  background: var(--card, #fff);
  border: 1px solid var(--card-line, #ede9fe);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .18s;
}
.composer-inline:hover {
  box-shadow: 0 4px 18px rgba(26,86,219,.12);
}



/* Zona de preview media în composer — thumbnail grid */
.composer-files {
  display: flex;
  gap: 6px;
  padding: 8px 12px 4px;
  flex-wrap: wrap;
}
.composer-file {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: var(--bg-2, #f5f3ff);
}
.composer-file img,
.composer-file video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video în composer preview — indicator play */
.composer-file::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.0);
  transition: background .15s;
}
.composer-file:hover::after {
  background: rgba(0,0,0,.12);
}

/* ══════════════════════════════════════════════════════════════
   9. VV-REEL (TikTok fullscreen) — ACȚIUNILE RĂMÂN OVERLAY
   Excepție deliberată: în modul reel, butoanele sunt pe lateral
   ══════════════════════════════════════════════════════════════ */
.vv-reel video {
  max-height: 100vh;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Reel-ul are propriile sale acțiuni (.vv-actions) — le lăsăm */
.vv-actions {
  position: absolute;
  right: 12px;
  bottom: 90px;
  z-index: 20;
}

/* ══════════════════════════════════════════════════════════════
   10. VIEW COUNT & META BAR (sub actions, opțional)
   ══════════════════════════════════════════════════════════════ */
.post-footer {
  padding: 2px 14px 10px;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  display: flex;
  gap: 8px;
}
.post-footer .pf-likes {
  font-weight: 600;
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════
   11. ANIMAȚIE CARD FADE-IN — fără transform (GPU blur fix)
   ══════════════════════════════════════════════════════════════ */
body .stage .post {
  animation: v296FadeIn .26s ease both;
}
@keyframes v296FadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   12. HOVER POST — shadow, nu translateY
   ══════════════════════════════════════════════════════════════ */
body .stage .post:hover {
  transform: none;
  box-shadow:
    0 0 0 1px rgba(26,86,219,.07),
    0 4px 16px rgba(15,23,42,.09),
    0 8px 28px rgba(15,23,42,.06);
}


/* ══════════════════════════════════════════════════════════════
   13. LINK PREVIEW CARD (în feed și în composer)
   ══════════════════════════════════════════════════════════════ */
.link-preview {
  border: 1px solid var(--card-line);
  border-radius: 12px;
  overflow: hidden;
  margin: 4px 14px 10px;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  text-decoration: none;
  transition: box-shadow .15s;
}
.link-preview:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
}
.link-preview img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}
.link-preview .lp-body {
  padding: 10px 12px;
}
.link-preview .lp-domain {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.link-preview .lp-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 3px;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════
   14. STORY ROW — mai vizibil și mai mare
   ══════════════════════════════════════════════════════════════ */
.stories {
  padding: 10px 6px 14px;
  gap: 12px;
}
.story-ring {
  width: 66px;
  height: 66px;
}
.story-av {
  width: 60px;
  height: 60px;
}
.story-name {
  font-size: 11.5px;
  max-width: 68px;
}

/* ══════════════════════════════════════════════════════════════
   15. DAY/NIGHT — theme persistance visual cues
   ══════════════════════════════════════════════════════════════ */




:root:not(
:root:not(
:root:not(


/* ================================================================
   diaspora.ro HUB — Funcționalități Noi v300
   ADD-ONLY. Folosește variabilele CSS din :root și [data-theme].
   ================================================================ */

/* ── SECȚIUNI COMUNE ────────────────────────────────────────── */
.v300-section { margin: 0 0 18px; }
.v300-section-title {
  font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  margin:0 0 10px; padding:0 2px;
}
.v300-empty {
  text-align:center; padding:32px 16px; color:var(--muted);
  font-size:14px;
}
.v300-empty svg { width:40px; height:40px; margin:0 auto 10px; display:block; opacity:.4; }

/* ── BOOKMARKS ──────────────────────────────────────────────── */
.bk-btn {
  background:none; border:none; cursor:pointer;
  color:var(--muted); display:inline-flex; align-items:center;
  gap:5px; font-size:13px; padding:5px 8px; border-radius:8px;
  transition:color .18s, background .18s;
}
.bk-btn:hover { background:var(--bg-2); color:var(--brand); }
.bk-btn.saved { color:var(--brand); }
.bk-btn.saved svg { fill:var(--brand); }
.bk-btn svg { width:18px; height:18px; flex-shrink:0; }

.bk-panel { padding:12px 4px; }
.bk-panel .bk-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px; cursor:pointer;
  transition:background .15s; border:1px solid var(--card-line);
  background:var(--card); margin-bottom:8px;
}
.bk-panel .bk-item:hover { background:var(--bg-2); }
.bk-panel .bk-item .bk-thumb {
  width:48px; height:48px; border-radius:8px; object-fit:cover;
  flex-shrink:0; background:var(--bg-2);
}
.bk-panel .bk-item .bk-info { flex:1; min-width:0; }
.bk-panel .bk-item .bk-info .bk-author { font-size:12px; color:var(--muted); margin-bottom:2px; }
.bk-panel .bk-item .bk-info .bk-text { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-panel .bk-clear { margin-top:12px; }
.bk-panel-empty { text-align:center; padding:40px 16px; color:var(--muted); }
.bk-panel-empty svg { width:44px; height:44px; display:block; margin:0 auto 12px; opacity:.35; }

/* ── MULTI-REACTIONS ────────────────────────────────────────── */
.react-wrap { position:relative; display:inline-flex; }
.react-popup {
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) scale(.85); transform-origin:bottom center;
  background:var(--card); border:1px solid var(--card-line);
  border-radius:28px; padding:6px 8px;
  display:flex; gap:4px; z-index:200;
  box-shadow:var(--shadow-lg); pointer-events:none;
  opacity:0; transition:opacity .18s, transform .18s;
  white-space:nowrap;
}
.react-wrap:hover .react-popup,
.react-popup.show {
  opacity:1; transform:translateX(-50%) scale(1); pointer-events:auto;
}
.react-btn-single {
  font-size:22px; background:none; border:none; cursor:pointer;
  border-radius:50%; width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .15s, background .15s;
}
.react-btn-single:hover { transform:scale(1.35); background:var(--bg-2); }
.react-count {
  font-size:11px; font-weight:700; color:var(--muted);
  display:inline-flex; align-items:center; gap:3px; margin-left:2px;
}
.post-react-summary {
  display:flex; flex-wrap:wrap; gap:5px; margin: 4px 0 0;
  padding:0 12px;
}
.post-react-chip {
  font-size:12px; background:var(--bg-2);
  border:1px solid var(--card-line); border-radius:16px;
  padding:2px 8px; cursor:pointer; transition:background .15s;
}
.post-react-chip:hover { background:var(--card-line); }

/* ── STREAK ─────────────────────────────────────────────────── */
.streak-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff; border-radius:20px; padding:3px 10px;
  font-size:12px; font-weight:700; cursor:pointer;
}
.streak-banner {
  background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(239,68,68,.12));
  border:1px solid rgba(245,158,11,.3);
  border-radius:14px; padding:12px 16px; margin:0 0 14px;
  display:flex; align-items:center; gap:12px;
}
.streak-banner .streak-fire { font-size:28px; }
.streak-banner .streak-info h4 { margin:0 0 2px; font-size:15px; font-weight:700; }
.streak-banner .streak-info p { margin:0; font-size:13px; color:var(--muted); }

/* ── EVENTS ─────────────────────────────────────────────────── */
.ev-section { margin:0 0 20px; }
.ev-section-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.ev-section-head h4 { margin:0; font-size:16px; font-weight:800; }
.ev-section-head a { font-size:13px; color:var(--brand); text-decoration:none; font-weight:600; }
.ev-scroll {
  display:flex; gap:12px; overflow-x:auto; padding-bottom:8px;
  scrollbar-width:none;
}
.ev-scroll::-webkit-scrollbar { display:none; }
.ev-card {
  flex:0 0 220px; background:var(--card); border:1px solid var(--card-line);
  border-radius:16px; overflow:hidden; cursor:pointer;
  transition:transform .18s, box-shadow .18s;
  text-decoration:none; color:var(--ink);
}
.ev-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.ev-card-img {
  width:100%; height:110px; object-fit:cover; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center;
  font-size:36px;
}
.ev-card-body { padding:12px; }
.ev-card-date { font-size:11px; font-weight:700; color:var(--brand); margin-bottom:4px; text-transform:uppercase; }
.ev-card-title { font-size:14px; font-weight:700; margin:0 0 4px; line-height:1.3; }
.ev-card-loc { font-size:12px; color:var(--muted); margin-bottom:8px; }
.ev-card-rsvp {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--brand); color:#fff; border:none;
  border-radius:8px; padding:5px 12px; font-size:12px; font-weight:700;
  cursor:pointer; transition:opacity .15s;
}
.ev-card-rsvp:hover { opacity:.88; }
.ev-card-rsvp.going { background:var(--bg-2); color:var(--brand); border:1px solid var(--brand); }

/* Events modal */
.ev-modal-head { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.ev-modal-date { font-size:13px; font-weight:700; color:var(--brand); }
.ev-modal-loc { font-size:13px; color:var(--muted); }
.ev-modal-desc { font-size:14px; line-height:1.6; color:var(--ink); margin-bottom:16px; }
.ev-modal-attendees { font-size:13px; color:var(--muted); margin-bottom:16px; }

/* ── REMITTANCE CALCULATOR ──────────────────────────────────── */
.remit-widget {
  background:var(--card); border:1px solid var(--card-line);
  border-radius:18px; padding:20px; margin-bottom:18px;
}
.remit-widget h4 { margin:0 0 16px; font-size:17px; font-weight:800; }
.remit-row { display:flex; gap:10px; align-items:flex-end; margin-bottom:12px; flex-wrap:wrap; }
.remit-row label { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--muted); flex:1; min-width:110px; }
.remit-row input, .remit-row select {
  background:var(--bg-2); border:1px solid var(--card-line);
  color:var(--ink); border-radius:10px; padding:9px 12px;
  font-size:15px; font-weight:700; width:100%;
  outline:none; transition:border-color .15s;
}
.remit-row input:focus, .remit-row select:focus { border-color:var(--brand); }
.remit-result {
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; border-radius:12px; padding:14px 16px;
  text-align:center; margin-top:8px;
}
.remit-result .remit-amount { font-size:28px; font-weight:800; }
.remit-result .remit-rate { font-size:12px; opacity:.85; margin-top:4px; }
.remit-loading { text-align:center; padding:16px; color:var(--muted); font-size:13px; }

/* ── TRANSFER COMPARATOR ────────────────────────────────────── */
.trans-comp { margin-top:16px; }
.trans-comp h5 { margin:0 0 10px; font-size:14px; font-weight:700; color:var(--muted); }
.trans-row {
  display:flex; align-items:center; gap:10px;
  background:var(--bg-2); border-radius:10px; padding:10px 12px;
  margin-bottom:6px; cursor:pointer; transition:background .15s;
  text-decoration:none; color:var(--ink);
}
.trans-row:hover { background:var(--card-line); }
.trans-logo { width:28px; height:28px; border-radius:8px; font-size:16px; display:flex; align-items:center; justify-content:center; background:var(--card); flex-shrink:0; }
.trans-name { font-weight:700; font-size:14px; flex:1; }
.trans-fee { font-size:12px; color:var(--muted); }
.trans-amount { font-size:15px; font-weight:800; color:var(--brand); }
.trans-best { background:linear-gradient(135deg,rgba(26,86,219,.12),rgba(59,130,246,.08)); border:1px solid rgba(59,130,246,.3); }
.trans-badge { font-size:10px; background:var(--brand); color:#fff; border-radius:6px; padding:1px 6px; font-weight:700; }

/* ── RADIO PLAYER ───────────────────────────────────────────── */
.radio-bar {
  position:fixed; bottom:calc(var(--bn-h, 0px) + env(safe-area-inset-bottom, 0px));
  left:0; right:0; z-index:90;
  background:var(--card); border-top:1px solid var(--card-line);
  padding:8px 16px; display:flex; align-items:center; gap:12px;
  box-shadow:0 -4px 20px rgba(0,0,0,.12);
  transform:translateY(100%); transition:transform .3s;
}
.radio-bar.show { transform:translateY(0); }
@media (min-width:901px) { .radio-bar { max-width:680px; left:50%; transform:translateX(-50%) translateY(100%); right:auto; border-radius:16px 16px 0 0; } .radio-bar.show { transform:translateX(-50%) translateY(0); } }
.radio-station-info { flex:1; min-width:0; }
.radio-station-name { font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.radio-station-sub { font-size:11px; color:var(--muted); }
.radio-play-btn {
  width:38px; height:38px; border-radius:50%;
  background:var(--brand); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:opacity .15s;
}
.radio-play-btn:hover { opacity:.85; }
.radio-play-btn svg { width:18px; height:18px; }
.radio-close-btn {
  background:none; border:none; cursor:pointer; color:var(--muted);
  padding:4px; border-radius:6px;
}
.radio-stations-list { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.radio-station-chip {
  font-size:12px; font-weight:600; padding:5px 12px;
  border-radius:20px; border:1px solid var(--card-line);
  background:var(--bg-2); cursor:pointer; transition:all .15s;
  color:var(--ink);
}
.radio-station-chip.active { background:var(--brand); color:#fff; border-color:var(--brand); }

/* Radio trigger button in drawer */
.radio-trigger {
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; cursor:pointer;
  padding:10px 0; color:var(--ink); font-size:14px; text-align:left;
}

/* ── NEWS WIDGET (desktop right panel) ─────────────────────── */
.v300-news-widget { }
.v300-news-widget h5 { margin:0 0 10px; font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.v300-news-item {
  display:flex; gap:10px; align-items:flex-start;
  padding:8px 0; border-bottom:1px solid var(--card-line);
  cursor:pointer; text-decoration:none; color:var(--ink);
}
.v300-news-item:last-child { border-bottom:none; }
.v300-news-item:hover .v300-news-title { color:var(--brand); }
.v300-news-src { font-size:10px; font-weight:700; color:var(--brand); margin-bottom:3px; text-transform:uppercase; }
.v300-news-title { font-size:13px; font-weight:600; line-height:1.4; transition:color .15s; }
.v300-news-time { font-size:11px; color:var(--muted); margin-top:2px; }

/* ── SERVICES DIRECTORY ─────────────────────────────────────── */
.svc-section { padding:16px 0; }
.svc-section h3 { margin:0 0 16px; font-size:20px; font-weight:800; }

/* Medici */
.medici-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.medici-filter {
  font-size:13px; padding:6px 14px; border-radius:20px;
  border:1px solid var(--card-line); background:var(--bg-2);
  cursor:pointer; color:var(--ink); transition:all .15s;
}
.medici-filter.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.medici-search {
  width:100%; background:var(--bg-2); border:1px solid var(--card-line);
  border-radius:12px; padding:10px 14px; font-size:14px; color:var(--ink);
  margin-bottom:14px; outline:none; transition:border-color .15s;
}
.medici-search:focus { border-color:var(--brand); }
.medici-grid { display:flex; flex-direction:column; gap:10px; }
.medic-card {
  background:var(--card); border:1px solid var(--card-line);
  border-radius:14px; padding:14px 16px;
  display:flex; gap:14px; align-items:flex-start;
  transition:box-shadow .18s;
}
.medic-card:hover { box-shadow:var(--shadow-lg); }
.medic-av {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:#fff;
}
.medic-info { flex:1; min-width:0; }
.medic-name { font-size:15px; font-weight:700; margin-bottom:2px; }
.medic-spec { font-size:13px; color:var(--brand); font-weight:600; margin-bottom:3px; }
.medic-loc { font-size:12px; color:var(--muted); margin-bottom:6px; }
.medic-tags { display:flex; gap:5px; flex-wrap:wrap; }
.medic-tag { font-size:11px; background:var(--bg-2); border:1px solid var(--card-line); border-radius:8px; padding:2px 7px; color:var(--muted); }
.medic-contact { display:flex; gap:8px; margin-top:10px; }
.medic-contact a, .medic-contact button {
  font-size:12px; font-weight:600; padding:5px 12px;
  border-radius:8px; border:1px solid var(--card-line);
  background:var(--bg-2); color:var(--ink);
  cursor:pointer; text-decoration:none; transition:all .15s;
}
.medic-contact a:hover, .medic-contact button:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
.medic-contact .medic-primary { background:var(--brand); color:#fff; border-color:var(--brand); }

/* Ghid birocratic */
.ghid-accordion { display:flex; flex-direction:column; gap:8px; }
.ghid-item { background:var(--card); border:1px solid var(--card-line); border-radius:14px; overflow:hidden; }
.ghid-head {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  cursor:pointer; font-size:15px; font-weight:700;
  transition:background .15s; user-select:none;
}
.ghid-head:hover { background:var(--bg-2); }
.ghid-head .ghid-ico { font-size:20px; flex-shrink:0; }
.ghid-head .ghid-chevron { margin-left:auto; color:var(--muted); transition:transform .25s; }
.ghid-item.open .ghid-chevron { transform:rotate(180deg); }
.ghid-body { padding:0 16px; max-height:0; overflow:hidden; transition:max-height .3s, padding .3s; }
.ghid-item.open .ghid-body { padding:0 16px 16px; max-height:600px; }
.ghid-steps { counter-reset:step; }
.ghid-step {
  display:flex; gap:12px; align-items:flex-start;
  padding:10px 0; border-bottom:1px solid var(--card-line);
}
.ghid-step:last-child { border-bottom:none; }
.ghid-step-num {
  width:26px; height:26px; border-radius:50%;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; flex-shrink:0; margin-top:1px;
}
.ghid-step-text { font-size:13px; line-height:1.5; color:var(--ink); }
.ghid-step-text strong { font-weight:700; }
.ghid-link { font-size:13px; color:var(--brand); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:4px; margin-top:8px; }
.ghid-link:hover { text-decoration:underline; }

/* Clase română */
.clase-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.clasa-card {
  background:var(--card); border:1px solid var(--card-line);
  border-radius:14px; padding:16px; cursor:pointer;
  transition:transform .18s, box-shadow .18s;
}
.clasa-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.clasa-flag { font-size:28px; margin-bottom:8px; }
.clasa-name { font-size:15px; font-weight:700; margin-bottom:4px; }
.clasa-loc { font-size:13px; color:var(--muted); margin-bottom:4px; }
.clasa-type { font-size:12px; font-weight:600; color:var(--brand); margin-bottom:10px; }
.clasa-info { font-size:12px; color:var(--muted); line-height:1.5; }
.clasa-link { font-size:13px; color:var(--brand); text-decoration:none; font-weight:600; margin-top:10px; display:inline-block; }

/* Mentorship */
.mentor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.mentor-card {
  background:var(--card); border:1px solid var(--card-line);
  border-radius:16px; padding:18px; text-align:center;
  cursor:pointer; transition:transform .18s, box-shadow .18s;
}
.mentor-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.mentor-av {
  width:60px; height:60px; border-radius:50%; margin:0 auto 10px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; color:#fff;
}
.mentor-name { font-size:15px; font-weight:700; margin-bottom:3px; }
.mentor-country { font-size:13px; color:var(--brand); font-weight:600; margin-bottom:5px; }
.mentor-years { font-size:12px; color:var(--muted); margin-bottom:6px; }
.mentor-domain { font-size:12px; background:var(--bg-2); border-radius:8px; padding:3px 8px; display:inline-block; margin-bottom:10px; }
.mentor-btn {
  width:100%; background:var(--brand); color:#fff; border:none;
  border-radius:10px; padding:8px; font-size:13px; font-weight:700;
  cursor:pointer; transition:opacity .15s;
}
.mentor-btn:hover { opacity:.85; }

/* Harta comunitate */
.harta-countries { display:flex; flex-direction:column; gap:8px; }
.harta-country {
  background:var(--card); border:1px solid var(--card-line);
  border-radius:14px; overflow:hidden;
}
.harta-country-head {
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  cursor:pointer; transition:background .15s;
}
.harta-country-head:hover { background:var(--bg-2); }
.harta-flag { font-size:24px; }
.harta-cname { font-size:15px; font-weight:700; flex:1; }
.harta-count { font-size:13px; color:var(--muted); }
.harta-chevron { color:var(--muted); transition:transform .25s; }
.harta-country.open .harta-chevron { transform:rotate(180deg); }
.harta-body { padding:0 16px; max-height:0; overflow:hidden; transition:max-height .3s, padding .3s; }
.harta-country.open .harta-body { padding:0 16px 16px; max-height:600px; }
.harta-cat { margin-bottom:10px; }
.harta-cat-title { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--muted); margin-bottom:5px; letter-spacing:.06em; }
.harta-items { display:flex; flex-direction:column; gap:4px; }
.harta-item { font-size:13px; padding:6px 0; border-bottom:1px solid var(--card-line); display:flex; align-items:center; gap:8px; }
.harta-item:last-child { border-bottom:none; }
.harta-item a { color:var(--brand); text-decoration:none; font-size:12px; margin-left:auto; }

/* ── LIGA DIASPORA ──────────────────────────────────────────── */
.liga-widget { background:var(--card); border:1px solid var(--card-line); border-radius:18px; padding:18px; margin-bottom:18px; }
.liga-widget h4 { margin:0 0 14px; font-size:17px; font-weight:800; display:flex; align-items:center; gap:8px; }
.liga-match {
  background:var(--bg-2); border-radius:12px; padding:14px;
  margin-bottom:10px;
}
.liga-match-teams { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.liga-team { text-align:center; flex:1; }
.liga-team-flag { font-size:28px; margin-bottom:4px; }
.liga-team-name { font-size:12px; font-weight:700; }
.liga-vs { font-size:16px; font-weight:800; color:var(--muted); padding:0 12px; }
.liga-match-date { font-size:11px; color:var(--muted); text-align:center; margin-bottom:10px; }
.liga-votes { display:flex; gap:6px; }
.liga-vote {
  flex:1; padding:8px; border-radius:10px; border:1px solid var(--card-line);
  background:none; cursor:pointer; font-size:13px; font-weight:600;
  color:var(--ink); transition:all .18s; text-align:center;
}
.liga-vote:hover { border-color:var(--brand); color:var(--brand); }
.liga-vote.voted { background:var(--brand); color:#fff; border-color:var(--brand); }
.liga-vote.voted-other { background:var(--bg-2); color:var(--muted); }
.liga-bar { height:4px; border-radius:4px; background:var(--card-line); margin-top:8px; overflow:hidden; }
.liga-bar-fill { height:100%; background:var(--brand); border-radius:4px; transition:width .5s; }
.liga-pct { font-size:11px; color:var(--muted); text-align:center; margin-top:4px; }

/* ── EXPLORE ENHANCED ───────────────────────────────────────── */
.expl-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.expl-tab {
  font-size:13px; font-weight:600; padding:6px 14px;
  border-radius:20px; border:1px solid var(--card-line);
  background:var(--bg-2); cursor:pointer; color:var(--ink); transition:all .15s;
}
.expl-tab.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.expl-people-list { display:flex; flex-direction:column; gap:8px; }
.expl-person {
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--card-line);
  border-radius:12px; padding:10px 14px; cursor:pointer;
  transition:box-shadow .15s;
}
.expl-person:hover { box-shadow:var(--shadow); }
.expl-person .info { flex:1; min-width:0; }
.expl-person .nm { font-size:14px; font-weight:700; }
.expl-person .sub { font-size:12px; color:var(--muted); }
.expl-follow-btn {
  font-size:12px; font-weight:700; padding:5px 14px;
  border-radius:20px; background:var(--brand); color:#fff;
  border:none; cursor:pointer; flex-shrink:0; transition:opacity .15s;
}
.expl-follow-btn:hover { opacity:.85; }
.expl-follow-btn.following { background:var(--bg-2); color:var(--ink); border:1px solid var(--card-line); }
.expl-tags { display:flex; flex-wrap:wrap; gap:8px; }
.expl-tag {
  display:flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--card-line);
  border-radius:12px; padding:8px 14px; cursor:pointer;
  transition:box-shadow .15s; text-decoration:none; color:var(--ink);
}
.expl-tag:hover { box-shadow:var(--shadow); }
.expl-tag .tag-name { font-size:14px; font-weight:700; }
.expl-tag .tag-count { font-size:12px; color:var(--muted); }

/* ── SEARCH ENHANCED ────────────────────────────────────────── */
.search-categories { display:flex; gap:6px; margin:10px 0 14px; flex-wrap:wrap; }
.search-cat {
  font-size:13px; font-weight:600; padding:5px 12px;
  border-radius:16px; border:1px solid var(--card-line);
  background:var(--bg-2); cursor:pointer; color:var(--ink); transition:all .15s;
}
.search-cat.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.search-result-user {
  display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--card-line); cursor:pointer;
}
.search-result-user:hover .nm { color:var(--brand); }
.search-result-user .nm { font-size:14px; font-weight:700; transition:color .15s; }
.search-result-user .sub { font-size:12px; color:var(--muted); }
.search-recent { margin-bottom:16px; }
.search-recent-title { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.search-recent-tags { display:flex; flex-wrap:wrap; gap:6px; }
.search-recent-tag {
  font-size:13px; background:var(--bg-2); border:1px solid var(--card-line);
  border-radius:20px; padding:4px 12px; cursor:pointer; color:var(--ink);
  transition:all .15s;
}
.search-recent-tag:hover { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ── POLLS IN FEED ──────────────────────────────────────────── */
.poll-widget {
  background:var(--card); border:1px solid var(--card-line);
  border-radius:16px; padding:16px; margin:12px 0;
}
.poll-question { font-size:16px; font-weight:700; margin-bottom:14px; }
.poll-opts { display:flex; flex-direction:column; gap:8px; }
.poll-opt {
  position:relative; border-radius:10px; overflow:hidden;
  border:1px solid var(--card-line); cursor:pointer;
  transition:border-color .15s;
}
.poll-opt:hover { border-color:var(--brand); }
.poll-opt.voted { border-color:var(--brand); cursor:default; }
.poll-opt-bar {
  position:absolute; left:0; top:0; bottom:0;
  background:rgba(26,86,219,.12); transition:width .5s;
}
.poll-opt-label {
  position:relative; padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px; font-weight:600;
}
.poll-opt-pct { font-size:13px; color:var(--muted); font-weight:700; }
.poll-opt.winner .poll-opt-bar { background:rgba(26,86,219,.22); }
.poll-opt.winner .poll-opt-label { color:var(--brand); }
.poll-meta { font-size:12px; color:var(--muted); margin-top:10px; display:flex; gap:10px; }
.poll-create-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--card-line);
  border-radius:10px; padding:7px 14px; font-size:13px; font-weight:600;
  cursor:pointer; color:var(--muted); transition:all .15s;
}
.poll-create-btn:hover { border-color:var(--brand); color:var(--brand); }

/* ── EXPLORE: Posts grid ─────────────────────────────────────── */
.posts-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
  border-radius:10px; overflow:hidden;
}
.posts-grid .cell {
  aspect-ratio:1; background:var(--bg-2); overflow:hidden;
  cursor:pointer; position:relative;
}
.posts-grid .cell img, .posts-grid .cell video {
  width:100%; height:100%; object-fit:cover;
  transition:transform .3s;
}
.posts-grid .cell:hover img, .posts-grid .cell:hover video { transform:scale(1.05); }
.posts-grid .cell.text {
  display:flex; align-items:center; justify-content:center;
  padding:8px; font-size:12px; font-weight:600; text-align:center; color:var(--ink);
}
.posts-grid .cell .badge-k {
  position:absolute; top:6px; right:6px; background:rgba(0,0,0,.5);
  color:#fff; border-radius:4px; padding:1px 4px; font-size:10px;
}
.set-section { margin-bottom:20px; }


/* ================================================================
   diaspora.ro HUB — LIGHT MODE PERMANENT (dark mode eliminat)
   v300 theme fix -> acum garanteaza intotdeauna light mode curat.
   ================================================================ */

/* Variabile light mode - aplicate intotdeauna */
:root,
html {
  --bg:        #f0f2f5;
  --bg-2:      #e4e6eb;
  --card:      #ffffff;
  --card-line: #e4e6eb;
  --line:      #e4e6eb;
  --ink:       #050505;
  --muted:     #65676b;
  --shadow:    0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
}

/* Fundal pagina - intotdeauna light */
body {
  background: var(--bg, #f0f2f5);
  color: var(--ink, #050505);
}

/* Carduri postari - intotdeauna albe */
.post, .composer-inline, .hub-card, .notif-panel, #modalWrap, .modal-wrap {
  background: #ffffff;
  border-color: #e4e6eb;
  color: #050505;
}

/* Text postari - intotdeauna negru */
.post-text { color: #050505; }
.post-h .name { color: #0f172a; }
.post-h .meta { color: #65676b; }
.cm .body .tx { color: #0f172a; }

/* Header si subbar - intotdeauna albe */
header.tb { background: rgba(255,255,255,.97); border-bottom-color: rgba(0,0,0,.08); }
nav.sb { background: rgba(255,255,255,.97); border-color: rgba(0,0,0,.08); }

/* Sidebar desktop */
#sdw, .sdw { background: #ffffff; border-right-color: #e4e6eb; }
.sdw-item { color: #050505; }
.sdw-item:hover { background: #e4e6eb; }

/* Input-uri - intotdeauna pe fond alb */
input:not([type=range]):not([type=checkbox]):not([type=radio]),
textarea, select {
  background: #ffffff;
  border-color: #e4e6eb;
  color: #050505;
}

@media (min-width: 900px) {
  body { background: #f0f2f5; }
}


/* === hub-composer.css === */
/* ================================================================
   diaspora.ro HUB — Composer PRO v297
   Fereastra de postare profesională: grammar AI, voice-to-text,
   media drag&drop, emoji, sondaj, vizibilitate, mood
   Mobile-first, dark/light mode, brand tricolor
   ================================================================ */

/* ── Overlay full-screen ── */
.dcp-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.72);
  display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: dcpFadeIn .2s ease;
}
@media (min-width: 640px) { .dcp-overlay { align-items: center; } }
@keyframes dcpFadeIn { from { opacity:0 } to { opacity:1 } }

/* ── Modal container ── */
.dcp-modal {
  background: var(--card, #15171f);
  border: 1px solid var(--card-line, #1e2133);
  border-radius: 22px 22px 0 0;
  width: 100%; max-width: 620px;
  max-height: 95dvh; overflow-y: auto;
  padding: 0;
  box-shadow: 0 -8px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  animation: dcpSlideUp .28s cubic-bezier(.32,0,.15,1);
  display: flex; flex-direction: column;
  scrollbar-width: thin;
}
@media (min-width: 640px) {
  .dcp-modal { border-radius: 20px; max-height: 88dvh; animation: dcpPop .24s cubic-bezier(.32,0,.15,1); }
}
[data-theme="light"] .dcp-modal { background:#fff; border-color:#e8e4fd; box-shadow:0 8px 40px rgba(99,102,241,.12); }
@keyframes dcpSlideUp { from { transform:translateY(60px); opacity:0 } to { transform:translateY(0); opacity:1 } }
@keyframes dcpPop     { from { transform:scale(.94) translateY(10px); opacity:0 } to { transform:scale(1) translateY(0); opacity:1 } }

/* ── Header ── */
.dcp-header {
  display: flex; align-items: center; gap:10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--card-line, #1e2133);
  position: sticky; top:0; background: inherit; z-index:2;
  border-radius: 22px 22px 0 0;
}
[data-theme="light"] .dcp-header { border-bottom-color:#e8e4fd; }
.dcp-header h2 { flex:1; font-size:16px; font-weight:800; color:var(--ink,#f0f4ff); margin:0; letter-spacing:-.3px; }
[data-theme="light"] .dcp-header h2 { color:#0f0e17; }
.dcp-close {
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:var(--bg-2,#1a1d2e); color:var(--muted,#7885aa);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, color .15s;
}
.dcp-close:hover { background:rgba(239,68,68,.15); color:#ef4444; }
[data-theme="light"] .dcp-close { background:#e7ecf5; color:#6366f1; }

/* ── Tabs (Text / Foto / Video / Reel / Link) ── */
.dcp-tabs {
  display: flex; gap:5px; padding:12px 18px 8px;
  overflow-x: auto; scrollbar-width: none;
}
.dcp-tabs::-webkit-scrollbar { display:none; }
.dcp-tab {
  display: flex; align-items: center; gap:5px;
  padding: 6px 13px; border-radius: 20px; border: 1px solid transparent;
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--bg-2, #1a1d2e); color: var(--muted, #7885aa);
  white-space: nowrap; transition: all .17s ease;
  flex-shrink: 0;
}
.dcp-tab svg { width:14px; height:14px; }
.dcp-tab:hover { background:rgba(99,102,241,.12); color:var(--ink,#f0f4ff); }
.dcp-tab.active {
  background: linear-gradient(135deg,#6366f1,#60a5fa);
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 12px rgba(99,102,241,.35);
}
[data-theme="light"] .dcp-tab { background:#e7ecf5; color:#6366f1; }
[data-theme="light"] .dcp-tab.active { background:linear-gradient(135deg,#6366f1,#60a5fa); color:#fff; }

/* ── Body (scroll area) ── */
.dcp-body { padding: 10px 18px 14px; flex:1; }

/* ── User row (avatar + name) ── */
.dcp-user-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.dcp-av {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg,#6366f1,#60a5fa);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; color:#fff; overflow:hidden;
}
.dcp-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.dcp-user-info { flex:1; }
.dcp-user-name { font-size:14px; font-weight:700; color:var(--ink,#f0f4ff); line-height:1.2; }
[data-theme="light"] .dcp-user-name { color:#0f0e17; }
.dcp-visibility-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:20px; border:1px solid var(--card-line,#1e2133);
  font-size:11px; font-weight:600; color:var(--muted,#7885aa); cursor:pointer;
  background:var(--bg-2,#1a1d2e); transition: border-color .15s, color .15s;
  margin-top:3px;
}
.dcp-visibility-btn:hover { border-color:#6366f1; color:#6366f1; }
.dcp-visibility-btn svg { width:11px; height:11px; }

/* ── Textarea ── */
.dcp-textarea {
  width:100%; min-height:100px; max-height:220px; resize:none;
  background:transparent; border:none; outline:none;
  font-size:16px; line-height:1.6; color:var(--ink,#f0f4ff);
  font-family: inherit; padding:0; box-sizing:border-box;
  scrollbar-width: thin;
}
[data-theme="light"] .dcp-textarea { color:#0f0e17; }
.dcp-textarea::placeholder { color:var(--muted,#7885aa); }

/* ── Char counter ── */
.dcp-char-bar {
  display:flex; align-items:center; gap:8px; margin-top:6px; margin-bottom:10px;
}
.dcp-char-ring {
  width:26px; height:26px; flex-shrink:0;
  transform: rotate(-90deg);
}
.dcp-char-ring circle { fill:none; stroke-width:3; stroke-linecap:round; }
.dcp-char-ring .track { stroke:var(--bg-2,#1e2133); }
.dcp-char-ring .prog  { stroke:#6366f1; transition:stroke-dashoffset .2s, stroke .2s; }
.dcp-char-count { font-size:12px; color:var(--muted,#7885aa); }
.dcp-char-count.warn { color:#f59e0b; }
.dcp-char-count.over { color:#ef4444; }

/* ── Separator ── */
.dcp-sep { border:none; border-top:1px solid var(--card-line,#1e2133); margin:10px 0; }
[data-theme="light"] .dcp-sep { border-top-color:#e8e4fd; }

/* ── Toolbar ── */
.dcp-toolbar {
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:6px 0;
}
.dcp-tool {
  width:38px; height:38px; border-radius:10px; border:none; cursor:pointer;
  background:transparent; color:var(--muted,#7885aa);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, color .15s, transform .1s;
  position:relative;
}
.dcp-tool svg { width:20px; height:20px; }
.dcp-tool:hover { background:var(--bg-2,#1a1d2e); color:var(--ink,#f0f4ff); transform:scale(1.08); }
.dcp-tool.active { background:rgba(99,102,241,.18); color:#6366f1; }
[data-theme="light"] .dcp-tool:hover { background:#e7ecf5; color:#6366f1; }

/* Tool tooltip */
.dcp-tool::after {
  content: attr(data-tip);
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:#0f0e17; color:#fff; font-size:11px; font-weight:600;
  padding:4px 8px; border-radius:7px; white-space:nowrap;
  pointer-events:none; opacity:0; transition: opacity .15s;
}
.dcp-tool:hover::after { opacity:1; }

/* Grammar button — special styling */
.dcp-tool-grammar {
  padding: 0 12px; width:auto; border-radius:20px;
  background: linear-gradient(135deg,rgba(99,102,241,.15),rgba(59,130,246,.15));
  border: 1px solid rgba(99,102,241,.3);
  color: #60a5fa; font-size:12px; font-weight:700; gap:5px;
  font-family: inherit;
}
.dcp-tool-grammar:hover {
  background: linear-gradient(135deg,#6366f1,#60a5fa);
  color:#fff; border-color:transparent;
  box-shadow: 0 2px 12px rgba(99,102,241,.4);
  transform: scale(1.03);
}
.dcp-tool-grammar.loading {
  opacity:.7; pointer-events:none; cursor:default;
}

/* Voice record button — special */
.dcp-tool-voice {
  padding: 0 12px; width:auto; border-radius:20px;
  background: linear-gradient(135deg,rgba(239,68,68,.12),rgba(244,114,182,.12));
  border: 1px solid rgba(239,68,68,.25);
  color: #f43f5e; font-size:12px; font-weight:700; gap:5px;
  font-family: inherit;
}
.dcp-tool-voice:hover {
  background: linear-gradient(135deg,#ef4444,#f43f5e);
  color:#fff; border-color:transparent;
  box-shadow: 0 2px 12px rgba(239,68,68,.4);
  transform: scale(1.03);
}
.dcp-tool-voice.recording {
  background: linear-gradient(135deg,#ef4444,#f43f5e);
  color:#fff; border-color:transparent;
  animation: dcpPulse 1s ease-in-out infinite;
}
@keyframes dcpPulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)} 50%{box-shadow:0 0 0 8px rgba(239,68,68,0)} }

/* ── Grammar panel ── */
.dcp-grammar-panel {
  background: var(--bg-2, #1a1d2e);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 14px; padding: 14px;
  margin-top: 10px; animation: dcpFadeIn .2s ease;
}
[data-theme="light"] .dcp-grammar-panel { background:#e7ecf5; border-color:rgba(99,102,241,.2); }
.dcp-grammar-title {
  font-size:12px; font-weight:700; color:#60a5fa;
  margin:0 0 10px; text-transform:uppercase; letter-spacing:.06em;
  display:flex; align-items:center; gap:6px;
}
.dcp-grammar-title svg { width:14px; height:14px; }
.dcp-variant {
  padding: 10px 14px; border-radius: 10px; margin-bottom:6px;
  background: var(--card, #15171f);
  border: 1.5px solid var(--card-line, #1e2133);
  cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
  font-size:14px; line-height:1.55; color:var(--ink,#f0f4ff);
  position:relative;
}
[data-theme="light"] .dcp-variant { background:#fff; border-color:#ddd6fe; color:#0f0e17; }
.dcp-variant:hover { border-color:#6366f1; transform:translateX(3px); }
.dcp-variant.selected { border-color:#6366f1; background:rgba(99,102,241,.08); }
[data-theme="light"] .dcp-variant.selected { background:rgba(99,102,241,.06); }
.dcp-variant-badge {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 7px; border-radius:20px; background:rgba(99,102,241,.18); color:#60a5fa;
  display:inline-block; margin-bottom:5px;
}
.dcp-variant:hover .dcp-variant-badge { background:#6366f1; color:#fff; }
.dcp-variant.selected .dcp-variant-badge { background:#6366f1; color:#fff; }
.dcp-grammar-tip {
  font-size:11px; color:var(--muted,#7885aa); margin-top:8px; text-align:center;
}

/* ── Voice recording panel ── */
.dcp-voice-panel {
  background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(244,114,182,.08));
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 14px; padding: 16px; margin-top:10px;
  text-align:center; animation: dcpFadeIn .2s ease;
}
.dcp-voice-status { font-size:14px; font-weight:700; color:var(--ink,#f0f4ff); margin-bottom:8px; }
[data-theme="light"] .dcp-voice-status { color:#0f0e17; }
.dcp-voice-timer { font-size:28px; font-weight:800; color:#f43f5e; font-variant-numeric:tabular-nums; margin-bottom:12px; }
.dcp-voice-wave {
  display:flex; align-items:center; justify-content:center; gap:3px; height:36px; margin-bottom:12px;
}
.dcp-voice-bar {
  width:3px; border-radius:3px; background:#f43f5e;
  animation: dcpWaveBar .8s ease-in-out infinite;
}
.dcp-voice-bar:nth-child(1){ height:12px; animation-delay:0s; }
.dcp-voice-bar:nth-child(2){ height:24px; animation-delay:.12s; }
.dcp-voice-bar:nth-child(3){ height:32px; animation-delay:.24s; }
.dcp-voice-bar:nth-child(4){ height:20px; animation-delay:.36s; }
.dcp-voice-bar:nth-child(5){ height:28px; animation-delay:.48s; }
.dcp-voice-bar:nth-child(6){ height:16px; animation-delay:.6s; }
.dcp-voice-bar:nth-child(7){ height:22px; animation-delay:.72s; }
@keyframes dcpWaveBar { 0%,100%{transform:scaleY(.4);opacity:.5} 50%{transform:scaleY(1);opacity:1} }
.dcp-voice-btns { display:flex; gap:8px; justify-content:center; }
.dcp-voice-stop {
  padding:9px 20px; border-radius:20px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#ef4444,#f43f5e); color:#fff;
  font-weight:700; font-size:14px; font-family:inherit;
  transition: opacity .15s, transform .1s;
}
.dcp-voice-stop:hover { opacity:.88; transform:scale(1.04); }
.dcp-voice-cancel {
  padding:9px 20px; border-radius:20px; cursor:pointer;
  background:var(--bg-2,#1a1d2e); color:var(--muted,#7885aa);
  border:1px solid var(--card-line,#1e2133); font-weight:600; font-size:13px; font-family:inherit;
  transition: background .15s;
}
.dcp-voice-cancel:hover { background:rgba(239,68,68,.12); color:#ef4444; }
.dcp-voice-loading { font-size:13px; color:var(--muted,#7885aa); margin-top:8px; }

/* ── Media grid ── */
.dcp-media-grid {
  display:grid; gap:6px; margin-top:12px;
  grid-template-columns: repeat(auto-fill, minmax(90px,1fr));
}
.dcp-media-cell {
  aspect-ratio:1; border-radius:10px; overflow:hidden;
  position:relative; background:var(--bg-2,#1a1d2e);
  cursor:pointer; transition:transform .15s;
}
.dcp-media-cell:hover { transform:scale(.97); }
.dcp-media-cell img, .dcp-media-cell video {
  width:100%; height:100%; object-fit:cover; display:block;
}
.dcp-media-cell .dcp-rm {
  position:absolute; top:4px; right:4px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.7); color:#fff; border:none; cursor:pointer;
  font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center;
  font-weight:700; transition:background .15s;
}
.dcp-media-cell .dcp-rm:hover { background:#ef4444; }
.dcp-add-media {
  aspect-ratio:1; border-radius:10px;
  border:2px dashed var(--card-line,#1e2133); background:var(--bg-2,#1a1d2e);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; cursor:pointer; font-size:11px; color:var(--muted,#7885aa);
  transition: border-color .15s, color .15s;
}
.dcp-add-media:hover { border-color:#6366f1; color:#6366f1; }
.dcp-add-media svg { width:24px; height:24px; }

/* ── Drag over state ── */
.dcp-body.drag-over {
  background: rgba(99,102,241,.06);
  border:2px dashed #6366f1; border-radius:12px;
}

/* ── Link preview card ── */
.dcp-link-row { margin-top:10px; display:flex; gap:8px; }
.dcp-link-input {
  flex:1; padding:10px 14px; border-radius:10px;
  background:var(--bg-2,#1a1d2e); border:1px solid var(--card-line,#1e2133);
  color:var(--ink,#f0f4ff); font-size:14px; font-family:inherit; outline:none;
  transition: border-color .15s;
}
.dcp-link-input:focus { border-color:#6366f1; }
[data-theme="light"] .dcp-link-input { background:#e7ecf5; border-color:#ddd6fe; color:#0f0e17; }
.dcp-link-prev { margin-top:8px; border-radius:12px; overflow:hidden; border:1px solid var(--card-line,#1e2133); }

/* ── Emoji grid (inline simple picker) ── */
.dcp-emoji-panel {
  display:flex; flex-wrap:wrap; gap:4px;
  padding:10px; background:var(--bg-2,#1a1d2e);
  border-radius:12px; margin-top:8px;
  max-height:140px; overflow-y:auto;
  animation: dcpFadeIn .15s ease;
}
.dcp-emoji-panel button {
  font-size:22px; background:none; border:none; cursor:pointer;
  padding:3px; border-radius:6px; line-height:1;
  transition: background .12s, transform .1s;
}
.dcp-emoji-panel button:hover { background:var(--card,#15171f); transform:scale(1.2); }

/* ── Footer ── */
.dcp-footer {
  display:flex; align-items:center; gap:8px;
  padding:12px 18px 16px;
  border-top:1px solid var(--card-line,#1e2133);
  position:sticky; bottom:0; background:inherit; z-index:2;
}
[data-theme="light"] .dcp-footer { border-top-color:#e8e4fd; }
.dcp-mood-badge {
  display:flex; align-items:center; gap:4px;
  padding:6px 12px; border-radius:20px;
  background:var(--bg-2,#1a1d2e); border:1px solid var(--card-line,#1e2133);
  font-size:12px; color:var(--muted,#7885aa); cursor:pointer;
  transition: border-color .15s; flex-shrink:0;
}
.dcp-mood-badge:hover { border-color:#6366f1; color:#6366f1; }
.dcp-btn-post {
  flex:1; padding:11px 0; border-radius:24px; border:none; cursor:pointer;
  background: linear-gradient(135deg,#3b82f6,#6366f1,#60a5fa);
  color:#fff; font-weight:800; font-size:15px; font-family:inherit;
  transition: opacity .15s, transform .12s, box-shadow .15s;
  box-shadow: 0 4px 16px rgba(99,102,241,.35);
}
.dcp-btn-post:hover { opacity:.9; transform:scale(1.02); box-shadow:0 6px 20px rgba(99,102,241,.45); }
.dcp-btn-post:active { transform:scale(.98); }
.dcp-btn-post:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.dcp-btn-post.loading::after { content:' …'; }

/* ── Loader spinner inline ── */
.dcp-spinner {
  width:16px; height:16px; border:2.5px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%;
  animation: dcpSpin .7s linear infinite; display:inline-block; vertical-align:middle;
}
@keyframes dcpSpin { to { transform:rotate(360deg); } }

/* ── Mood panel ── */
.dcp-mood-panel {
  display:flex; flex-wrap:wrap; gap:6px; padding:10px;
  background:var(--bg-2,#1a1d2e); border-radius:12px; margin:8px 0;
  animation: dcpFadeIn .15s ease;
}
.dcp-mood-opt {
  padding:5px 11px; border-radius:20px; border:1px solid var(--card-line,#1e2133);
  background:var(--card,#15171f); color:var(--muted,#7885aa);
  cursor:pointer; font-size:13px; font-family:inherit; transition:all .15s;
}
.dcp-mood-opt:hover, .dcp-mood-opt.selected { background:#6366f1; color:#fff; border-color:#6366f1; }

/* ── Visibility dropdown ── */
.dcp-vis-panel {
  position:absolute; top:calc(100% + 4px); left:0;
  background:var(--card,#15171f); border:1px solid var(--card-line,#1e2133);
  border-radius:12px; padding:6px; z-index:10; min-width:160px;
  box-shadow:0 8px 24px rgba(0,0,0,.4); animation: dcpFadeIn .15s ease;
}
[data-theme="light"] .dcp-vis-panel { background:#fff; border-color:#ddd6fe; }
.dcp-vis-opt {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:8px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--muted,#7885aa);
  transition: background .12s, color .12s;
}
.dcp-vis-opt:hover, .dcp-vis-opt.active { background:rgba(99,102,241,.12); color:#6366f1; }
.dcp-vis-opt svg { width:15px; height:15px; flex-shrink:0; }

/* ── Voice transcribed result ── */
.dcp-transcribed {
  background:rgba(99,102,241,.07); border:1px solid rgba(99,102,241,.2);
  border-radius:12px; padding:12px 14px; margin-top:10px;
  font-size:14px; color:var(--ink,#f0f4ff); line-height:1.55;
  animation: dcpFadeIn .2s ease;
}
[data-theme="light"] .dcp-transcribed { color:#0f0e17; }
.dcp-transcribed-label {
  font-size:11px; font-weight:700; color:#60a5fa; text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:6px;
}

/* ── Upload progress ── */
.dcp-upload-progress {
  height:3px; border-radius:3px; background:var(--bg-2,#1a1d2e); margin:8px 0; overflow:hidden;
}
.dcp-upload-bar {
  height:100%; background:linear-gradient(90deg,#6366f1,#60a5fa);
  border-radius:3px; transition:width .3s ease;
  animation: dcpShimmer 1.5s ease-in-out infinite;
}
@keyframes dcpShimmer {
  0%{background-position:200%} 100%{background-position:-200%}
}


/* ================================================================
   diaspora.ro HUB v316 — Facebook Mobile Style
   TEMA ALBA FORTATA. ADD-ONLY. Functii noi x10.
   ================================================================ */

/* ── ANTI-FLASH: ascunde .tb si .sb IMEDIAT pe mobile ───────── */
@media (max-width: 960px) {
  html[data-mobile-pre="1"] header.tb,
  html[data-mobile-pre="1"] nav.sb,
  html[data-mobile-pre="1"] .tb,
  html[data-mobile-pre="1"] .sb {
    display: none;
  }
  html[data-mobile-pre="1"] body {
    padding-top: 58px;
  }
}

/* ── TEMA ALBA FORTATA pe HUB ───────────────────────────────── */
:root {
  --fb-blue: #1877f2;
  --fb-bg:   #f0f2f5;
  --fb-card: #ffffff;
  --fb-ink:  #050505;
  --fb-muted: #65676b;
  --fb-border: #ced0d4;
  --fb-green: #42b72a;
  --fb-r: 8px;
}

/* ── SECTIUNE WIDGETURI HUB (injectate de JS) ────────────────── */

/* --- Feature Strip (bara actiuni rapide) --- */
.v316-feature-strip {
  background: var(--fb-card);
  border-bottom: 8px solid var(--fb-bg);
  padding: 10px 0 14px;
  overflow: hidden;
}
.v316-strip-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fb-ink);
  padding: 0 16px 10px;
}
.v316-strip-scroll {
  display: flex;
  gap: 8px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.v316-strip-scroll::-webkit-scrollbar { display: none; }
.v316-feat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 68px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--fb-ink);
  padding: 6px 4px;
  border-radius: 10px;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.v316-feat-btn:active { background: var(--fb-bg); }
.v316-feat-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.v316-feat-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--fb-muted);
  text-align: center;
  line-height: 1.2;
  max-width: 68px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Widget generic --- */
.v316-widget {
  background: var(--fb-card);
  border-bottom: 8px solid var(--fb-bg);
  padding: 14px 16px;
}
.v316-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.v316-widget-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fb-ink);
}
.v316-widget-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--fb-blue);
  text-decoration: none;
  background: rgba(24,119,242,.08);
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

/* --- Birthday widget --- */
.v316-bday-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #fff3cd, #ffe0b2);
  border: 1px solid #ffd180;
  border-radius: 10px;
  padding: 14px;
}
.v316-bday-ico {
  font-size: 36px;
  flex-shrink: 0;
}
.v316-bday-text {
  flex: 1;
  min-width: 0;
}
.v316-bday-name {
  font-size: 15px;
  font-weight: 700;
  color: #5d4037;
  margin-bottom: 3px;
}
.v316-bday-sub {
  font-size: 13px;
  color: #795548;
}
.v316-bday-btn {
  background: var(--fb-blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* --- People You May Know --- */
.v316-people-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.v316-people-scroll::-webkit-scrollbar { display: none; }
.v316-person-card {
  flex: 0 0 140px;
  background: var(--fb-card);
  border: 1px solid var(--fb-border);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
}
.v316-person-cover {
  height: 60px;
  width: 100%;
  object-fit: cover;
}
.v316-person-av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: -26px auto 6px;
  border: 3px solid var(--fb-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  position: relative;
}
.v316-person-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fb-ink);
  padding: 0 8px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v316-person-mut {
  font-size: 11px;
  color: var(--fb-muted);
  padding: 0 8px 8px;
}
.v316-person-add {
  display: block;
  margin: 0 8px 10px;
  background: rgba(24,119,242,.1);
  color: var(--fb-blue);
  border: none;
  border-radius: 8px;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  width: calc(100% - 16px);
}
.v316-person-add:active { background: rgba(24,119,242,.2); }
.v316-person-del {
  display: block;
  margin: 0 8px 10px;
  background: var(--fb-bg);
  color: var(--fb-muted);
  border: none;
  border-radius: 8px;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  width: calc(100% - 16px);
}

/* --- Events widget --- */
.v316-event-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--fb-bg);
  text-decoration: none;
  cursor: pointer;
}
.v316-event-card:last-child { border-bottom: 0; }
.v316-event-date {
  flex: 0 0 48px;
  text-align: center;
  background: var(--fb-bg);
  border-radius: 10px;
  padding: 6px 4px;
}
.v316-event-month {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fb-blue);
}
.v316-event-day {
  font-size: 22px;
  font-weight: 800;
  color: var(--fb-ink);
  line-height: 1.1;
}
.v316-event-info { flex: 1; min-width: 0; }
.v316-event-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fb-ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v316-event-loc {
  font-size: 12px;
  color: var(--fb-muted);
  margin-bottom: 4px;
}
.v316-event-going {
  font-size: 12px;
  color: var(--fb-blue);
  font-weight: 600;
}
.v316-event-rsvp {
  flex-shrink: 0;
  background: rgba(24,119,242,.1);
  color: var(--fb-blue);
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  align-self: center;
  white-space: nowrap;
}
.v316-event-rsvp.going {
  background: var(--fb-blue);
  color: #fff;
}

/* --- Groups widget --- */
.v316-group-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--fb-bg);
}
.v316-group-card:last-child { border-bottom: 0; }
.v316-group-av {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.v316-group-info { flex: 1; min-width: 0; }
.v316-group-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fb-ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v316-group-meta {
  font-size: 12px;
  color: var(--fb-muted);
}
.v316-group-join {
  flex-shrink: 0;
  background: rgba(24,119,242,.1);
  color: var(--fb-blue);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.v316-group-join:active { background: var(--fb-blue); color: #fff; }
.v316-group-join.joined { background: var(--fb-bg); color: var(--fb-muted); }

/* --- Marketplace/Anunturi widget --- */
.v316-mkt-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.v316-mkt-scroll::-webkit-scrollbar { display: none; }
.v316-mkt-item {
  flex: 0 0 140px;
  text-decoration: none;
  color: var(--fb-ink);
  border: 1px solid var(--fb-border);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .15s;
}
.v316-mkt-item:active { box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.v316-mkt-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  background: var(--fb-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.v316-mkt-body { padding: 8px; }
.v316-mkt-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--fb-ink);
  margin-bottom: 2px;
}
.v316-mkt-name {
  font-size: 12px;
  color: var(--fb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v316-mkt-loc {
  font-size: 11px;
  color: var(--fb-muted);
  margin-top: 2px;
}

/* --- Jobs widget --- */
.v316-job-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--fb-bg);
  text-decoration: none;
  cursor: pointer;
}
.v316-job-card:last-child { border-bottom: 0; }
.v316-job-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--fb-bg);
  border: 1px solid var(--fb-border);
}
.v316-job-info { flex: 1; min-width: 0; }
.v316-job-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fb-ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v316-job-company {
  font-size: 12px;
  color: var(--fb-muted);
  margin-bottom: 2px;
}
.v316-job-meta {
  font-size: 12px;
  color: var(--fb-blue);
  font-weight: 600;
}

/* --- Watch/Reels widget --- */
.v316-watch-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.v316-watch-scroll::-webkit-scrollbar { display: none; }
.v316-watch-item {
  flex: 0 0 120px;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.v316-watch-thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}
.v316-watch-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
  padding: 24px 8px 8px;
}
.v316-watch-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v316-watch-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.v316-watch-play svg { width: 18px; height: 18px; fill: #fff; }

/* --- Trending widget --- */
.v316-trend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--fb-bg);
  cursor: pointer;
}
.v316-trend-item:last-child { border-bottom: 0; }
.v316-trend-rank {
  font-size: 20px;
  font-weight: 900;
  color: var(--fb-border);
  flex: 0 0 28px;
  text-align: center;
}
.v316-trend-info { flex: 1; min-width: 0; }
.v316-trend-tag {
  font-size: 15px;
  font-weight: 700;
  color: var(--fb-blue);
  margin-bottom: 2px;
}
.v316-trend-count {
  font-size: 12px;
  color: var(--fb-muted);
}
.v316-trend-arrow {
  color: var(--fb-border);
  font-size: 18px;
}

/* --- Stiri Diaspora widget --- */
.v316-news-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--fb-bg);
  text-decoration: none;
  cursor: pointer;
  align-items: flex-start;
}
.v316-news-item:last-child { border-bottom: 0; }
.v316-news-thumb {
  flex: 0 0 80px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--fb-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
}
.v316-news-body { flex: 1; min-width: 0; }
.v316-news-source {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fb-blue);
  margin-bottom: 3px;
  letter-spacing: .04em;
}
.v316-news-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fb-ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v316-news-time {
  font-size: 11px;
  color: var(--fb-muted);
  margin-top: 4px;
}

/* ── FACEBOOK-STYLE POST CARDS (mobile) ──────────────────────── */
@media (max-width: 680px) {
  html[data-mobile-pro="1"] .post,
  html[data-mobile-pre="1"] .post {
    background: #ffffff;
    border-radius: 0;
    border: none;
    border-bottom: 8px solid var(--fb-bg);
    box-shadow: none;
    margin: 0 0 0 0;
  }
  html[data-mobile-pro="1"] .post-actions,
  html[data-mobile-pre="1"] .post-actions {
    border-top: 1px solid #e4e6eb;
    padding: 2px 0;
  }
  html[data-mobile-pro="1"] .pa-btn,
  html[data-mobile-pre="1"] .pa-btn {
    font-size: 13px;
    color: #65676b;
    font-weight: 600;
  }
  html[data-mobile-pro="1"] .pa-btn:hover,
  html[data-mobile-pre="1"] .pa-btn:hover {
    background: #f0f2f5;
    color: #050505;
  }
  html[data-mobile-pro="1"] .pa-btn.liked,
  html[data-mobile-pre="1"] .pa-btn.liked {
    color: var(--fb-blue);
  }
}

/* ── COMPOSER FACEBOOK STYLE ─────────────────────────────────── */
@media (max-width: 960px) {
  html[data-mobile-pro="1"] .composer-inline,
  html[data-mobile-pre="1"] .composer-inline {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin: 0;
    border-top: 0;
    border-bottom: 8px solid var(--fb-bg);
    padding: 12px 16px;
    box-shadow: none;
    background: #ffffff;
  }
  html[data-mobile-pro="1"] .composer-inline .ph,
  html[data-mobile-pre="1"] .composer-inline .ph {
    background: var(--fb-bg);
    border-radius: 24px;
    font-size: 15px;
    color: var(--fb-muted);
  }
}

/* ── STORIES ROW FACEBOOK STYLE ──────────────────────────────── */
@media (max-width: 960px) {
  html[data-mobile-pro="1"] .stories,
  html[data-mobile-pre="1"] .stories {
    background: #ffffff;
    border-bottom: 8px solid var(--fb-bg);
    padding: 10px 12px 14px;
    gap: 10px;
  }
}

/* ── FORTEAZA TEMA ALBA PE MOBILE ────────────────────────────── */
@media (max-width: 960px) {
  html[data-mobile-pro="1"] body,
  html[data-mobile-pre="1"] body {
    background: var(--fb-bg);
  }
  html[data-mobile-pro="1"] .stage,
  html[data-mobile-pre="1"] .stage {
    padding: 0;
    max-width: 100%;
    margin: 0;
  }
}

/* ── FEED TABS FACEBOOK STYLE ────────────────────────────────── */
@media (max-width: 960px) {
  html[data-mobile-pro="1"] .feed-tabs,
  html[data-mobile-pre="1"] .feed-tabs {
    background: #ffffff;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #e4e6eb;
    padding: 0 12px;
  }
  html[data-mobile-pro="1"] .feed-tab,
  html[data-mobile-pre="1"] .feed-tab {
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: var(--fb-muted);
    font-weight: 600;
    font-size: 14px;
  }
  html[data-mobile-pro="1"] .feed-tab.active,
  html[data-mobile-pre="1"] .feed-tab.active {
    color: var(--fb-blue);
    border-bottom-color: var(--fb-blue);
    background: transparent;
  }
}

/* ── HEADER NOU FACEBOOK STYLE (v316 top bar fix) ───────────── */
html[data-mobile-pro="1"] #dpr-top-bar,
html[data-mobile-pre="1"] #dpr-top-bar {
  background: #ffffff;
  border-bottom: 1px solid #e4e6eb;
}
html[data-mobile-pro="1"] .dpr-brand,
html[data-mobile-pre="1"] .dpr-brand {
  color: var(--fb-blue);
}
html[data-mobile-pro="1"] .dpr-tbtn,
html[data-mobile-pre="1"] .dpr-tbtn {
  background: #e4e6eb;
  color: #050505;
}
html[data-mobile-pro="1"] #dpr-bottom-nav,
html[data-mobile-pre="1"] #dpr-bottom-nav {
  background: #ffffff;
  border-top: 1px solid #e4e6eb;
}
html[data-mobile-pro="1"] .dpr-tab.active,
html[data-mobile-pre="1"] .dpr-tab.active {
  color: var(--fb-blue);
}
html[data-mobile-pro="1"] .dpr-tab.active::after,
html[data-mobile-pre="1"] .dpr-tab.active::after {
  background: var(--fb-blue);
}

/* ── TOAST notifications ─────────────────────────────────────── */
.v316-toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  z-index: 999;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90vw;
}
.v316-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}



/* ══ Toast welcome (v283) — extras din hub-bundle.js ══ */
#v283-welcome-toast {
  position: fixed; bottom: 72px; left: 50%;
  transform: translateX(-50%);
  z-index: 9200; max-width: 340px; width: calc(100vw - 32px);
  background: linear-gradient(135deg, #1d4ed8, #1a56db);
  color: #fff; border-radius: 14px; padding: 13px 16px;
  box-shadow: 0 8px 28px rgba(29,78,216,.38);
  display: flex; align-items: center; gap: 12px;
  font: 600 13.5px/1.4 system-ui, sans-serif; cursor: pointer;
  animation: v283toast-in .35s cubic-bezier(.4,0,.2,1) forwards;
}
#v283-welcome-toast.hide { animation: v283toast-out .3s ease forwards; }
@keyframes v283toast-in {
  from { opacity:0; transform:translateX(-50%) translateY(16px) }
  to   { opacity:1; transform:translateX(-50%) translateY(0) }
}
@keyframes v283toast-out {
  from { opacity:1; transform:translateX(-50%) translateY(0) }
  to   { opacity:0; transform:translateX(-50%) translateY(10px) }
}
#v283-welcome-toast .v283t-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.18); display: flex;
  align-items: center; justify-content: center;
}
#v283-welcome-toast .v283t-icon svg { width: 20px; height: 20px; color: #fff; }
#v283-welcome-toast .v283t-text { flex: 1; min-width: 0; }
#v283-welcome-toast .v283t-h { font-weight: 800; font-size: 14px; margin: 0 0 2px; }
#v283-welcome-toast .v283t-p { font-size: 12px; opacity: .88; margin: 0; }

/* ══ CEO badge — extras din hub-bundle.js ══ */
.ceo-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff; font-size: 10px; font-weight: 800;
  padding: 2px 8px 2px 6px; border-radius: 10px;
  letter-spacing: .4px; text-transform: uppercase;
  vertical-align: middle; margin-left: 3px;
  box-shadow: 0 2px 6px rgba(239,68,68,.35);
  white-space: nowrap; flex-shrink: 0;
}
.ceo-badge svg { width: 10px; height: 10px; flex-shrink: 0; }
.ceo-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
[data-ceo-hide] { display: none; }