/* Extracted from js/branding.js injectStyles()
   Step 1: parallel stylesheet only, branding.js remains unchanged. */

:root {
                --branding-blue: #00d2ff;
                --branding-purple: #9d50bb;
                --branding-white: #ffffff;
                --branding-orange: #ff9d00;
                --header-scale: 1;
            }

            /* Report Terminal Modal */
            .report-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(5, 11, 24, 0.85);
                backdrop-filter: blur(15px);
                z-index: 300000;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.4s ease;
            }

            .report-overlay.visible {
                opacity: 1;
                pointer-events: auto;
            }

            .report-container {
                background: rgba(15, 23, 42, 0.95);
                padding: 35px;
                border-radius: 24px;
                border: 1px solid rgba(0, 210, 255, 0.4);
                box-shadow: 0 0 50px rgba(0, 210, 255, 0.2);
                width: 90%;
                max-width: 500px;
                transform: scale(0.9);
                transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                text-align: center;
            }

            .report-overlay.visible .report-container {
                transform: scale(1);
            }

            .report-title {
                font-family: 'Orbitron', sans-serif;
                font-size: 1.1rem;
                color: var(--branding-blue);
                letter-spacing: 2px;
                text-transform: uppercase;
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 12px;
            }

            .report-textarea {
                width: 100%;
                height: 150px;
                background: rgba(0, 0, 0, 0.4);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 12px;
                color: white;
                padding: 15px;
                font-family: 'Inter', sans-serif;
                font-size: 0.95rem;
                resize: none;
                margin-bottom: 20px;
                outline: none;
                box-sizing: border-box;
                text-align: left;
            }

            .report-textarea:focus {
                border-color: var(--branding-blue);
                box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
            }

            .report-meta {
                font-size: 0.7rem;
                color: rgba(255, 255, 255, 0.4);
                margin-bottom: 25px;
                background: rgba(255, 255, 255, 0.03);
                padding: 10px;
                border-radius: 8px;
                font-family: monospace;
                text-align: left;
                line-height: 1.4;
            }

            .report-actions {
                display: flex;
                gap: 15px;
                justify-content: center;
                flex-wrap: wrap;
            }

            .report-btn {
                padding: 12px 20px;
                border-radius: 10px;
                font-family: 'Orbitron';
                font-size: 0.7rem;
                font-weight: bold;
                cursor: pointer;
                transition: all 0.3s;
                text-transform: uppercase;
                border: none;
            }

            .report-btn.primary {
                background: var(--branding-blue);
                color: black;
            }

            .report-btn.secondary {
                background: rgba(255, 255, 255, 0.1);
                color: white;
            }

            .report-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            }

            .report-close:hover {
                background: rgba(255, 0, 0, 0.3);
                transform: rotate(90deg);
            }

            /* --- SYNC OVERLAY (TRANSMIT) --- */
            .sync-overlay {
                position: fixed;
                top: 0; left: 0; width: 100%; height: 100%;
                background: rgba(0, 210, 255, 0.05);
                backdrop-filter: blur(20px);
                z-index: 500000;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.4s ease;
            }

            .sync-overlay.visible {
                opacity: 1;
                pointer-events: auto;
            }

            .sync-modal {
                background: rgba(15, 23, 42, 0.98);
                border: 2px solid var(--branding-blue);
                padding: 40px;
                border-radius: 24px;
                max-width: 600px;
                width: 90%;
                color: white;
                box-shadow: 0 0 60px rgba(0, 210, 255, 0.3);
                text-align: center;
            }

            .sync-report-area {
                width: 100%;
                height: 200px;
                background: rgba(0,0,0,0.5);
                border: 1px solid rgba(255,255,255,0.1);
                border-radius: 12px;
                margin: 20px 0;
                padding: 15px;
                font-family: monospace;
                font-size: 0.8rem;
                color: var(--branding-blue);
                overflow-y: auto;
                text-align: left;
                white-space: pre-wrap;
            }

            /* --- SECURE AUTH OVERLAY --- */
            .auth-overlay {
                position: fixed;
                top: 0; left: 0; width: 100%; height: 100%;
                background: rgba(5, 11, 24, 0.9);
                backdrop-filter: blur(25px);
                z-index: 600000;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                pointer-events: none;
                transition: all 0.4s ease;
            }

            .auth-overlay.visible {
                opacity: 1;
                pointer-events: auto;
            }

            .auth-modal {
                background: rgba(15, 23, 42, 0.95);
                border: 1px solid var(--branding-blue);
                padding: 40px;
                border-radius: 24px;
                max-width: 400px;
                width: 85%;
                text-align: center;
                box-shadow: 0 0 50px rgba(0, 210, 255, 0.2);
            }

            .auth-input {
                width: 100%;
                background: rgba(0,0,0,0.4);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 12px;
                padding: 15px;
                color: white;
                font-family: 'Orbitron', sans-serif;
                font-size: 1.1rem;
                text-align: center;
                margin: 20px 0;
                outline: none;
                box-sizing: border-box;
                letter-spacing: 5px;
            }

            .auth-input:focus {
                border-color: var(--branding-blue);
                box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
            }

            /* --- VISIBILITY SYSTEM --- */
            .admin-info {
                display: none !important;
                margin-top: 20px;
                padding: 15px;
                background: rgba(0, 210, 255, 0.05);
                border-left: 3px solid var(--neon-blue);
                border-radius: 4px;
                text-align: left;
            }
            body.cyber-edit-active .admin-info {
                display: block !important;
            }

            /* --- EDIT MODE SYSTEM --- */
            body.cyber-edit-active {
                cursor: default;
            }
            
            /* Restricted focus outline for briefing editor only */
            body.cyber-edit-active .briefing-modal [contenteditable="true"] {
                outline: 1px solid var(--branding-blue);
                outline-offset: 4px;
                background: rgba(0, 210, 255, 0.05);
            }

            /* Gradient-Text: Box nur so breit wie Inhalt — sonst wirkt der Gradient wie ein breiter cyan Balken */
            .canvas-branding {
                position: fixed;
                top: 10px;
                right: 25px;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                text-align: right;
                pointer-events: auto;
                z-index: 99999;
                animation: branding-fade-in 1.2s ease-out forwards;
                width: max-content;
                max-width: min(92vw, 560px);
                box-sizing: border-box;
                transition: top 0.3s ease, right 0.3s ease;
                cursor: pointer;
            }

            .canvas-branding h1 {
                font-family: 'Orbitron', sans-serif;
                font-size: calc(11px + 11px * var(--header-scale));
                margin: 0 !important;
                letter-spacing: calc(1px + 2.5px * var(--header-scale));
                align-self: flex-end;
                width: max-content;
                max-width: 100%;
                display: block;
                background: linear-gradient(to right, var(--branding-blue), var(--branding-white), var(--branding-purple));
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
                filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.4));
                text-transform: uppercase;
                line-height: 1.1;
                font-weight: 700;
                transition: font-size 0.2s ease;
                margin-bottom: 2px !important;
            }

            .canvas-subtitle {
                font-family: 'Orbitron', sans-serif;
                font-size: calc(7.9px + 3.5px * var(--header-scale)); /* +20% again */
                letter-spacing: calc(1px + 3.5px * var(--header-scale));
                color: var(--branding-blue);
                margin: 0 !important;
                margin-top: 3px !important;
                opacity: 0.9;
                text-transform: uppercase;
                text-shadow: 0 0 7px var(--branding-blue);
                transition: font-size 0.2s ease;
                line-height: 1.1;
                font-weight: 400;
                align-self: flex-end;
                width: max-content;
                max-width: 100%;
                display: block;
            }

            @media (max-width: 1024px) {
                .canvas-branding { top: 10px; right: 25px; }
            }

            @media (max-width: 768px) {
                .canvas-branding { top: 10px; right: 15px; max-width: 80%; }
                .canvas-branding h1 { letter-spacing: 2px; margin-top: 2px; font-size: calc(10px + 3px * var(--header-scale)); }
                .canvas-subtitle { letter-spacing: 1px; font-size: calc(12px + 10px * var(--header-scale)); }
            }

            @media (max-width: 500px) {
                .canvas-branding { top: 10px; right: 10px; max-width: 90%; }
                .canvas-branding h1 { display: none !important; }
                .canvas-subtitle { font-size: calc(11px + 7px * var(--header-scale)); letter-spacing: 0.5px; }
            }

            /* Navigation logic now handled by cyber-layout.css */
            @keyframes branding-fade-in {
                from { opacity: 0; transform: translateY(-10px); }
                to { opacity: 1; transform: translateY(0); }
            }

            /* Ensure sidebar-header doesn't collapse */
            #sidebar-header:empty::before {
                content: "";
                display: block;
                height: 60px;
            }

            /* QR Overlay Styles */
            .qr-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(5, 11, 24, 0.85);
                backdrop-filter: blur(10px);
                z-index: 200000;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.4s ease;
            }

            .qr-overlay.visible {
                opacity: 1;
                pointer-events: auto;
            }

            .qr-container {
                background: rgba(15, 23, 42, 0.95);
                padding: 30px;
                border-radius: 24px;
                border: 1px solid rgba(0, 210, 255, 0.3);
                box-shadow: 0 0 40px rgba(0, 210, 255, 0.2);
                text-align: center;
                transform: scale(0.8);
                transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            .qr-overlay.visible .qr-container {
                transform: scale(1);
            }

            .qr-container img {
                width: 250px;
                height: 250px;
                border: 10px solid white;
                border-radius: 8px;
                margin-bottom: 20px;
            }

            .qr-title {
                font-family: 'Orbitron', sans-serif;
                font-size: 0.9rem;
                color: var(--branding-blue);
                letter-spacing: 2px;
                text-transform: uppercase;
                margin-bottom: 5px;
            }

            .qr-url {
                font-family: 'monospace';
                font-size: 0.85rem;
                color: var(--branding-blue);
                margin: 10px 0 15px 0;
                word-break: break-all;
                padding: 0 20px;
                text-decoration: none;
                transition: opacity 0.3s;
                display: block;
            }

            .qr-url:hover {
                opacity: 0.7;
                text-decoration: underline;
            }

            .qr-close {
                position: absolute;
                top: 15px;
                right: 15px;
                width: 30px;
                height: 30px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: white;
                font-size: 1.2rem;
                transition: all 0.3s;
            }

            .qr-close:hover {
                background: rgba(255, 0, 0, 0.3);
                transform: rotate(90deg);
            }

            .qr-hint {
                font-size: 0.75rem;
                color: rgba(255, 255, 255, 0.5);
                margin-top: 10px;
            }

            /* --- BRIEFING MODAL --- */
            .briefing-overlay {
                position: fixed;
                top: 0; left: 0; width: 100%; height: 100%;
                background: rgba(5, 11, 24, 0.9);
                backdrop-filter: blur(20px);
                z-index: 400000;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.4s ease;
            }

            .briefing-overlay.visible {
                opacity: 1;
                pointer-events: auto;
            }

            .briefing-modal {
                background: rgba(15, 23, 42, 0.95);
                backdrop-filter: blur(25px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 24px;
                padding: 40px;
                width: 90%;
                max-width: 800px;
                max-height: 80vh;
                overflow-y: auto;
                position: relative;
                color: white;
                box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 210, 255, 0.1);
                animation: slideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            }

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

            .briefing-overlay.visible .briefing-modal {
                transform: translateY(0);
            }

            .briefing-header {
                font-family: 'Orbitron';
                color: var(--branding-blue);
                font-size: 0.9rem;
                letter-spacing: 2px;
                text-transform: uppercase;
                margin-bottom: 25px;
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .briefing-text {
                font-family: 'Orbitron', sans-serif;
                line-height: 2;
                font-size: 0.78rem;
                letter-spacing: 0.5px;
                color: rgba(255,255,255,0.85);
            }

            .briefing-text b { color: var(--branding-blue); }

            /* Navigation logic (ULTRA v5.3.8 Low-Profile) */
            .cyber-nav {
                display: flex !important;
                flex-direction: row !important;
                gap: 8px !important;
                width: auto !important;
                margin: 15px 0 !important;
                padding: 0 !important;
                box-sizing: border-box !important;
            }

            .nav-btn {
                background: rgba(15, 23, 42, 0.85) !important;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(0, 210, 255, 0.3) !important;
                color: white !important;
                border-radius: 10px;
                cursor: pointer;
                display: flex !important;
                align-items: center;
                justify-content: center;
                width: 42px !important;
                height: 42px !important;
                min-height: 42px !important;
                box-sizing: border-box;
                transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                text-decoration: none !important;
            }
            .nav-btn svg {
                width: 20px !important;
                height: 20px !important;
                stroke: currentColor;
                stroke-width: 2.5;
                display: block !important;
            }
            .nav-btn:hover {
                transform: translateY(-2px) scale(1.05);
                background: rgba(0, 210, 255, 0.2) !important;
                border-color: var(--branding-blue) !important;
                box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
            }

            @keyframes pulse-red-dot {
                0% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 2px #ff4d4d); }
                50% { opacity: 0.5; transform: scale(0.8); filter: drop-shadow(0 0 8px #ff4d4d); }
                100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 2px #ff4d4d); }
            }