:root {
            --bg:        #08090b;
            --surface:   #0f1117;
            --border:    #1e2330;
            --primary:   #0fd9a0;
            --text:      #e8eaf0;
            --text-dim:  #8891a8;
            --red:       #f87171;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            line-height: 1.7;
            padding: 0 16px 64px;
        }

        /* ── Header ────────────────────────────────────────────── */
        .header {
            border-bottom: 1px solid var(--border);
            padding: 16px 0;
            margin-bottom: 40px;
        }
        .header-inner {
            max-width: 720px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .logo-img {
            width: 36px;
            height: 36px;
            border-radius: 7px;
            object-fit: cover;
            object-position: center 18%;
        }
        .wordmark {
            font-size: 20px;
            font-weight: 700;
            letter-spacing: -0.5px;
        }
        .wordmark .lot    { color: var(--primary); }
        .wordmark .bounty { color: var(--text); }
        .back-link {
            margin-left: auto;
            color: var(--text-dim);
            text-decoration: none;
            font-size: 13px;
        }
        .back-link:hover { color: var(--primary); }

        /* ── Main layout ────────────────────────────────────────── */
        .page {
            max-width: 720px;
            margin: 0 auto;
        }

        /* ── Tab navigation ─────────────────────────────────────── */
        .tab-nav {
            display: flex;
            gap: 4px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 4px;
            margin-bottom: 36px;
        }
        .tab-btn {
            flex: 1;
            background: none;
            border: none;
            color: var(--text-dim);
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            padding: 10px;
            border-radius: 7px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .tab-btn.active {
            background: var(--border);
            color: var(--text);
        }
        .tab-btn:hover:not(.active) { color: var(--text); }

        /* ── Content sections ───────────────────────────────────── */
        .tab-panel { display: none; }
        .tab-panel.active { display: block; }

        .doc-header {
            margin-bottom: 32px;
        }
        .doc-header h1 {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 6px;
        }
        .doc-meta {
            font-size: 12px;
            color: var(--text-dim);
        }

        .section {
            margin-bottom: 36px;
        }
        .section h2 {
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--primary);
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
        }
        .section h3 {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            margin: 20px 0 8px;
        }
        .section p {
            color: var(--text-dim);
            margin-bottom: 12px;
        }
        .section ul, .section ol {
            color: var(--text-dim);
            padding-left: 20px;
            margin-bottom: 12px;
        }
        .section li {
            margin-bottom: 6px;
        }

        /* ── Callout boxes ──────────────────────────────────────── */
        .callout {
            border-radius: 8px;
            padding: 14px 16px;
            margin-bottom: 16px;
            font-size: 14px;
        }
        .callout-warn {
            background: rgba(248,113,113,0.08);
            border: 1px solid rgba(248,113,113,0.25);
            color: #fca5a5;
        }
        .callout-info {
            background: rgba(15,217,160,0.06);
            border: 1px solid rgba(15,217,160,0.2);
            color: var(--text-dim);
        }
        .callout strong { color: var(--text); }

        /* ── CSP: utility classes — eliminates all inline style="" attrs ── */
        .legal-link      { color: var(--primary); }
        .legal-nav-link  { color: inherit; }
        .legal-note-mt   { margin-top: 14px; }
        .legal-note-mt-sm{ margin-top: 12px; }
        .data-table      { width: 100%; border-collapse: collapse; font-size: 14px; }
        .data-table tr   { border-bottom: 1px solid var(--border); }
        .data-table th   { text-align: left; padding: 8px 12px 8px 0; color: var(--text); font-weight: 600; }
        .data-table th:last-child { padding: 8px 0; }
        .data-table td   { padding: 10px 12px 10px 0; color: var(--text-dim); }
        .data-table td:last-child { padding: 10px 0; }

        /* ── Footer ─────────────────────────────────────────────── */
        .page-footer {
            margin-top: 60px;
            padding-top: 24px;
            border-top: 1px solid var(--border);
            text-align: center;
            font-size: 12px;
            color: var(--text-dim);
            opacity: 0.6;
        }