:root {
  --bg:#FBFBFA; --surface:#FFFFFF; --card:#FFFFFF; --border:#E7E5E1;
  --accent:#D8431F; --accent2:#B5860B; --text:#1A1A18; --muted:#6E6B66;
  --tag-bg:transparent; --tag-text:#D8431F;
  --up:#2E7D4F; --down:#C23B3B;
  /* Próbaidő-sáv (renderTrialBanner) színei – JS-ből var()-on keresztül
     hivatkozva, hogy a light/dark mód közötti váltás automatikusan
     érvényesüljön, ne kelljen a JS-nek külön eldöntenie, melyik módban
     vagyunk. */
  --trial-bg:#E9F6EE; --trial-border:#2E7D4F; --trial-text:#1E5C3A;
  --trial-badge-1:#2E7D4F; --trial-badge-2:#3f9e68;
  --error-bg:#FCEBEA; --error-border:#C23B3B; --error-text:#8A2A2A;

  --gold:#f5a623; --r:3px; --tr:0.18s ease;
}
[data-theme="dark"]{
  --bg:#111113; --surface:#17181B; --card:#17181B; --border:#2A2B2F;
  --text:#EDECE9; --muted:#9A978F;
  --accent:#FF7A52; --accent2:#E0B23F; --tag-text:#FF7A52;
  --up:#5FBE86; --down:#E8716B;
  /* Ugyanaz, mint eddig volt fixen beégetve – sötét módban semmi nem
     változik vizuálisan. */
  --trial-bg:#0d2b1a; --trial-border:#2ecc71; --trial-text:#2ecc71;
  --trial-badge-1:#1a6b3a; --trial-badge-2:#2ecc71;
  --error-bg:#2a1010; --error-border:#5a2020; --error-text:#ff8080;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:15px;line-height:1.6;min-height:100vh;transition:background .2s,color .2s}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input,select,textarea{font:inherit}

/* HEADER */
header{position:sticky;top:0;z-index:200;background:var(--bg);backdrop-filter:none;border-bottom:1px solid var(--border);padding:0 1.25rem;display:flex;align-items:center;justify-content:space-between;height:56px;gap:0.7rem}
.logo{font-family:'Source Serif 4',serif;font-size:1.35rem;font-weight:700;margin:0;line-height:1;letter-spacing:-0.02em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.logo span{color:var(--accent);font-weight:700}
.header-right{display:flex;align-items:center;gap:0.5rem}
.header-ts{font-size:0.72rem;color:var(--muted);display:none}
.icon-btn{background:var(--card);border:1px solid var(--border);border-radius:7px;padding:5px 11px;font-size:0.78rem;display:flex;align-items:center;gap:5px;transition:background var(--tr)}
.icon-btn:hover{background:var(--border)}
.icon-btn.spinning svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.user-btn{background:none;border:1px solid var(--border);border-radius:20px;padding:5px 11px;font-size:0.78rem;color:var(--text);cursor:pointer;transition:background var(--tr);font-weight:500}
.user-btn:hover{background:var(--border);border-color:var(--muted)}
.premium-badge{background:linear-gradient(135deg,#b8860b,var(--gold));color:#000;border-radius:20px;padding:2px 8px;font-size:0.68rem;font-weight:700;margin-left:4px}
.reg-btn{background:var(--accent);border:none;border-radius:20px;padding:6px 14px;font-size:0.78rem;font-weight:600;color:#fff;cursor:pointer;display:flex;align-items:center;gap:6px;transition:opacity var(--tr)}
.reg-btn:hover{opacity:0.88}
.reg-trial-badge{background:rgba(0,0,0,0.25);color:#a8ffcc;border-radius:20px;padding:1px 7px;font-size:0.65rem;font-weight:700}

/* LAYOUT */
.app{display:block;min-height:calc(100vh - 56px)}

/* SIDEBAR */
.sidebar{width:240px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:0 1rem 0.5rem;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;transition:width 0.28s cubic-bezier(.4,0,.2,1),padding 0.28s cubic-bezier(.4,0,.2,1),border-color 0.28s ease;display:none !important;flex-direction:column;cursor:grab;scrollbar-width:none;-ms-overflow-style:none}
.sidebar::-webkit-scrollbar{display:none}
.sidebar:active{cursor:grabbing}
.sidebar-collapse-top{display:none !important;align-items:center;justify-content:flex-end;width:100%;padding:8px 4px 8px 0;background:none;border:none;border-bottom:1px solid var(--border);color:var(--muted);cursor:pointer;font-size:0.85rem;transition:color var(--tr);flex-shrink:0;margin-bottom:0.5rem;user-select:none}
.sidebar-collapse-top:hover{color:var(--text)}
.sidebar.collapsed .sidebar-collapse-top{justify-content:center;padding:8px 0;border-bottom-color:transparent;margin-bottom:0}
.sidebar.collapsed{width:40px;padding:0}
.sidebar.collapsed .sidebar-body{opacity:0;pointer-events:none;transition:opacity 0.15s}
.sidebar-body{transition:opacity 0.2s 0.08s;overflow-y:auto}
/* Collapse toggle gomb a sidebar alján */
.sidebar-collapse-btn{width:100%;display:none !important;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border-radius:7px;font-size:0.75rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:background var(--tr),color var(--tr);margin-top:auto;flex-shrink:0;white-space:nowrap;overflow:hidden;position:sticky;bottom:0}
.sidebar-collapse-btn:hover{background:var(--border);color:var(--text)}
.sidebar.collapsed .sidebar-collapse-btn{justify-content:center;padding:8px 0;border-radius:0;border-left:none;border-right:none;border-color:var(--border)}
.sidebar.collapsed .sidebar-collapse-label{display:none}
.kat-drag-item:hover{border-color:var(--border-strong)!important;background:var(--border)}
/* Rank change badges */
.rank-badge{display:inline-flex;align-items:center;gap:3px;border-radius:0;padding:0;font-size:0.68rem;font-weight:600;margin-left:6px;vertical-align:middle;flex-shrink:0;transition:opacity 0.5s;background:none !important;border:none !important}
.rank-up{background:#0d2b1a;border:1px solid #2ecc71;color:#3ddc84}
.rank-down{background:var(--error-bg);border:1px solid #e8401c;color:var(--error-text)}
.rank-new{background:#1a1a0d;border:1px solid #f5a623;color:#f5a623}
.rank-same{background:#1c2030;border:1px solid #3a4060;color:#7a80a0}

/* Drag-to-scroll jelző */
.sidebar-body{transition:opacity 0.2s 0.08s;overflow-y:auto}
.sidebar.dragging,.sidebar.dragging *{cursor:grabbing!important;user-select:none}
.sidebar h3{font-size:0.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:0.75rem}
.sidebar-section{margin-bottom:0.6rem}
.cb-label{display:flex;align-items:center;gap:0.5rem;font-size:0.88rem;padding:3px 0;cursor:pointer}
.cb-label input[type=checkbox]{accent-color:var(--accent);width:13px;height:13px;flex-shrink:0}
.limit-row{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;font-size:0.85rem;padding:5px 0}
.limit-input{width:56px;text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:0.85rem;padding:4px 2px;font:inherit}
.limit-input:focus{outline:none;border-color:var(--accent)}
.sidebar-divider{display:none}
/* Egységes "lenyíló sor" megjelenés mind a 4 szűrő-szekciónál (Kategóriák,
   Források, Élő adatsáv – megjelenő adatok, Élő adatsáv – sorrend): egyforma
   kártya-keret + UGYANAZ a chevron ikon (l. chevronSvg()/.hot-chevron), amit
   a hírek felkapott-téma listái is használnak máshol az appban – így
   egyértelmű, hogy ezek is lenyitható/összecsukható sorok, és a design nem
   tér el a többi lenyíló elemtől.
*/
.sidebar-details{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color var(--tr)}
.sidebar-details summary{cursor:pointer;font-weight:600;font-size:0.85rem;padding:0.65rem 0.85rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;color:var(--text);transition:background var(--tr)}
.sidebar-details summary:hover{background:var(--border)}
.sidebar-details summary::-webkit-details-marker{display:none}
.sidebar-details[open] summary{border-bottom:1px solid var(--border)}
.sidebar-details[open] .hot-chevron{transform:rotate(180deg)}
.sidebar-details summary .hot-chevron{margin-top:0}
.sidebar-details-body{padding:0.65rem 0.85rem 0.85rem}
/* Ugyanaz a megjelenés, mint a .sidebar-details summary-nál (Kategóriák,
   Források) – erre akkor van szükség, ha a sor NEM helyben nyílik le,
   hanem egy modalra navigál (pl. Élő adatsáv beállításai), de vizuálisan
   egy sorban kell lennie a többi lenyíló elemmel. */
.sidebar-details-btn{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:0.65rem 0.85rem;font-weight:600;font-size:0.85rem;color:var(--text);cursor:pointer;transition:background var(--tr)}
.sidebar-details-btn:hover{background:var(--border)}
.sidebar-details-btn .hot-chevron{margin-top:0}
.sidebar-jump-profiles-btn{width:100%;padding:5px 8px;border-radius:20px;font-size:0.75rem;background:none;border:1px solid var(--border);color:var(--muted);cursor:pointer;text-align:left;transition:background var(--tr),color var(--tr);margin-bottom:0.6rem;flex-shrink:0}
.sidebar-jump-profiles-btn:hover{background:var(--border);color:var(--text)}
.sidebar-btn{width:100%;padding:6px;border-radius:20px;font-size:0.78rem;background:none;border:1px solid var(--border);transition:background var(--tr);margin-top:0.25rem}
.sidebar-btn:hover{background:var(--border)}
.filter-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.3rem}
.filter-header h3{margin:0;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);font-weight:600}
.filter-toggles{display:flex;gap:0.3rem}
.filter-toggles button{background:none;border:none;padding:0;font-size:0.72rem;color:var(--muted);cursor:pointer;opacity:0.7;transition:opacity 0.15s}
.filter-toggles button:hover{opacity:1;color:var(--text)}
.sidebar-lock{text-align:center;padding:1.25rem 0.5rem;color:var(--muted);font-size:0.82rem}
.sidebar-lock-icon{font-size:1.6rem;margin-bottom:0.6rem}
.sidebar-trial-badge{display:inline-block;background:none !important;border:1px solid var(--accent) !important;border-radius:20px;padding:3px 12px;font-size:0.72rem;font-weight:700;color:var(--accent) !important;margin-bottom:0.65rem}
.sidebar-trial-text{font-size:0.81rem;color:var(--text);line-height:1.5;margin-bottom:0.35rem}
.sidebar-trial-sub{font-size:0.72rem;color:var(--muted);margin-bottom:0.85rem;line-height:1.45}
.sidebar-reg-btn{display:block;background:var(--accent) !important;color:#fff;border-radius:20px;padding:8px;font-size:0.82rem;font-weight:700;text-align:center;cursor:pointer;border:none;width:100%;transition:opacity var(--tr)}
.sidebar-reg-btn:hover{opacity:0.88}
.sidebar-upgrade-btn{display:block;margin-top:0.5rem;background:none;border:1px solid var(--border);border-radius:7px;padding:6px;font-size:0.74rem;font-weight:500;color:var(--muted);text-align:center;cursor:pointer;width:100%;transition:background var(--tr)}
.sidebar-upgrade-btn:hover{background:var(--border)}
.sidebar-trial-checklist{display:flex;flex-direction:column;gap:3px;text-align:left;margin:0.6rem 0;padding:0.6rem 0.7rem;background:none !important;border:1px solid var(--border) !important;border-radius:var(--r)}
.sidebar-trial-check{font-size:0.72rem;color:var(--text) !important}
@media(max-width:768px){
  /* Mobile: sidebar mint slide-in drawer balról */
  .sidebar{
    position:fixed !important;
    left:-268px;
    top:56px;
    height:calc(100dvh - 56px);
    z-index:1200;
    width:260px !important;
    padding:0 1rem max(80px, env(safe-area-inset-bottom, 80px)) !important;
    box-shadow:6px 0 28px rgba(0,0,0,0.55);
    transition:left 0.3s cubic-bezier(.4,0,.2,1) !important;
    display:flex !important;
  }
  .sidebar.mobile-open{left:0 !important}
  .sidebar-collapse-btn{display:none !important}
  .sidebar-collapse-top{display:none !important}
  #sidebarRevealTab{display:none !important}
  #tickerFilterBtn{display:flex !important}
  #sidebarMobileClose{display:block !important}
  .article-thumb{width:44px;height:44px}
  .news-thumb{width:60px;height:60px}
}
/* Backdrop mobilon */
#sidebarBackdrop{display:none;position:fixed;inset:0;top:56px;background:rgba(20,18,16,0.45);z-index:399}
/* Mobile szűrők gomb – csak mobilon látható, document flow-ban */
#sidebarMobileBtn{display:none;align-items:center;gap:5px;margin-left:auto;background:var(--card);border:1px solid var(--border);border-radius:7px;padding:3px 9px;font-size:0.76rem;color:var(--muted);cursor:pointer;transition:color var(--tr),background var(--tr);flex-shrink:0}
#sidebarMobileBtn:hover{background:var(--border);color:var(--text)}

/* ── MOBIL ──────────────────────────────────────────────────── */
@media(max-width:600px){

  /* Overflow védelme – semmi ne lógjon ki */
  html,body{overflow-x:hidden;width:100%}

  /* STÁTUSZ-SOR – korábban a hosszú "N hír az elmúlt 24 órából" szöveg és
     az "N élő esemény" jelző együtt lenyomta a ☰ Szűrők gombot a
     következő sorba, ami feleslegesen sok függőleges helyet foglalt el.
     Most a sor nem törik sorba: a hír-számláló szöveg zsugorodik/
     rövidül (…), az élő esemény jelző és a Szűrők gomb viszont mindig
     teljes egészében látszik. */
  .status-bar{flex-wrap:nowrap}
  .status-dot{flex-shrink:0}
  #statusText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}
  .status-events-link{flex-shrink:0}
  #sidebarMobileBtn{flex-shrink:0}

  /* HEADER – timestamp elrejtve, reg badge elrejtve, tömörebb padding */
  header{padding:0 0.75rem;height:52px;gap:0.4rem}
  .header-ts{display:none}
  .reg-trial-badge{display:none}
  .reg-btn{padding:5px 10px;font-size:0.74rem;gap:4px}
  .reg-btn .reg-text{display:none}
  .reg-btn .reg-trial-badge{display:inline;background:none;color:#a8ffcc;padding:0;font-size:0.72rem;font-weight:700;border-radius:0}
  .icon-btn{padding:5px 8px;font-size:0.74rem}
  .icon-btn span{display:none}
  .header-right{gap:0.4rem;min-width:0;flex-shrink:1;overflow:hidden}
  .user-btn{padding:5px 8px;font-size:0.72rem;flex-shrink:1;min-width:0;max-width:140px;display:inline-flex;align-items:center;overflow:hidden}
  .user-btn .user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .user-btn .premium-badge{flex-shrink:0;font-size:0.62rem;padding:1px 5px;margin-left:3px;white-space:nowrap}

  /* LAYOUT */
  .app{flex-direction:column}
  .main{padding:0.75rem 0.75rem 3rem;min-width:0;max-width:100%}

  /* TABS – kisebb padding, görgethetők */
  .tab-btn{padding:0.5rem 0.7rem;font-size:0.78rem}

  /* SEARCH */
  .search-input{font-size:0.84rem}

  /* HOT */
  .hot-title{font-size:0.85rem}
  .hot-header{padding:0.75rem 0.85rem;gap:0.55rem}
  .hot-body>.ci{padding:0 0.85rem 0.85rem}

  /* NEWS FILTERS – egymás alá */
  .news-filters{flex-direction:column;gap:0.5rem}
  .filter-select{width:100%}
  .time-filter-wrap{min-width:0;width:100%}
  /* A másodlagos kategória-szűrő + a harmadlagos szűrőt felfedő "+" gomb
     egy közös sorban marad, a select pedig keskenyebb lesz, hogy kiférjen. */
  .kat-filter-sec-group{width:100%;gap:0.5rem}
  .kat-filter-sec-group .filter-select{width:auto;flex:1;min-width:0}

  /* TREND KPI */
  .trend-kpi-row{gap:0.5rem}
  .trend-kpi{min-width:80px;padding:0.5rem 0.6rem}
  .trend-kpi-val{font-size:1.25rem}
  .trend-metrics-grid{grid-template-columns:1fr}

  /* HBAR label rövidebb */
  .hbar-label{width:80px;font-size:0.72rem}

  /* EXPORT */
  .export-grid{grid-template-columns:1fr}

  /* PRICING */
  .pricing-grid{grid-template-columns:1fr}
  .pricing-card:hover{transform:none} /* hover effect nem kell mobilon */

  /* MODAL – teljes szélesség, kisebb padding */
  .modal{padding:1.5rem 1.1rem;border-radius:12px}
  .modal-overlay{padding:0.5rem}
  .modal h2{font-size:1.05rem}

  /* PREMIUM GATE */
  .premium-gate{padding:1.5rem 1rem}
  .premium-gate h2{font-size:1.1rem}
  .pg-checks{gap:0.4rem}
  .pg-preview{max-width:100%}

  /* WELCOME MODAL */
  .welcome-overlay{padding:0.5rem;align-items:flex-end}
  .welcome-modal{padding:1.4rem 1.25rem 1.1rem;border-radius:14px 14px 10px 10px;max-height:92vh;overflow-y:auto}
  .welcome-title{font-size:1.3rem}
  .welcome-feats{grid-template-columns:1fr;gap:0.5rem}
  .welcome-feat{display:flex;align-items:center;gap:0.75rem;text-align:left;padding:0.7rem}
  .welcome-feat-icon{font-size:1.2rem;margin:0;flex-shrink:0}
  .welcome-perks{flex-direction:column;align-items:flex-start;gap:0.35rem;padding:0 0.25rem}
  .welcome-cta-btn{font-size:0.85rem;padding:11px}

  /* PROFILE MODAL belső elemek */
  .modal[style*="max-width:480px"]{max-width:100%!important}
}

/* Közepes képernyő (tablet) */
@media(max-width:900px) and (min-width:601px){
  .header-ts{display:none}
  .main{padding:1rem 1rem 3rem}
  .welcome-feats{grid-template-columns:1fr 1fr;gap:0.6rem}
  .welcome-modal{padding:1.75rem 1.5rem 1.4rem}
}

/* MAIN */
.main{flex:1;min-width:0;padding:1.25rem 1.25rem 4rem;max-width:760px;margin:0 auto}

/* STATUS */
.status-bar{display:flex;align-items:center;gap:0.6rem;font-size:0.78rem;color:var(--muted);margin-bottom:1rem;flex-wrap:wrap}
.status-dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 6px #3ddc8488;flex-shrink:0}
.status-dot.loading{background:var(--accent2);box-shadow:0 0 6px #f5a62388}
.status-dot.error{background:var(--accent);box-shadow:0 0 6px #e8401c88}

/* ERRORS */
.errors-banner{background:#1e1410;border:1px solid #4a2a1a;border-radius:var(--r);padding:0.75rem 1rem;margin-bottom:1rem;font-size:0.8rem}
.errors-banner summary{cursor:pointer;color:var(--accent2);font-weight:600}
.errors-banner ul{margin-top:0.5rem;padding-left:1rem;color:var(--muted)}

/* TABS */
.tabs-wrap{position:relative;margin-bottom:1.5rem;display:none}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;cursor:grab}
.tabs.dragging{cursor:grabbing;user-select:none}
.tabs::-webkit-scrollbar{display:none}
.tabs-fade{position:absolute;top:0;bottom:1px;width:28px;pointer-events:none;opacity:0;transition:opacity .15s}
.tabs-fade-left{left:0;background:linear-gradient(90deg, var(--bg), transparent)}
.tabs-fade-right{right:0;background:linear-gradient(270deg, var(--bg), transparent)}
.tabs-fade.show{opacity:1}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{padding:0.55rem 1rem;font-size:0.82rem;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--tr),border-color var(--tr)}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--text);border-bottom-color:var(--accent)}
.tab-btn.premium-tab::after{content:"★";color:var(--gold);margin-left:4px;font-size:0.65rem}
.tab-panel{display:none}
.tab-panel.active{display:block}
.tab-panel.active.slide-from-right{animation:none}
.tab-panel.active.slide-from-left{animation:none}
@keyframes tabSlideFromRight{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}
@keyframes tabSlideFromLeft{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:translateX(0)}}

/* SEARCH */
.search-wrap{position:relative;margin-bottom:1rem}
.search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;opacity:0.5}
.search-input{width:100%;background:none;border:none;border-radius:0;padding:0.6rem 1rem 0.6rem 2.2rem;color:var(--text);font-size:0.88rem;outline:none;transition:border-color .15s;border-bottom:1px solid var(--border);padding-left:2.1rem}
/* Chrome autofill valós idejű észlelése – a böngésző nem fire-öl input eseményt
   autofillnél, de a :-webkit-autofill pszeudo-osztályt igen, amihez egy animáció
   köthető, amit JS-ből el tudunk kapni (animationstart) és a mezőt kiüríthetjük. */
@keyframes onSearchAutofill { from{opacity:1} to{opacity:1} }
.search-input:-webkit-autofill{ animation-name:onSearchAutofill; animation-duration:0.001s; }
.search-input:focus{border-color:var(--accent);border-bottom-color:var(--accent);outline:none}
.search-input::placeholder{color:var(--muted)}
mark.search-hl{background:rgba(232,64,28,0.45);color:#fff;font-weight:700;border-radius:3px;padding:0;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* SKELETON */
.skeleton{background:linear-gradient(90deg,var(--card) 25%,var(--border) 50%,var(--card) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r)}
@keyframes shimmer{to{background-position:-200% 0}}
/* CLS: a skeleton geometriája a VALÓDI .hot-item/.news-card kártyáéhoz
   igazodik (azonos függőleges padding és elválasztó vonal), hogy a
   betöltő-állapot lecserélése ne járjon magasság-ugrással. */
.skel-card{background:none;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:1rem 0;margin-bottom:0}
.skel-line{height:11px;border-radius:4px;margin-bottom:8px}
.w80{width:80%}.w60{width:60%}.w40{width:40%}

/* HOT */
.hot-list{display:block;flex-direction:column;gap:0}
.hot-item{background:none;border:none;border-radius:0;overflow:hidden;transition:border-color var(--tr);border-bottom:1px solid var(--border);padding:1rem 0}
.hot-item:hover{border-color:#353d58}
.hot-header{display:flex;align-items:flex-start;gap:0.7rem;padding:0;cursor:pointer;user-select:none}
.hot-rank{font-family:'Source Serif 4',serif;font-size:1.05rem;font-weight:600;color:var(--muted);min-width:1.6rem;padding-top:1px}
.hot-meta{flex:1;min-width:0}
.hot-title{font-size:1.05rem;font-weight:600;line-height:1.35;margin-bottom:0.3rem;font-family:'Source Serif 4',serif}
.hot-sub{display:flex;align-items:center;gap:0.45rem;flex-wrap:wrap}
.kat-badge{font-size:0.67rem;font-weight:600;padding:0 !important;border-radius:0;background:none !important;color:var(--accent) !important}
.count-badge{font-size:0.67rem;color:var(--muted)}
.hot-chevron{color:var(--muted);flex-shrink:0;transition:transform var(--tr);margin-top:3px}
.hot-item.open .hot-chevron{transform:rotate(180deg)}
.share-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--muted);padding:5px;border-radius:6px;opacity:0.75;transition:opacity 0.15s,background 0.15s,color 0.15s;margin-top:1px}
.share-btn:hover{opacity:1;color:var(--text);background:var(--surface)}
.share-menu{position:absolute;z-index:9999;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 8px 24px rgba(0,0,0,0.35);min-width:170px}
.share-menu button{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--text);text-align:left;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:0.83rem;font-family:inherit}
.share-menu button:hover{background:var(--surface)}
.share-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--card);border:1px solid var(--border);color:var(--text);padding:10px 18px;border-radius:9px;font-size:0.83rem;box-shadow:0 8px 24px rgba(0,0,0,0.4);opacity:0;transition:opacity 0.25s,transform 0.25s;z-index:10000;max-width:90vw}
.share-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ── VISSZA A TETEJÉRE gomb – minden fülön aktív, ha a user legörgetett
     (l. BACK_TO_TOP_TABS / _updateBackToTopBtn()). ── */
.back-to-top-btn{position:fixed;right:1.25rem;bottom:1.25rem;z-index:480;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.35);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}
.back-to-top-btn.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top-btn:hover{filter:brightness(1.08)}
@media(max-width:768px){.back-to-top-btn{right:1rem;bottom:1rem;width:40px;height:40px}}
.hot-body{display:grid;grid-template-rows:minmax(0,0fr);transition:grid-template-rows 0.3s ease}
.hot-body>.ci{overflow:hidden;padding:0 1rem 1rem;border-top:none}
.hot-item.open .hot-body{grid-template-rows:minmax(0,1fr)}
.source-chips{display:flex;flex-wrap:wrap;gap:0;padding:0.7rem 0 0.5rem}
.source-chips a.chip{text-decoration:none;cursor:pointer;background:none !important;border:none !important;color:var(--muted) !important;padding:0 !important;font-size:0.78rem}
.source-chips a.chip:hover{filter:none;color:var(--text) !important}
.chip{font-size:0.67rem;font-weight:600;padding:2px 7px;border-radius:20px;border:1px solid}

.article-list{display:flex;flex-direction:column;gap:0}
.article-row{background:none;border:none;border-radius:0;padding:0.75rem 0;overflow:hidden;border-bottom:1px solid var(--border)}
.article-thumb-link{float:left;margin:0 0.65rem 0.4rem 0;display:block}
.article-thumb{width:52px;height:52px;border-radius:6px;object-fit:cover;background:var(--card);cursor:pointer;display:block}
.article-source{font-size:0.69rem;color:var(--muted);margin-bottom:3px}
.article-title{font-size:0.88rem;font-weight:600;line-height:1.35;margin-bottom:3px;font-family:'Source Serif 4',serif}
.article-desc{font-size:0.77rem;color:var(--muted);line-height:1.45;margin-bottom:5px}
.article-link{font-size:0.72rem;color:var(--accent);display:inline-flex;align-items:center;gap:3px}
.article-link:hover{color:#ff7055}

/* KAT-HOT */
.kat-section{background:var(--card);border:1px solid var(--border);border-radius:var(--r);margin-bottom:0.6rem;overflow:hidden}
.kat-section-header{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 1rem;cursor:pointer;user-select:none}
.kat-section-title{font-size:0.9rem;font-weight:600}
.kat-section-meta{font-size:0.72rem;color:var(--muted);display:flex;align-items:center;gap:0.5rem}
.kat-section-body{display:grid;grid-template-rows:minmax(0,0fr);transition:grid-template-rows 0.3s ease}
.kat-section-body>.ci{overflow:hidden;padding:0 0.75rem 0.75rem;border-top:none}
.kat-section.open .kat-section-body{grid-template-rows:minmax(0,1fr)}
.kat-section.open .hot-chevron{transform:rotate(180deg)}
.kat-hot-list{display:flex;flex-direction:column;gap:0.45rem;padding-top:0.6rem}
.kat-hot-item{background:none;border:none;border-radius:0;overflow:hidden;border-bottom:1px solid var(--border);padding:1rem 0}
.kat-hot-header{display:flex;align-items:flex-start;gap:0.6rem;padding:0.65rem 0.8rem;cursor:pointer;user-select:none}
.kat-hot-rank{font-family:'Sora',sans-serif;font-size:0.85rem;font-weight:800;color:var(--accent);min-width:22px}
.kat-hot-body{display:grid;grid-template-rows:minmax(0,0fr);transition:grid-template-rows 0.3s ease}
.kat-hot-body>.ci{overflow:hidden;padding:0 0.8rem 0.7rem;border-top:none}
.kat-hot-item.open .kat-hot-body{grid-template-rows:minmax(0,1fr)}
.kat-hot-item.open .hot-chevron{transform:rotate(180deg)}

/* TREND */
.trend-chart-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1rem 0.6rem;margin-bottom:1.25rem}
.trend-chart-wrap svg{display:block;width:100%;overflow:visible}
.trend-grid{display:flex;flex-direction:column;gap:0.4rem}
.trend-row{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:0.6rem 0.9rem}
.trend-row-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.35rem}
.trend-kat{font-size:0.82rem;font-weight:600}
.trend-stat{font-size:0.72rem;color:var(--muted)}
.trend-stat strong{color:var(--text)}
.trend-minibar{width:100%;height:42px;display:block}
/* TREND METRIKÁK */
.trend-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:1.25rem}
.trend-metric-card{background:none;border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:none}
.trend-metric-title{font-size:0.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:0.75rem}
.trend-kpi-row{display:flex;gap:0.75rem;flex-wrap:wrap;margin-bottom:1.25rem}
.trend-kpi{background:none;border:1px solid var(--border);border-radius:var(--r);padding:0.6rem 0.9rem;flex:1;min-width:100px;text-align:center;box-shadow:none}
.trend-kpi-val{font-family:'Sora',sans-serif;font-size:1.5rem;font-weight:800;line-height:1}
.trend-kpi-lbl{font-size:0.7rem;color:var(--muted);margin-top:3px}
.hbar-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem;font-size:0.78rem}
.hbar-label{width:110px;flex-shrink:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.hbar-track{flex:1;background:var(--surface);border-radius:3px;height:14px;overflow:hidden}
.hbar-fill{height:100%;border-radius:3px;transition:width .4s}
.hbar-val{width:32px;flex-shrink:0;text-align:right;color:var(--text);font-weight:600}

/* KAT LIST */
.kat-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.6rem;margin-bottom:0.8rem}
.kat-view-toggle{display:flex;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:3px;gap:2px}
.kat-view-btn{background:none;border:none;color:var(--muted);font-size:0.78rem;font-weight:600;padding:6px 12px;border-radius:6px;cursor:pointer;transition:background var(--tr),color var(--tr)}
.kat-view-btn:hover{color:var(--text)}
.kat-view-btn.active{background:var(--accent);color:#fff}
.kat-order-btn{background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:0.78rem;font-weight:600;padding:7px 14px;cursor:pointer;transition:border-color var(--tr)}
.kat-order-btn:hover{border-color:var(--accent)}
.kat-active-badge{display:inline-flex;align-items:center;gap:3px;font-size:0.66rem;font-weight:700;background:rgba(232,64,28,0.18);color:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:1px 8px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.kat-pdf-btn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:0.72rem;font-weight:600;padding:4px 9px;cursor:pointer;transition:border-color var(--tr),color var(--tr);white-space:nowrap}
.kat-pdf-btn:hover{border-color:var(--accent);color:var(--accent)}
.kat-subfilter{background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:0.72rem;padding:4px 6px;cursor:pointer;max-width:160px;outline:none;transition:border-color var(--tr)}
.kat-subfilter:hover,.kat-subfilter:focus{border-color:var(--accent)}
.kat-list{display:flex;flex-direction:column;gap:0.6rem}
.kat-block{background:none;border:none;border-radius:0;overflow:hidden;border-bottom:1px solid var(--border);padding:1rem 0}
.kat-block-header{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 1rem;cursor:pointer;user-select:none;gap:0.6rem}
.kat-block-title{font-size:0.9rem;font-weight:600;display:flex;align-items:center;flex-wrap:wrap;font-family:'Source Serif 4',serif}
.kat-block-count{font-size:0.75rem;color:var(--muted)}
.kat-block-body{display:grid;grid-template-rows:minmax(0,0fr);transition:grid-template-rows 0.3s ease}
.kat-block-body>.ci{overflow:hidden;border-top:none}
.kat-block.open .kat-block-body{grid-template-rows:minmax(0,1fr)}

/* SORREND MODAL */
.order-list{display:flex;flex-direction:column;gap:0.4rem;max-height:50vh;overflow-y:auto;margin-bottom:1rem}
.order-item{display:flex;align-items:center;gap:0.6rem;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:0.5rem 0.7rem;transition:border-color 0.15s}
.order-item-label{flex:1;font-size:0.84rem;display:flex;align-items:center;gap:0.4rem;user-select:none}
.order-drag-handle{cursor:grab;color:var(--muted);font-size:1.15rem;flex-shrink:0;touch-action:none;padding:8px 10px;margin:-8px -4px -8px -6px;line-height:1;user-select:none;border-radius:6px}
.order-drag-handle:active{cursor:grabbing;background:var(--border)}
.order-drag-handle:hover{color:var(--text)}
.order-item.dragging{opacity:0.45;border-color:var(--accent);cursor:grabbing}

/* FIÓKBEÁLLÍTÁSOK – animált lenyíló */
.danger-zone-body{display:grid;grid-template-rows:minmax(0,0fr);transition:grid-template-rows 0.3s ease}
.danger-zone-body>.ci{overflow:hidden}
.danger-zone-inner{padding:0.75rem;border-top:1px solid var(--border);background:var(--card);display:flex;flex-direction:column;gap:0.5rem}
.danger-zone-body.open{grid-template-rows:minmax(0,1fr)}
.kat-block.open .hot-chevron{transform:rotate(180deg)}
.kat-news-item{padding:0.7rem 1rem;border-bottom:1px solid var(--border);overflow:hidden}
.kat-news-item:last-child{border-bottom:none}
.kat-news-title{font-size:0.86rem;font-weight:500;line-height:1.4;margin-bottom:3px}
.kat-news-desc{font-size:0.77rem;color:var(--muted);line-height:1.45;margin-bottom:4px}
.kat-news-meta{font-size:0.7rem;color:var(--muted);display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap}
.kat-news-link{color:var(--accent);display:inline-flex;align-items:center;gap:2px;margin-left:auto}
.kat-news-link:hover{color:#ff7055}

/* NEWS */
.news-filters{display:flex;gap:0.6rem;margin-bottom:0.75rem;flex-wrap:wrap;align-items:center}
.filter-select{background:var(--card);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:0.45rem 0.75rem;font-size:0.82rem;outline:none;cursor:pointer;flex-shrink:0}
.kat-filter-add-btn{background:var(--card);border:1px solid var(--border);border-radius:7px;color:var(--muted);width:2.1rem;height:2.1rem;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;flex-shrink:0;transition:background var(--tr),color var(--tr)}
.kat-filter-sec-group{display:flex;gap:0.6rem;align-items:center;flex-shrink:0}
.kat-filter-add-btn:hover{background:var(--border);color:var(--text)}
.kat-filter-add-btn.active{color:var(--accent);border-color:var(--accent)}
.filter-select:focus{border-color:var(--accent)}
.time-filter-wrap{display:flex;align-items:center;gap:0.6rem;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:6px 12px;min-width:220px;flex:1}
.time-filter-icon{color:var(--muted);font-size:0.8rem;flex-shrink:0}
.time-range-labels{display:flex;justify-content:space-between;font-size:0.68rem;color:var(--muted);margin-top:2px}
.time-range-val{font-size:0.75rem;font-weight:700;color:var(--accent);white-space:nowrap;min-width:60px;text-align:right}
/* Dual range slider */
.range-track{position:relative;height:4px;background:var(--border);border-radius:2px;margin:4px 0}
.range-track-fill{position:absolute;height:100%;background:var(--accent);border-radius:2px;pointer-events:none}
.range-wrap{position:relative;width:100%}
.range-wrap input[type=range]{position:absolute;width:100%;height:4px;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;top:0;left:0;margin:0}
.range-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);cursor:pointer;pointer-events:all;transition:transform .15s,box-shadow .15s}
.range-wrap input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 0 4px rgba(232,64,28,0.2)}
.range-wrap input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);cursor:pointer;pointer-events:all}
.news-count{font-size:0.78rem;color:var(--muted);margin-bottom:0.75rem}
.news-list{display:block;flex-direction:column;gap:0.5rem}
.news-card{background:none;border:none;border-radius:0;padding:1rem 0;transition:border-color var(--tr);display:flex;gap:0.85rem;align-items:flex-start;border-bottom:1px solid var(--border)}
.news-thumb{width:76px;height:76px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--surface);cursor:pointer;display:block}
.news-body{flex:1;min-width:0}
.news-card:hover{border-color:#353d58}
.news-card-title{font-size:0.98rem;font-weight:600;line-height:1.35;margin-bottom:0.35rem;font-family:'Source Serif 4',serif}
.news-card-desc{font-size:0.78rem;color:var(--muted);line-height:1.45;margin-bottom:0.45rem}
.news-card-foot{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.news-tag{font-size:0.67rem;font-weight:600;padding:0 !important;border-radius:0;background:none !important;color:var(--accent) !important}

/* ── ÉLŐ ADATSÁV + ÉLŐ ESEMÉNYEK ─────────────────────────────────── */
.status-events-link{display:flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;text-decoration:none;font-size:0.78rem;margin-left:4px;white-space:nowrap}
.status-hirek-link{color:inherit;cursor:pointer}
.status-hirek-link:hover{color:var(--text);text-decoration:underline}
.status-events-link:hover{text-decoration:underline}
.status-events-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
.header-ticker-slot{flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;margin:0 1rem}
.live-ticker{display:flex;align-items:center;gap:8px;padding:0.5rem 0;border-bottom:1px solid var(--border);margin-bottom:0.5rem}
.live-ticker-viewport{flex:1;min-width:0;overflow:hidden;cursor:grab;touch-action: pan-y}
.live-ticker-viewport.dragging{cursor:grabbing}
.live-ticker-items{display:flex;gap:0;white-space:nowrap;font-size:0.76rem;color:var(--muted);width:max-content;will-change:transform;animation:tickerMarquee 60s linear infinite}
/* FONTOS: a húzás/lendület alatti "szüneteltetést" NEM animation-play-
   state-tel oldjuk meg (l. a JS-ben) – egy PAUZÁLT CSS animáció a cascade-
   ben akkor is felülírja az inline transform-ot, ha meg van állítva. Az
   animációt húzás közben teljesen le kell választani (animation-name:none),
   nem csak szüneteltetni. */
/* A tartalom duplikálva van (l. renderLiveTicker), a -50%-ig tartó
   animáció pontosan egy "másolatnyit" tol el – a végén észrevétlenül
   nulláról indul újra a böngésző saját, garantáltan hurkoló mechanizmusa
   szerint, semmilyen kézzel számolt JS-matek nem kell hozzá. Az
   animation-duration-t (sebesség) és animation-delay-t (húzás utáni
   folytonos visszacsatlakozás) a JS állítja be dinamikusan. */
@keyframes tickerMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.live-ticker-item{padding-right:14px;margin-right:14px;border-right:1px solid var(--border);flex-shrink:0;user-select:none}
.live-ticker-item:last-child{border-right:none;margin-right:0;padding-right:0}
.live-ticker-item b{color:var(--text);font-weight:600}
.live-ticker-settings-btn{display:none;flex-shrink:0;background:none;border:1px solid var(--border);border-radius:20px;width:24px;height:24px;color:var(--muted);cursor:pointer;font-size:0.8rem;align-items:center;justify-content:center;padding:0}
.live-ticker-settings-btn:hover{border-color:var(--muted);color:var(--text)}
/* Fejlécbe költöztetett állapot (elég széles ablaknál) – kompaktabb, a
   header 56px magasságába illő, szegély/margó nélküli változat. */
.header-ticker-slot .live-ticker{border-bottom:none;margin-bottom:0;padding:0;height:32px;border-left:1px solid var(--border);border-right:1px solid var(--border);padding:0 1rem}
.header-ticker-slot .live-ticker-settings-btn{width:20px;height:20px;font-size:0.7rem}
.esemeny-filter-row{display:flex;justify-content:left;gap:16px;overflow-x:auto;padding:0.2rem 0 0.9rem;white-space:nowrap}
.esemeny-kategoria-cim{font-size:0.78rem;font-weight:700;color:var(--text);text-align:center;padding:0.9rem 0 0.5rem;text-transform:none}
.esemeny-filter-chip{background:none;border:none;padding:0 0 5px;font-size:0.78rem;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;font-family:inherit}
.esemeny-filter-chip.active{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}
.esemeny-map-wrap{position:relative;z-index:0;height:280px;border:1px solid var(--border);border-radius:var(--r);margin-bottom:1rem;overflow:hidden;background:var(--card)}
/* Teljes képernyős nézet: a wrap kiugrik a normál elrendezésből, az
   egész viewportot elfoglalja. A z-index jóval a többi UI-elem (modalok,
   fejléc stb.) fölött van, hogy tényleg semmi ne takarja ki. */
.esemeny-map-wrap.fullscreen{position:fixed;inset:0;z-index:5000;height:100vh;width:100vw;margin:0;border-radius:0;border:0}
.esemeny-map-fullscreen-btn{position:absolute;top:10px;right:10px;z-index:1000;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:1rem;line-height:1;cursor:pointer;transition:background var(--tr)}
.esemeny-map-fullscreen-btn:hover{background:var(--border)}
/* Mobilon a térkép amúgy is a rendelkezésre álló teljes szélességet
   kapja, és a böngésző saját UI-ja (címsor, tabok) miatt a "teljes
   képernyő" élmény ott kevésbé egyértelmű/hasznos – ezért a gomb csak
   asztali nézetben jelenik meg. */
@media(max-width:768px){.esemeny-map-fullscreen-btn{display:none}}
/* Jelmagyarázat: a korábbi "mindig kint lévő, alul teljes szélességben
   lebegő sáv" ütközött a Leaflet saját attribution-controljával (jobbra
   lent) – bármennyire is próbáltuk kimérni a helyét, mobilon szűk helyen
   ez törékeny maradt. Ehelyett most egy gombbal nyitható/csukható,
   FÜGGŐLEGES panel van a BAL ALSÓ sarokban – a Leaflet attribúció a jobb
   alsó sarokban van, a zoom +/- gombok a bal FELSŐ sarokban –, tehát ez a
   pozíció eleve nem ütközhet egyikkel sem, nincs szükség futásidejű
   méricskélésre.*/
.esemeny-map-legend-toggle{position:absolute;left:8px;bottom:8px;z-index:950;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--border);color:var(--text);font-size:0.85rem;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.25);transition:background var(--tr)}
.esemeny-map-legend-toggle:hover{background:var(--border)}
.esemeny-map-legend{position:absolute;left:8px;bottom:44px;z-index:940;display:none;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 11px;box-shadow:0 4px 18px rgba(0,0,0,0.3);max-height:70%;overflow-y:auto;max-width:calc(100% - 20px)}
.esemeny-map-legend.open{display:flex}
.eml-legend-item{display:flex;align-items:center;gap:6px;font-size:0.72rem;font-weight:600;color:var(--text);white-space:nowrap}
.eml-legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,0.15);background-image:radial-gradient(circle at 34% 28%, rgba(255,255,255,0.85), rgba(255,255,255,0) 62%)}
@keyframes esemenyKiemeles{
  0%{transform:scale(1);box-shadow:none}
  12%{transform:scale(1.03);box-shadow:0 0 0 3px var(--accent)}
  88%{transform:scale(1.03);box-shadow:0 0 0 3px var(--accent)}
  100%{transform:scale(1);box-shadow:none}
}
.esemeny-kiemelt{animation:esemenyKiemeles 3s ease-out;position:relative;z-index:1}
.esemeny-vissza-terkephez-btn{display:none;align-items:center;gap:4px;position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:500;background:var(--accent);color:#fff;border:none;border-radius:20px;padding:8px 16px;font-size:0.82rem;font-weight:600;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,0.3)}
.esemeny-map{width:100%;height:100%;display:block}
.esemeny-map-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:0.8rem;text-align:center;padding:0 1.5rem;pointer-events:none;z-index:400}
/* A térképi buborék MOSTANTÓL egy Leaflet POPUP (nem Tooltip): kattintásra
   nyílik, és nyitva marad, amíg a userben lévő X vagy "Bezárás" gombbal be
   nem csukja – ugyanaz a viselkedés asztalin és mobilon egyaránt, nincs
   többé külön hover-only/permanens-pill ág. A Leaflet a popup saját
   .leaflet-popup-content elemén MAGÁTÓL letiltja a scroll/klikk
   propagációt a térkép felé, és autoPan-nal magától a látható területen
   belülre tolja a térképet, ha a buborék kilógna – emiatt nem kell többé
   kézzel számolt fel/le/oldalra igazítás vagy egyedi wheel-kezelés.
   A className opció a KÜLSŐ .leaflet-popup elemre kerül, ezért a látható
   dobozt (.leaflet-popup-content-wrapper) és a kis nyilat
   (.leaflet-popup-tip) ezen keresztül, leszármazott szelektorral
   stílusozzuk. */
