/* ==========================================================================
   GRUNDBASIS V5 Enterprise - Matrix OS: "The Citadel Protocol"
   Sci-Fi Redesign (Phase II): Metal, Glass & Aggressive Neon
   INKLUSIVE: The Archivist (Tactical Overlay Styles)
   ========================================================================== */

:root {
    /* Farbpalette - Sci-Fi / Cyberpunk Citadel */
    --bg-main: #050508;      /* Abyss Black */
    --bg-panel: rgba(15, 15, 20, 0.65); /* Frosted Glass Base */
    --bg-header: #0a0a0f;    /* Dark Metal */
    --text-main: #e0e0e0;    
    --text-light: #708090;   
    
    /* Metall-Gradienten für Ränder/Panels */
    --metal-dark: linear-gradient(145deg, #1f1f2e, #0a0a0f);
    --metal-light: linear-gradient(145deg, #3a3a4a, #1a1a24);
    --border-color: #2a2a35; /* Fallback */
    
    /* Aggressive Neon Akzentfarben */
    --primary: #00f3ff;      /* Hyper-Cyan */
    --primary-hover: #00c3cc;
    --primary-glow: rgba(0, 243, 255, 0.6);
    
    --success: #00ff66;      /* Toxic Green */
    --success-hover: #00cc52;
    --success-glow: rgba(0, 255, 102, 0.5);
    
    --danger: #ff0055;       /* Plasma Red */
    --danger-hover: #cc0044;
    --danger-glow: rgba(255, 0, 85, 0.6);
    
    --warning: #ff5e00;      /* Core-Breach Orange */
    --warning-hover: #cc4400;
    --warning-glow: rgba(255, 94, 0, 0.5);
    
    --secondary: #9d00ff;    /* UV Purple (Sub-Systems) */
    --secondary-hover: #7a00cc;
    --secondary-glow: rgba(157, 0, 255, 0.5);

    /* Omni-Node Port Colors */
    --port-exec: #ff0055;    
    --port-string: #00f3ff;  
    --port-array: #00ff66;   
    --port-object: #ff5e00;  
    --port-any: #9d00ff;     
    
    /* Geometrie */
    --spacing-sm: 8px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --cut-corner: 8px; /* Für den Octagonal Cut via clip-path */
}

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

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollbars für Webkit - Cyberpunk Style */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-main); border-left: 1px solid var(--border-color); }
::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }

/* ==========================================================================
   1. The Citadel Canvas (Zeichenfläche mit Scanlines)
   ========================================================================== */
.node-canvas-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #030305;
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px; 
    cursor: grab;
}

/* Animierte Scanline für das Hologramm-Feeling */
.node-canvas-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 243, 255, 0.02) 51%, transparent 51%);
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.node-canvas-container:active { cursor: grabbing; }

.canvas-transform-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.canvas-svg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* ==========================================================================
   2. Omni-Node (Holographische Glass-Panels)
   ========================================================================== */
.omni-node {
    position: absolute;
    width: 280px;
    background: var(--bg-panel);
    backdrop-filter: blur(15px); /* Starker Glas-Effekt */
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 15px 35px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(0,243,255,0.1);
    /* Octagonal Cut (Abgeschrägte Ecken) */
    clip-path: polygon(
        0 var(--cut-corner), 
        var(--cut-corner) 0, 
        100% 0, 
        100% calc(100% - var(--cut-corner)), 
        calc(100% - var(--cut-corner)) 100%, 
        0 100%
    );
    display: flex;
    flex-direction: column;
    z-index: 10;
    color: #eee;
    font-size: 0.85rem;
    transition: filter 0.2s;
    user-select: none;
}

/* Spekulare Glas-Reflexion (Diagonaler Lichtstreif) */
.omni-node::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 1;
}

.omni-node.selected {
    border-color: var(--primary);
    box-shadow: 0 0 20px var(--primary-glow), inset 0 0 10px var(--primary-glow);
    z-index: 100;
}

.omni-node.has-side-effects { border-top: 3px solid var(--danger); }

/* Node Header (Brushed Metal) */
.node-header {
    background: var(--metal-dark);
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    position: relative;
    z-index: 2;
}

.node-title {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--primary); 
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 5px var(--primary-glow);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Node Body */
.node-body { padding: 10px 0; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; }
.node-action-stack { display: flex; flex-direction: column; gap: 2px; }

