/* page styles extracted from tos/index.html — overrides/extensions of /css/global.css */
:root {
      --bg: #0b0f2e; --panel: rgba(22, 28, 72, 0.88); --line: rgba(255, 120, 255, 0.28);
      --text: #e8e9ff; --muted: #a8add8; --cyan: #39f3ff; --pink: #ff4fd8; --yellow: #ffe566;
    }
    * { box-sizing: border-box; }
    html, body {
      margin: 0; min-height: 100%;
      background:
        radial-gradient(1000px 500px at 8% -10%, #5b1fff44, transparent 55%),
        radial-gradient(800px 420px at 92% 0%, #ff4fd844, transparent 50%),
        linear-gradient(180deg, #0b0f2e 0%, #16122f 55%, #0a0d24 100%);
      color: var(--text);
      font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
      line-height: 1.65;
    }
    a { color: var(--cyan); text-decoration: none; }
    a:hover { color: #fff; text-decoration: underline; }
    .wrap { width: min(900px, 92vw); margin: 0 auto; padding: 2.2rem 0 4rem; }
    .topnav { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-bottom: 1.75rem; font-size: .95rem; }
    .badge {
      display: inline-block; padding: .25rem .65rem; border-radius: 999px;
      border: 1px solid var(--line); background: rgba(255,79,216,.12); color: #ffb4e8; font-size: .8rem; font-weight: 600;
    }
    h1 { font-size: clamp(1.6rem, 4vw, 2.35rem); margin: .6rem 0 .4rem; line-height: 1.2; font-weight: 800; }
    .lead { color: var(--muted); margin: 0 0 1.5rem; max-width: 44rem; }
    .meta { color: #7f86b5; font-size: .9rem; margin-bottom: 1.75rem; }
    .panel {
      background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
      padding: 1.25rem 1.35rem; margin: 1rem 0; box-shadow: 0 18px 50px rgba(0,0,0,.35);
    }
    .toc { list-style: none; padding: 0; margin: 0; columns: 2; gap: 1.5rem; }
    @media (max-width: 640px) { .toc { columns: 1; } }
    .toc li { margin: .35rem 0; break-inside: avoid; }
    h2 { font-size: 1.25rem; margin: 2.1rem 0 .7rem; color: #fff; border-left: 3px solid var(--pink); padding-left: .7rem; font-weight: 700; }
    h3 { font-size: 1.05rem; margin: 1.2rem 0 .45rem; color: var(--yellow); }
    p, li { color: #d7daf5; }
    ul, ol { padding-left: 1.2rem; }
    li { margin: .35rem 0; }
    .cols { columns: 2; gap: 1.5rem; }
    @media (max-width: 700px) { .cols { columns: 1; } }
    .cols li { break-inside: avoid; }
    .note {
      border-left: 3px solid var(--cyan); background: rgba(57,243,255,.08);
      padding: .85rem 1rem; border-radius: 0 12px 12px 0; color: var(--muted); font-size: .95rem;
    }
    .warn {
      border-left: 3px solid var(--yellow); background: rgba(255,229,102,.08);
      padding: .85rem 1rem; border-radius: 0 12px 12px 0; color: #ffe9a8; font-size: .95rem;
    }
    footer { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: #7f86b5; font-size: .88rem; }
    code { font-size: .92em; background: rgba(0,0,0,.28); padding: .1rem .35rem; border-radius: 6px; }