/* LostCube — PATCH NOTES. Se încarcă DUPĂ site.css și doar pe patch-notes.html.
   Layout: rail de versiuni (sticky, stânga) + conținut (dreapta). Pe mobil railul
   devine o bandă orizontală derulabilă, lipită sub nav. */

:root{
  --pn-added:#57e08a; --pn-improved:#5ee0ff; --pn-changed:#9a6cff;
  --pn-balance:#f5c84b; --pn-fixed:#ff9f68; --pn-removed:#ff7a7a;
  --pn-rail:246px;
}

/* ── HERO ─────────────────────────────────────────────────────────── */
.pn-hero{ text-align:center; padding:52px 24px 26px; max-width:900px; margin:0 auto; }
.pn-hero h1{ margin-top:10px; }
.pn-hero .tag{ color:var(--muted); margin-top:14px; font-size:17.5px; max-width:640px; margin-inline:auto; }
.pn-searchwrap{ max-width:560px; margin:26px auto 0; position:relative; }
.pn-search{ width:100%; padding:14px 16px 14px 44px; border-radius:13px; border:1px solid var(--border2);
  background:rgba(11,17,32,.8); color:var(--text); font-size:15px; font-family:inherit; transition:border-color .15s; }
.pn-search:focus{ outline:none; border-color:var(--cyan); }
.pn-search::placeholder{ color:var(--dim); }
.pn-searchwrap:before{ content:"🔎"; position:absolute; left:15px; top:50%; transform:translateY(-50%);
  font-size:15px; opacity:.65; pointer-events:none; }

/* ── FILTRE pe tip ────────────────────────────────────────────────── */
.pn-filters{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:22px auto 0; max-width:820px; }
.pn-f{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:22px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid var(--border2); color:var(--muted);
  font-family:inherit; font-weight:700; font-size:13px; transition:.15s; }
.pn-f:hover{ color:var(--text); border-color:var(--border2); background:rgba(255,255,255,.06); }
.pn-f.on{ color:var(--text); background:rgba(94,224,255,.1); border-color:currentColor; }
.pn-f .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.pn-f.on .dot{ box-shadow:0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }

/* ── LAYOUT rail + conținut ───────────────────────────────────────── */
/* minmax(0,…) e obligatoriu: un `1fr` implicit se dimensionează după min-content,
   iar tabelele (min-width 420px) ar umfla coloana și ar da scroll orizontal pe PAGINĂ.
   Cu minmax(0,…) conținutul lat derulează în propria cutie, cum trebuie. */
.pn-layout{ max-width:var(--maxw); margin:0 auto; padding:10px 24px 40px;
  display:grid; grid-template-columns:var(--pn-rail) minmax(0,1fr); gap:36px; align-items:start; }
.pn-layout > *{ min-width:0; }
.pn-ver,.pn-sec,.pn-secbody,.pn-banner{ min-width:0; }
.pn-e > *,.pn-gstep > *,.pn-hlc > *{ min-width:0; }
.pn-e .et,.pn-e .ed,.pn-gstep .gt,.pn-gstep .gd,.pn-hlc .ht,.pn-hlc .hd{ overflow-wrap:anywhere; }

.pn-rail{ position:sticky; top:82px; }
.pn-rail .rlabel{ font-size:11.5px; font-weight:800; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--dim); padding:0 12px 10px; }
.pn-rail .rlist{ display:flex; flex-direction:column; gap:4px; max-height:calc(100vh - 190px); overflow-y:auto;
  padding-right:4px; }
.pn-vbtn{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:11px 12px;
  border-radius:12px; border:1px solid transparent; background:none; cursor:pointer; color:var(--muted);
  font-family:inherit; transition:.15s; position:relative; }
.pn-vbtn:hover{ background:rgba(255,255,255,.045); color:var(--text); }
.pn-vbtn.on{ background:rgba(94,224,255,.09); border-color:var(--border2); color:var(--text); }
.pn-vbtn.on:before{ content:""; position:absolute; left:0; top:11px; bottom:11px; width:3px; border-radius:3px;
  background:var(--vaccent,var(--cyan)); }
.pn-vbtn .vic{ flex:0 0 34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:17px;
  background:linear-gradient(145deg,rgba(94,224,255,.13),rgba(154,108,255,.13)); border:1px solid var(--border); }
