/* ============================================================
   versek.css - a versek.html oldalra jellemző, egyedi stílusok
   Ez a korábbi <style id="tw-inline"> melletti, beégetett
   "DARK theme" blokk tartalma, változtatás nélkül kiemelve.
   Tartalmaz néhány olyan közös szabályt is (pl. :root színek),
   ami már megvan a style.css-ben is - ez szándékos, biztonsági
   okból nem lett kiszűrve, hogy semmi ne törjön el.
   ============================================================ */

    /* ── DARK theme (default) ── */
    :root {
      --bg:#000807; --surface:#161929; --elevated:#2C2A4A;
      --text:#EDE6FA; --text2:#D3C6F1; --muted:#B9A6E8;
      --accent:#907AD6; --accent-d:#4F518C; --accent-l:#DABFFF; --pop:#9D4EDD; --btn:#5B3F9E; --btn-h:#7C5CD6;
      --accent-rgb:144,122,214;
      --border:rgba(var(--accent-rgb),.25); --glass:rgba(255,255,255,.04); --shadow:rgba(0,0,0,.6);
    }
    /* ── LIGHT theme ── */
    .lm {
      --bg:#F5EEDF; --surface:#ECDFC6; --elevated:#E4D2AE;
      --text:#2A170D; --text2:#3B2515; --muted:#6A4A33;
      --accent:#7A4A2C; --accent-d:#592D1B; --accent-l:#8A6446;
      --accent-rgb:122,74,44; --btn:#3D2B26; --btn-h:#5E3E35; --btn-hfg:#fff; --pop:#3D2B26;
      --border:rgba(var(--accent-rgb),.22); --glass:rgba(var(--accent-rgb),.06); --shadow:rgba(50,20,5,.2);
    }

    *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
    html { scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),.32) transparent; overflow-y:scroll; overflow-x:hidden; max-width:100vw; }
    html::-webkit-scrollbar { width:5px; }
    html::-webkit-scrollbar-track { background:transparent; }
    html::-webkit-scrollbar-thumb { background:rgba(var(--accent-rgb),.32); border-radius:99px; }
    html::-webkit-scrollbar-thumb:hover { background:rgba(var(--accent-rgb),.6); }
    html.lm { scrollbar-color:rgba(var(--accent-rgb),.35) transparent; }
    html.lm::-webkit-scrollbar-thumb { background:rgba(var(--accent-rgb),.35) !important; }
    html.lm::-webkit-scrollbar-thumb:hover { background:rgba(var(--accent-rgb),.65) !important; }

    body {
      font-family:'Quicksand',sans-serif;
      background:var(--bg); color:var(--text);
      line-height:1.65;
      transition:background .4s ease,color .4s ease;
      overflow-x:hidden; max-width:100vw;
    }
    @media(max-width:767px) { body { padding-bottom:calc(64px + env(safe-area-inset-bottom)); } }

    /* ── Progress bar ── */
    #pb { position:fixed; top:0; left:0; height:2px; width:0%; background:var(--accent); z-index:9999; transition:width .1s linear; }

    /* ── Aurora ── */
    #aurora { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
    .ab { position:absolute; border-radius:50%; filter:blur(80px); opacity:.12; animation:aA 18s ease-in-out infinite; }
    .lm .ab { opacity:.07; filter:blur(80px) sepia(1) hue-rotate(-40deg) saturate(.8); }
    @keyframes aA { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(60px,-40px) scale(1.15)} 66%{transform:translate(-40px,50px) scale(.88)} }

    /* ── Particles ── */
    #bgc { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.45; }
    .lm #bgc { opacity:.28; }

    /* ── Geo shapes ── */
    .geo { position:absolute; pointer-events:none; opacity:.06; animation:gf 22s ease-in-out infinite; }
    .lm .geo { background:rgba(var(--accent-rgb),.85) !important; }
    @keyframes gf { 0%,100%{transform:translate(0,0) rotate(0deg)} 25%{transform:translate(22px,-28px) rotate(90deg)} 50%{transform:translate(-16px,-18px) rotate(180deg)} 75%{transform:translate(26px,14px) rotate(270deg)} }

    /* ── Grid overlay ── */
    #grid { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.011; background-image:repeating-linear-gradient(0deg,transparent,transparent 49px,rgba(var(--accent-rgb),1) 50px),repeating-linear-gradient(90deg,transparent,transparent 49px,rgba(var(--accent-rgb),1) 50px); }
    .lm #grid { opacity:.018; filter:sepia(1) hue-rotate(-30deg); }

    /* ── Glass / Gradient text ── */
    .glass { background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--border); }
    .gt { background:linear-gradient(135deg,var(--accent),var(--accent-l)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

    /* ── Scroll reveal (enhanced - Spring + Stagger) ── */
    .rv       { opacity:0; transform:translateY(32px) scale(.97); filter:blur(4px); transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1),filter .55s ease; }
    .rv-left  { opacity:0; transform:translateX(-36px) scale(.97); filter:blur(3px); transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1),filter .55s ease; }
    .rv-right { opacity:0; transform:translateX(36px) scale(.97); filter:blur(3px); transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1),filter .55s ease; }
    .rv.on,.rv-left.on,.rv-right.on { opacity:1; transform:translate(0) scale(1); filter:blur(0); }
    .d1{transition-delay:.06s}.d2{transition-delay:.13s}.d3{transition-delay:.20s}.d4{transition-delay:.28s}.d5{transition-delay:.36s}

    /* ── TOP NAV ── */
    #tnav { position:fixed; top:0; left:0; right:0; z-index:1000; 
            background:rgba(0,8,7,.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
            box-shadow:0 1px 0 var(--border);
            transition:background .35s,box-shadow .35s; 
            animation:navSlideDown .55s cubic-bezier(.22,1,.36,1) .1s both; }
    #tnav.sc { background:rgba(0,8,7,.96); }
    .lm #tnav { background:rgba(245, 238, 223,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--border); }
    .lm #tnav.sc { background:rgba(245, 238, 223,.99); }
    @keyframes navSlideDown { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }

    /* ── TRUE CENTER LINKS - minden oldalon azonos pozíció ── */
    @media(min-width:768px){
      #dlinks {
        position:absolute !important;
        left:50% !important;
        top:50% !important;
        transform:translate(-50%,-50%) !important;
        display:flex !important;
      }
    }

    /* ── FILTER BAR - nav második sora ── */
    #fbar { border-top:1px solid rgba(var(--accent-rgb),.1); padding:.4rem 0; }
    .lm #fbar { border-top-color:rgba(var(--accent-rgb),.1); }

    /* 1. sor - kategória pillek, horizontálisan görgethető */
    #fcat-row {
      display:flex; gap:.35rem; align-items:center;
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      scrollbar-width:none; flex-wrap:nowrap;
      /* Az overflow-x:auto a függőleges túllógást is levágja: a hover emelés
         (translateY + scale) helyét belső paddinggel adjuk, a negatív margó
         ellensúlyozza, így az elrendezés nem mozdul */
      padding:.5rem .35rem; margin:-.5rem -.35rem;
    }
    #fcat-row::-webkit-scrollbar { display:none; }

    /* 2. sor - rendezők + kereső jobbra, mobilon is látszik */
    #fsort-row {
      display:flex; gap:.35rem; align-items:center;
      margin:-.15rem -.35rem -.5rem; flex-wrap:nowrap;
      padding:.5rem .35rem;
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    #fsort-row::-webkit-scrollbar { display:none; }

    /* Kereső a sort sorban, jobbra tölt ki */
    #search-wrap {
      margin-left:auto; flex:1; max-width:320px;
      display:flex; align-items:center; gap:.4rem;
      padding:.32rem .55rem; border:1px solid var(--border);
      border-radius:.55rem; background:var(--glass);
      transition:border-color .2s;
    }
    #search-wrap:focus-within, #search-wrap.active { border-color:var(--accent); }
    #search-input {
      background:transparent; border:none; outline:none;
      font-family:'JetBrains Mono',monospace; font-size:.7rem;
      color:var(--text); width:100%; min-width:0; flex:1;
    }
    @media(max-width:480px){ #search-input { width:80px; } }
    #search-input::placeholder { color:var(--muted); }
    #search-clear { display:none; background:none; border:none; cursor:pointer; color:var(--muted); padding:0; line-height:1; transition:color .15s; flex-shrink:0; }
    #search-clear:hover { color:var(--accent); }
    #search-wrap.active #search-clear { display:block; }

    .nl { position:relative; color:var(--muted); font-weight:600; font-size:.95rem; text-decoration:none; padding:.28rem .6rem; border-radius:.45rem; transition:color .2s,background .2s,transform .24s cubic-bezier(.34,1.56,.64,1) !important; }
    .nl::after { content:''; position:absolute; bottom:-4px; left:.6rem; width:0; height:2px; background:var(--accent); border-radius:2px; transition:width .36s cubic-bezier(.34,1.56,.64,1) !important; }
    .nl:hover,.nl.on { color:var(--accent); }
    .nl.on { background:rgba(var(--accent-rgb),.07); }
    .nl:hover::after,.nl.on::after { width:calc(100% - 1.2rem); }
    .nl:hover { transform:translateY(-2px) !important; }
    /* Active dot indicator */
    .nl.on::before { content:''; position:absolute; top:50%; left:.3rem; transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background:var(--accent); animation:navDotPop .3s cubic-bezier(.34,1.56,.64,1) forwards; }
    @keyframes navDotPop { from{transform:translateY(-50%) scale(0)} to{transform:translateY(-50%) scale(1)} }
    .lm .nl.on { background:rgba(var(--accent-rgb),.08); }

    /* ── BOTTOM NAV (mobile) ── */
    #bnav { position:fixed; bottom:0; left:0; right:0; z-index:7001; background:rgba(0,8,7,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom); display:none; }
    .lm #bnav { background:rgba(245, 238, 223,.96); }
    @media(max-width:767px){ #bnav { display:flex; } #dlinks { display:none; } }
    .bi { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:.55rem .25rem; color:var(--muted); text-decoration:none; font-size:.58rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; transition:color .2s; flex:1; gap:3px; }
    .bi.on,.bi:hover { color:var(--accent); }
    .bi svg { width:22px; height:22px; transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
    .bi:hover svg { transform:translateY(-4px) scale(1.14); }
    .bi.on svg { transform:scale(1.18); }

    /* ── BUTTONS ── */
    .bp { display:inline-flex; align-items:center; gap:.45rem; padding:.85rem 2rem; font-family:'Quicksand',sans-serif; font-weight:700; font-size:1rem; color:#fff; background:var(--btn); border:2px solid var(--btn); border-radius:.75rem; text-decoration:none; cursor:pointer; position:relative; overflow:hidden; transition:background .22s,border-color .22s,transform .32s cubic-bezier(.34,1.56,.64,1) !important; }
    .bp:hover { color:var(--btn-hfg); background:var(--btn-h); border-color:var(--btn-h); transform:translateY(-4px) scale(1.045) !important; }
    .bs { display:inline-flex; align-items:center; gap:.45rem; padding:.85rem 2rem; font-family:'Quicksand',sans-serif; font-weight:700; font-size:1rem; color:var(--text); background:transparent; border:2px solid var(--border); border-radius:.75rem; text-decoration:none; cursor:pointer; position:relative; overflow:hidden; transition:border-color .22s,background .22s,transform .32s cubic-bezier(.34,1.56,.64,1),color .22s !important; }
    .bs:hover { border-color:var(--accent); background:rgba(var(--accent-rgb),.1); transform:translateY(-4px) scale(1.04) !important; color:var(--accent); }

    /* ── Ripple ── */
    .rp { position:relative; overflow:hidden; }
    .rs { position:absolute; border-radius:50%; background:rgba(255,255,255,.2); transform:scale(0); animation:rA .65s ease-out forwards; pointer-events:none; }
    @keyframes rA { to{transform:scale(4);opacity:0} }

    /* ── Tag pill ── */
    .tg { display:inline-block; padding:.22rem .7rem; font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--accent); background:rgba(var(--accent-rgb),.12); border:1px solid var(--border); border-radius:999px; }
    .lm .tg { color:var(--accent); background:rgba(var(--accent-rgb),.09); border-color:rgba(var(--accent-rgb),.22); }

    /* ── Éjszakai mód tooltip a témagombnál ── */
    #tbtn-wrap { position:relative; display:inline-flex; }
    #night-tip {
      position:absolute; top:calc(100% + 10px); right:0;
      width:220px; padding:.75rem 1rem;
      background:var(--elevated); border:1px solid rgba(180,120,60,.35);
      border-radius:.75rem;
      box-shadow:0 8px 24px rgba(0,0,0,.5);
      font-family:'Quicksand',sans-serif; font-size:.78rem;
      color:#E8D5B0; line-height:1.5;
      opacity:0; visibility:hidden; pointer-events:none;
      transform:translateY(-6px);
      transition:opacity .2s ease, transform .2s ease, visibility .2s;
      z-index:1100;
      white-space:normal;
    }
    /* kis nyíl felfelé */
    #night-tip::before {
      content:''; position:absolute; top:-6px; right:14px;
      width:10px; height:10px;
      background:var(--elevated); border:1px solid rgba(180,120,60,.35);
      border-bottom:none; border-right:none;
      transform:rotate(45deg);
    }
    /* Megjelenítés: .night-active + .tip-open kattintásra */
    #tbtn-wrap.night-active.tip-open #night-tip {
      opacity:1; visibility:visible; pointer-events:auto;
      transform:translateY(0);
    }
    #night-tip-off {
      display:inline-flex; align-items:center; gap:.35rem;
      margin-top:.55rem; padding:.3rem .7rem;
      background:linear-gradient(135deg,#3D2B0F,#5C3D15);
      border:1px solid rgba(180,120,60,.5); border-radius:.45rem;
      color:#F5C87A; font-size:.72rem; font-weight:700;
      cursor:pointer; font-family:'JetBrains Mono',monospace;
      transition:background .18s, border-color .18s;
      white-space:nowrap;
    }
    #night-tip-off:hover { background:linear-gradient(135deg,#5C3D15,#7A5020); border-color:rgba(180,120,60,.8); }
    @keyframes tcPulse { 0%,100%{opacity:.35} 50%{opacity:.7} }

    /* ── Scroll-to-top ── */
    #scroll-top { position:fixed; bottom:5rem; right:1.25rem; width:44px; height:44px; border-radius:50%; background:var(--accent); box-shadow:0 4px 18px rgba(var(--accent-rgb),.45); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(20px) scale(.85); transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1); z-index:900; }
    #scroll-top.show { opacity:1; transform:translateY(0) scale(1); }
    #scroll-top:hover { transform:translateY(-4px) scale(1.1) !important; }
    #scroll-top svg { color:#fff; width:20px; height:20px; }
    @media(max-width:767px) { #scroll-top { bottom:5.5rem; right:.85rem; } }

    /* ── Page loader ── */
    /* ── PAGE FADE TRANSITION ── */
    #page-fade { position:fixed; inset:0; z-index:99997; background:var(--bg); opacity:0; pointer-events:none; transition:opacity .22s ease; }
    #page-fade.out { opacity:1; pointer-events:all; }
    body { animation:pageFadeIn .3s ease forwards; }
    @keyframes pageFadeIn { from{opacity:0} to{opacity:1} }

        #page-loader { position:fixed; inset:0; z-index:99999; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity 1.4s cubic-bezier(.22,1,.36,1),visibility 1.4s cubic-bezier(.22,1,.36,1); }
    #page-loader.done { opacity:0; visibility:hidden; pointer-events:none; }
    #loader-canvas { position:absolute; inset:0; pointer-events:none; }
    .loader-center { position:relative; width:110px; height:110px; display:flex; align-items:center; justify-content:center; z-index:2; }
    .ring-outer { position:absolute; inset:0; animation:spinCW 2.4s linear infinite; }
    .ring-inner { position:absolute; inset:16px; animation:spinCCW 1.6s linear infinite; }
    @keyframes spinCW { to { transform:rotate(360deg); } }
    @keyframes spinCCW { to { transform:rotate(-360deg); } }
    .ring-outer circle { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:195 130; opacity:.8; }
    .ring-inner circle { fill:none; stroke:var(--accent-l); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:108 76; opacity:.55; }
    .loader-logo { font-family:system-ui,-apple-system,sans-serif; font-weight:900; font-size:1.9rem; letter-spacing:-.05em; line-height:1; background:linear-gradient(135deg,var(--accent) 20%,var(--accent-l) 80%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:logoPulse 1.8s ease-in-out infinite; position:relative; z-index:1; user-select:none; }
    .loader-glow { position:absolute; inset:22px; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.09) 0%,transparent 70%); pointer-events:none; }
