/* ══════════════════════════════════════════════════════════════════
   WEB3 DASHBOARD-HÁTTÉR
   Sötét űr, három úszó aurora-folt, csillagmező (canvas), halvány
   rács és zaj. A kártyák üveglapok. Csak a dashboardra hat, a
   szövegek, sávok és azonosítók változatlanok.
   Bekapcsolás: <div id="view-dashboard" class="... web web3">
   ══════════════════════════════════════════════════════════════════ */
/* ── sötét mód: űr ─────────────────────────────────────────────── */
#view-dashboard.web.web3{
  --w3-c1:#1FD39A;   /* MonHero zöld — neon */
  --w3-c2:#7C5CFF;   /* lila */
  --w3-c3:#22D3EE;   /* cián */
  --w3-glow:rgba(31,211,154,.45);
  --w3-uveg:rgba(255,255,255,.05);
  --w3-uveg-2:rgba(255,255,255,.025);
  --w3-pirula:rgba(9,11,22,.6);
  --w3-uveg-tomor:rgba(17,21,36,.82);
  --w3-feny-alap:#fff;
  --w3-aurora-op:.55;
  position:relative;
}
/* ── világos mód: fény ─────────────────────────────────────────── */
#view-dashboard.web.web3,
[data-theme="light"] #view-dashboard.web.web3{
  --w3-c1:#12724A;   /* mélyzöld — világos háttéren olvasható */
  --w3-c2:#6D4AFF;
  --w3-c3:#0891B2;
  --w3-glow:rgba(26,165,104,.35);
  --w3-uveg:rgba(255,255,255,.72);
  --w3-uveg-2:rgba(255,255,255,.55);
  --w3-pirula:rgba(255,255,255,.7);
  --w3-uveg-tomor:rgba(255,255,255,.88);
  --w3-feny-alap:#0F1420;
  --w3-aurora-op:.42;

  --w-hatter:#F5F7FB;   --w-felulet:rgba(255,255,255,.72);
  --w-sotet:#0B2C1C;
  --w-ink:#0F1420;      --w-muted:#5C6788;  --w-halvany:#8A93B0;
  --w-vonal:rgba(15,20,32,.09);
  --w-zold-50:rgba(26,165,104,.10); --w-zold-100:rgba(26,165,104,.16);
  --w-zold-500:#1AA568; --w-zold-700:#12724A;
  --w-arny-1:0 1px 2px rgba(16,24,32,.05);
  --w-arny-2:0 10px 30px -16px rgba(16,24,32,.22);
  --w-arny-3:0 22px 50px -20px rgba(16,24,32,.28), 0 0 0 1px rgba(255,255,255,.7);
  background:
    radial-gradient(120% 70% at 50% -10%, #FFFFFF 0%, var(--w-hatter) 60%);
  color:var(--w-ink);
}

/* ── sötét mód felülírás ─────────────────────────────────────── */
[data-theme="dark"] #view-dashboard.web.web3{
  --w3-c1:#1FD39A; --w3-c2:#7C5CFF; --w3-c3:#22D3EE;
  --w3-glow:rgba(31,211,154,.45);
  --w3-uveg:rgba(255,255,255,.05); --w3-uveg-2:rgba(255,255,255,.025);
  --w3-pirula:rgba(9,11,22,.6); --w3-uveg-tomor:rgba(17,21,36,.82);
  --w3-feny-alap:#fff; --w3-aurora-op:.55;
  --w-hatter:#070A12;   --w-felulet:rgba(255,255,255,.045);
  --w-sotet:#0A0F1C;
  --w-ink:#F1F4FF;      --w-muted:#9AA3C4;  --w-halvany:#6B7494;
  --w-vonal:rgba(255,255,255,.09);
  --w-zold-50:rgba(31,211,154,.12); --w-zold-100:rgba(31,211,154,.18);
  --w-zold-500:#1FD39A; --w-zold-700:#39E5B0;
  --w-arny-1:0 1px 2px rgba(0,0,0,.4);
  --w-arny-2:0 10px 30px -14px rgba(0,0,0,.9);
  --w-arny-3:0 22px 50px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06);
  background:var(--w-hatter);
  color:var(--w-ink);
}