.pn-vbtn .vmeta{ min-width:0; }
.pn-vbtn .vnum{ font-weight:800; font-size:14.5px; letter-spacing:.2px; }
.pn-vbtn .vname{ font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pn-vbtn.on .vname{ color:var(--muted); }
.pn-newdot{ margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.6px; padding:3px 7px;
  border-radius:20px; background:var(--grad); color:#06121a; flex:0 0 auto; }

/* ── CARD DE VERSIUNE ─────────────────────────────────────────────── */
.pn-ver{ scroll-margin-top:92px; margin-bottom:56px; }
.pn-banner{ position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--border);
  background:var(--panel); backdrop-filter:blur(8px); padding:32px 34px; }
.pn-banner:before{ content:""; position:absolute; inset:0;
  background:radial-gradient(680px 300px at 88% -30%, var(--vglow,rgba(94,224,255,.2)), transparent 62%); pointer-events:none; }
.pn-banner:after{ content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--vaccent,var(--cyan)), transparent 78%); }
.pn-bhead{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; position:relative; }
.pn-vbig{ font-size:clamp(30px,4.6vw,46px); font-weight:800; letter-spacing:-1px; line-height:1; }
.pn-code{ font-size:clamp(17px,2.4vw,23px); font-weight:700; color:var(--vaccent,var(--cyan)); }
.pn-tag{ padding:5px 12px; border-radius:20px; font-size:11.5px; font-weight:800; letter-spacing:1.1px;
  border:1.5px solid var(--border2); color:var(--muted); text-transform:uppercase; }
