/* ============================================================
   WordSearchZ - Changelog page styles
   Linked from changelog.html (no inline CSS).
   ============================================================ */

:root{
  --bg:#05070d; --panel:#0b0f17; --line:rgba(255,255,255,.07);
  --green:#4ade80; --green-2:#22c55e; --blue:#38bdf8; --amber:#fbbf24;
  --text:#e5e7eb; --muted:#94a3b8; --faint:#64748b;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(60% 45% at 80% 0%, rgba(34,197,94,.10) 0%, transparent 60%),
    radial-gradient(45% 40% at 0% 100%, rgba(34,197,94,.07) 0%, transparent 60%);
  background-attachment:fixed;
}
.wrap{max-width:820px; margin:0 auto; padding:56px 20px 80px}
header.page{margin-bottom:40px}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  font:700 11px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--green);
  background:rgba(34,197,94,.08); border:1px solid rgba(74,222,128,.2);
  padding:7px 14px; border-radius:9999px;
}
h1{margin:0 0 10px; font-size:clamp(2rem,5vw,3rem); font-weight:900; letter-spacing:-.02em}
h1 .brand span{color:var(--green)}
.sub{margin:0; color:var(--muted); max-width:60ch}
a.back{display:inline-block; margin-bottom:18px; color:var(--green); text-decoration:none; font:700 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase}
a.back:hover{text-decoration:underline}
.timeline{position:relative; margin-top:40px; padding-left:28px}
.timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(to bottom, rgba(74,222,128,.5), rgba(74,222,128,.08));}
.release{position:relative; margin:0 0 26px}
.release::before{content:""; position:absolute; left:-28px; top:22px; width:16px; height:16px;
  border-radius:50%; background:var(--panel); border:2px solid var(--green-2); box-shadow:0 0 0 4px var(--bg)}
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px 24px;
  box-shadow:0 20px 50px -30px rgba(0,0,0,.8);}
.rel-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px; margin-bottom:14px}
.ver{font:900 22px/1 var(--sans); letter-spacing:-.01em}
.ver .v{color:var(--green)}
.date{font:700 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.latest{font:800 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:#04120a;
  background:var(--green); padding:5px 10px; border-radius:9999px;}
.group{margin:14px 0 0}
.tag{display:inline-block; font:800 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px; margin-bottom:8px;}
.tag.new{color:var(--green); background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.25)}
.tag.imp{color:var(--blue); background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.25)}
.tag.fix{color:var(--amber); background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.25)}
ul{margin:0; padding-left:20px}
li{margin:7px 0; color:var(--text)}
li::marker{color:var(--green)}
li strong{color:#fff; font-weight:700}
.ph{color:var(--faint); font-style:italic}
footer.page{margin-top:48px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--faint); font-size:13px; text-align:center}
footer.page .brand span{color:var(--green)}
@media (max-width:520px){ .wrap{padding:36px 16px 60px} .card{padding:18px} }