/* ── rögzített rétegek ─────────────────────────────────────────── */
#view-dashboard.web.web3 .w3-reteg{ position:fixed; inset:0; z-index:0; pointer-events:none; }
#view-dashboard.web.web3 .w3-csillag{ opacity:.9; }
[data-theme="light"] #view-dashboard.web.web3 .w3-csillag{ opacity:.35; }
#view-dashboard.web.web3 .w3-aurora{ inset:0; opacity:var(--w3-aurora-op); overflow:hidden; }
#view-dashboard.web.web3 .w3-aurora i{
  position:absolute; display:block; border-radius:50%;
  will-change:transform; transform:translate3d(0,0,0);
}
#view-dashboard.web.web3 .w3-aurora i:nth-child(1){
  width:900px; height:900px; left:-18%; top:-30%;
  background:radial-gradient(circle at 50% 50%, var(--w3-c1) 0%, color-mix(in srgb, var(--w3-c1) 40%, transparent) 30%, transparent 62%);
  animation:w3Usz1 40s ease-in-out infinite;
}
#view-dashboard.web.web3 .w3-aurora i:nth-child(2){
  width:800px; height:800px; right:-20%; top:-10%;
  background:radial-gradient(circle at 50% 50%, var(--w3-c2) 0%, color-mix(in srgb, var(--w3-c2) 40%, transparent) 30%, transparent 62%);
  animation:w3Usz2 48s ease-in-out infinite;
}
#view-dashboard.web.web3 .w3-aurora i:nth-child(3){
  width:700px; height:700px; left:30%; bottom:-40%;
  background:radial-gradient(circle at 50% 50%, var(--w3-c3) 0%, color-mix(in srgb, var(--w3-c3) 40%, transparent) 30%, transparent 62%);
  animation:w3Usz1 56s ease-in-out infinite reverse;
}
@keyframes w3Usz1{ 50%{ transform:translate3d(90px,60px,0) } }
@keyframes w3Usz2{ 50%{ transform:translate3d(-110px,70px,0) } }

#view-dashboard.web.web3 .w3-racs{
  background-image:linear-gradient(var(--w-vonal) 1px, transparent 1px),
                   linear-gradient(90deg, var(--w-vonal) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
  opacity:.55;
}
[data-theme="light"] #view-dashboard.web.web3 .w3-racs{ opacity:.7; }
#view-dashboard.web.web3 .w3-zaj{
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* a tartalom a rétegek fölé */
#view-dashboard.web.web3 .w-hero-sav,
#view-dashboard.web.web3 .w-sav{ position:relative; z-index:1; }
#view-dashboard.web.web3 .w-sav.w-feher{
  background:var(--w3-uveg-2);
  border-top:1px solid var(--w-vonal); border-bottom:1px solid var(--w-vonal);
}
[data-theme="dark"] #view-dashboard.web.web3 .w-sav.w-sotet{ background:rgba(10,15,28,.6); }

/* ── üvegkártyák ───────────────────────────────────────────────── */
#view-dashboard.web.web3 .p-card{
  background:var(--w3-uveg-tomor);
  border:1px solid var(--w-vonal);
  box-shadow:var(--w-arny-2), inset 0 1px 0 rgba(255,255,255,.25);
  transition:border-color .3s, box-shadow .3s;
}
#view-dashboard.web.web3 .p-card:hover{
  border-color:color-mix(in srgb, var(--w3-c1) 35%, var(--w-vonal));
  box-shadow:var(--w-arny-3), 0 0 40px -18px var(--w3-glow);
}
#view-dashboard.web.web3 .p-chip{
  background:var(--w-zold-50); color:var(--w3-c1);
  border:1px solid color-mix(in srgb, var(--w3-c1) 30%, transparent);
}
#view-dashboard.web.web3 .w-kalap{ color:var(--w3-c3); }
#view-dashboard.web.web3 .w-link{ color:var(--w3-c1); }

