/* ── CIO FACTORY STANDARDIZED CORE DESIGN STYLINGS ──────────── */
:root {
    --bg-main: #030508;
    --bg-card: #090d14;
    --border-subtle: #1f293d;
    --text-high-contrast: #f0f3f8;
    --text-muted: #8b98a9;
    --accent-gold: #dfb76c;
    --sys-green: #2ea043;
    --sys-blue: #388bfd;
    --sys-red: #f85149;
}

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

body {
    background-color: var(--bg-main);
    color: var(--text-high-contrast);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding: 40px 20px;
    line-height: 1.5;
}

.matrix-container { max-width: 1400px; margin: 0 auto; }

/* ── HEADER NAVIGATION & STATUS MARKERS ─────────────────────── */
.matrix-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.brand-group { display: flex; align-items: center; gap: 16px; }
.network-node-icon { font-size: 2.2rem; color: var(--accent-gold); }
.matrix-header h1 { font-size: 1.5rem; letter-spacing: 1px; }
.subtitle { color: var(--text-muted); font-size: 0.85rem; }
.section-divider { border: 0; height: 1px; background: var(--border-subtle); margin-bottom: 32px; }

/* TELEMETRY METRIC LABELS */
.system-status-pill { padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; border: 1px solid transparent; }
.system-status-pill.ready { background: rgba(46, 160, 67, 0.15); color: var(--sys-green); border-color: var(--sys-green); }
.system-status-pill.running { background: rgba(56, 139, 253, 0.15); color: var(--sys-blue); border-color: var(--sys-blue); }
.system-status-pill.synchronized { background: rgba(223, 183, 108, 0.15); color: var(--accent-gold); border-color: var(--accent-gold); }
.system-status-pill.error { background: rgba(248, 81, 73, 0.15); color: var(--sys-red); border-color: var(--sys-red); }

/* INTEGRATED SIGNATURE DECOUPLED LIKE BUTTON */
.app-like-trigger {
    display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle); border-radius: 20px; padding: 2px 10px;
    font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
    cursor: pointer; margin-left: 12px; vertical-align: middle; transition: all 0.15s ease;
}
.app-like-trigger:hover:not(:disabled) { color: #f85149; border-color: rgba(248, 81, 73, 0.4); background: rgba(248, 81, 73, 0.05); transform: scale(1.05); }
.app-like-trigger.liked { color: var(--accent-gold); border-color: var(--accent-gold); background: rgba(223, 183, 108, 0.08); cursor: not-allowed; }
h1 .app-like-trigger { font-weight: 700; letter-spacing: normal; text-transform: none; }

/* ── INTERFACE WORKSPACE COLUMNS ────────────────────────────── */
.workspace-grid { display: grid; grid-template-columns: 350px 1fr; gap: 32px; align-items: start; }
@media (max-width: 1000px) { .workspace-grid { grid-template-columns: 1fr; } }

.control-panel-card { background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 24px; }
.panel-title { font-size: 1.1rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; color: var(--accent-gold); }

.btn { width: 100%; padding: 14px; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; transition: opacity 0.15s ease; }
.btn-primary { background-color: var(--accent-gold); color: #030508; }
.btn-primary:hover { opacity: 0.9; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.telemetry-box { background-color: #0d1117; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 16px; margin-top: 32px; }
.telemetry-row { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 8px; }
.telemetry-row:last-child { margin-bottom: 0; }
.telemetry-row span { color: var(--text-muted); }
.code-font { font-family: monospace; color: var(--text-high-contrast); }

/* ── VIEWPORT WINDOW CANVAS ARRAY ──────────────────────────── */
.display-workspace-panel { position: relative; display: flex; flex-direction: column; gap: 20px; }
.illusion-canvas-frame {
    background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px;
    height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}

.illusion-canvas-frame img { max-width: 100%; max-height: 100%; object-fit: contain; width: auto; height: auto; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.illusion-canvas-frame img:hover { transform: scale(1.02); }

.fallback-placeholder-view { display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--text-muted); font-size: 0.95rem; }
.fallback-placeholder-view i { font-size: 3rem; color: var(--border-subtle); }

.metadata-footer-bar {
    background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.metadata-footer-bar h3 { font-size: 1.1rem; color: var(--text-high-contrast); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75%; }
.source-link-action { color: var(--accent-gold); text-decoration: none; font-size: 0.85rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px dashed transparent; transition: border-color 0.15s ease; }
.source-link-action:hover { border-color: var(--accent-gold); }

/* LOADING SCREEN CONSOLE */
.status-console-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(3, 5, 8, 0.85); z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; border-radius: 8px; }
.loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border-subtle); border-top: 3px solid var(--accent-gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animated-pulse { animation: pulse 2s infinite ease-in-out; }
@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; color: var(--accent-gold); } }