/* Documentation and changelog pages of wiven-systems.com (same identity as the home page). */
:root { --ink: #073b44; --muted: #475467; --line: #e3ecee; --teal: #159a9c; --deep: #063e45; --bg: #f7f9fc; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.8 Inter, system-ui, sans-serif; }
html[lang="ar"] body { font-family: Cairo, sans-serif; }
a { color: var(--teal); }
html[lang="en"] [data-l="ar"], html[lang="ar"] [data-l="en"] { display: none !important; }
.pg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pg-head { background: linear-gradient(180deg, #0b5a63, #063e45); color: #fff; }
.pg-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; }
.pg-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-size: 21px; font-weight: 700; }
.pg-brand img { border-radius: 12px; filter: drop-shadow(0 0 10px rgba(127, 243, 228, .5)); }
.pg-brand b { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .3em; color: #7ff3e4; font-weight: 500; }
.pg-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pg-nav a { color: #d7f3f2; text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: 15px; }
.pg-nav a[aria-current="page"], .pg-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pg-lang { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: #fff; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.pg-lead { font-size: 18px; color: var(--muted); margin: 0 0 32px; }
h1 { font-size: 40px; line-height: 1.2; margin: 48px 0 10px; }
h2 { font-size: 24px; margin: 0 0 12px; scroll-margin-top: 20px; }
.pg-docs { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 64px; }
.pg-toc { position: sticky; top: 20px; margin-top: 52px; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.pg-toc a { color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.pg-toc a:hover { background: #e6f4f4; color: var(--ink); }
.pg-article section { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; margin-bottom: 18px; }
.pg-article p { margin: 0 0 12px; color: #344054; }
.pg-article ol, .pg-article ul { margin: 0 0 12px; padding-inline-start: 22px; color: #344054; }
.pg-article li { margin-bottom: 6px; }
code { font-family: "JetBrains Mono", monospace; font-size: .88em; background: #e6f4f4; color: #0b5a63; padding: 1px 6px; border-radius: 6px; }
.pg-code { margin: 0 0 12px; padding: 16px 18px; border-radius: 14px; background: #041d22; border: 1px solid rgba(127, 243, 228, .25); overflow-x: auto; text-align: left; }
.pg-code code { background: none; color: #d7f3f2; padding: 0; font-size: 13px; line-height: 1.8; white-space: pre; }
.pg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 !important; }
.pg-chips li { margin: 0; padding: 6px 14px; border-radius: 999px; background: #e6f4f4; color: #0b5a63; font-size: 14px; font-weight: 500; }
.pg-log { max-width: 860px; padding-bottom: 64px; }
.pg-rel { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px 28px; margin-bottom: 18px; }
.pg-rel header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.pg-ver { font-family: "JetBrains Mono", monospace; font-size: 20px; font-weight: 500; color: var(--deep); }
.pg-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #e58a3a; color: #fff; }
.pg-rel time { margin-inline-start: auto; color: #98a2b3; font-size: 14px; }
.pg-rel ul { margin: 0; padding-inline-start: 20px; color: #344054; }
.pg-rel li { margin-bottom: 6px; }
.pg-foot { border-top: 1px solid var(--line); padding: 22px 0; color: #667085; font-size: 14px; }
.pg-foot .pg-wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .pg-docs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pg-toc { position: static; margin-top: 24px; flex-direction: row; flex-wrap: wrap; }
  h1 { font-size: 32px; margin-top: 28px; }
  .pg-article section, .pg-rel { padding: 20px 18px; }
  .pg-wrap { padding: 0 16px; }
  .pg-bar { height: auto; padding: 14px 16px; flex-wrap: wrap; }
}