/* ── fejléc ────────────────────────────────────────────────────── */
#view-dashboard.web.web3 .w-fejlec-sima{ padding-top:64px; }
#view-dashboard.web.web3 .w-h-nagy{
  font-size:clamp(34px, 5vw, 64px); letter-spacing:-.045em;
}
/* fény fut végig a néven */
#view-dashboard.web.web3 .w-h-nagy .w3-feny{
  background:linear-gradient(100deg, var(--w3-feny-alap) 10%, var(--w3-c1) 30%, var(--w3-c3) 50%, var(--w3-feny-alap) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% 100%; animation:w3Feny 7s linear infinite;
}
@keyframes w3Feny{ to{ background-position:-220% 0 } }
#view-dashboard.web.web3 .w-bevezeto{ color:var(--w-muted); }

/* élő számok — üveg-pirulák, egymás után úsznak be */
#view-dashboard.web.web3 .w-fej-savok{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
#view-dashboard.web.web3 .w-fej-sav{
  display:flex; align-items:baseline; gap:9px;
  padding:9px 15px; border-radius:999px;
  background:var(--w3-uveg-tomor); border:1px solid var(--w-vonal);
  box-shadow:var(--w-arny-2);
  opacity:0; transform:translateY(10px);
  animation:w3SavBe .7s cubic-bezier(.2,.7,.2,1) forwards;
}
#view-dashboard.web.web3 .w-fej-sav:nth-child(1){ animation-delay:.25s }
#view-dashboard.web.web3 .w-fej-sav:nth-child(2){ animation-delay:.35s }
#view-dashboard.web.web3 .w-fej-sav:nth-child(3){ animation-delay:.45s }
#view-dashboard.web.web3 .w-fej-sav:nth-child(4){ animation-delay:.55s }
#view-dashboard.web.web3 .w-fej-sav b{ font-family:var(--betu-cim); font-size:18px; color:var(--w-ink); }
#view-dashboard.web.web3 .w-fej-sav span{ font-size:12px; color:var(--w-muted); }
#view-dashboard.web.web3 .w-fej-sav em{
  width:7px; height:7px; border-radius:50%; background:var(--w3-c3);
  box-shadow:0 0 0 0 var(--w3-c3); animation:w3Ping 2.4s infinite;
}
#view-dashboard.web.web3 .w-fej-sav:nth-child(even) em{ background:var(--w3-c2); box-shadow:0 0 0 0 var(--w3-c2); }
@keyframes w3SavBe{ to{ opacity:1; transform:none } }
@keyframes w3Ping{ 70%{ box-shadow:0 0 0 8px rgba(34,211,238,0) } 100%{ box-shadow:0 0 0 0 rgba(34,211,238,0) } }

/* a hero-lapok (kitűzött hírek) is üvegre váltanak */
#view-dashboard.web.web3 .dh-szinpad{ background:transparent; }
[data-theme="dark"] #view-dashboard.web.web3 .w-fejlec-kep .w-fejlec-arny{
  background:linear-gradient(180deg, rgba(7,10,18,0), rgba(7,10,18,.85));
}

/* gombok */
#view-dashboard.web.web3 .w-gomb-tomor{
  background:linear-gradient(120deg, var(--w3-c1), var(--w3-c3));
  color:#04150F; border:none;
  box-shadow:0 10px 40px -12px var(--w3-glow);
}

/* ── kíméletes mód ─────────────────────────────────────────────── */
@media (max-width:640px){
  #view-dashboard.web.web3 .w3-csillag,
  #view-dashboard.web.web3 .w3-zaj{ display:none; }
  #view-dashboard.web.web3 .w3-aurora{ filter:blur(60px); }
}
@media (prefers-reduced-motion: reduce){
  #view-dashboard.web.web3 .w3-aurora i,
  #view-dashboard.web.web3 .w-h-nagy .w3-feny,
  #view-dashboard.web.web3 .w-fej-sav em{ animation:none !important; }
  #view-dashboard.web.web3 .w-fej-sav{ animation:none !important; opacity:1; transform:none; }
}

