/* ============================================ */
        /* ACCESSIBLE COLOR SYSTEM - WP COMPATIBLE      */
        /* ============================================ */

        :root {
            --docs-ok-color: #10b981;
            --docs-warn-color: #f59e0b;
            --docs-error-color: #ef4444;
            --docs-info-color: #3b82f6;
            --docs-plasma: #00d9ff;
            --docs-accent: #8b5cf6;
        }

        [data-theme="light"] .docs-content {
            --docs-ok-color: #059669;
            --docs-warn-color: #d97706;
            --docs-error-color: #dc2626;
            --docs-info-color: #2563eb;
            --docs-plasma: #1e40af;
            --docs-accent: #6d28d9;
        }

        /* ============================================ */
        /* NAVIGATION TABS                              */
        /* ============================================ */

        .docs-nav {
            display: flex;
            border-bottom: 2px solid var(--border, rgba(255, 255, 255, 0.1));
            margin-bottom: 0;
            flex-wrap: wrap;
            justify-content: center;
            gap: 5px;
            padding: 10px 0;
        }

        .docs-tab {
            padding: 12px 18px;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 600;
            font-size: 13px;
            transition: all 0.2s ease;
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            margin-bottom: -2px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            background: transparent;
        }

        .docs-tab:hover {
            color: rgba(255, 255, 255, 0.95);
            background: rgba(255, 255, 255, 0.05);
        }

        .docs-tab.active {
            color: var(--docs-plasma, #00d9ff);
            border-color: var(--docs-plasma, #00d9ff);
            background: rgba(0, 217, 255, 0.1);
        }

        [data-theme="light"] .docs-tab { color: rgba(0, 0, 0, 0.7); }
        [data-theme="light"] .docs-tab:hover { color: rgba(0, 0, 0, 0.95); background: rgba(0, 0, 0, 0.05); }
        [data-theme="light"] .docs-tab.active { color: #1e40af; border-color: #1e40af; background: rgba(30, 64, 175, 0.08); }

        /* ============================================ */
        /* CONTENT SECTIONS                             */
        /* ============================================ */

        .docs-content { width: 100%; }

        .docs-section {
            display: none;
            animation: fadeIn 0.3s;
            padding-top: 20px;
            width: 100%;
        }

        .docs-section.active { display: block; }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .docs-content h2 {
            font-size: 1.8rem;
            color: var(--docs-plasma, #00d9ff);
            border-left: 5px solid var(--docs-plasma, #00d9ff);
            padding-left: 20px;
            margin-top: 35px;
            margin-bottom: 20px;
            letter-spacing: -0.5px;
            font-weight: 700;
        }

        .docs-content h3 {
            font-size: 1.4rem;
            color: rgba(255, 255, 255, 0.95);
            margin-top: 30px;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .docs-content h4 {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.9);
            margin-top: 20px;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .docs-content p {
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 16px;
            font-size: 1rem;
        }

        .docs-content ul { padding-left: 25px; margin-bottom: 18px; }
        .docs-content li { margin-bottom: 10px; line-height: 1.8; color: rgba(255, 255, 255, 0.8); }
        .docs-content strong { color: rgba(255, 255, 255, 0.95); font-weight: 600; }
        .docs-content em { color: var(--docs-plasma, #00d9ff); font-style: normal; font-weight: 500; }
        [data-theme="light"] .docs-content em { color: #1e40af; }

        .docs-content code {
            background: rgba(0, 0, 0, 0.4);
            padding: 3px 8px;
            border-radius: 4px;
            font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
            font-size: 0.9em;
            color: #7dd3fc;
            border: 1px solid rgba(0, 217, 255, 0.3);
        }

        [data-theme="light"] .docs-content h3 { color: rgba(0, 0, 0, 0.9); }
        [data-theme="light"] .docs-content h4 { color: rgba(0, 0, 0, 0.85); }
        [data-theme="light"] .docs-content p,
        [data-theme="light"] .docs-content li { color: rgba(0, 0, 0, 0.75); }
        [data-theme="light"] .docs-content strong { color: rgba(0, 0, 0, 0.9); }
        [data-theme="light"] .docs-content code { background: rgba(0, 0, 0, 0.06); color: #0369a1; border-color: rgba(0, 0, 0, 0.1); }

        /* ============================================ */
        /* PARAM GRID - INTERACTIVE CARDS               */
        /* ============================================ */

        .param-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 18px;
            margin: 20px 0;
        }

        .param {
            background: rgba(0, 0, 0, 0.3);
            padding: 20px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.2s ease;
        }

        .param:hover {
            border-color: var(--docs-plasma, #00d9ff);
            background: rgba(0, 217, 255, 0.08);
            transform: translateY(-2px);
        }

        .param strong {
            color: var(--docs-plasma, #00d9ff);
            display: block;
            margin-bottom: 12px;
            font-size: 1rem;
            font-weight: 700;
        }

        .param span {
            color: rgba(255, 255, 255, 0.75);
            font-size: 0.9rem;
            line-height: 1.7;
            display: block;
            margin-bottom: 6px;
        }

        [data-theme="light"] .param { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); }
        [data-theme="light"] .param:hover { background: rgba(30, 64, 175, 0.06); border-color: #1e40af; }
        [data-theme="light"] .param strong { color: #1e40af; }
        [data-theme="light"] .param span { color: rgba(0, 0, 0, 0.7); }

        /* ============================================ */
        /* FEATURE LISTS - ARROW BULLETS                */
        /* ============================================ */

        .feature-list { list-style: none; padding: 0; }
        .feature-list li { padding-left: 28px; position: relative; margin-bottom: 12px; }
        .feature-list li::before {
        content: "\25B8";
            position: absolute;
            left: 0;
            color: var(--docs-plasma, #00d9ff);
            font-weight: bold;
            font-size: 1.1rem;
        }

        [data-theme="light"] .feature-list li::before { color: #1e40af; }

        /* ============================================ */
        /* ALERT BOXES                                  */
        /* ============================================ */

        .warning-box, .info-box, .success-box, .tip-box {
            background: rgba(0, 0, 0, 0.25);
            padding: 20px;
            margin: 24px 0;
            border-radius: 12px;
            border-left: 5px solid;
            line-height: 1.7;
        }

        .warning-box { border-left-color: var(--docs-warn-color, #f59e0b); background: rgba(245, 158, 11, 0.1); }
        .warning-box strong { color: #fbbf24; font-weight: 700; }

        .info-box { border-left-color: var(--docs-info-color, #3b82f6); background: rgba(59, 130, 246, 0.1); }
        .info-box strong { color: #60a5fa; font-weight: 700; }

        .success-box { border-left-color: var(--docs-ok-color, #10b981); background: rgba(16, 185, 129, 0.1); }
        .success-box strong { color: #34d399; font-weight: 700; }

        .tip-box { border-left-color: var(--docs-plasma, #00d9ff); background: rgba(0, 217, 255, 0.1); }
        .tip-box strong { color: #22d3ee; font-weight: 700; }

        [data-theme="light"] .warning-box,
        [data-theme="light"] .info-box,
        [data-theme="light"] .success-box,
        [data-theme="light"] .tip-box { background: rgba(255, 255, 255, 0.8); }
        [data-theme="light"] .warning-box strong { color: #d97706; }
        [data-theme="light"] .info-box strong { color: #2563eb; }
        [data-theme="light"] .success-box strong { color: #059669; }
        [data-theme="light"] .tip-box strong { color: #1e40af; }

        /* ============================================ */
        /* ARCHITECTURE BADGES                          */
        /* ============================================ */

        .arch-badge {
            display: inline-block;
            padding: 6px 14px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.85rem;
            margin: 0 5px;
            border: 2px solid;
        }

        .arch-core { background: rgba(0, 217, 255, 0.2); color: var(--docs-plasma); border-color: var(--docs-plasma); }
        .arch-api { background: rgba(139, 92, 246, 0.2); color: #a78bfa; border-color: #8b5cf6; }
        .arch-sec { background: rgba(16, 185, 129, 0.2); color: #34d399; border-color: #10b981; }
        .arch-storage { background: rgba(249, 115, 22, 0.2); color: #fb923c; border-color: #f97316; }
        .arch-bridge { background: rgba(251, 191, 36, 0.2); color: #fbbf24; border-color: #eab308; }

        /* ============================================ */
        /* METRICS GRID                                 */
        /* ============================================ */

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin: 24px 0;
        }

        .metric-card {
            background: rgba(0, 0, 0, 0.3);
            padding: 20px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
            transition: all 0.2s ease;
        }

        .metric-card:hover { border-color: var(--docs-plasma, #00d9ff); transform: translateY(-2px); }

        .metric-value {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--docs-plasma, #00d9ff);
            display: block;
            margin-bottom: 8px;
            line-height: 1;
        }

        .metric-label {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.7);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }

        [data-theme="light"] .metric-card { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); }
        [data-theme="light"] .metric-value { color: #1e40af; }
        [data-theme="light"] .metric-card:hover { border-color: #1e40af; }
        [data-theme="light"] .metric-label { color: rgba(0, 0, 0, 0.6); }

        /* ============================================ */
        /* EXAMPLE BOXES                                */
        /* ============================================ */

        .example-box {
            background: rgba(0, 0, 0, 0.35);
            padding: 18px;
            border-radius: 12px;
            margin: 20px 0;
            border-left: 4px solid var(--docs-plasma, #00d9ff);
        }

        .example-box .label {
            color: var(--docs-plasma, #00d9ff);
            font-weight: 700;
            font-size: 0.85rem;
            text-transform: uppercase;
            margin-bottom: 10px;
            display: block;
            letter-spacing: 0.5px;
        }

        .example-box .content {
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.8;
            font-size: 0.95rem;
        }

        [data-theme="light"] .example-box { background: rgba(0, 0, 0, 0.04); }
        [data-theme="light"] .example-box .content { color: rgba(0, 0, 0, 0.8); }

        /* ============================================ */
        /* RARITY COLOR CLASSES                         */
        /* ============================================ */

        .text-ok { color: var(--docs-ok-color, #10b981) !important; }
        .text-info { color: var(--docs-info-color, #3b82f6) !important; }
        .text-hard { color: var(--docs-accent, #8b5cf6) !important; }
        .text-warn { color: var(--docs-warn-color, #f59e0b) !important; }
        .text-err { color: var(--docs-error-color, #ef4444) !important; }

        /* ============================================ */
        /* RARITY COLOR SWATCHES                        */
        /* ============================================ */

        .rarity-swatch {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 18px;
            border-radius: 10px;
            border: 2px solid;
            transition: all 0.2s ease;
        }

        .rarity-swatch:hover { transform: translateY(-2px); }

        .rarity-dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            flex-shrink: 0;
            background-color: currentColor;
            box-shadow: 0 0 8px currentColor;
        }

        .rarity-label {
            font-weight: 700;
            font-size: 1rem;
            flex: 1;
        }

        .rarity-hex {
            font-family: 'Monaco', 'Consolas', monospace;
            font-size: 0.8rem;
            opacity: 0.7;
        }

        .rarity-common { border-color: #4ade80; color: #4ade80; background: linear-gradient(135deg, #062006 0%, #020c02 100%); }
        .rarity-uncommon { border-color: #00f2ff; color: #00f2ff; background: linear-gradient(135deg, #001a1c 0%, #000c0d 100%); }
        .rarity-rare { border-color: #6366f1; color: #6366f1; background: linear-gradient(135deg, #1e1b4b 0%, #100e2b 100%); }
        .rarity-epic { border-color: #f97316; color: #f97316; background: linear-gradient(135deg, #2e1a0a 0%, #1f0d05 100%); }
        .rarity-mythic { border-color: #ff3b3b; color: #ff3b3b; background: linear-gradient(135deg, #2e0505 0%, #1a0202 100%); }
        .rarity-transcendent { border-color: #fbbf24; color: #fbbf24; background: linear-gradient(135deg, #2e2405 0%, #1a1402 100%); }
        .rarity-cosmic { border-color: #ff00ff; color: #ff00ff; background: linear-gradient(135deg, #300130 0%, #1a011a 100%); }

        [data-theme="light"] .rarity-common { color: #15803d; border-color: #4ade80; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
        [data-theme="light"] .rarity-uncommon { color: #0369a1; border-color: #0ea5e9; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); }
        [data-theme="light"] .rarity-rare { color: #4338ca; border-color: #6366f1; background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); }
        [data-theme="light"] .rarity-epic { color: #c2410c; border-color: #f97316; background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); }
        [data-theme="light"] .rarity-mythic { color: #b91c1c; border-color: #ef4444; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); }
        [data-theme="light"] .rarity-transcendent { color: #a16207; border-color: #eab308; background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%); }
        [data-theme="light"] .rarity-cosmic { color: #a21caf; border-color: #d946ef; background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); }

        /* ============================================ */
        /* SAMPLE UNLOCK NOTIFICATION                   */
        /* ============================================ */

        .sample-unlock {
            border-radius: 12px;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            gap: 14px;
            border: 2px solid #4ade80;
            background: linear-gradient(135deg, #062006 0%, #020c02 100%);
            max-width: 400px;
            margin: 20px auto;
            box-shadow: 0 8px 32px rgba(74, 222, 128, 0.2);
        }

        .sample-unlock-icon { font-size: 2rem; line-height: 1; }

        .sample-unlock-body { flex: 1; }

        .sample-unlock-tier {
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #4ade80;
            margin-bottom: 4px;
        }

        .sample-unlock-name {
            font-size: 1rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.95);
            margin-bottom: 2px;
        }

        .sample-unlock-desc {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
        }

        [data-theme="light"] .sample-unlock {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            box-shadow: 0 8px 32px rgba(21, 128, 61, 0.15);
        }
        [data-theme="light"] .sample-unlock-tier { color: #15803d; }
        [data-theme="light"] .sample-unlock-name { color: rgba(0, 0, 0, 0.9); }
        [data-theme="light"] .sample-unlock-desc { color: rgba(0, 0, 0, 0.6); }

        /* ============================================ */
        /* RESPONSIVE                                   */
        /* ============================================ */

        /* Global overflow protection */
        .docs-content {
            width: 100%;
            min-width: 0;
            overflow-x: hidden;
            overflow-wrap: anywhere;
            box-sizing: border-box;
        }

        .docs-content *,
        .docs-content *::before,
        .docs-content *::after {
            box-sizing: border-box;
            min-width: 0;
        }

        .docs-section {
            width: 100%;
            min-width: 0;
        }

        .comparison-table {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        @media (max-width: 768px) {
            .docs-tab { font-size: 11px; padding: 10px 12px; }
            .docs-content h2 { font-size: 1.5rem; padding-left: 14px; }
            .docs-content h3 { font-size: 1.2rem; }

            /* Force all grids to single column */
            .param-grid {
                grid-template-columns: 1fr !important;
                width: 100%;
            }

            .metrics-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                width: 100%;
            }

            .param, .metric-card, .rarity-swatch, .sample-unlock {
                width: 100%;
                min-width: 0;
            }

            /* Alert / tip / example boxes */
            .warning-box, .info-box, .success-box, .tip-box {
                padding: 14px;
                margin-left: 0;
                margin-right: 0;
                word-break: break-word;
                overflow-wrap: anywhere;
            }

            .example-box {
                padding: 14px;
                overflow-wrap: anywhere;
            }

            .example-box .content {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            /* Rarity swatches */
            .rarity-swatch {
                padding: 10px 14px;
                gap: 10px;
            }

            .rarity-dot { width: 16px; height: 16px; }
            .rarity-label { font-size: 0.9rem; }
            .rarity-hex { font-size: 0.7rem; }

            /* Sample unlock */
            .sample-unlock {
                max-width: 100%;
                padding: 12px 14px;
                gap: 10px;
                margin-left: 0;
                margin-right: 0;
            }

            .sample-unlock-icon { font-size: 1.5rem; }
            .sample-unlock-name { font-size: 0.9rem; }
            .sample-unlock-desc { font-size: 0.75rem; }

            /* Architecture badges */
            .arch-badge {
                padding: 4px 8px;
                font-size: 0.7rem;
                margin: 2px 3px;
            }

            .param strong {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 6px;
            }

            /* Metrics & code */
            .metric-value { font-size: 1.6rem; }
            .metric-label { font-size: 0.75rem; letter-spacing: 0.5px; }

            .docs-content code {
                font-size: 0.8em;
                word-break: break-all;
            }

            /* Event system cards */
            .event-stats-dashboard { grid-template-columns: repeat(2, 1fr) !important; }
            .event-grid { grid-template-columns: 1fr !important; }
            .event-controls { flex-direction: column; align-items: stretch; }
            .event-search { width: 100%; }
            .category-header { flex-direction: column; align-items: flex-start; gap: 12px; }
            .category-progress { width: 100%; }
            .category-bar { flex: 1; }
        }

        /* Ultra-small screens */
        @media (max-width: 400px) {
            .docs-tab { font-size: 10px; padding: 8px 8px; letter-spacing: 0; }
            .docs-nav { gap: 2px; padding: 6px 0; }
            .metrics-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
            .metric-value { font-size: 1.4rem; }
            .metric-card { padding: 12px; }
            .param { padding: 14px; }
            .rarity-hex { display: none; }
            .docs-content h2 { font-size: 1.3rem; }
        }