:root{--preview-sidebar:214px}
/* A márkanév felirata MINDEN előfordulásnál a közös mérce szerint (2026-08-21).
   Korábban csak a `.sidebar .brand strong` kapott 19px-et, ezért a MOBIL fejlécben
   a "MonEta" az örökölt 16px-cel jelent meg - hajszálnyival kisebben, mint bárhol máshol. */
.brand strong,.demo-brand strong{font-size:19px;font-weight:800;letter-spacing:-.025em;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif}
html,body{overflow-x:hidden}
.demo-shell,.shell{grid-template-columns:var(--preview-sidebar) minmax(0,1fr)!important}
.demo-main,.main{min-width:0;overflow-x:clip;padding-top:122px!important}
.demo-topline,.topline{position:fixed!important;z-index:55;left:var(--preview-sidebar);right:0;top:0;height:80px;margin:0!important;padding:0 30px;background:rgba(255,255,255,.94);border-bottom:1px solid #edf1f4;backdrop-filter:blur(16px)}
.demo-topline p,.topline p{color:#102A2A!important;font-size:18px!important;font-weight:700!important;letter-spacing:-.01em}
.demo-sidebar,.sidebar{width:var(--preview-sidebar);font-family:Inter,system-ui,sans-serif}
.demo-sidebar .demo-brand,.sidebar .brand{min-height:110px;padding:0 18px!important;gap:13px!important}
.demo-sidebar .demo-brand-mark,.sidebar .brand-mark{width:40px!important;height:40px!important;border-radius:13px!important;font-size:17px!important}
.demo-sidebar .demo-brand strong,.sidebar .brand strong{font-size:19px;font-weight:800;letter-spacing:-.025em;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.demo-sidebar .demo-brand small,.sidebar .brand small{margin-top:5px!important;font-size:12px!important}
.demo-sidebar .demo-nav,.sidebar .side-nav{gap:5px!important;padding:28px 12px!important}
.demo-sidebar .demo-nav a,.sidebar .side-nav a{min-height:60px!important;gap:12px!important;padding:8px 4px 8px 12px!important;border-radius:15px!important;white-space:nowrap;font-size:14px!important;font-weight:700!important}
.demo-sidebar .demo-nav-icon,.sidebar .nav-icon{width:40px!important;height:40px!important;border-radius:11px!important}
.demo-sidebar .demo-nav-icon svg,.sidebar .nav-icon svg{width:20px;height:20px}
.demo-sidebar .demo-nav a:nth-child(1) .demo-nav-icon,.sidebar .side-nav a:nth-child(1) .nav-icon{background:#e4faf0;color:#10b981}
.demo-sidebar .demo-nav a:nth-child(2) .demo-nav-icon,.sidebar .side-nav a:nth-child(2) .nav-icon{background:#eaf2ff;color:#2563eb}
.demo-sidebar .demo-nav a:nth-child(3) .demo-nav-icon,.sidebar .side-nav a:nth-child(3) .nav-icon{background:#f1ebff;color:#7c3aed}
.demo-sidebar .demo-nav a:nth-child(4) .demo-nav-icon,.sidebar .side-nav a:nth-child(4) .nav-icon{background:#fff0e3;color:#f97316}
.demo-sidebar .demo-nav a:nth-child(5) .demo-nav-icon,.sidebar .side-nav a:nth-child(5) .nav-icon{background:#e4faf6;color:#0d9488}
/* Nev szerinti szinek (nem sorrend szerint), hogy uj menupont beszurasakor ne csusszon el semmi */
.demo-sidebar .demo-nav a[href="/technikai-adatok/"] .demo-nav-icon,.sidebar .side-nav a[href="/technikai-adatok/"] .nav-icon{background:#eef2ff;color:#4f46e5}
.demo-sidebar .demo-nav a[href="/egyedi-modul/"] .demo-nav-icon,.sidebar .side-nav a[href="/egyedi-modul/"] .nav-icon{background:#e4faf6;color:#0d9488}
.demo-sidebar .demo-nav a.active .demo-nav-icon,.sidebar .side-nav a.active .nav-icon{background:rgba(255,255,255,.22)!important;color:#fff!important}
.preview-help{margin-top:auto;display:flex;align-items:flex-start;gap:12px;padding:24px 20px;border-top:1px solid #edf1f4;font-family:Inter,system-ui,sans-serif}
.preview-help-icon{display:none}
.preview-help p{margin:0;color:#475569;font-size:13px;line-height:1.55}.preview-help a{color:#16a36a;text-decoration:none}
@media(min-width:761px) and (max-width:1200px){
  :root{--preview-sidebar:82px}
  .demo-sidebar .demo-brand,.sidebar .brand{min-height:96px;justify-content:center;padding:0!important}
  .demo-sidebar .demo-brand-mark,.sidebar .brand-mark{width:40px!important;height:40px!important}
  .demo-sidebar .demo-brand>span:last-child,.sidebar .brand>span:last-child{display:none}
  .demo-sidebar .demo-nav,.sidebar .side-nav{padding:22px 10px!important}
  .demo-sidebar .demo-nav a,.sidebar .side-nav a{position:relative;width:62px;min-height:58px!important;justify-content:center;gap:0!important;padding:9px!important;font-size:0!important}
  .demo-sidebar .demo-nav a:after,.sidebar .side-nav a:after{content:attr(data-label);position:absolute;z-index:80;left:70px;top:50%;display:none;width:max-content;transform:translateY(-50%);padding:9px 11px;border:1px solid #dfe9e3;border-radius:10px;background:#fff;color:#334155;font-size:13px;font-weight:700;box-shadow:0 12px 30px rgba(15,23,42,.14)}
  .demo-sidebar .demo-nav a:hover:after,.demo-sidebar .demo-nav a:focus-visible:after,.sidebar .side-nav a:hover:after,.sidebar .side-nav a:focus-visible:after{display:block}
  .preview-help{justify-content:center;padding:20px 0}.preview-help p{display:none}
  .demo-main,.main{padding-left:28px!important;padding-right:28px!important}
  .demo-topline,.topline{padding-left:22px;padding-right:22px}
}
@media(max-width:760px){
  /* MOBILON a mélyebb, "neonos" M: telítettebb zöld végszín (#059669) és világoszöld,
     erősebb árnyék. Ez a főoldal mobil logójának stílusa - Evelin ezt választotta
     telefonra minden oldalon (2026-08-21). Asztali nézetben marad a halványabb mérce. */
  .brand-mark,.demo-brand-mark{border-radius:12px!important;font-size:18px!important;
    background:linear-gradient(to bottom right,#34d399,#059669)!important;
    box-shadow:0 10px 15px -3px rgba(167,243,208,.7),0 4px 6px -4px rgba(167,243,208,.7)!important}

  :root{--preview-sidebar:0px}
  .demo-shell,.shell{display:block!important}
  .demo-sidebar,.sidebar{display:none!important}
  .demo-main,.main{overflow-x:hidden;padding-top:28px!important}
}



/* ---- Probaverzio gomb (2026-08-08) ----
   Az oldalso menuben, az utolso menupont ALATT, vizualisan elkulonitve:
   nem menupontkent, hanem ajanlatkent olvasodjon. A .sidebar/.demo-sidebar
   mobilon rejtve van, ezert a mobil menuben kulon .mobile-proba gomb van. */
.side-proba{margin:22px 12px 0;display:flex;align-items:center;gap:11px;padding:13px 14px;
  border:1.5px solid rgba(34,181,115,.45);border-radius:15px;
  background:linear-gradient(160deg,#f0fbf5,#fff);color:#102A2A;text-decoration:none;
  box-shadow:0 8px 22px rgba(34,181,115,.10);transition:.22s ease}
.side-proba:hover{border-color:#22B573;transform:translateY(-2px);box-shadow:0 14px 28px rgba(34,181,115,.20)}
.side-proba strong{display:block;font-size:13.5px;font-weight:800;line-height:1.3}
.side-proba small{display:block;margin-top:2px;color:#64748b;font-size:11px;font-weight:500;line-height:1.35}
.side-proba-icon{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#22B573;color:#fff}
.side-proba-icon svg{width:17px;height:17px}
.side-proba-active{border-color:#22B573;background:linear-gradient(160deg,#e6f8ef,#fff)}
/* Mobil menuben: kiemelt, de a menu ritmusaba illeszkedo gomb */
.mobile-proba,.demo-mobile-menu .mobile-proba{margin-top:8px;border:1.5px solid rgba(34,181,115,.45);
  background:#f0fbf5;color:#16895b!important;font-weight:800!important}
/* Keskeny (ikonos) oldalsav 761-1200px kozott: a gomb is csak ikon legyen */
@media(min-width:761px) and (max-width:1200px){
  .side-proba{margin:18px 10px 0;justify-content:center;padding:11px 6px;gap:0}
  .side-proba>span:last-child{display:none}
}