.pn-tag.major{ border-color:var(--vaccent,var(--cyan)); color:var(--vaccent,var(--cyan)); }
.pn-tag.latest{ background:var(--grad); color:#06121a; border:none; }
.pn-bdate{ margin-left:auto; color:var(--dim); font-size:13.5px; white-space:nowrap; }
.pn-tagline{ margin-top:12px; font-size:19px; font-weight:700; color:var(--text); position:relative; }
.pn-summary{ margin-top:12px; color:var(--muted); max-width:74ch; font-size:15.2px; position:relative; }

.pn-stats{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; position:relative; }
.pn-stat{ flex:1 1 128px; background:rgba(11,17,32,.55); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; }
.pn-stat .sv{ font-size:22px; font-weight:800; color:var(--vaccent,var(--cyan)); line-height:1.1; }
.pn-stat .sk{ font-size:12px; color:var(--muted); margin-top:3px; }

/* highlights = TL;DR */
.pn-hl{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
.pn-hlc{ display:flex; gap:13px; background:rgba(11,17,32,.5); border:1px solid var(--border);
  border-radius:14px; padding:15px 16px; }
.pn-hlc .hic{ flex:0 0 40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:20px;
  background:linear-gradient(145deg,rgba(94,224,255,.14),rgba(154,108,255,.14)); border:1px solid var(--border); }
.pn-hlc .ht{ font-weight:700; font-size:14.5px; }
.pn-hlc .hd{ color:var(--muted); font-size:13px; margin-top:3px; line-height:1.5; }

/* ── SECȚIUNI ─────────────────────────────────────────────────────── */
.pn-sec{ margin-top:28px; border:1px solid var(--border); border-radius:20px; background:var(--panel);
  backdrop-filter:blur(8px); overflow:hidden; scroll-margin-top:92px; }
.pn-sechead{ display:flex; align-items:flex-start; gap:15px; padding:24px 26px 0; }
.pn-sechead .sic{ flex:0 0 46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:23px;
  background:linear-gradient(145deg,rgba(94,224,255,.14),rgba(154,108,255,.14)); border:1px solid var(--border); }
.pn-sechead h3{ font-size:21px; letter-spacing:-.2px; }
.pn-sechead .lead{ color:var(--muted); font-size:14.5px; margin-top:7px; max-width:76ch; }
.pn-secbody{ padding:18px 26px 24px; }

/* ilustrație */
.pn-art{ margin:18px 0 4px; border:1px solid var(--border); border-radius:16px; padding:18px;
  background:linear-gradient(160deg,rgba(11,17,32,.75),rgba(20,27,48,.55)); overflow-x:auto; }
.pn-art svg{ display:block; width:100%; height:auto; max-width:760px; margin:0 auto; }
.pn-artcap{ text-align:center; color:var(--dim); font-size:12.5px; margin-top:12px; }

/* intrări */
.pn-list{ margin-top:16px; display:flex; flex-direction:column; }
.pn-e{ display:grid; grid-template-columns:104px 1fr; gap:16px; padding:14px 0; align-items:start; }
.pn-e + .pn-e{ border-top:1px solid rgba(38,49,76,.5); }
.pn-e.hide{ display:none; }
.pn-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:8px;
  font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; white-space:nowrap;
  border:1px solid currentColor; background:color-mix(in srgb, currentColor 12%, transparent); }
.pn-e .et{ font-weight:700; font-size:15.5px; }
.pn-e .ed{ color:var(--muted); font-size:14px; margin-top:4px; line-height:1.6; }

/* tabel */
.pn-tbl{ margin-top:20px; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.pn-tbl .tt{ padding:12px 16px; font-weight:700; font-size:14px; background:rgba(11,17,32,.6);
  border-bottom:1px solid var(--border); }
.pn-tblscroll{ overflow-x:auto; }
.pn-tbl table{ width:100%; border-collapse:collapse; font-size:13.8px; min-width:420px; }
.pn-tbl th{ text-align:left; padding:10px 16px; color:var(--dim); font-size:11.5px; font-weight:800;
  letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid var(--border); white-space:nowrap; }
.pn-tbl td{ padding:11px 16px; border-top:1px solid rgba(38,49,76,.4); color:var(--muted); vertical-align:top; }
.pn-tbl tr td:first-child{ color:var(--text); font-weight:600; white-space:nowrap; }

/* ghid */
.pn-guide{ margin-top:22px; border:1px solid var(--border2); border-radius:16px; overflow:hidden;
  background:linear-gradient(165deg,rgba(94,224,255,.055),rgba(154,108,255,.05)); }
.pn-ghead{ display:flex; align-items:center; gap:11px; padding:16px 20px; border-bottom:1px solid var(--border); }
.pn-ghead .gtag{ font-size:10.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  padding:4px 9px; border-radius:7px; background:var(--grad); color:#06121a; }
.pn-ghead h4{ font-size:16.5px; font-weight:800; }
.pn-gbody{ padding:18px 20px 20px; }
.pn-gintro{ color:var(--muted); font-size:14px; margin-bottom:16px; }
.pn-gstep{ display:grid; grid-template-columns:32px 1fr; gap:14px; padding:11px 0; align-items:start; }
.pn-gstep + .pn-gstep{ border-top:1px solid rgba(38,49,76,.4); }
.pn-gstep .gn{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-weight:800;
  font-size:14px; color:#06121a; background:var(--grad); }
.pn-gstep .gt{ font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pn-gstep .gd{ color:var(--muted); font-size:13.5px; margin-top:3px; line-height:1.55; }
.pn-tips{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(38,49,76,.5); }
.pn-tip{ display:flex; gap:10px; color:var(--muted); font-size:13.3px; padding:4px 0; }
.pn-tip:before{ content:"💡"; flex:0 0 auto; }

/* note + credite + probleme cunoscute */
.pn-note{ border-radius:13px; padding:14px 16px 14px 46px; margin-top:18px; position:relative;
  border:1px solid var(--border); background:var(--panel2); font-size:14px; color:var(--muted); }
.pn-note:before{ position:absolute; left:15px; top:13px; font-size:18px; }
.pn-note.warn{ border-left:4px solid var(--gold); } .pn-note.warn:before{ content:"⚠️"; }
.pn-note.info{ border-left:4px solid var(--cyan); } .pn-note.info:before{ content:"ℹ️"; }
.pn-credits{ margin-top:16px; color:var(--dim); font-size:12.5px; font-style:italic; }
.pn-known{ margin-top:24px; border:1px solid var(--border); border-radius:16px; padding:20px 24px;
  background:rgba(11,17,32,.45); }
.pn-known h4{ font-size:15px; display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.pn-known li{ color:var(--muted); font-size:13.8px; margin-left:18px; padding:3px 0; }

/* stare goală la căutare */
.pn-empty{ text-align:center; padding:60px 20px; color:var(--dim); }
.pn-empty .big{ font-size:40px; margin-bottom:12px; }

/* back to top */
.pn-top{ position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:14px; display:grid;
  place-items:center; background:rgba(13,18,32,.94); border:1px solid var(--border2); color:var(--muted);
  cursor:pointer; z-index:60; opacity:0; pointer-events:none; transition:.2s; backdrop-filter:blur(10px); }
.pn-top.on{ opacity:1; pointer-events:auto; }
.pn-top:hover{ color:var(--text); border-color:var(--cyan); }

/* ── RESPONSIVE ───────────────────────────────────────────────────── */
@media(max-width:1000px){
  .pn-layout{ grid-template-columns:minmax(0,1fr); gap:18px; padding-top:0; }
  .pn-rail{ position:sticky; top:66px; z-index:40; margin:0 -24px; padding:10px 0;
    background:rgba(7,9,16,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
  .pn-rail .rlabel{ display:none; }
  .pn-rail .rlist{ flex-direction:row; overflow-x:auto; max-height:none; padding:0 24px 2px; gap:8px; }
  .pn-vbtn{ flex:0 0 auto; padding:9px 14px; border:1px solid var(--border2); border-radius:11px; }
  .pn-vbtn.on:before{ display:none; }
  .pn-vbtn .vic{ display:none; }
  .pn-vbtn .vname{ display:none; }
  .pn-hl{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  .pn-banner{ padding:24px 20px; border-radius:18px; }
  .pn-bdate{ margin-left:0; width:100%; }
  .pn-sechead{ padding:20px 18px 0; gap:12px; }
  .pn-sechead .sic{ flex-basis:38px; height:38px; font-size:19px; }
  .pn-secbody{ padding:14px 18px 20px; }
  .pn-e{ grid-template-columns:1fr; gap:7px; }
  .pn-stat{ flex-basis:calc(50% - 5px); }
  .pn-gstep{ grid-template-columns:26px 1fr; gap:11px; }
  .pn-art{ padding:12px; }
}
@media(prefers-reduced-motion:reduce){
  .pn-vbtn,.pn-f,.pn-top{ transition:none; }
  html{ scroll-behavior:auto; }
}