/* Action Item */
.action-item {
    background: rgba(0,0,0,0.4);
    padding: 6px 15px;
    border-left: 2px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}
.action-item:hover { background: rgba(0, 243, 255, 0.1); border-left-color: var(--primary); }
.action-label { flex-grow: 1; font-family: 'Fira Code', monospace; font-size: 0.75rem; color: var(--text-main); }

.action-controls { display: flex; gap: 5px; opacity: 0; transition: opacity 0.2s; }
.action-item:hover .action-controls { opacity: 1; }
.action-btn { background: none; border: none; color: var(--text-light); cursor: pointer; font-size: 0.8rem; }
.action-btn:hover { color: var(--primary); text-shadow: 0 0 5px var(--primary-glow); }

.node-add-action {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-light);
    margin: 5px 15px; padding: 4px;
    cursor: pointer; text-align: center; transition: all 0.2s;
    font-family: monospace; font-size: 0.75rem; text-transform: uppercase;
}
.node-add-action:hover { border-color: var(--primary); color: var(--primary); box-shadow: inset 0 0 10px var(--primary-glow); }

/* Node Footer */
.node-footer {
    padding: 10px 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex; flex-direction: column; gap: 8px;
    background: var(--metal-dark);
    position: relative; z-index: 2;
}

/* ==========================================================================
   3. Smart Ports (Hardware-Anschlüsse)
   ========================================================================== */
.port-row { display: flex; justify-content: space-between; align-items: center; position: relative; }
.port-label { font-size: 0.7rem; color: var(--text-light); font-family: 'Fira Code', monospace; text-transform: uppercase; letter-spacing: 1px;}

