/* ==========================================================================
   1. DESIGN TOKENS (MINIMALIST MONOCHROME)
   ========================================================================== */
:root {
    /* Pure Matte Grayscale */
    --bg-canvas: #09090b;       /* Pure matte off-black background */
    --bg-card: #18181b;         /* Dark graphite card surface */
    --border-lowkey: #27272a;   /* Subtle slate gray for framing dividers */
    
    /* Strict Functional Data Indicators */
    --text-primary: #fafafa;    /* High-contrast crisp white for values */
    --text-muted: #71717a;      /* Ash gray for quiet labels/tags */
    --indicator-active: #eab308; /* Low-key amber to denote simulation is on */
    
    /* Injected Affinity Flags (The ONLY persistent colors on screen) */
    --affinity-magic: #38bdf8;
    --affinity-force: #ef4444;
    --affinity-spirit: #22c55e;
    --affinity-void: #a855f7;
}

/* Global Document Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    padding: 20px;
}

/* ==========================================================================
   2. THE DASHBOARD MASTER GRID LAYOUT
   ========================================================================== */
.app-container {
    display: grid;
    grid-template-columns: 1fr; /* Default: Stacks perfectly vertically on mobile */
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Desktop Transformation: Triggers on screens wider than a large tablet */
@media (min-width: 1024px) {
    .app-container {
        grid-template-columns: 420px 1fr; /* Locks Left Panel to 420px, Workspace takes the rest */
        align-items: start;
    }

    .viewport-column {
        position: sticky;
        top: 20px; /* Pins the scanner panel seamlessly to the screen while right side scrolls */
    }
}

/* ==========================================================================
   3. UNIVERSAL DASHBOARD BOX STYLING
   ========================================================================== */
.dashboard-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-lowkey);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}