/* ── HERO: nincs saját háttér, csak a szöveg ──────────────────── */
#view-dashboard.web.web3 .w-hero-sav .dh-szinpad{
  background:transparent !important; box-shadow:none;
}
#view-dashboard.web.web3 .dh-hatterek{ display:none; }
#view-dashboard.web.web3 .dh-szinpad::after{ display:none; }
#view-dashboard.web.web3 .dh-szoveg,
#view-dashboard.web.web3 .dh-focim,
#view-dashboard.web.web3 .dh-leiras{ color:var(--w-ink); }
#view-dashboard.web.web3 .dh-leiras{ color:var(--w-muted); }
#view-dashboard.web.web3 .dh-cimke{
  background:var(--w3-uveg-tomor); color:var(--w3-c1);
  border:1px solid var(--w-vonal);
}
#view-dashboard.web.web3 .dh-tovabb{
  background:var(--w3-uveg-tomor); color:var(--w-ink);
  border:1px solid var(--w-vonal);
}
/* a kis lapok üvegre váltanak, a kép-előnézet helyett */
#view-dashboard.web.web3 .dh-kicsi{
  background-image:none !important;
  background:var(--w3-uveg-tomor);
  border:1px solid var(--w-vonal);
  color:var(--w-ink);
}
#view-dashboard.web.web3 .dh-kicsi.aktiv{
  border-color:color-mix(in srgb, var(--w3-c1) 55%, var(--w-vonal));
  box-shadow:0 0 30px -12px var(--w3-glow);
}
#view-dashboard.web.web3 .dh-kicsi *{ color:var(--w-ink); }
#view-dashboard.web.web3 .dh-lebego{
  background:var(--w3-uveg-tomor); border:1px solid var(--w-vonal);
  color:var(--w-ink);
}
#view-dashboard.web.web3 .dh-kicsi::before{ display:none; }
#view-dashboard.web.web3 .dh-kicsi.aktiv::after{ border-color:color-mix(in srgb, var(--w3-c1) 70%, transparent); }
#view-dashboard.web.web3 .dh-k-szoveg{ color:var(--w-ink); }
#view-dashboard.web.web3 .dh-k-sav{ background:var(--w-vonal); }
#view-dashboard.web.web3 .dh-k-sav>span{ background:var(--w3-c1); }
#view-dashboard.web.web3 .dh-kicsi{ box-shadow:var(--w-arny-2); }

/* ── ERDŐ — a hero alján, a tartalom mögött ─────────────────────── */
#view-dashboard.web.web3 .w3-erdo{
  position:absolute; left:0; right:0; top:0;
  height:min(72vh, 560px);          /* = a hero magassága */
  z-index:0; pointer-events:none; overflow:hidden;
}
#view-dashboard.web.web3 .w3-erdo svg{
  position:absolute; left:50%; bottom:0;
  width:max(110%, 1900px); height:100%;
  transform:translateX(-50%); will-change:transform;
}
#view-dashboard.web.web3 #w3Sav5{ opacity:.28; }
#view-dashboard.web.web3 #w3Sav4{ opacity:.40; }
#view-dashboard.web.web3 #w3Sav3{ opacity:.55; }
#view-dashboard.web.web3 #w3Sav2{ opacity:.75; }
#view-dashboard.web.web3 #w3Sav1{ opacity:.92; }
/*  a mélységet nem blur adja (drága), hanem a halványodó, hidegebb szín  */

