:root {
            --bg:     #060d14;
            --fg:     #e0ecf5;
            --accent: #00c896;
            --accent2: #00e0a8;
            --muted:  rgba(224,236,245,0.5);
            --glow:   rgba(0,200,150,0.25);
            --card:   rgba(255,255,255,0.03);
            --card2:  rgba(255,255,255,0.055);
            --border: rgba(0,200,150,0.14);
        }

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

        html, body {
            background: var(--bg);
            color: var(--fg);
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            line-height: 1.7;
        }

        /* ── Grain + radial bg ── */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                radial-gradient(ellipse 70% 40% at 50% -10%, rgba(0,200,150,0.08) 0%, transparent 70%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 0;
        }

        /* ── Layout ── */
        .page {
            max-width: 820px;
            margin: 0 auto;
            padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 5vw, 2rem);
            position: relative;
            z-index: 1;
        }

        /* ── Nav bar ── */
        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 3rem;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .back-link {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            color: var(--accent);
            text-decoration: none;
            font-size: 0.85rem;
            letter-spacing: 0.06em;
            font-weight: 500;
            transition: opacity 0.2s;
        }
        .back-link:hover { opacity: 0.7; }

        .pdf-btn {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            background: rgba(0,200,150,0.07);
            border: 1px solid rgba(0,200,150,0.22);
            border-radius: 7px;
            padding: 0.45rem 0.9rem;
            color: var(--accent);
            font-family: 'DM Sans', sans-serif;
            font-size: 0.78rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.2s, box-shadow 0.2s;
        }
        .pdf-btn:hover { background: rgba(0,200,150,0.14); box-shadow: 0 0 12px rgba(0,200,150,0.12); }

        /* ── Header ── */
        .doc-header {
            margin-bottom: 3.5rem;
            border-bottom: 1px solid var(--border);
            padding-bottom: 2rem;
            text-align: center;
        }

        .doc-tag {
            font-size: 0.68rem;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 0.75rem;
        }

        .doc-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2.8rem, 8vw, 5rem);
            letter-spacing: 0.04em;
            line-height: 1;
            margin-bottom: 0.75rem;
        }

        .doc-title em { color: var(--accent); font-style: normal; }

        .doc-sub {
            color: var(--muted);
            font-size: 0.95rem;
            font-weight: 300;
            max-width: 520px;
            margin: 0 auto;
        }

        /* ── Steps ── */
        .step-wrapper {
            margin-bottom: 2.5rem;
            position: relative;
        }

        .step-connector {
            position: absolute;
            left: 28px;
            top: 64px;
            bottom: -2.5rem;
            width: 1px;
            background: linear-gradient(to bottom, rgba(0,200,150,0.25), transparent);
        }

        .step-header {
            display: flex;
            align-items: flex-start;
            gap: 1.2rem;
            margin-bottom: 1rem;
        }

        .step-badge {
            flex-shrink: 0;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background: linear-gradient(135deg, rgba(0,200,150,0.15), rgba(0,200,150,0.05));
            border: 1.5px solid rgba(0,200,150,0.35);
            box-shadow: 0 0 18px rgba(0,200,150,0.1);
        }

        .step-badge .step-num {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.55rem;
            letter-spacing: 0.04em;
            color: var(--accent);
            line-height: 1;
        }

        .step-meta { flex: 1; padding-top: 0.5rem; }

        .step-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.6rem;
            letter-spacing: 0.06em;
            line-height: 1.1;
            margin-bottom: 0.15rem;
        }

        .step-subtitle {
            font-size: 0.8rem;
            color: var(--muted);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            font-weight: 500;
        }

        /* ── Cards ── */
        .card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 1.5rem 1.75rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            transition: border-color 0.3s, box-shadow 0.3s;
            margin-left: 0;
        }

        .card:hover {
            border-color: rgba(0,200,150,0.22);
            box-shadow: 0 4px 24px rgba(0,200,150,0.06);
        }

        .card p { color: rgba(224,236,245,0.82); font-size: 0.93rem; }
        .card strong { color: var(--fg); font-weight: 600; }
        .card a { color: var(--accent); text-decoration: none; }
        .card a:hover { text-decoration: underline; }

        /* ── Sub-steps ── */
        .steps-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }

        .steps-list li {
            display: flex;
            gap: 0.85rem;
            font-size: 0.93rem;
            color: rgba(224,236,245,0.82);
            align-items: flex-start;
        }

        .steps-list li .bullet {
            width: 22px;
            height: 22px;
            min-width: 22px;
            background: rgba(0,200,150,0.1);
            border: 1px solid rgba(0,200,150,0.28);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            color: var(--accent);
            flex-shrink: 0;
            margin-top: 2px;
            font-weight: 700;
        }

        /* ── Path / code boxes ── */
        .path-box {
            background: rgba(0,0,0,0.4);
            border: 1px solid rgba(0,200,150,0.22);
            border-radius: 8px;
            padding: 0.6rem 1rem;
            font-family: monospace;
            font-size: 0.85rem;
            color: var(--accent);
            word-break: break-all;
            letter-spacing: 0.02em;
        }

        /* ── Info / warning boxes ── */
        .info-box {
            background: rgba(0,200,150,0.05);
            border-left: 3px solid var(--accent);
            border-radius: 0 8px 8px 0;
            padding: 0.75rem 1rem;
            font-size: 0.85rem;
            color: rgba(224,236,245,0.75);
            line-height: 1.6;
        }

        .warn-box {
            background: rgba(255,200,0,0.05);
            border-left: 3px solid rgba(255,180,0,0.55);
            border-radius: 0 8px 8px 0;
            padding: 0.75rem 1rem;
            font-size: 0.85rem;
            color: rgba(255,220,100,0.88);
            line-height: 1.6;
        }

        /* ── Key display ── */
        .key-example {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(0,0,0,0.3);
            border: 1px solid rgba(0,200,150,0.2);
            border-radius: 8px;
            padding: 0.6rem 1rem;
        }
        .key-example code {
            font-size: 0.85rem;
            color: var(--accent);
            font-family: monospace;
        }

        /* ══════════════════════════════════════
           MT5 DIALOG MOCKUPS
        ══════════════════════════════════════ */

        .mt5-window {
            background: #1e2328;
            border: 1px solid #3a4550;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        .mt5-titlebar {
            background: linear-gradient(180deg, #2d3640 0%, #252c35 100%);
            padding: 7px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #1a2028;
        }

        .mt5-titlebar-title {
            font-size: 12px;
            color: #c8d4de;
            font-weight: 400;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .mt5-titlebar-icon {
            width: 14px;
            height: 14px;
            background: linear-gradient(135deg, #00c896, #008f6a);
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            color: white;
            font-weight: bold;
        }

        .mt5-titlebar-btns {
            display: flex;
            gap: 5px;
        }

        .mt5-titlebar-btns span {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .mt5-titlebar-btns .btn-close { background: #e05252; }
        .mt5-titlebar-btns .btn-min { background: #e0a952; }
        .mt5-titlebar-btns .btn-max { background: #52b052; }

        .mt5-tabs {
            background: #252c35;
            display: flex;
            border-bottom: 1px solid #1a2028;
            overflow-x: auto;
        }

        .mt5-tab {
            padding: 7px 14px;
            font-size: 11.5px;
            color: #7a8fa0;
            cursor: pointer;
            white-space: nowrap;
            border-right: 1px solid #1a2028;
        }

        .mt5-tab.active {
            color: var(--accent);
            background: #1e2530;
            border-bottom: 2px solid var(--accent);
            margin-bottom: -1px;
        }

        .mt5-body {
            padding: 14px 16px;
            background: #1e2530;
        }

        .mt5-section-label {
            font-size: 11px;
            color: #5a7080;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .mt5-checkbox-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .mt5-checkbox {
            width: 14px;
            height: 14px;
            border: 1.5px solid rgba(0,200,150,0.5);
            border-radius: 2px;
            background: rgba(0,200,150,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .mt5-checkbox .check {
            color: var(--accent);
            font-size: 10px;
            font-weight: bold;
            line-height: 1;
        }

        .mt5-checkbox-label {
            font-size: 12px;
            color: #c8d4de;
        }

        .mt5-url-list {
            background: #141a22;
            border: 1px solid #2e3c48;
            border-radius: 3px;
            margin: 8px 0 8px 22px;
            padding: 6px;
        }

        .mt5-url-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 3px 6px;
            border-radius: 2px;
            background: rgba(0,200,150,0.08);
            border: 1px solid rgba(0,200,150,0.18);
        }

        .mt5-url-dot {
            width: 6px;
            height: 6px;
            background: var(--accent);
            border-radius: 50%;
            flex-shrink: 0;
        }

        .mt5-url-text {
            font-family: monospace;
            font-size: 11.5px;
            color: var(--accent);
        }

        .mt5-url-add-hint {
            font-size: 10px;
            color: #5a7080;
            margin-left: 22px;
            margin-top: 2px;
            font-style: italic;
        }

        .mt5-footer-btns {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid #2a3340;
        }

        .mt5-btn {
            padding: 5px 18px;
            border-radius: 3px;
            font-size: 12px;
            cursor: pointer;
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        .mt5-btn-primary {
            background: var(--accent);
            border: 1px solid var(--accent2);
            color: #050d14;
            font-weight: 600;
        }

        .mt5-btn-secondary {
            background: #2a3340;
            border: 1px solid #3a4550;
            color: #8090a0;
        }

        /* Navigator mockup */
        .mt5-navigator {
            background: #1a2028;
            border: 1px solid #2e3c48;
            border-radius: 4px;
            overflow: hidden;
            font-family: 'Segoe UI', Arial, sans-serif;
            font-size: 12px;
            min-width: 220px;
        }

        .mt5-nav-header {
            background: linear-gradient(180deg, #2d3640 0%, #252c35 100%);
            padding: 5px 10px;
            font-size: 11px;
            color: #8090a0;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            border-bottom: 1px solid #1a2028;
        }

        .mt5-nav-tree {
            padding: 6px 0;
        }

        .mt5-nav-folder {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 3px 10px;
            color: #8090a0;
            cursor: pointer;
        }

        .mt5-nav-folder .arrow { font-size: 9px; color: #5a7080; }

        .mt5-nav-folder.open { color: #aabbc8; }

        .mt5-nav-subfolder {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 2px 10px 2px 26px;
            color: #6a7d8c;
            font-size: 11px;
        }

        .mt5-nav-subfolder .arrow { font-size: 8px; color: #4a6070; }

        .mt5-nav-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 10px 4px 42px;
            cursor: pointer;
            border-radius: 2px;
            transition: background 0.15s;
        }

        .mt5-nav-item:hover,
        .mt5-nav-item.highlighted {
            background: rgba(0,200,150,0.1);
        }

        .mt5-nav-item.highlighted {
            outline: 1px solid rgba(0,200,150,0.3);
        }

        .mt5-nav-icon {
            width: 14px;
            height: 14px;
            background: linear-gradient(135deg, #00c896, #008f6a);
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            color: white;
            flex-shrink: 0;
        }

        .mt5-nav-label {
            color: #c8d4de;
            font-size: 12px;
            font-weight: 400;
        }

        .mt5-nav-label strong {
            color: var(--accent);
            font-weight: 600;
        }

        .dbl-click-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(0,200,150,0.12);
            border: 1px solid rgba(0,200,150,0.3);
            border-radius: 20px;
            padding: 3px 10px 3px 8px;
            font-size: 11px;
            color: var(--accent);
            font-weight: 600;
            letter-spacing: 0.04em;
            margin-top: 4px;
            white-space: nowrap;
            animation: pulse-badge 2s ease-in-out infinite;
        }

        @keyframes pulse-badge {
            0%, 100% { box-shadow: 0 0 0 0 rgba(0,200,150,0.3); }
            50% { box-shadow: 0 0 0 5px rgba(0,200,150,0); }
        }

        /* Screenshot frame container */
        .screenshot-frame {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 12px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,200,150,0.1);
        }

        .screenshot-caption {
            font-size: 0.75rem;
            color: var(--muted);
            text-align: center;
            margin-top: 0.6rem;
            font-style: italic;
        }

        /* Two-column layout for navigator */
        .two-col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            align-items: start;
        }

        @media (max-width: 620px) {
            .two-col { grid-template-columns: 1fr; }
        }

        /* ── Divider ── */
        hr {
            border: none;
            border-top: 1px solid var(--border);
            margin: 3rem 0;
        }

        /* ── Broker CTA ── */
        .broker-cta {
            background: linear-gradient(135deg, rgba(0,200,150,0.08), rgba(0,200,150,0.03));
            border: 1px solid rgba(0,200,150,0.25);
            border-radius: 14px;
            padding: 1.8rem 2rem;
            text-align: center;
            margin: 2.5rem 0;
        }

        .broker-cta-label {
            font-size: 0.7rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .broker-cta h3 {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.8rem;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
        }

        .broker-cta p {
            color: var(--muted);
            font-size: 0.88rem;
            max-width: 400px;
            margin: 0 auto 1.2rem;
        }

        .broker-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--accent);
            color: #040d14;
            font-family: 'DM Sans', sans-serif;
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            text-decoration: none;
            padding: 0.8rem 2rem;
            border-radius: 8px;
            transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
            box-shadow: 0 4px 20px rgba(0,200,150,0.25);
        }

        .broker-btn:hover {
            background: var(--accent2);
            box-shadow: 0 6px 28px rgba(0,200,150,0.4);
            transform: translateY(-1px);
        }

        /* ── Troubleshooting ── */
        .trouble-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.7rem;
            letter-spacing: 0.06em;
            color: rgba(255,180,60,0.9);
            margin-bottom: 0.3rem;
        }

        .trouble-subtitle {
            font-size: 0.8rem;
            color: rgba(255,180,60,0.5);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 1rem;
        }

        /* ── Footer ── */
        .doc-footer {
            margin-top: 4rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .doc-footer p { font-size: 0.78rem; color: var(--muted); }
        .doc-footer a { color: var(--accent); text-decoration: none; }

        /* ── Progress ribbon ── */
        .progress-ribbon {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin-bottom: 3.5rem;
            flex-wrap: wrap;
        }

        .ribbon-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            flex: 1;
            min-width: 70px;
            max-width: 120px;
        }

        .ribbon-step .rnum {
            width: 30px;
            height: 30px;
            background: rgba(0,200,150,0.1);
            border: 1px solid rgba(0,200,150,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            color: rgba(0,200,150,0.55);
            font-weight: 600;
        }

        .ribbon-step .rlabel {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: rgba(224,236,245,0.3);
            text-align: center;
            line-height: 1.3;
        }

        .ribbon-line {
            height: 1px;
            background: rgba(0,200,150,0.12);
            flex: 1;
            min-width: 10px;
            max-width: 40px;
            margin-bottom: 1.2rem;
        }

        /* ══════════════════════════════════════
           PRINT / PDF STYLES
        ══════════════════════════════════════ */
        /* ── Help accordion ── */
        .help-acc {
            border-top: 1px solid rgba(0,200,150,0.1);
            margin-top: 0.75rem;
            padding-top: 0.6rem;
        }
        .help-acc summary {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--accent);
            cursor: pointer;
            letter-spacing: 0.04em;
            list-style: none;
            user-select: none;
            transition: opacity 0.2s;
            padding: 0.15rem 0;
        }
        .help-acc summary::-webkit-details-marker { display: none; }
        .help-acc summary::marker { display: none; }
        .help-acc summary:hover { opacity: 0.7; }
        .help-acc summary::before {
            content: '▶';
            font-size: 0.58rem;
            transition: transform 0.22s;
            display: inline-block;
            flex-shrink: 0;
        }
        .help-acc[open] summary::before { transform: rotate(90deg); }
        .help-acc summary span {
            color: rgba(224,236,245,0.45);
            font-weight: 400;
            font-size: 0.74rem;
        }
        .help-body {
            padding: 0.85rem 0 0.2rem;
            border-top: 1px dashed rgba(0,200,150,0.11);
            margin-top: 0.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }
        .help-body p {
            font-size: 0.85rem !important;
            color: rgba(224,236,245,0.72) !important;
            line-height: 1.65;
        }
        .help-body strong { color: var(--fg) !important; }
        .help-body code {
            font-family: monospace;
            font-size: 0.82rem;
            color: var(--accent);
            background: rgba(0,200,150,0.08);
            padding: 1px 5px;
            border-radius: 3px;
        }

        @media print {
            :root {
                --bg: #fff;
                --fg: #0a0a0a;
                --accent: #007a5a;
                --muted: #555;
                --card: #f7f7f7;
                --border: #ddd;
            }

            body { background: #fff; color: #0a0a0a; }
            body::before { display: none; }

            .nav .pdf-btn,
            .nav .back-link { display: none; }

            .page { padding: 1.5cm 2cm; max-width: 100%; }
            .doc-header { text-align: left; }
            .doc-title { font-size: 2.8rem; }

            .card {
                background: #f9f9f9;
                border: 1px solid #ddd;
                break-inside: avoid;
                box-shadow: none;
            }

            .step-wrapper { break-inside: avoid; }
            .step-connector { display: none; }

            .path-box { background: #eee; color: #007a5a; border-color: #bbb; }
            .info-box { border-left-color: #007a5a; background: #f0faf6; color: #333; }
            .warn-box { border-left-color: #c8860a; background: #fffbea; color: #7a5200; }
            .key-example { background: #eee; border-color: #bbb; }
            .key-example code { color: #007a5a; }
            .steps-list li { color: #222; }
            .steps-list li .bullet { background: #e0f5ef; border-color: #aaa; color: #007a5a; }
            .step-badge { background: #e0f5ef; border-color: #aaa; box-shadow: none; }
            .step-badge .step-num { color: #007a5a; }
            .broker-cta { background: #f5f5f5; border-color: #ccc; }
            .broker-btn { background: #007a5a; color: white; box-shadow: none; }
            .broker-btn:hover { transform: none; }
            .progress-ribbon { display: none; }
            .mt5-window { border: 1px solid #ccc; box-shadow: none; }
            .mt5-titlebar { background: #eee; border-color: #ccc; }
            .mt5-titlebar-title { color: #333; }
            .mt5-body { background: #f9f9f9; }
            .mt5-checkbox-label { color: #333; }
            .mt5-url-text { color: #007a5a; }
            .mt5-nav-label { color: #333; }
            .mt5-nav-label strong { color: #007a5a; }
            .trouble-title { color: #a06000; }

            @page {
                margin: 1.5cm 2cm;
                size: A4;
            }
        }
    /* ── Sticky site header (nav + ticker) ── */
    .site-header { position: sticky; top: 0; z-index: 100; }
    .dt-nav {
        background: rgba(6,13,20,.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(0,200,150,.12);
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 clamp(1rem,4vw,2rem); height: 60px;
    }
    .dt-nav-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #e0ecf5; }
    .dt-nav-brand img { width: 26px; height: 26px; border-radius: 50%; }
    .dt-nav-brand-name { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: .08em; line-height: 1; }
    .dt-nav-brand-name em { font-style: normal; color: #00c896; }
    .dt-nav-pill {
        display: inline-flex; align-items: center; gap: .4rem;
        background: #00c896; color: #000;
        padding: .38rem .95rem; border-radius: 4px;
        font-weight: 600; font-size: .78rem; text-decoration: none;
        transition: opacity .18s, transform .15s;
    }
    .dt-nav-pill:hover { opacity: .88; transform: translateY(-1px); }
    @keyframes dt-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @keyframes dt-dot { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
    .dt-ticker {
        background: rgba(0,200,150,.06); border-bottom: 1px solid rgba(0,200,150,.12);
        overflow: hidden; white-space: nowrap; padding: .3rem 0; user-select: none;
    }
    .dt-ticker-track { display: inline-flex; gap: 2.8rem; animation: dt-ticker 22s linear infinite; }
    .dt-ticker-item { font-size: .68rem; letter-spacing: .12em; font-weight: 600; color: #00c896; text-transform: uppercase; display: flex; align-items: center; gap: .4rem; }
    .dt-ticker-dot { width: 5px; height: 5px; background: #00c896; border-radius: 50%; animation: dt-dot 1.6s ease-in-out infinite; }
    @media print { .site-header { display: none; } }

/* ----------------------------------------- */

'
    + '#dtfab{position:fixed;bottom:24px;right:24px;width:60px;height:60px;'
    + '  background:linear-gradient(135deg,#00c896,#008f6a);border-radius:50%;border:none;'
    + '  cursor:pointer;display:flex;align-items:center;justify-content:center;'
    + '  box-shadow:0 4px 20px rgba(0,200,150,.45);z-index:9999;'
    + '  transition:transform .2s,box-shadow .2s;animation:dtfabp 3s ease-in-out infinite;}'
    + '#dtfab:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(0,200,150,.6);}'
    + '@keyframes dtfabp{'
    + '  0%,100%{box-shadow:0 4px 20px rgba(0,200,150,.45),0 0 0 0 rgba(0,200,150,.28);}'
    + '  50%{box-shadow:0 4px 20px rgba(0,200,150,.45),0 0 0 14px rgba(0,200,150,0);}}'
    + '.dtbadge{position:absolute;top:-3px;right:-3px;width:20px;height:20px;'
    + '  background:#ff4757;border-radius:50%;font-size:11px;color:#fff;font-weight:700;'
    + '  display:flex;align-items:center;justify-content:center;border:2px solid #060d14;}'
    + '#dtpanel{position:fixed;bottom:96px;right:24px;width:370px;'
    + '  max-width:calc(100vw - 32px);height:530px;max-height:calc(100svh - 115px);'
    + '  background:#09151e;border:1px solid rgba(0,200,150,.2);border-radius:18px;'
    + '  box-shadow:0 24px 64px rgba(0,0,0,.75),0 0 60px rgba(0,200,150,.06),0 0 80px rgba(168,85,247,.04);'
    + '  z-index:9998;display:flex;flex-direction:column;overflow:hidden;'
    + '  opacity:0;pointer-events:none;'
    + '  transform:translateY(18px) scale(.96);transform-origin:bottom right;'
    + '  transition:opacity .22s,transform .22s;}'
    + '#dtpanel.dtopen{opacity:1;pointer-events:all;transform:none;}'
    + '.dthdr{display:flex;align-items:center;gap:10px;padding:12px 14px;'
    + '  border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;'
    + '  background:linear-gradient(90deg,rgba(0,200,150,.07),rgba(168,85,247,.05));}'
    + '.dthdr-chars{display:flex;align-items:flex-end;gap:6px;flex-shrink:0;}'
    + '.dthdr-char-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;}'
    + '.dthdr-char-name{font-size:.55rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1;}'
    + '.dthdr-info{flex:1;min-width:0;}'
    + '.dthdr-title{font-size:.9rem;font-weight:700;line-height:1.2;'
    + '  background:linear-gradient(90deg,#00c896 30%,#a855f7);-webkit-background-clip:text;'
    + '  -webkit-text-fill-color:transparent;background-clip:text;}'
    + '.dthdr-status{font-size:.68rem;color:rgba(224,236,245,.45);display:flex;align-items:center;gap:4px;margin-top:2px;}'
    + '.dthdr-status::before{content:"";width:6px;height:6px;background:#00c896;'
    + '  border-radius:50%;animation:dtdotblink 2s infinite;flex-shrink:0;}'
    + '@keyframes dtdotblink{0%,100%{opacity:1;}50%{opacity:.25;}}'
    + '.dthdr-close{background:none;border:none;cursor:pointer;color:rgba(224,236,245,.35);'
    + '  padding:5px;border-radius:7px;display:flex;transition:color .18s,background .18s;flex-shrink:0;}'
    + '.dthdr-close:hover{color:#e0ecf5;background:rgba(255,255,255,.06);}'
    + '.dtmsgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;'
    + '  gap:10px;scroll-behavior:smooth;}'
    + '.dtmsgs::-webkit-scrollbar{width:3px;}'
    + '.dtmsgs::-webkit-scrollbar-thumb{background:rgba(0,200,150,.2);border-radius:4px;}'
    + '.dtrow{display:flex;gap:8px;align-items:flex-start;max-width:92%;}'
    + '.dtrow.dtuser{align-self:flex-end;flex-direction:row-reverse;}'
    + '.dtbub{padding:9px 12px;border-radius:14px;font-size:.83rem;line-height:1.52;}'
    + '.dtrow.dtcircuit .dtbub{background:rgba(0,200,150,.04);border:1px solid rgba(0,200,150,.12);'
    + '  color:#bfcfdd;border-radius:4px 14px 14px 14px;}'
    + '.dtrow.dtviolet .dtbub{background:rgba(168,85,247,.05);border:1px solid rgba(168,85,247,.18);'
    + '  color:#d4bbf0;border-radius:4px 14px 14px 14px;}'
    + '.dtrow.dtuser .dtbub{background:rgba(0,200,150,.11);border:1px solid rgba(0,200,150,.22);'
    + '  color:#e0ecf5;border-radius:14px 4px 14px 14px;}'
    + '.dtbub a{color:#00c896;}'
    + '.dtbub code{background:rgba(0,200,150,.1);border:1px solid rgba(0,200,150,.2);'
    + '  border-radius:4px;padding:1px 5px;font-family:monospace;font-size:.8em;}'
    + '.dtava{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;'
    + '  align-items:center;justify-content:center;margin-top:2px;overflow:hidden;}'
    + '.dtrow.dtcircuit .dtava{background:rgba(0,200,150,.08);border:1px solid rgba(0,200,150,.22);}'
    + '.dtrow.dtviolet .dtava{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.28);}'
    + '.dtrow.dtuser .dtava{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:13px;}'
    + '.dtqr{display:flex;flex-wrap:wrap;gap:5px;padding:6px 14px 8px;flex-shrink:0;}'
    + '.dtqrbtn{background:rgba(0,200,150,.07);border:1px solid rgba(0,200,150,.2);'
    + '  border-radius:20px;padding:5px 11px;font-size:.74rem;color:#00c896;cursor:pointer;'
    + '  transition:background .18s;font-family:"DM Sans",sans-serif;white-space:nowrap;}'
    + '.dtqrbtn:hover{background:rgba(0,200,150,.16);}'
    + '.dtinput-row{display:flex;gap:7px;padding:10px 12px;'
    + '  border-top:1px solid rgba(0,200,150,.09);flex-shrink:0;}'
    + '.dtinput{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,150,.15);'
    + '  border-radius:9px;padding:8px 11px;color:#e0ecf5;font-family:"DM Sans",sans-serif;'
    + '  font-size:.84rem;outline:none;transition:border-color .18s;}'
    + '.dtinput:focus{border-color:rgba(0,200,150,.35);}'
    + '.dtinput::placeholder{color:rgba(224,236,245,.28);}'
    + '.dtsend{width:36px;height:36px;background:rgba(0,200,150,.1);'
    + '  border:1px solid rgba(0,200,150,.24);border-radius:9px;cursor:pointer;'
    + '  display:flex;align-items:center;justify-content:center;color:#00c896;'
    + '  transition:background .18s;flex-shrink:0;}'
    + '.dtsend:hover{background:rgba(0,200,150,.22);}'
    + '.dtdots{display:flex;gap:4px;align-items:center;padding:3px 0;}'
    + '.dtdots span{width:6px;height:6px;background:rgba(0,200,150,.6);border-radius:50%;'
    + '  animation:dtdot 1.2s infinite;}'
    + '.dtdots span:nth-child(2){animation-delay:.2s;}'
    + '.dtdots span:nth-child(3){animation-delay:.4s;}'
    + '@keyframes dtdot{0%,80%,100%{transform:scale(.65);opacity:.35;}40%{transform:scale(1);opacity:1;}}'
    + '