.esemeny-map-popup .leaflet-popup-content-wrapper{background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 26px rgba(0,0,0,0.32);padding:0;overflow:hidden}
.esemeny-map-popup .leaflet-popup-content{margin:0}
.esemeny-map-popup .leaflet-popup-tip-container{width:24px;height:12px}
.esemeny-map-popup .leaflet-popup-tip{background:var(--card);border:1px solid var(--border);box-shadow:none}
/* A tetején lévő 4px-es csík az esemény saját (kategória/forrás szerinti)
   színét kapja inline style-lal (l. JS) – ez adja a "kártya" jelleget és
   segít azonnal azonosítani a típust, mielőtt elolvasnád a szöveget. */
.emp-topbar{height:4px}
.emp-body{position:relative;padding:9px 12px 11px}
.emp-x{position:absolute;top:6px;right:6px;width:24px;height:24px;border:none;background:var(--border);color:var(--text);border-radius:50%;font-size:0.8rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.emp-x:hover{background:var(--muted);color:var(--card)}
.emp-cim{font-size:0.84rem;font-weight:700;line-height:1.3;padding-right:26px}
.emp-meta{font-size:0.64rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.03em;margin-top:3px}
.emp-uj-jelzo{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:20px;background:var(--accent);color:#fff;font-size:0.6rem;font-weight:800;letter-spacing:0.02em;vertical-align:1px}
.emp-ugras{display:block;width:100%;margin-top:9px;padding:7px 10px;border:none;border-radius:7px;background:var(--accent);color:#fff;font-size:0.74rem;font-weight:700;cursor:pointer;font-family:inherit}
.emp-ugras:hover{filter:brightness(1.1)}
.emp-leiras{font-size:0.76rem;color:var(--text);opacity:0.85;line-height:1.45;margin-top:9px;max-height:150px;overflow-y:auto}
.emp-bezar{display:block;width:100%;margin-top:9px;padding:6px 10px;border:1px solid var(--border);border-radius:7px;background:none;color:var(--muted);font-size:0.72rem;font-weight:600;cursor:pointer;font-family:inherit}
.emp-bezar:hover{border-color:var(--muted);color:var(--text)}
/* A pontok MOSTANTÓL nem sima L.circleMarker (egyszínű SVG kör), hanem
   L.marker + divIcon (l. renderEsemenyMap JS) – ez kell ahhoz, hogy
   valódi CSS-gradienst, árnyékot és pulzáló gyűrűt tudjunk rárakni,
   amit egy natív SVG circle "fill"-jén sokkal nehézkesebb lenne (oda
   külön SVG <radialGradient> definíció kellene).
   .epont: maga a látható, "fényes gombszerű" pötty – világos, balra-fel
   eltolt kiemeléssel (mintha fentről sütne rá a fény) + fehér gyűrű a
   térkép-háttértől való elváláshoz + finom árnyék a mélységérzetért.
   .epont-pulzus: csak az "Új" (1 óránál frissebb) eseményeknél kerül be
   – egy kifelé táguló, halványuló gyűrű, NAGYON lassú (4s) ciklussal,
   ahogy kérted ("nagyon nagyon lassan pulzáljanak"). */
.esemeny-map-pin{cursor:pointer;transition:transform 0.15s ease}
.esemeny-map-pin:hover .epont{transform:scale(1.35)}
.epont{position:relative;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 34% 28%, rgba(255,255,255,0.9), rgba(255,255,255,0) 62%), var(--epont-szin);border:1px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,0.4),0 0 0 1px rgba(0,0,0,0.06);transition:transform 0.15s ease}
.epont-pulzus{position:absolute;inset:-7px;border-radius:50%;background:var(--epont-szin);opacity:0.5;animation:epontPulzalas 4s ease-out infinite;pointer-events:none}
@keyframes epontPulzalas{
  0%{transform:scale(0.55);opacity:0.5}
  100%{transform:scale(2.4);opacity:0}
}
@keyframes esemenyMapPinPulzalas{
  0%,100%{transform:scale(1)}
  50%{transform:scale(2)}
}
/* 0.6s × 5 ismétlés = 3 másodperc – ugyanaz az időtartam, mint a lista-
   kártya kiemelésénél (esemenyKiemeles), csak itt a térképi ponton.
   Ez a lista-kártyáról a térképre ugráskor kiemelt, FIGYELEMFELKELTŐ
   pulzálás – nem tévesztendő össze a fenti, folyamatos "Új"-jelzővel. */
.esemeny-map-pin-pulzalo .epont{animation:esemenyMapPinPulzalas 0.6s ease-in-out 5}
.news-source{font-size:0.71rem;color:var(--muted)}
.news-link{margin-left:auto;font-size:0.72rem;color:var(--accent);display:inline-flex;align-items:center;gap:3px}
.news-link:hover{color:#ff7055}

/* EXPORT */
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
.export-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem}
.export-card h3{font-size:0.9rem;font-weight:700;margin-bottom:0.4rem}
.export-card p{font-size:0.78rem;color:var(--muted);margin-bottom:0.9rem;line-height:1.5}
.export-btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;border-radius:7px;padding:7px 14px;font-size:0.82rem;font-weight:600;transition:opacity var(--tr);width:100%;justify-content:center}
.export-btn:hover{opacity:0.88}
.export-textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:monospace;font-size:0.75rem;padding:0.75rem;resize:vertical;outline:none;margin-top:0.5rem}
.copy-btn{margin-top:0.5rem;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:6px;font-size:0.78rem;transition:background var(--tr)}
.copy-btn:hover{background:var(--border)}