#view-dashboard.web.web3 .w3-para{
  position:absolute; left:-25%; width:150%; height:26%;
  background:radial-gradient(55% 50% at 50% 50%,
             color-mix(in srgb, var(--w-hatter) 92%, transparent), transparent 72%);
  will-change:transform;
}
#view-dashboard.web.web3 .w3-para-1{ bottom:18%; opacity:.9; animation:w3Sodor 140s linear infinite; }
#view-dashboard.web.web3 .w3-para-2{ bottom:4%;  opacity:.6; animation:w3Sodor 190s linear infinite reverse; }
@keyframes w3Sodor{ from{ transform:translateX(-7%) } to{ transform:translateX(7%) } }

@media(max-width:820px){ #view-dashboard.web.web3 .w3-erdo{ height:440px; } }
@media(max-width:640px){ #view-dashboard.web.web3 .w3-para{ display:none; } }
@media (prefers-reduced-motion: reduce){ #view-dashboard.web.web3 .w3-para{ animation:none !important; } }

/* ── HERO-SZÖVEG: üveglap, hogy az erdő előtt is olvasható legyen ── */
#view-dashboard.web.web3 .dh-szoveg{
  padding:34px 40px 36px; border-radius:26px;
  background:var(--w3-uveg-tomor); border:1px solid var(--w-vonal);
  box-shadow:var(--w-arny-2), inset 0 1px 0 rgba(255,255,255,.25);
  max-width:720px;
}
#view-dashboard.web.web3 .dh-focim{
  margin-top:12px; font-size:clamp(32px, 4.6vw, 58px);
}
#view-dashboard.web.web3 .dh-leiras{ font-size:16.5px; max-width:560px; }
#view-dashboard.web.web3 .w-hero-gombok{ margin-top:22px; }
#view-dashboard.web.web3 .w-fejlec-sima .w-kozep > .w-kalap,
#view-dashboard.web.web3 .w-fejlec-sima .w-kozep > .w-h-nagy,
#view-dashboard.web.web3 .w-fejlec-sima .w-kozep > .w-bevezeto{ position:relative; }
#view-dashboard.web.web3 .w-fejlec-sima .w-kozep{
  display:inline-block; padding:20px 26px 22px; border-radius:22px;
  background:var(--w3-uveg-tomor); border:1px solid var(--w-vonal);
  box-shadow:var(--w-arny-2), inset 0 1px 0 rgba(255,255,255,.25);
}
@media(max-width:820px){
  #view-dashboard.web.web3 .dh-szoveg{ padding:20px 22px 22px; }
}

/* ── lebegő kártyák ki — a szöveg és az erdő elég ─────────────── */
#view-dashboard.web.web3 .dh-lebegok,
#view-dashboard.web.web3 .dh-lebego{ display:none !important; }


/* ══════════════════════════════════════════════════════════════
   ŐSZI HANGULAT
   A hero fénye és köde melegebb ilyenkor. A JS teszi ki az
   .osz osztályt a nézetre.
   ══════════════════════════════════════════════════════════════ */
#view-dashboard.web.web3.osz .w3-aurora i:nth-child(1){
  background:radial-gradient(circle,rgba(232,163,60,.34),transparent 65%);
}
#view-dashboard.web.web3.osz .w3-aurora i:nth-child(2){
  background:radial-gradient(circle,rgba(217,122,43,.26),transparent 65%);
}
#view-dashboard.web.web3.osz .w3-aurora i:nth-child(3){
  background:radial-gradient(circle,rgba(180,84,26,.2),transparent 68%);
}
#view-dashboard.web.web3.osz .w3-racs{
  background-image:linear-gradient(rgba(150,110,60,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(150,110,60,.07) 1px,transparent 1px);
}

/* ══════════════════════════════════════════════════════════════
   TÉLI HANGULAT
   Hideg, kékes fény és halvány pára — a hó a vásznon hullik.
   ══════════════════════════════════════════════════════════════ */
