/* --- DEDICATED, PROFESSIONAL & CORRECTED STYLES for cyberstrategy.html --- */

/* Scene 1 & 2: Base Diagram Nodes */
.cs-diagram-node { position: absolute; padding: 15px; text-align: center; border: 2px solid var(--secondary-surface); border-radius: 12px; background-color: var(--dark-bg); box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
.cs-diagram-node h3 { color: var(--accent-color); font-size: 16px; margin-bottom: 5px; }
.cs-diagram-node p { font-size: 12px; color: var(--text-muted); }
.chaos-node-pro { width: 150px; }
.strategy-doc-pro { width: 250px; height: 300px; border-color: var(--accent-color); box-shadow: 0 0 35px rgba(0, 188, 212, 0.4); }
.build-step-pro { width: 220px; }
.build-arrow-pro { position: absolute; font-size: 48px; color: var(--text-muted); }

/* NEW, CRITICAL: Interactive Sub-Step Navigation for true step-by-step control */
.sub-step-nav { position: absolute; bottom: 15px; right: 20px; z-index: 100; display: flex; gap: 10px; }
.sub-step-nav button { background-color: var(--secondary-surface); color: var(--text-muted); border: 1px solid #555; padding: 8px 15px; font-size: 14px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease-in-out; }
.sub-step-nav button:hover:not(:disabled) { background-color: var(--accent-color); color: var(--dark-bg); border-color: var(--accent-color); transform: translateY(-2px); }
.sub-step-nav button:disabled { cursor: not-allowed; opacity: 0.3; }

/* Scene 3 & 4: Professional Attack/Defense Elements */
.cs-network-zone { position: absolute; border: 2px dashed; border-radius: 15px; }
.cs-zone-label { position: absolute; top: -14px; left: 15px; background-color: var(--primary-surface); color: var(--text-muted); font-size: 13px; padding: 0 10px; }
.cs-soc-dashboard { position: absolute; width: 240px; height: 120px; background-color: var(--dark-bg); border: 1px solid var(--color-neutral); border-radius: 8px; padding: 10px; box-shadow: 0 0 25px rgba(33, 150, 243, 0.4); text-align: center;}
.cs-soc-status { font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; padding: 8px; border-radius: 4px; text-align: center; margin-top: 10px; }
.cs-soc-status-ok { background-color: var(--color-good); color: #121212; }
.cs-soc-status-alert { background-color: var(--color-bad); color: #fff; animation: cs-pulse-red 1s infinite; }
@keyframes cs-pulse-red { 50% { background-color: var(--secondary-surface); color: var(--color-bad); } }

.cs-defense-layer { position: absolute; background-color: rgba(42,42,42,0.3); border: 3px solid; border-radius: 8px; backdrop-filter: blur(3px); display: flex; justify-content: flex-start; align-items: flex-start; padding: 30px 10px 10px 10px; transition: all 0.5s ease-out; }
.cs-layer-label { position: absolute; top: 8px; left: 10px; font-weight: 600; opacity: 0.9; font-size: 13px; }
.cs-layer-breached { border-style: dashed !important; border-color: var(--color-bad) !important; opacity: 0.4 !important; transform: scale(0.98); }

.cs-osi-model { position: absolute; display: flex; flex-direction: column; width: 220px; border: 1px solid var(--secondary-surface); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
.cs-osi-layer { font-size: 13px; color: var(--text-muted); text-align: center; padding: 8px; border-bottom: 1px solid var(--primary-surface); transition: all 0.5s ease-in-out; }
.cs-osi-layer:first-child { border-bottom: none; }