/* PREMIUM GATE */
.premium-gate{background:none;border:1px solid var(--border);border-radius:var(--r);padding:2rem 1.5rem;text-align:center;margin-top:0.5rem}
.premium-gate-icon{font-size:2.5rem;margin-bottom:0.75rem}
.premium-gate h2{font-family:'Source Serif 4',serif;font-size:1.3rem;font-weight:600;margin-bottom:0.5rem}
.premium-gate p{color:var(--muted);font-size:0.88rem;margin-bottom:1.5rem;line-height:1.6}
.premium-gate-btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;border-radius:20px;padding:10px 22px;font-size:0.9rem;font-weight:700;cursor:pointer;border:none;transition:opacity var(--tr)}
.premium-gate-btn:hover{opacity:0.88}
.pg-preview{border-radius:var(--r);overflow:hidden;margin:0 auto 1.25rem;max-width:380px;background:var(--bg);border:1px solid var(--border);padding:0.75rem;position:relative}
.pg-preview-blur{filter:blur(4px);opacity:0.3;pointer-events:none;user-select:none}
.pg-preview-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.pg-preview-lock span{font-size:1.4rem}
.pg-preview-lock small{font-size:0.7rem;color:var(--muted)}
.pg-mock-bar{height:10px;background:var(--border);border-radius:4px;margin-bottom:7px}
.wt10-subtitle{font-size:0.8rem;color:var(--muted);margin-bottom:0.6rem}
.wt10-banner{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:0.6rem 0.9rem;margin-bottom:0.85rem;font-size:0.8rem;color:#c8cad8;display:flex;align-items:center;gap:8px}
.wt10-banner strong{color:var(--text)}
.wt10-divider{display:flex;align-items:center;gap:10px;margin:1.1rem 0 0.75rem}
.wt10-divider::before,.wt10-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.wt10-divider span{font-size:0.72rem;color:var(--muted);white-space:nowrap}
.wt10-lockwrap{position:relative;border-radius:var(--r);overflow:hidden}
.wt10-blur{filter:blur(5px);opacity:0.55;pointer-events:none;user-select:none;display:flex;flex-direction:column;gap:0.6rem}
.wt10-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:1rem;background:linear-gradient(180deg,rgba(28,32,48,0.35),rgba(13,15,20,0.92))}
.wt10-overlay span{font-size:1.5rem}
.wt10-overlay-title{font-size:0.9rem;font-weight:700;color:var(--text)}
.wt10-overlay-sub{font-size:0.78rem;color:var(--muted);max-width:280px}
.wt10-overlay .premium-gate-btn{margin-top:6px}
.pg-mock-row{display:flex;gap:6px;margin-bottom:7px}
.pg-mock-pill{height:22px;background:var(--border);border-radius:20px}
.pg-checks{display:flex;gap:0.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.25rem}
.pg-check{display:inline-flex;align-items:center;gap:4px;font-size:0.72rem;color:var(--muted)}
.pg-check b{color:var(--accent)}