#view-dashboard.web.web3.tel .w3-aurora i:nth-child(1){
  background:radial-gradient(circle,rgba(150,190,225,.34),transparent 65%);
}
#view-dashboard.web.web3.tel .w3-aurora i:nth-child(2){
  background:radial-gradient(circle,rgba(120,165,205,.24),transparent 65%);
}
#view-dashboard.web.web3.tel .w3-aurora i:nth-child(3){
  background:radial-gradient(circle,rgba(200,220,240,.22),transparent 68%);
}
#view-dashboard.web.web3.tel .w3-racs{
  background-image:linear-gradient(rgba(90,130,170,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(90,130,170,.07) 1px,transparent 1px);
}

/* ══════════════════════════════════════════════════════════════
   HULLÓ LEVÉL / HÓ RÉTEG
   A tartalom fölött, de nem kattintható. Világos módban a
   kártyák mögött szinte semmi nem látszott belőle.
   ══════════════════════════════════════════════════════════════ */
#view-dashboard.web.web3 .w3-level{
  /*  A hero sávra szabva: görgetéskor kicsúszik felfelé, nem
      kísér végig a lapon.  */
  position:absolute; left:0; right:0; top:0;
  height:min(78vh, 620px);
  width:100%; z-index:4; pointer-events:none; opacity:.95;
}
[data-theme="dark"] #view-dashboard.web.web3 .w3-level{ opacity:.8; }
@media (prefers-reduced-motion: reduce){
  #view-dashboard.web.web3 .w3-level{ display:none; }
}

/* ══════════════════════════════════════════════════════════════
   TELEFONOS KEZDŐLAP — csak a lényeg

   A mozgó erdő-háttér és a lebegő számkártyák gépre készültek:
   telefonon a keskeny sávban egymásra torlódnak, és a hero-kártya
   alatt is átütnek. Ott csak az esemény-kártya marad, tiszta
   háttéren.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  /*  A lebegő számkártyák maradnak kikapcsolva: a keskeny sávban
      egymásra torlódtak. Az erdő-háttér marad — az a lap arca.  */
  #view-dashboard.web.web3 .dh-lebegok{ display:none !important; }

  /*  Az erdő eddig 1900 pixel szélesen, középre igazítva feszült ki:
      egy 375 pixeles telefonon ebből csak egy kinagyított darab
      látszott, összefüggő kép nélkül. Arányos szélességgel már
      valódi fasor rajzolódik ki.  */
  #view-dashboard.web.web3 .w3-erdo svg{ width:max(200%, 700px); }

  /*  A magasság a hero-kártyához igazodik, hogy a talajvonal a kártya
      alatt záruljon — eddig 440 pixerrel belelógott a feladatok közé,
      és ott elmosta a tartalmat.  */
  #view-dashboard.web.web3 .w3-erdo{ height:430px; }

  /*  A hero alatti kis kártyacsík (Esemény · Tréning · Üzenőfal…)  */
  #view-dashboard.web.web3 .dh-kartyak{ display:none !important; }

  /*  A köszöntő alatti három pirula (mai időpont · feladat kész ·
      új értesítés) — ugyanezek az adatok lentebb, olvashatóbban  */
  #view-dashboard.web.web3 .dh-uv-savok{ display:none !important; }

  /*  A "📌 Kitűzés" gomb a hero-kártya sarkára lógott. Ritkán használt,
      csak vezetőnek szóló eszköz — gépen ott marad.  */
  #view-dashboard.web.web3 .dh-kezel{ display:none !important; }

  /*  A színpad magassága fixen 400-440px volt, mert a kis kártyacsíknak
      is helyet hagyott. Most a kártyához igazodik, így nem marad üres
      sáv alatta.  */
  #view-dashboard.web.web3 .dh-szinpad{ height:auto !important; }

  /*  A kártya abszolút helyzetű volt, 20px-es bal eltolással és
      16px margóval — ettől jobbra csúszott, és a jobb szélén ki is
      lógott. Telefonon folyjon a szövegbe, egyenlő margóval.  */
  #view-dashboard.web.web3 .dh-szoveg{
    position:relative !important;
    left:auto !important; right:auto !important; top:auto !important;
    transform:none !important;
    margin:0 16px !important;
    width:auto !important; max-width:none !important;
  }
}