@keyframes logoPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.55;transform:scale(.94);} }

    /* ── Skeleton ── */
    @keyframes shimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
    .sk { border-radius:.5rem; background:linear-gradient(90deg,var(--surface) 25%,var(--elevated) 50%,var(--surface) 75%); background-size:600px 100%; animation:shimmer 1.6s infinite linear; }

    /* ══ LIGHT MODE overrides (comprehensive) ══ */
    .lm #pb { background:var(--accent); }
    .lm #bgc { opacity:.18; }
    .lm #grid { opacity:.018; filter:sepia(1) hue-rotate(-30deg); }
    .lm .tg { color:var(--accent); background:rgba(var(--accent-rgb),.09); border-color:rgba(var(--accent-rgb),.22); }
    .lm .nl.on { background:rgba(var(--accent-rgb),.08); }
    .lm .fp.on { background:var(--accent); border-color:var(--accent); }
    .lm .fp:hover { border-color:var(--accent); color:var(--accent); }
    .lm .bs:hover { border-color:var(--accent); background:rgba(var(--accent-rgb),.08); color:var(--accent); }
    .lm #tbtn { background:rgba(var(--accent-rgb),.1) !important; }
    /* Timeline light */
    .lm .tl-spine { background:linear-gradient(to bottom,transparent,var(--accent) 5%,var(--accent-d) 50%,var(--accent) 95%,transparent); opacity:.5; }
    .lm .tl-dot { border-color:var(--accent) !important; background:var(--bg); }
    .lm .tl-entry.sel .tl-dot { background:var(--accent) !important; box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18) !important; }
    .lm .tl-entry.sel .tl-card { border-color:var(--accent) !important; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.2),0 8px 24px rgba(var(--accent-rgb),.1) !important; }
    .lm .tl-entry:hover .tl-card { border-color:var(--accent) !important; box-shadow:0 8px 28px rgba(var(--accent-rgb),.1) !important; }
    .lm .pp-title { background:linear-gradient(135deg,var(--accent),var(--accent-l)) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
    .lm .gt { background:linear-gradient(135deg,var(--accent),var(--accent-l)) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
    .lm #fbar { background:rgba(245, 238, 223,.94); }
    /* scroll-top light */
    .lm #scroll-top { box-shadow:0 4px 18px rgba(var(--accent-rgb),.4); }

    /* ══════════════════════
       VERSEK-SPECIFIC STYLES
    ══════════════════════ */

    .fp { padding:.28rem .75rem; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--muted); font-size:.7rem; font-weight:700; cursor:pointer; white-space:nowrap; font-family:'JetBrains Mono',monospace; letter-spacing:.03em; flex-shrink:0; transition:all .22s cubic-bezier(.34,1.56,.64,1) !important; }
    .fp:hover { border-color:var(--accent); color:var(--accent-l); transform:translateY(-2px) scale(1.04) !important; }
    .fp.on { background:var(--accent); color:#fff; border-color:var(--accent); }
    .fp-badge { display:inline-block; background:rgba(255,255,255,.18); color:inherit; border-radius:999px; font-size:.6rem; padding:0 .4rem; margin-left:.25rem; vertical-align:middle; line-height:1.6; }
    .fp.on .fp-badge { background:rgba(255,255,255,.25); }

    .sb { padding:.28rem .75rem; border:1px solid var(--border); border-radius:.4rem; background:var(--glass); color:var(--muted); font-size:.7rem; font-weight:700; cursor:pointer; font-family:'JetBrains Mono',monospace; transition:all .2s; flex-shrink:0; }
    .sb:hover,.sb.on { border-color:var(--accent); color:var(--accent-l); }

    /* ════════ DUAL TIMELINE ════════ */
    .tl-wrap { position:relative; padding:2rem 0; min-height:calc(100svh - var(--nav-h, 120px) - 8rem); }
    .tl-spine { position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); background:linear-gradient(to bottom,transparent,var(--accent) 5%,var(--accent-d) 50%,var(--accent) 95%,transparent); opacity:.45; }
    @media(max-width:767px){ .tl-spine { left:1.25rem; transform:none; } }

    .tl-entry { position:relative; display:grid; grid-template-columns:1fr 60px 1fr; align-items:start; margin-bottom:2rem; }
    @media(max-width:767px){ .tl-entry { display:block; padding-left:3.5rem; margin-bottom:1.75rem; } }

    .tl-dot-col { display:flex; flex-direction:column; align-items:center; padding-top:1rem; }
    @media(max-width:767px){ .tl-dot-col { position:absolute; left:0; top:1rem; padding-top:0; } }

    .tl-dot { width:18px; height:18px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2),0 0 12px rgba(var(--accent-rgb),.3); transition:transform .25s,box-shadow .25s,background .25s; cursor:pointer; flex-shrink:0; }
    .tl-entry:hover .tl-dot,.tl-entry.sel .tl-dot { transform:scale(1.35); background:var(--accent); box-shadow:0 0 0 5px rgba(var(--accent-rgb),.25),0 0 20px rgba(var(--accent-rgb),.5); }

    .tl-year-chip { font-family:'JetBrains Mono',monospace; font-size:.6rem; color:var(--accent-l); letter-spacing:.06em; margin-top:.35rem; text-align:center; opacity:.75; white-space:nowrap; }
    @media(max-width:767px){ .tl-year-chip { display:none; } }

    .tl-left { padding-right:1.5rem; }
    .tl-right { padding-left:1.5rem; }
    @media(max-width:767px){ .tl-left,.tl-right,.tl-empty { padding:0; } }

    .slide-left { opacity:0; transform:translateX(-24px); transition:opacity .55s ease,transform .55s ease; }
    .slide-right { opacity:0; transform:translateX(24px); transition:opacity .55s ease,transform .55s ease; }
    .slide-left.on,.slide-right.on { opacity:1; transform:translateX(0); }

    .tl-card { background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1.1rem 1.3rem; cursor:pointer; transition:all .28s ease; position:relative; overflow:hidden; }
    .tl-card::before { content:''; position:absolute; top:0; bottom:0; width:0; background:linear-gradient(to bottom,var(--accent),var(--accent-d)); transition:width .3s ease; }
    .tl-left .tl-card::before { right:0; border-radius:0 1rem 1rem 0; }
    .tl-right .tl-card::before { left:0; border-radius:1rem 0 0 1rem; }
    @media(max-width:767px){ .tl-card::before { left:0!important; right:auto!important; border-radius:1rem 0 0 1rem!important; } }
    .tl-entry:hover .tl-card::before,.tl-entry.sel .tl-card::before { width:3px; }
    .tl-entry:hover .tl-card { border-color:rgba(var(--accent-rgb),.5); box-shadow:0 8px 28px rgba(var(--accent-rgb),.12); transform:translateY(-2px); }
    .tl-entry.sel .tl-card { border-color:var(--accent); background:var(--elevated); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.25),0 8px 24px rgba(var(--accent-rgb),.15); }

    /* ════════ SPLIT LAYOUT ════════ */
    .split { display:grid; grid-template-columns:1fr; }
    @media(min-width:1280px){
      .split {
        grid-template-columns:1fr 1fr;
        gap:0;
        /* align-items:stretch (default) - a jobb oldali cella olyan magas mint a timeline,
           ez kell hogy a sticky-nek legyen "scroll tere" */
      }
    }
    @media(max-width:1279px){ .split { display:block; } .xl\:pr-8 { padding-right:0 !important; } }

    /* Desktop reader panel - fixed, JS igazítja a .split container jobb feléhez */
    #ppanel {
      display:none;
      position:fixed;
      top:calc(var(--nav-h, 120px) + 12px);
      height:calc(100svh - var(--nav-h, 120px) - 12px);
      flex-direction:column;
      overflow:hidden;
      z-index:500;
      border-radius:.75rem 0 0 .75rem;
      /* left + width: syncPanelPos() állítja be JS-ből */
    }
    @media(min-width:1280px){ #ppanel { display:flex; } }

    .pp-inner { background:var(--surface); border-left:1px solid var(--border); height:100%; display:flex; flex-direction:column; }
    .pp-head { padding:1rem 1.25rem; border-bottom:1px solid var(--border); background:var(--elevated); flex-shrink:0; display:flex; align-items:center; }
    .pp-random-btn { margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:rgba(var(--accent-rgb),.08); color:var(--accent); cursor:pointer; flex-shrink:0; transition:all .25s cubic-bezier(.34,1.56,.64,1); }
    .pp-random-btn svg { width:16px; height:16px; }
    .pp-random-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); transform:rotate(18deg) scale(1.12); }
    .pp-random-btn:active { transform:rotate(0deg) scale(.9); }
    .pp-random-cta-btn { margin-top:1.5rem; display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.35rem; border-radius:999px; border:1px solid var(--accent); background:transparent; color:var(--accent); font-family:'JetBrains Mono',monospace; font-size:.8rem; font-weight:700; cursor:pointer; transition:all .25s cubic-bezier(.34,1.56,.64,1); }
    .pp-random-cta-btn svg { width:15px; height:15px; flex-shrink:0; }
    .pp-random-cta-btn:hover { background:var(--accent); color:#fff; transform:translateY(-2px) scale(1.03); box-shadow:0 8px 20px -6px rgba(var(--accent-rgb),.5); }
    .pp-random-cta-btn:active { transform:translateY(0) scale(.97); }
    .pp-divider { display:flex; align-items:center; width:100%; max-width:200px; margin:1.1rem 0; color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.15em; }
    .pp-divider::before, .pp-divider::after { content:''; flex:1; height:1px; background:var(--border); }
    .pp-divider span { padding:0 .75rem; }
    .pp-body { padding:3rem 1.75rem; overflow-y:auto; flex:1; scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),.32) transparent; }
    #ppbody { padding-left:4rem !important; padding-right:4rem !important; padding-bottom:6rem !important; }
    .pp-body::-webkit-scrollbar { width:4px; }
    .pp-body::-webkit-scrollbar-thumb { background:rgba(var(--accent-rgb),.32); border-radius:99px; }

    .pp-title { font-family:'Quicksand',sans-serif; font-size:clamp(1.4rem,3vw,2rem); font-weight:800; margin-bottom:.5rem; background:linear-gradient(135deg,var(--accent),var(--accent-l)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    @media(min-width:1280px){ .pp-title { font-size:clamp(1.35rem,2.2vw,2.2rem); } }

    .poem-text { font-family:'Caveat',cursive; font-size:clamp(1.05rem,2.5vw,1.55rem); line-height:2; white-space:pre-line; color:var(--text); }
    @media(min-width:1280px){ .poem-text { font-size:clamp(1.1rem,1.4vw,1.55rem); } }
    .poem-text.font-sans { font-family:'Quicksand',sans-serif!important; }
    .poem-text.font-dyslexic { font-family:'OpenDyslexic',sans-serif!important; letter-spacing:.04em; }

    /* Mobile reader overlay */
    #reader-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:6000; background:var(--bg); flex-direction:column; overscroll-behavior:contain; }
    #reader-overlay.open { display:flex; animation:readerIn .28s cubic-bezier(.22,1,.36,1) both; }
    #reader-overlay.closing { display:flex; animation:readerOut .2s cubic-bezier(.55,0,1,.45) both; }
    @keyframes readerIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
    @keyframes readerOut { from{opacity:1} to{opacity:0} }

    #reader-head { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; }
    #reader-close { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--elevated); border:1.5px solid var(--border); border-radius:50%; cursor:pointer; color:var(--text); transition:background .18s,border-color .18s,color .18s; }
    #reader-close:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
    #reader-body { flex:1; overflow-y:auto; padding:1.5rem 1.25rem; padding-bottom:calc(72px + env(safe-area-inset-bottom)); scrollbar-width:thin; overscroll-behavior:contain; }

    /* Reader progress bars + % label */
    .rdr-pb-wrap { display:flex; align-items:center; gap:.55rem; padding:.35rem .75rem; border-bottom:1px solid var(--border); background:var(--elevated); flex-shrink:0; }
    .rdr-pb-track { flex:1; height:4px; background:rgba(var(--accent-rgb),.15); border-radius:2px; overflow:hidden; }
    .rdr-pb-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-l)); border-radius:2px; transition:width .1s linear; box-shadow:0 0 6px rgba(var(--accent-rgb),.4); }
    .rdr-pb-pct { font-family:'JetBrains Mono',monospace; font-size:.6rem; color:var(--accent-l); min-width:2.2rem; text-align:right; flex-shrink:0; }

    /* Reader toolbar */
    .reader-toolbar { display:flex; align-items:center; gap:.45rem; padding:.6rem 1rem; border-top:1px solid var(--border); background:var(--elevated); flex-wrap:nowrap; flex-shrink:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; min-height:52px; width:100%; box-sizing:border-box; margin:0; }
    .reader-toolbar::-webkit-scrollbar { display:none; }
    .rt-label { font-family:'JetBrains Mono',monospace; font-size:.52rem; color:var(--muted); letter-spacing:.04em; flex-shrink:0; text-transform:uppercase; }
    .rt-btn { display:inline-flex; align-items:center; justify-content:center; padding:.32rem .65rem; font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:700; color:var(--muted); background:transparent; border:1px solid var(--border); border-radius:.35rem; cursor:pointer; transition:all .18s; flex-shrink:0; line-height:1; white-space:nowrap; }
    .rt-btn:hover { border-color:var(--accent); color:var(--accent-l); }
    .rt-btn.on { background:var(--accent); color:#fff; border-color:var(--accent); }
    .rt-btn.night-on { background:linear-gradient(135deg,#3D2B0F,#5C3D15)!important; color:#F5C87A!important; border-color:#7A5020!important; }
    .rt-sep { width:1px; height:20px; background:var(--border); flex-shrink:0; margin:0 .05rem; }

    /* Share toast */
    #share-toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(8px); background:var(--elevated); border:1px solid var(--border); color:var(--text); border-radius:.6rem; padding:.45rem 1rem; font-size:.78rem; font-family:'Quicksand',sans-serif; z-index:7000; opacity:0; transition:opacity .22s ease,transform .22s ease; pointer-events:none; white-space:nowrap; }
    #share-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

    /* Night mode */
    body.page-night { --bg:#0A0805!important; --surface:#130F0A!important; --elevated:#1C1510!important; --text:#E8D5B0!important; --muted:#A08060!important; --border:rgba(180,120,60,.18)!important; --accent:#C9813A!important; --accent-d:#A8631E!important; --accent-l:#E8A558!important; --accent-rgb:201,129,58!important; }
    body.page-night #fbar { background:rgba(10,8,5,.92)!important; }
    body.page-night .tl-card { background:#130F0A!important; }
    body.page-night .tl-entry.sel .tl-card { background:#1C1510!important; }
    body.page-night .pp-title { background:linear-gradient(135deg,#C9813A,#E8A558)!important; -webkit-background-clip:text!important; -webkit-text-fill-color:transparent!important; background-clip:text!important; }
    body.page-night .gt { background:linear-gradient(135deg,#C9813A,#E8A558)!important; -webkit-background-clip:text!important; -webkit-text-fill-color:transparent!important; background-clip:text!important; }
    #reader-overlay.reader-night #reader-head { background:#130F0A!important; border-color:rgba(180,120,60,.22)!important; }
    #reader-overlay.reader-night #reader-close { background:#1C1510!important; border-color:rgba(180,120,60,.3)!important; color:#E8D5B0!important; }
    #reader-overlay.reader-night #reader-body { background:#0A0805!important; }
    #reader-overlay.reader-night .reader-toolbar { background:#130F0A!important; border-color:rgba(180,120,60,.18)!important; }
    #reader-overlay.reader-night .rt-btn.on { background:#C9813A!important; border-color:#C9813A!important; color:#fff!important; }
    #bnav.bnav-night { background:rgba(10,8,5,.97)!important; border-color:rgba(180,120,60,.2)!important; }
    #bnav.bnav-night .bi { color:#A08060!important; }
    #bnav.bnav-night .bi.on,#bnav.bnav-night .bi:hover { color:#C9813A!important; }
    /* Navbar éjszakai módban */
    #tnav.tnav-night { background:rgba(10,8,5,.97)!important; box-shadow:0 1px 0 rgba(180,120,60,.2)!important; }
    #tnav.tnav-night .nl { color:#A08060 !important; }
    #tnav.tnav-night .nl.on, #tnav.tnav-night .nl:hover { color:#C9813A !important; }
    #tnav.tnav-night .gt { background:none!important; -webkit-text-fill-color:#E8A558!important; color:#E8A558!important; }
    body.page-night footer .gt { background:none!important; -webkit-text-fill-color:#E8A558!important; color:#E8A558!important; }
    #tnav.tnav-night #fbar { background:rgba(10,8,5,.95)!important; border-color:rgba(180,120,60,.15)!important; }
    #tnav.tnav-night .fp.on { background:#C9813A!important; border-color:#C9813A!important; }
    #tnav.tnav-night .sb.on { border-color:#C9813A!important; color:#E8A558!important; }
    #tnav.tnav-night #tbtn { background:rgba(201,129,58,.15)!important; border-color:rgba(180,120,60,.35)!important; }
    #nt-close-btn { display:inline-flex; align-items:center; gap:.3rem; margin-top:.5rem; padding:.25rem .6rem; background:linear-gradient(135deg,#3D2B0F,#5C3D15); border:1px solid #7A5020; border-radius:.4rem; color:#F5C87A; font-size:.72rem; font-weight:700; cursor:pointer; font-family:'JetBrains Mono',monospace; transition:all .18s; }
    #nt-close-btn:hover { background:linear-gradient(135deg,#5C3D15,#7A5020); }

    #nores { display:none; text-align:center; padding:4rem 1rem; }

    /* ══ 3-IKONES MORPH ANIMÁCIÓ ══ */
    #tbtn { position:relative; }
    #tbtn-icons { position:relative; display:inline-flex; width:20px; height:20px; }
    #imoon, #isun, #inight {
      position:absolute; inset:0; width:20px; height:20px;
      transition: opacity .32s cubic-bezier(.4,0,.2,1),
                  transform .32s cubic-bezier(.34,1.56,.64,1);
    }
    /* Alapállapot: minden ikon rejtve */
    #imoon  { opacity:0; transform:scale(.6) rotate(-30deg); }
    #isun   { opacity:0; transform:scale(.6) rotate(30deg); }
    #inight { opacity:0; transform:scale(.6) rotate(0deg); }
    /* Aktív állapotok */
    #tbtn-icons.state-dark  #imoon  { opacity:1; transform:scale(1) rotate(0deg); }
    #tbtn-icons.state-light #isun   { opacity:1; transform:scale(1) rotate(0deg); }
    #tbtn-icons.state-night #inight { opacity:1; transform:scale(1) rotate(0deg); }

    /* ══ BILLENTYŰZET NAV HINT ══ */
    #kb-hint {
      position:fixed; top:calc(var(--nav-h, 64px) + 8px); left:50%;
      transform:translateX(-50%) translateY(-4px);
      background:var(--elevated); border:1px solid var(--border);
      border-radius:.6rem; padding:.35rem .85rem;
      font-family:'JetBrains Mono',monospace; font-size:.68rem;
      color:var(--muted); z-index:1001; opacity:0; pointer-events:none;
      transition:opacity .22s, transform .22s; white-space:nowrap;
      display:flex; align-items:center; gap:.5rem;
      box-shadow:0 4px 12px rgba(0,0,0,.3);
    }
    #kb-hint.show { opacity:1; transform:translateX(-50%) translateY(0); }
    #kb-hint kbd {
      display:inline-flex; align-items:center; justify-content:center;
      width:20px; height:20px; border-radius:.3rem;
      background:var(--surface); border:1px solid var(--border);
      font-size:.65rem; color:var(--accent);
    }

    @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} }

    /* Minimalista TM logó */
    #tnav a.gt, footer .gt { background:none !important; -webkit-text-fill-color:currentColor !important; color:var(--text) !important; transition:color .2s ease; }
    #tnav a.gt:hover, footer a.gt:hover { color:var(--accent) !important; }