/* WELCOME MODAL */
.welcome-overlay{position:fixed;inset:0;z-index:500;background:rgba(20,18,16,0.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1rem;animation:wnFade 0.25s ease}
@keyframes wnFade{from{opacity:0}to{opacity:1}}
@keyframes wnUp{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
.welcome-modal{background:var(--surface);border:1px solid var(--border);border-radius:8px;max-width:520px;width:100%;padding:2rem 1.75rem 1.5rem;position:relative;animation:wnUp 0.35s cubic-bezier(.2,.8,.3,1);box-shadow:0 24px 80px rgba(0,0,0,0.25)}
.welcome-close-btn{position:absolute;top:0.9rem;right:0.9rem;background:var(--card);border:1px solid var(--border);color:var(--muted);width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:0.85rem;cursor:pointer;transition:background var(--tr),color var(--tr)}
.welcome-close-btn:hover{background:var(--border);color:var(--text)}
.welcome-eyebrow{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--accent);color:var(--accent);border-radius:20px;padding:3px 11px;font-size:0.72rem;font-weight:700;margin-bottom:1rem;letter-spacing:.02em}
.welcome-title{font-family:'Source Serif 4',serif;font-size:1.55rem;font-weight:700;line-height:1.25;margin-bottom:0.45rem}
.welcome-title span{color:var(--accent)}
.welcome-sub{color:var(--muted);font-size:0.85rem;margin-bottom:1.4rem;line-height:1.55}
.welcome-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:0.6rem;margin-bottom:1.4rem}
@media(max-width:480px){.welcome-feats{grid-template-columns:1fr}}.welcome-feat{background:none;border:1px solid var(--border);border-radius:var(--r);padding:0.85rem 0.7rem;text-align:center;transition:border-color var(--tr)}
.welcome-feat:hover{border-color:var(--muted)}
.welcome-feat-icon{font-size:1.4rem;margin-bottom:0.35rem}
.welcome-feat-name{font-size:0.77rem;font-weight:700;color:var(--text);margin-bottom:0.2rem}
.welcome-feat-info{font-size:0.69rem;color:var(--muted);line-height:1.4}
.welcome-cta-btn{width:100%;background:var(--accent);border:none;border-radius:20px;padding:13px;font-size:0.93rem;font-weight:700;color:#fff;cursor:pointer;transition:opacity var(--tr);margin-bottom:0.75rem;display:flex;align-items:center;justify-content:center;gap:8px}
.welcome-cta-btn:hover{opacity:0.9}
.welcome-perks{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0.5rem 1rem;margin-bottom:1rem}
.welcome-perk{display:flex;align-items:center;gap:4px;font-size:0.71rem;color:var(--muted)}
.welcome-perk b{color:var(--accent);font-size:0.8rem}
.welcome-later{width:100%;background:none;border:none;color:var(--muted);font-size:0.78rem;cursor:pointer;padding:3px;transition:color var(--tr)}
.welcome-later:hover{color:var(--text)}
.welcome-already{margin-top:0.6rem;text-align:center;font-size:0.75rem;color:var(--muted)}
.welcome-already a{color:var(--accent);cursor:pointer}
.welcome-already a:hover{text-decoration:underline}

/* PRICING */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0}
/* Plan switcher toggle */
.plan-switcher{display:flex;justify-content:center;margin-bottom:1.5rem}
.plan-switcher-inner{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:30px;padding:4px;gap:2px}
.plan-tab{padding:6px 18px;border-radius:26px;font-size:0.8rem;font-weight:600;cursor:pointer;border:none;background:none;color:var(--muted);transition:background var(--tr),color var(--tr),box-shadow var(--tr);white-space:nowrap}
.plan-tab.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(232,64,28,0.35)}
.plan-tab#ptab-yearly{color:var(--gold)}
.plan-tab#ptab-yearly.active{background:linear-gradient(135deg,#b8860b,var(--gold));color:#000;box-shadow:0 2px 8px rgba(245,166,35,0.35)}
.plan-savings-badge{display:inline-block;font-size:0.62rem;font-weight:700;background:rgba(245,166,35,0.18);color:var(--gold);border-radius:20px;padding:1px 6px;margin-left:4px;vertical-align:middle}
.pricing-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;text-align:center;position:relative;transition:border-color var(--tr),transform var(--tr)}
.pricing-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.pricing-card.featured{border-color:var(--gold);background:linear-gradient(160deg,#1e1a10,#1c2030)}
.pricing-popular{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--gold);color:#000;font-size:0.67rem;font-weight:700;padding:2px 10px;border-radius:20px;white-space:nowrap}
.pricing-label{font-size:0.78rem;color:var(--muted);margin-bottom:0.5rem}
.pricing-price{font-family:'Sora',sans-serif;font-size:1.8rem;font-weight:800;color:var(--text)}
.pricing-price span{font-size:0.85rem;font-weight:400;color:var(--muted)}
.pricing-monthly{font-size:0.72rem;color:var(--muted);margin:0.25rem 0 0.6rem}
.pricing-save{font-size:0.72rem;font-weight:700;color:var(--gold);margin-bottom:0.9rem;min-height:1rem}
.pricing-btn{width:100%;background:var(--accent);color:#fff;border-radius:7px;padding:8px;font-size:0.84rem;font-weight:600;cursor:pointer;border:none;transition:opacity var(--tr)}
.pricing-btn:hover{opacity:0.85}
.pricing-card.featured .pricing-btn{background:linear-gradient(135deg,#b8860b,var(--gold));color:#000}

/* AUTH MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(20,18,16,0.45);z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem;overflow-y:auto}
.modal-overlay.hidden{display:none}
.modal{background:var(--surface);border:none;border-radius:6px;padding:2rem;width:100%;max-width:420px;position:relative;max-height:calc(100dvh - 2rem);overflow-y:auto;margin:auto;box-shadow:0 20px 60px rgba(0,0,0,0.25)}
.modal h2{font-family:'Source Serif 4',serif;font-size:1.2rem;font-weight:800;margin-bottom:0.25rem}
.modal-sub{font-size:0.82rem;color:var(--muted);margin-bottom:1.5rem}
.modal-close{position:absolute;top:1rem;right:1rem;color:var(--muted);font-size:1.2rem;cursor:pointer;background:none;border:none;line-height:1}
.modal-close:hover{color:var(--text)}
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:0.8rem;font-weight:600;margin-bottom:0.35rem;color:var(--muted)}
.form-input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:4px;padding:0.6rem 0.85rem;color:var(--text);font-size:0.9rem;outline:none;transition:border-color var(--tr)}
.form-input:focus{border-color:var(--accent)}
.form-btn{width:100%;background:var(--accent);color:#fff;border-radius:4px;padding:10px;font-size:0.9rem;font-weight:700;cursor:pointer;border:none;transition:opacity var(--tr);margin-top:0.25rem}
.form-btn:hover{opacity:0.88}
.form-btn:disabled{opacity:0.5;cursor:not-allowed}
.form-toggle{text-align:center;font-size:0.8rem;color:var(--muted);margin-top:1rem}
.form-toggle a{color:var(--accent);cursor:pointer}
.form-error{background:var(--error-bg);border:1px solid var(--error-border);border-radius:7px;padding:0.6rem 0.85rem;font-size:0.8rem;color:var(--error-text);margin-bottom:1rem}
.form-success{background:var(--trial-bg);border:1px solid var(--trial-border);border-radius:7px;padding:0.6rem 0.85rem;font-size:0.8rem;color:var(--trial-text);margin-bottom:1rem}



.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted);font-size:0.88rem}
/* (A korábbi #ssr-content szabály törölve – a szerver-oldali tartalom
   mostantól a #hotList / #newsList konténerekbe kerül, saját stílus
   nélkül, mert azok már a végleges lista stílusát viselik.) */
.empty-icon{font-size:2rem;margin-bottom:0.4rem}
.section-label{font-size:0.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:0.6rem;margin-top:1.1rem}

/* ══════════════════════════════════════════════════════════════════════
   DESIGN (2026) – "Szerkesztőségi letisztult"
   A <html> elem mindig "theme-v2" class-szal rendelkezik (l. a dokumentum
   elejét) – ez az egyetlen, állandó design.
   ══════════════════════════════════════════════════════════════════════ */

::selection{background:var(--accent);color:#fff}

/* ── Tipográfia: szerif címek ─────────────────────────────────────── */






/* ── Fejléc ────────────────────────────────────────────────────────── */

.header-left-v2{display:flex;align-items:center;gap:0.75rem}


#refreshBtn{background:none;border:1px solid var(--border);border-radius:20px;color:var(--muted)}
#refreshBtn:hover{border-color:var(--muted);color:var(--text)}
#refreshBtn span{display:none}

.reg-btn .reg-trial-badge{display:inline-block;background:rgba(255,255,255,0.22);color:#fff;border-radius:20px;padding:1px 8px;font-size:0.65rem;font-weight:700}



/* Hamburger gomb – balra, a logó mellé kerül (JS mozgatja a DOM-ban) */

.hamburger-v2 span{display:block;width:19px;height:2px;background:var(--text);border-radius:1px}
.hamburger-v2{display:flex;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:4px;margin-left:-6px}

/* Világos/sötét mód váltó – ikon gomb */

.theme-toggle-v2:hover{border-color:var(--muted);color:var(--text)}
.theme-toggle-v2{display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:20px;width:34px;height:34px;color:var(--muted);cursor:pointer}

/* Szűrők ikon-gomb – modallá alakított sidebar nyitása */

.filter-trigger-v2:hover{border-color:var(--muted);color:var(--text)}
.filter-trigger-v2{display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:20px;width:34px;height:34px;color:var(--muted);cursor:pointer}

/* ── Hamburger navigációs panel (a régi .tabs-wrap helyett) ─────────── */
.hamburger-nav-v2{display:none;position:fixed;inset:0;z-index:1200;background:rgba(20,18,16,0.45)}

/* A vízszintes "becsúszás" animáció a régi tab-sáv metaforájához illett –
   az új designban (hamburger menü) nincs vízszintes tab-pozíció, amiből
   csúszni kellene, és a lapozáskori automatikus felgörgetéssel egyszerre
   futva átlós, zavaró mozgást keltett. Az új designnál egyszerűen csak
   megjelenik/eltűnik a panel, animáció nélkül. */


.hamburger-nav-v2.open{display:block}
.hamburger-nav-panel{background:var(--surface);width:100%;max-width:320px;height:100%;padding:1.25rem 1rem;overflow-y:auto;box-shadow:2px 0 24px rgba(0,0,0,0.15)}
.hamburger-nav-panel a{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 0.3rem;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);font-size:0.94rem;cursor:pointer}
.hamburger-nav-panel a.active{color:var(--accent);font-weight:600}
.hamburger-nav-panel a small{color:var(--muted);font-weight:400}
.hamburger-nav-panel .premium-mark-v2{color:var(--accent);font-size:0.72rem;margin-left:0.35rem}
.hamburger-nav-close{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem}
.hamburger-nav-close button{background:none;border:none;font-size:1.2rem;color:var(--muted);cursor:pointer;padding:6px}
.hamburger-nav-actions{display:none;gap:0.5rem;margin-bottom:0.75rem}
.hamburger-nav-actions button{flex:1;background:none;border:1px solid var(--border);border-radius:20px;padding:0.5rem;font-size:0.8rem;color:var(--text);cursor:pointer}
.hamburger-nav-actions button:hover{border-color:var(--muted)}

/* ── Sidebar → Szűrők MODAL (ugyanaz a #sidebar elem, csak modalként) ─ */

.sidebar.mobile-open{display:flex !important;flex-direction:column;position:fixed !important;top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%) !important;width:calc(100% - 2rem) !important;max-width:420px !important;height:auto !important;max-height:85vh;z-index:450 !important;border:none;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,0.3);padding:1.5rem 1.5rem 1.25rem !important;cursor:default}
/* A backdrop is legyen a modal ALATT, de a lap többi tartalma FÖLÖTT (z-index:400) –
   a modalnak (450) mindig e fölé kell kerülnie, különben az egész felület
   szürkének tűnik, mert a sötétítő réteg a modal tetejére kerül. */

#sidebarRevealTab{display:none !important}
#sidebarMobileClose{display:flex !important;justify-content:space-between;align-items:center;border:none !important;padding:0 0 1rem 0 !important;margin-bottom:0.75rem !important;font-size:0.9rem}



.cb-label input{accent-color:var(--accent);width:15px;height:15px}


#promoBar .promo-cta{background:var(--accent)}

/* Ajándék/meglepetésdoboz emoji-k eltávolítása – old-school hatást keltettek,
   az új designban sehol nem használjuk (a sidebar-lock-icon fentebb már
   lock-ikonra vált JS-ből, ha _v2() aktív). */
.reg-btn .reg-emoji{display:none}
.trial-callout-icon{display:none}

/* ── "Üdvözlő" popup (pár másodperc után felugró prémium-ajánlat) ────────
   Ugyanaz a hiba volt itt is, mint a premium-gate-nél: kemény, sötét
   gradiens/szín volt bedrótozva, ami light módban nem illeszkedett. */










/* ── Elrendezés: keskeny, középre igazított oszlop (a széles, balra húzó
   elrendezés helyett), ugyanaz a szélesség, mint a sandbox tervben ────── */





.search-wrap:focus-within svg{opacity:1;color:var(--accent)}
/* A kereső mezőnek eddig nem volt minimum szélessége, ezért az Összes hír
   szűrő-sorban a legördülők "elvették előle" a helyet – szinte eltűnt.
   Ez a min-width kényszeríti ki, hogy a sor inkább törjön több sorba,
   minthogy a kereső 100px alá zsugorodjon. */
#tab-news .search-wrap{min-width:220px !important}


/* ── Lenyitott top-listák cikksorai: doboz helyett hajszálvonal ─────── */


.article-list .article-row:last-child{border-bottom:none;padding-bottom:0.25rem}


/* ── Forró témák / hírkártyák: dobozok helyett hajszálvonalak ───────── */


.hot-item:first-child{padding-top:0}


.hot-body .ci{padding:0.85rem 0 0 2.35rem}
/* A ".ci" elemek (lenyitható tartalom) border-top-ja a régi, dobozos
   designban észrevétlen volt, de a hajszálvonalas designban külön
   (fölösleges) vonalként "szivárgott ki" a fejléc alá – összecsukott
   állapotban is, mert a grid-collapse nem vágta le tökéletesen a
   paddingből eredő pár pixelt. Csak a szándékolt alsó (item) hajszálvonal
   maradjon meg, ez a "belső" felső vonal nem kell. */


#newsList{display:block}

/* ── "Összes hír" ízelítő a Felkapott témák alján ────────────────────── */
.news-preview-v2{display:block}

.news-preview-link-v2{display:block;width:100%;text-align:center;background:none;border:1px solid var(--border);border-radius:20px;padding:0.7rem;margin-top:1rem;color:var(--text);font-size:0.85rem;font-weight:600;cursor:pointer}
.news-preview-link-v2:hover{border-color:var(--muted);background:var(--surface)}

/* ── Jelvények: sem ovális keret, sem rikító háttér ──────────────────── */



.rank-badge.up,
.rank-badge.down{display:none}


.source-chips a.chip::after{content:"·";color:var(--border);margin-left:8px;font-weight:400}
.source-chips a.chip:last-child::after{content:""}



/* ── Modalok: finomabb sarkok, kevesebb árnyék ───────────────────────── */




/* A Google gomb fehér háttere világos módban belesimult a (szintén fehér)
   oldal-háttérbe, keret/árnyék nélkül szinte láthatatlanná vált – emiatt
   tűnt "sima szövegnek". Most kap egy hajszálvékony keretet mindkét módban. */
#googleAuthBtn{border:1px solid var(--border) !important;border-radius:20px !important}
#googleAuthBtn:hover{border-color:var(--muted) !important}
#facebookAuthBtn{border-radius:20px !important}
/* A "3 nap ingyen" dobozok (regisztráció + belépés popup) sötétzöld
   gradiense csak sötét módban jó – világosban túl sötét/nyomasztó volt.
   Csak world LIGHT módra cseréljük melegebb, hívogatóbb megjelenésre;
   sötét módban (data-theme="dark") szándékosan változatlan marad. */
:not([data-theme="dark"]) #trialCallout,
:not([data-theme="dark"]) #loginTrialTeaser{
  background:rgba(216,67,31,0.06) !important;
  border:1px solid rgba(216,67,31,0.25) !important;
}
:not([data-theme="dark"]) .trial-callout-title{color:var(--accent) !important}
:not([data-theme="dark"]) .trial-callout-check{color:var(--text) !important}
/* Email megerősítve/megerősítés-szükséges jelvény – ugyanaz a hardcode-olt
   sötét háttér probléma, csak világos módra cserélve (sötétben jó marad). */
:not([data-theme="dark"]) .email-status-badge.verified{
  background:rgba(46,204,113,0.1) !important;color:#1e8e5a !important;border-color:rgba(46,204,113,0.4) !important;
}
:not([data-theme="dark"]) .email-status-badge.unverified{
  background:rgba(216,67,31,0.08) !important;color:var(--accent) !important;border-color:rgba(216,67,31,0.35) !important;
}

/* ── Kategória-oldal, Kategória Top, Trendek, Export – hajszálvonalak ─ */


/* "Legaktívabb források" sáv-diagram gombjai – ugyanaz a lapos, visszafogott
   kezelés, mint a Forró témák forrás-chipjeinél: nincs színes pill/keret. */
.src-bar-chip{background:none !important;border:none !important;color:var(--text) !important;text-align:left !important;font-weight:500 !important}
.src-bar-chip:hover{filter:none !important;color:var(--accent) !important}

/* ── Prémium-felhívások (Kategória Top/Trendek/stb. gate + sidebar-lock) ─
   Ezeknek eddig kemény, sötét gradiens/szín volt bedrótozva, ami light
   módban "dark mode-nak nézett ki" – most a design-tokenekhez igazodnak. */










/* ── Reszponzív: fejléc apró képernyőn ──────────────────────────────── */
@media(max-width:480px){
  /* A hosszú "3 nap ingyen prémium" jelvény szűk helyen kiszorította a
     "Belépés"/"Regisztráció" feliratokat – kis képernyőn inkább a rövid,
     egyértelmű "Regisztráció" szó marad a gombon, a részletes ajánlat
     (3 nap ingyen) a fejléc alatti promó-sávba kerül (lásd promo-bar-v2). */
  .reg-btn .reg-trial-badge{display:none}
  .reg-btn .reg-text{display:inline}
  #refreshBtn{display:none}
  /* A Szűrők ikon vette el a legtöbb helyet a fejlécben – ez mobilon a
     hamburger menübe költözik (lásd .hamburger-nav-actions). A világos/
     sötét mód váltó ELÉG kicsi ahhoz, hogy a fejlécben maradhasson, de
     kisebb méretben, hogy a "Belépés" felirat ne vágódjon le. */
  .filter-trigger-v2{display:none}
  .hamburger-nav-actions{display:flex}
  .theme-toggle-v2{width:28px !important;height:28px !important}
  .theme-toggle-v2 svg{width:14px;height:14px}
  .reg-btn{padding:6px 9px !important;font-size:0.74rem !important;flex-shrink:0 !important;gap:2px !important}
  /* A régi (design-független) mobil szabály flex-shrink:1 + overflow:hidden
     + min-width:0-t adott ezekre – ez nyomta össze és VÁGTA LE a "Belépés"
     szöveget (ezért volt egyenlőtlen a margó szöveg előtt/után). Az új
     designnál a gomb mindig a saját, természetes szélességét kapja. */
  .header-right{gap:0.3rem !important;flex-shrink:1 !important;overflow:visible !important;min-width:0 !important}
  /* FONTOS: ez a szabály eredetileg csak a "Belépés"/"Regisztráció" gombra
     lett kitalálva (rövid, fix szöveg – sose vágódjon le). Bejelentkezett
     állapotban viszont a .user-btn tartalma a felhasználó EMAIL CÍME
     (+ PRO/TRIAL jelvény), ami tetszőlegesen hosszú lehet – ha ennek is
     "természetes szélességet" adnánk, mint a reg-btn-nek, szűk telefonon
     kilógna a képernyő jobb széléről. Ezért a .user-btn-nél (a reg-btn-vel
     ellentétben) megtartjuk a zsugorodó + "…"-ra végződő viselkedést. */
  .user-btn{padding:6px 9px !important;font-size:0.74rem !important;white-space:nowrap;flex-shrink:1 !important;min-width:0 !important;max-width:150px !important;overflow:hidden !important}
}
@media(max-width:340px){
  /* A legszűkebb telefonokon (pl. iPhone SE, 320px) még ez sem elég – itt
     a gomb paddingjét kell tovább csökkenteni, hogy a "Belépés" felirat
     garantáltan ne vágódjon le és ne is csússzon ki a képernyőről. */
  .reg-btn{padding:6px 7px !important}
  .user-btn{padding:6px 7px !important}
  header{padding:0 0.5rem !important}
  .header-right{gap:0.2rem !important}
  .header-left-v2{gap:0.4rem !important}
}

/* ── "3 nap ingyen" promó-sáv a fejléc alatt (csak új design, csak be nem
   jelentkezett látogatóknak) – főleg mobilon tehermentesíti a fejlécet ─── */
.promo-bar-v2{display:none}
/* A .fn-promo-pre a <html>-en a korai inline scriptből kerül fel (l. ott):
   így a sáv MÁR AZ ELSŐ FESTÉSKOR a helyén van, nem utólag jelenik meg. */
html.fn-promo-pre .promo-bar-v2,
.promo-bar-v2.show{display:flex;align-items:center;gap:0.7rem;max-width:760px;margin:0 auto;padding:0.6rem 1.25rem;border-bottom:1px solid var(--border)}
.promo-bar-v2-icon{font-size:1.1rem;flex-shrink:0}
.promo-bar-v2-text{flex:1;min-width:0}
.promo-bar-v2-text b{font-size:0.82rem;display:block;font-weight:700;color:var(--accent)}
.promo-bar-v2-text span{color:var(--muted);font-size:0.72rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promo-bar-v2-cta{color:var(--accent);font-weight:600;font-size:0.8rem;background:none;border:none;cursor:pointer;white-space:nowrap;flex-shrink:0}
.promo-bar-v2-close{color:var(--muted);background:none;border:none;cursor:pointer;font-size:0.85rem;flex-shrink:0;padding:4px}
@media(max-width:480px){
  .promo-bar-v2-text span{display:none}
}