.port {
    width: 14px; height: 14px;
    background: #222;
    border: 2px solid #555;
    position: absolute;
    cursor: crosshair;
    transition: all 0.2s;
    z-index: 20;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
}
.port:hover { transform: scale(1.5); border-color: #fff; }

.port-in { left: -22px; } 
.port-out { right: -22px; }

/* Glow & Shape Types */
.port.type-exec { border-color: var(--port-exec); border-radius: 0; clip-path: polygon(0 0, 0 100%, 100% 50%); }
.port.type-exec:hover { box-shadow: 0 0 10px var(--port-exec); background: var(--port-exec); }

.port.type-string { border-color: var(--port-string); border-radius: 50%; }
.port.type-string:hover { box-shadow: 0 0 10px var(--port-string); background: var(--port-string); }

.port.type-array { border-color: var(--port-array); border-radius: 0; }
.port.type-array:hover { box-shadow: 0 0 10px var(--port-array); background: var(--port-array); }

.port.type-object { border-color: var(--port-object); border-radius: 0; transform: rotate(45deg); }
.port.type-object:hover { box-shadow: 0 0 10px var(--port-object); background: var(--port-object); }

.port.type-any { border-color: var(--port-any); border-radius: 50%; }
.port.type-any:hover { box-shadow: 0 0 10px var(--port-any); background: var(--port-any); }

/* ==========================================================================
   4. SVG Kabel (Energie-Leitungen)
   ========================================================================== */
.connection-path {
    fill: none;
    stroke-width: 3px;
    stroke-linecap: square;
    transition: stroke-width 0.2s, filter 0.2s;
}

.connection-path:hover {
    stroke-width: 6px;
    cursor: pointer;
    filter: drop-shadow(0 0 6px currentColor); /* Neon-Glow bei Hover */
}

.connection-path.type-exec { stroke: var(--port-exec); }
.connection-path.type-string { stroke: var(--port-string); }
.connection-path.type-array { stroke: var(--port-array); }
.connection-path.type-object { stroke: var(--port-object); }
.connection-path.type-any { stroke: var(--port-any); }

.connection-path.dragging {
    stroke: var(--primary);
    stroke-dasharray: 8, 4;
    animation: dashLine 0.5s linear infinite;
    filter: drop-shadow(0 0 5px var(--primary-glow));
}

/* ==========================================================================
   5. Ghost Nodes & Tooltips
   ========================================================================== */
.ghost-node { opacity: 0.2; pointer-events: none; border: 1px dashed var(--primary); background: transparent; box-shadow: none; filter: none; }
.ghost-node::before { display: none; }

.live-data-tooltip {
    position: absolute;
    background: rgba(5, 5, 10, 0.95);
    color: var(--primary);
    padding: 10px 15px;
    border: 1px solid var(--primary);
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 1000;
    max-width: 350px;
    white-space: pre-wrap; word-wrap: break-word;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3), inset 0 0 10px rgba(0, 243, 255, 0.1);
    backdrop-filter: blur(5px);
    clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

/* ==========================================================================
   6. Execution Zones (Matroschka / Grouping)
   ========================================================================== */
.execution-zone {
    position: absolute;
    border: 2px dashed rgba(0, 243, 255, 0.3);
    background: rgba(0, 243, 255, 0.02);
    z-index: 5; pointer-events: none;
    clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.execution-zone-title {
    position: absolute; top: -30px; left: 0;
    color: var(--primary); font-weight: 800; font-family: monospace; font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 3px; text-shadow: 0 0 8px var(--primary-glow);
}

.execution-zone.type-loop { border-color: rgba(0, 255, 102, 0.3); background: rgba(0, 255, 102, 0.02); }
.execution-zone.type-loop .execution-zone-title { color: var(--success); text-shadow: 0 0 8px var(--success-glow); }

/* ==========================================================================
   7. Citadel Layout & Controls (Tactical Buttons)
   ========================================================================== */
.btn { 
    padding: 8px 12px; 
    border: 1px solid transparent; 
    cursor: pointer; 
    font-weight: 800; 
    transition: all 0.2s; 
    display: inline-block; 
    text-align: center;
    font-family: 'Inter', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.75rem;
    /* Tactical Cut */
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.btn:disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(100%); box-shadow: none !important; border-color: rgba(255,255,255,0.1) !important; background: transparent !important;}

/* Neon Button States */
.btn-primary { background: rgba(0, 243, 255, 0.05); color: var(--primary); border: 1px solid rgba(0, 243, 255, 0.3); }
.btn-primary:hover:not(:disabled) { background: rgba(0, 243, 255, 0.2); box-shadow: 0 0 15px var(--primary-glow); border-color: var(--primary); text-shadow: 0 0 8px var(--primary); }

.btn-success { background: rgba(0, 255, 102, 0.05); color: var(--success); border: 1px solid rgba(0, 255, 102, 0.3); }
.btn-success:hover:not(:disabled) { background: rgba(0, 255, 102, 0.2); box-shadow: 0 0 15px var(--success-glow); border-color: var(--success); text-shadow: 0 0 8px var(--success);}

.btn-danger { background: rgba(255, 0, 85, 0.05); color: var(--danger); border: 1px solid rgba(255, 0, 85, 0.3); }
.btn-danger:hover:not(:disabled) { background: rgba(255, 0, 85, 0.2); box-shadow: 0 0 15px var(--danger-glow); border-color: var(--danger); text-shadow: 0 0 8px var(--danger);}

.btn-warning { background: rgba(255, 94, 0, 0.05); color: var(--warning); border: 1px solid rgba(255, 94, 0, 0.3); }
.btn-warning:hover:not(:disabled) { background: rgba(255, 94, 0, 0.2); box-shadow: 0 0 15px var(--warning-glow); border-color: var(--warning); text-shadow: 0 0 8px var(--warning);}

.btn-secondary { background: rgba(157, 0, 255, 0.05); color: var(--secondary); border: 1px solid rgba(157, 0, 255, 0.3); }
.btn-secondary:hover:not(:disabled) { background: rgba(157, 0, 255, 0.2); box-shadow: 0 0 15px var(--secondary-glow); border-color: var(--secondary); text-shadow: 0 0 8px var(--secondary);}

.btn-large { padding: 15px 20px; font-size: 0.9rem; letter-spacing: 2px; }
.btn-sm { padding: 4px 8px; font-size: 0.65rem; }

/* Header */
.app-header { display: flex; justify-content: space-between; align-items: center; background: var(--metal-dark); border-bottom: 2px solid var(--border-color); color: #fff; padding: 10px 20px; height: 60px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); position: relative; z-index: 100;}
.app-header h1 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: 3px; color: #fff; text-transform: uppercase; }
.app-header h1 span { color: var(--primary); font-weight: 300; text-shadow: 0 0 10px var(--primary-glow); }
.header-controls { display: flex; gap: 10px; align-items: center; }

/* Main Grid */
.app-container { display: grid; grid-template-columns: 320px 1fr 400px; height: calc(100vh - 60px); gap: 1px; background: #000; }
.column { background: var(--metal-light); display: flex; flex-direction: column; overflow: hidden; }
.column-header { background: var(--metal-dark); padding: 15px; border-bottom: 1px solid #000; font-weight: 800; display: flex; justify-content: space-between; align-items: center; color: var(--text-main); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); position: relative; z-index: 2;}

/* --- Sidebar Tabs --- */
.sidebar-tabs { display: flex; background: rgba(0,0,0,0.3); font-size: 0.75rem; margin-top: 10px; }
.sb-tab { flex: 1; padding: 12px 5px; cursor: pointer; background: none; border: none; border-right: 1px solid #000; font-weight: 800; color: var(--text-light); text-align: center; outline: none; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s;}
.sb-tab:last-child { border-right: none; }
.sb-tab.active { background: rgba(0, 243, 255, 0.05); color: var(--primary); border-bottom: 2px solid var(--primary); text-shadow: 0 0 8px var(--primary-glow); box-shadow: inset 0 -10px 10px -10px var(--primary-glow); }

.sidebar-content { display: none; padding: 20px; overflow-y: auto; flex-grow: 1; background: var(--bg-main); }
.sidebar-content.active { display: block; }

/* Forms */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.7rem; color: var(--text-light); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1.5px; font-family: monospace;}
.form-group select, .form-group input[type="text"], .form-group input[type="password"], .form-group textarea { 
    width: 100%; padding: 12px; background: rgba(0,0,0,0.4); border: 1px solid var(--border-color); 
    border-radius: 2px; color: var(--primary); font-family: 'Fira Code', monospace; font-size: 0.85rem;
    transition: all 0.3s;
}
.form-group select:focus, .form-group input:focus, .form-group textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 15px var(--primary-glow), inset 0 0 5px rgba(0,243,255,0.1); background: rgba(0,0,0,0.8);
}
.form-group textarea { resize: vertical; }

/* Listen & Items */
.directive-list { list-style: none; padding: 0; margin: 0 0 20px 0; }
.directive-list li { margin-bottom: 10px; display: flex; align-items: flex-start; gap: 8px; font-size: 0.8rem; color: var(--text-main); background: rgba(255,255,255,0.02); padding: 8px; border: 1px solid var(--border-color); border-left: 2px solid var(--secondary);}
.directive-list input[type="checkbox"] { margin-top: 3px; accent-color: var(--primary); }

.context-item, .module-item, .history-item { 
    background: rgba(0,0,0,0.3); border: 1px solid var(--border-color); border-left: 3px solid var(--secondary);
    padding: 12px; margin-bottom: 10px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; position: relative; 
}
.context-item:hover, .module-item:hover, .history-item:hover { 
    border-left-color: var(--primary); background: rgba(0, 243, 255, 0.05); box-shadow: inset 5px 0 15px -5px var(--primary-glow);
}
.context-item strong, .module-item strong { display: block; margin-bottom: 4px; color: var(--primary); letter-spacing: 1px; text-transform: uppercase;}
.history-item strong { display: block; margin-bottom: 4px; color: var(--text-main); font-family: monospace; }
.history-meta, .module-meta { font-size: 0.7rem; color: var(--text-light); display: block; font-family: monospace; margin-top: 4px;}
.btn-edit-item { opacity: 0; position: absolute; top: 12px; right: 10px; background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--text-light); transition: all 0.2s;}
.context-item:hover .btn-edit-item, .module-item:hover .btn-edit-item { opacity: 1; color: var(--primary); text-shadow: 0 0 5px var(--primary-glow);}

/* --- Sitemap --- */
.sitemap-root { list-style: none; padding: 0; margin: 0; font-size: 0.8rem; line-height: 1.6; font-family: 'Fira Code', monospace; }
.sitemap-children { list-style: none; padding-left: 15px; margin: 0; display: none; border-left: 1px dashed rgba(255,255,255,0.1); margin-left: 5px; }
.sitemap-folder.open > .sitemap-children { display: block; }
.sitemap-folder, .sitemap-file { margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; padding: 4px 6px; transition: background 0.1s; }
.sitemap-folder:hover, .sitemap-file:hover { background: rgba(0, 243, 255, 0.1); color: var(--primary); }
.folder-label { font-weight: bold; color: var(--text-main); }
.sitemap-file { color: var(--text-light); }
#sitemap-container { background: rgba(0,0,0,0.5); border: 1px solid var(--border-color); padding: 15px; height: 350px; overflow: auto; margin-bottom: 10px; }

/* --- Mittlere Spalte: Workspaces --- */
.workspace-tabs { display: flex; background: var(--metal-dark); border-bottom: 2px solid #000; box-shadow: 0 4px 10px rgba(0,0,0,0.5); z-index: 2;}
.ws-tab { padding: 15px 20px; cursor: pointer; background: none; border: none; border-right: 1px solid #000; font-weight: 800; color: var(--text-light); outline: none; text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem; transition: all 0.2s;}
.ws-tab.active { background: rgba(0, 243, 255, 0.02); color: var(--primary); border-bottom: 2px solid var(--primary); text-shadow: 0 0 8px var(--primary-glow); box-shadow: inset 0 -15px 15px -15px var(--primary-glow);}

.ws-content { display: none; height: 100%; flex-direction: column; background: var(--bg-main); }
.ws-content.active { display: flex; }

/* --- Design Tokens Toolbar --- */
.design-toolbar { background: var(--metal-light); padding: 15px; border-bottom: 1px solid #000; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; box-shadow: inset 0 5px 10px rgba(0,0,0,0.2);}
.design-tool { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; }
.design-tool label { font-weight: bold; color: var(--text-light); text-transform: uppercase; font-size: 0.65rem; letter-spacing: 1px; font-family: monospace;}
.design-tool select { padding: 8px 12px; background: rgba(0,0,0,0.5); border: 1px solid var(--border-color); color: var(--primary); font-family: 'Fira Code', monospace; font-size: 0.8rem; outline: none;}
.color-picker-wrapper { display: flex; align-items: center; gap: 8px; }
.color-picker-wrapper input[type="color"] { width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-color); cursor: pointer; background: none; }
.wireframe-canvas { flex-grow: 1; background: #030305; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 50px; gap: 8px; padding: 30px; overflow-y: auto; }
.wireframe-placeholder { grid-column: span 12; background: rgba(0, 243, 255, 0.02); border: 1px dashed rgba(0, 243, 255, 0.3); display: flex; justify-content: center; align-items: center; color: rgba(0, 243, 255, 0.5); font-weight: 800; font-family: monospace; text-transform: uppercase; letter-spacing: 3px; text-shadow: 0 0 5px rgba(0,243,255,0.2);}

/* --- Rechte Spalte: Compiler & Ledger --- */
.right-panel-tabs { display: flex; background: rgba(0,0,0,0.3); font-size: 0.75rem; margin-top: 10px; }
.rp-tab { flex: 1; padding: 12px 5px; cursor: pointer; background: none; border: none; border-right: 1px solid #000; font-weight: 800; color: var(--text-light); text-align: center; outline: none; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s;}
.rp-tab:last-child { border-right: none; }
.rp-tab.active { background: rgba(0, 243, 255, 0.05); color: var(--primary); border-bottom: 2px solid var(--primary); text-shadow: 0 0 8px var(--primary-glow); box-shadow: inset 0 -10px 10px -10px var(--primary-glow); }

.rp-content { display: none; flex-direction: column; height: 100%; padding: 20px; overflow-y: auto; background: var(--bg-main); }
.rp-content.active { display: flex; }

.compiler-container { display: flex; flex-direction: column; height: 100%; }
.compiler-metrics { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-light); margin-bottom: 15px; padding: 10px 15px; background: rgba(0,0,0,0.4); font-family: 'Fira Code', monospace; border: 1px solid var(--border-color); letter-spacing: 1px;}
.compiler-metrics strong { color: var(--primary); text-shadow: 0 0 5px var(--primary-glow);}
.compiled-output { 
    flex-grow: 1; width: 100%; resize: none; border: 1px solid rgba(0,255,102,0.3); 
    padding: 20px; font-family: 'Fira Code', monospace; font-size: 0.85rem; line-height: 1.6; 
    background: rgba(0,20,5,0.8); color: var(--success); margin-bottom: 20px; outline: none;
    box-shadow: inset 0 0 20px rgba(0,255,102,0.05);
}
.compiled-output:focus { border-color: var(--success); box-shadow: inset 0 0 20px rgba(0,255,102,0.1), 0 0 10px var(--success-glow); }

/* --- Modals (The Frosted Citadel Panels) --- */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(15px); }
.modal-overlay.active { display: flex; }
.modal-box { 
    background: rgba(15, 15, 20, 0.7); backdrop-filter: blur(20px);
    width: 500px; max-width: 90%; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(255,255,255,0.1); 
    border-top: 2px solid var(--primary);
    overflow: hidden; display: flex; flex-direction: column; 
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
}
.modal-box.large { width: 750px; }
.modal-box.xl { width: 1200px; max-width: 95%; }

.modal-header { background: rgba(0,0,0,0.5); padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.modal-header h2 { margin: 0; font-size: 1.1rem; color: #fff; text-transform: uppercase; letter-spacing: 2px; font-weight: 800;}
.close-modal { cursor: pointer; font-size: 1.8rem; color: var(--text-light); background: none; border: none; transition: all 0.2s; line-height: 1;}
.close-modal:hover { color: var(--danger); text-shadow: 0 0 10px var(--danger-glow); transform: scale(1.1);}
.modal-body { padding: 30px; max-height: 75vh; overflow-y: auto; }

.drop-zone { border: 1px dashed var(--secondary); padding: 50px 20px; text-align: center; background: rgba(157, 0, 255, 0.05); cursor: pointer; transition: all 0.3s; color: var(--secondary); font-family: 'Fira Code', monospace; text-transform: uppercase; letter-spacing: 2px;}
.drop-zone.dragover { background: rgba(157, 0, 255, 0.15); border-color: var(--secondary); box-shadow: inset 0 0 30px var(--secondary-glow); color: #fff; text-shadow: 0 0 10px var(--secondary);}

/* Diff Viewer */
.diff-container { display: flex; gap: 15px; flex-grow: 1; min-height: 400px; }
.diff-box { flex: 1; display: flex; flex-direction: column; }
.diff-header { font-weight: 800; font-family: 'Fira Code', monospace; font-size: 0.75rem; padding: 10px; text-align: center; text-transform: uppercase; letter-spacing: 2px;}
.diff-textarea { flex-grow: 1; width: 100%; resize: none; font-family: 'Fira Code', monospace; font-size: 0.8rem; padding: 20px; white-space: pre; overflow: auto; outline: none;}

.diff-old .diff-header { background: rgba(255, 0, 85, 0.15); color: var(--danger); border: 1px solid var(--danger); border-bottom: none; text-shadow: 0 0 5px var(--danger-glow);}
.diff-old .diff-textarea { background: rgba(20, 0, 5, 0.9); border: 1px solid var(--danger); color: #ff99aa; }

.diff-new .diff-header { background: rgba(0, 255, 102, 0.15); color: var(--success); border: 1px solid var(--success); border-bottom: none; text-shadow: 0 0 5px var(--success-glow);}
.diff-new .diff-textarea { background: rgba(0, 20, 5, 0.9); border: 1px solid var(--success); color: #99ffbb; }

/* ==========================================================================
   8. Smart Webspace Explorer (Split-View)
   ========================================================================== */
.explorer-container { display: flex; height: 100%; overflow: hidden; }
.explorer-sidebar { width: 30%; min-width: 250px; background: rgba(0,0,0,0.2); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; }
.explorer-main { flex-grow: 1; display: flex; flex-direction: column; background: var(--bg-main); position: relative; }

.explorer-tree-wrap { flex-grow: 1; overflow-y: auto; padding: 15px; font-family: 'Fira Code', monospace; font-size: 0.75rem; }

.exp-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; margin-bottom: 2px; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; border-left: 2px solid transparent;}
.exp-item:hover { background: rgba(255,255,255,0.03); border-left-color: var(--text-light);}
.exp-item-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 10px; }

/* States */
.state-neutral { color: var(--text-light); }
.state-memory { background: rgba(0, 243, 255, 0.05); border-color: rgba(0, 243, 255, 0.1); border-left-color: var(--primary); color: var(--primary); }
.state-target { background: rgba(255, 94, 0, 0.05); border-color: rgba(255, 94, 0, 0.1); border-left-color: var(--warning); color: var(--warning); font-weight: bold; }
.state-staged { background: rgba(0, 255, 102, 0.05); border-color: rgba(0, 255, 102, 0.1); border-left-color: var(--success); color: var(--success); }

.explorer-viewer-header { padding: 15px 20px; background: var(--metal-dark); border-bottom: 1px solid #000; display: flex; justify-content: space-between; align-items: center; font-family: 'Fira Code', monospace; font-size: 0.8rem; color: var(--primary); letter-spacing: 1px;}
.explorer-code-area { flex-grow: 1; margin: 0; padding: 20px; background: #030305; color: #a9b7c6; font-family: 'Fira Code', monospace; font-size: 0.85rem; line-height: 1.6; overflow-y: auto; resize: none; border: none; outline: none; }

#btn-micro-context { position: absolute; display: none; background: rgba(157, 0, 255, 0.2); color: var(--secondary); border: 1px solid var(--secondary); padding: 6px 12px; font-size: 0.7rem; cursor: pointer; box-shadow: 0 0 15px var(--secondary-glow); z-index: 100; font-family: monospace; text-transform: uppercase; letter-spacing: 1px; backdrop-filter: blur(5px);}
#btn-micro-context:hover { background: rgba(157, 0, 255, 0.4); color: #fff; }

/* ==========================================================================
   9. HUD Diagnostics Panel (The Matrix OS Window)
   ========================================================================== */
.hud-panel { 
    display: none; position: fixed; bottom: 20px; right: 20px; 
    width: 1400px; max-width: 95vw; height: 60vh; min-height: 200px; min-width: 400px;
    background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(0,243,255,0.2), 0 0 30px rgba(0,243,255,0.05); 
    z-index: 9000; flex-direction: column; border: none;
    resize: both; overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.hud-panel.active { display: flex; }
.hud-header-drag { cursor: grab; background: linear-gradient(90deg, rgba(0,243,255,0.1), transparent) !important; border-bottom: 1px solid rgba(0,243,255,0.2) !important;}
.hud-header-drag:active { cursor: grabbing; }

.diag-status-ok { color: var(--success); font-weight: bold; text-shadow: 0 0 8px var(--success-glow);}
.diag-status-fail { color: var(--danger); font-weight: bold; text-shadow: 0 0 8px var(--danger-glow);}

/* The OS-Level Window Controls */
.window-controls { display: flex; gap: 12px; align-items: center; }
.win-btn { 
    width: 16px; height: 16px; border: none; cursor: pointer; 
    display: flex; justify-content: center; align-items: center; font-size: 0.6rem; color: transparent; transition: all 0.2s;
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); /* Hexagon */
}
.win-btn:hover { color: #fff; transform: scale(1.2); }
.win-close { background: var(--danger); box-shadow: 0 0 8px var(--danger-glow);}
.win-min { background: var(--warning); box-shadow: 0 0 8px var(--warning-glow);}
.win-max { background: var(--success); box-shadow: 0 0 8px var(--success-glow);}

/* Background Pill State */
.hud-minimized {
    width: 250px !important; height: 50px !important; min-height: 50px !important; min-width: 250px !important;
    bottom: 20px; right: 20px; resize: none; overflow: hidden;
    cursor: pointer; justify-content: center; align-items: center; padding: 0 20px;
    background: rgba(0, 243, 255, 0.05) !important; border: 1px solid var(--primary); color: var(--primary); flex-direction: row;
    box-shadow: 0 0 20px var(--primary-glow), inset 0 0 10px rgba(0,243,255,0.1); backdrop-filter: blur(10px);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
}
.hud-minimized .modal-body, .hud-minimized .time-slider-container, .hud-minimized .window-controls { display: none !important; }
.hud-minimized .modal-header { background: transparent !important; border: none !important; padding: 0; width: 100%; cursor: pointer !important; }
.hud-minimized .modal-header > div { justify-content: center !important; width: 100%; } 
.hud-minimized #btn-copy-matrix-all { display: none; } 
.hud-minimized .modal-header h2 { font-size: 0.8rem; text-align: center; width: 100%; color: var(--primary); letter-spacing: 2px;}
.hud-minimized.alert { border-color: var(--danger); background: rgba(255, 0, 85, 0.1) !important; color: var(--danger); box-shadow: 0 0 20px var(--danger-glow); animation: pulse-alert 2s infinite; }
.hud-minimized.alert h2 { color: var(--danger); text-shadow: 0 0 5px var(--danger-glow);}

@keyframes pulse-alert {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0.5); }
    70% { box-shadow: 0 0 0 15px rgba(255, 0, 85, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0); }
}

/* Time Machine Slider */
.time-slider-container { width: 100%; padding: 15px 25px; background: rgba(0,0,0,0.5); border-top: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.time-slider { flex-grow: 1; -webkit-appearance: none; appearance: none; height: 2px; background: #333; outline: none; cursor: pointer; box-shadow: 0 0 5px rgba(0,243,255,0.2);}
.time-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 24px; background: var(--primary); cursor: pointer; box-shadow: 0 0 15px var(--primary-glow); border: 1px solid #fff;}

/* ==========================================================================
   10. LOGIN PAGE (Citadel Terminal Access)
   ========================================================================== */
#login-page { 
    margin: 0; padding: 0; height: 100vh; display: flex; flex-direction: row; justify-content: center; align-items: center; 
    font-family: 'Inter', sans-serif; background-color: #030305; 
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(0, 243, 255, 0.05) 0%, transparent 60%),
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 100% 100%, 50px 50px, 50px 50px;
    color: var(--text-main); overflow: auto; 
}

#login-page .login-container { 
    background: rgba(10, 10, 15, 0.8); backdrop-filter: blur(20px);
    width: 450px; padding: 60px 50px; 
    box-shadow: 0 30px 80px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(0, 243, 255, 0.15); 
    text-align: center; margin: auto; position: relative;
    clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

#login-page .login-container::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--primary); box-shadow: 0 0 20px 2px var(--primary);
}

#login-page .login-container h1 { 
    margin: 0 0 10px 0; font-size: 1.8rem; color: #fff; text-transform: uppercase; letter-spacing: 4px; font-weight: 800; text-shadow: 0 0 10px rgba(255,255,255,0.3);
}
#login-page .login-container h1 span { color: var(--primary); text-shadow: 0 0 15px var(--primary-glow); font-weight: 300;}

#login-page .login-container p { 
    color: var(--primary); font-size: 0.75rem; margin-bottom: 50px; font-family: 'Fira Code', monospace; text-transform: uppercase; letter-spacing: 2px; opacity: 0.7;
}

#login-page .form-group { margin-bottom: 30px; text-align: left; }
#login-page .form-group label { display: block; font-size: 0.7rem; font-weight: bold; color: var(--text-light); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 2px; font-family: monospace; }

#login-page .form-group input { 
    width: 100%; padding: 15px 20px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); 
    color: var(--primary); font-family: 'Fira Code', monospace; font-size: 1.1rem; letter-spacing: 2px;
    transition: all 0.3s;
}
#login-page .form-group input:focus { border-color: var(--primary); outline: none; box-shadow: inset 0 0 15px rgba(0,243,255,0.1), 0 0 20px rgba(0,243,255,0.2); background: rgba(0,0,0,0.8); }

#login-page .btn-primary { 
    width: 100%; padding: 18px; background: rgba(0, 243, 255, 0.05); color: var(--primary); 
    border: 1px solid var(--primary); font-size: 0.9rem; font-weight: 800; cursor: pointer; transition: all 0.3s; 
    text-transform: uppercase; letter-spacing: 3px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
#login-page .btn-primary:hover:not(:disabled) { background: rgba(0, 243, 255, 0.15); box-shadow: 0 0 30px var(--primary-glow); text-shadow: 0 0 10px var(--primary); transform: translateY(-2px);}
#login-page .btn-primary:disabled { background: #0a0a0f; color: #333; border-color: #222; cursor: not-allowed; box-shadow: none; text-shadow: none; transform: none;}

#login-page .error-message { 
    background: rgba(255, 0, 85, 0.05); color: var(--danger); border: 1px solid var(--danger); 
    padding: 15px; margin-bottom: 30px; font-size: 0.75rem; font-family: 'Fira Code', monospace; letter-spacing: 1px;
    box-shadow: inset 0 0 15px rgba(255, 0, 85, 0.1), 0 0 20px rgba(255, 0, 85, 0.2); text-transform: uppercase;
}

/* ==========================================================================
   11. THE ARCHIVIST (Tactical Overlay Mode)
   ========================================================================== */

/* Wenn der Tactical Mode aktiv ist, ändert sich der Cursor IDE-weit in ein Fadenkreuz */
body.tactical-mode-active {
    cursor: crosshair !important;
}

/* Das Ziel-Element, das gerade anvisiert wird, leuchtet intensiv */
.archivist-target-glow {
    position: relative;
    z-index: 9999;
    box-shadow: 0 0 0 2px var(--primary), 0 0 20px var(--primary-glow), inset 0 0 10px var(--primary-glow) !important;
    border-color: var(--primary) !important;
    border-radius: 4px;
    transition: all 0.1s;
    cursor: crosshair !important;
    animation: archivist-pulse 1s infinite alternate;
}

@keyframes archivist-pulse {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.3); }
}

/* Verhindert, dass der Glow auf Child-Elemente vererbt wird und seltsam aussieht */
.archivist-target-glow * {
    cursor: crosshair !important;
}