feat: Official production release with overhauled Command Console and Interactive Tour

dashboard/app.js

@@ -1,40 +1,43 @@
 const API_BASE = window.location.origin;
 
-// Simulation Specs (Logistics trade-offs)
+// Simulation Specs (Mirrors env.py)
 const SPECS = {
-    sea:  { cost: 1.0, carbon: 0.1, time: 10 },
-    air:  { cost: 5.0, carbon: 2.0, time: 2 },
-    rail: { cost: 2.5, carbon: 0.5, time: 5 }
+    sea:  { cost: 1.0, carbon: 0.1 },
+    air:  { cost: 5.0, carbon: 2.0 },
+    rail: { cost: 2.5, carbon: 0.5 }
 };
 
-const RECIPES = {
-    "EcoPhone": { chips: 1, sensors: 2 },
-    "GreenTab": { chips: 2, sensors: 1 }
-};
-
-// Global State
-let latestInventory = { chips: 0, sensors: 0 };
-let currentTutStep = 0;
-
+// Tutorial Content
 const TUTORIAL_STEPS = [
     {
-        title: "Mission Briefing",
-        text: "Welcome, Logistics Operator. Your goal is to keep NetZero-Nav profitable while minimizing our carbon footprint. Balance is everything."
+        title: "Welcome to NetZero-Nav",
+        text: "You are now in command of a global eco-resilient logistics network. Your mission: Deliver products profitably while staying within carbon limits.",
+        target: "header"
+    },
+    {
+        title: "Supply Logistics",
+        text: "Use this section to order parts. Remember: Sea is green but slow, Air is fast but high emissions.",
+        target: "#section-order"
     },
     {
-        title: "The Command Side",
-        text: "On the left, you'll find your Command Console. This is where you order raw materials and start manufacturing runs."
+        title: "Manufacturing",
+        text: "Once parts arrive in your inventory, start your production runs here to fulfill orders.",
+        target: "#section-produce"
     },
     {
-        title: "Logistics Strategy",
-        text: "Pay attention to the Delivery Times (ETAs) in the Logistics section. Sea is green but takes 10 full days. Air is fast but high emissions."
+        title: "ESG Offsetting",
+        text: "Strategically buy carbon offsets here if you are nearing your quota limits.",
+        target: "#section-offset"
     },
     {
-        title: "Crisis Resilience",
-        text: "Scenario triggering (like the Suez Jam) will test your ability to pivot. Use Rail or Air when Sea routes are blocked!"
+        title: "Mission Control",
+        text: "Advance time or trigger crisis scenarios here. Good luck, Operator.",
+        target: ".time-controls"
     }
 ];
 
+let currentTutStep = 0;
+
 // State Management
 async function updateState() {
     try {
@@ -42,12 +45,6 @@ async function updateState() {
         if (!response.ok) throw new Error('API Unreachable');
         const data = await response.json();
         
-        // Pulse animation on inventory change
-        if (data.inventory.chips !== latestInventory.chips) pulse('chips-count');
-        if (data.inventory.sensors !== latestInventory.sensors) pulse('sensors-count');
-        
-        latestInventory = data.inventory;
-        
         const status = document.getElementById('connection-status');
         status.textContent = 'ONLINE';
         status.className = 'status-badge status-online';
@@ -57,8 +54,6 @@ async function updateState() {
         document.getElementById('chips-count').textContent = data.inventory.chips;
         document.getElementById('sensors-count').textContent = data.inventory.sensors;
 
-        updateProducePreview();
-
         const newsAlert = document.getElementById('news-alert');
         if (data.news) {
             document.getElementById('news-text').textContent = data.news;
@@ -72,80 +67,49 @@ async function updateState() {
             container.innerHTML = data.orders.map(order => `
                 <div class="shipment-item">
                     <span>${order.product} (Required: ${order.quantity})</span>
-                    <small>ETA: Day ${order.due_date}</small>
+                    <small>Deadline: Day ${order.due_date}</small>
                 </div>
             `).join('');
         } else {
-            container.innerHTML = '<p class="placeholder">All regional orders fulfilled.</p>';
+            container.innerHTML = '<p class="placeholder">All orders fulfilled. Environment reset recommended.</p>';
         }
 
     } catch (error) {
-        console.error('Telemetry lost:', error);
-        document.getElementById('connection-status').textContent = 'RECONNECTING...';
-        document.getElementById('connection-status').className = 'status-badge';
+        console.error('Update failed:', error);
+        const status = document.getElementById('connection-status');
+        status.textContent = 'RECONNECTING...';
+        status.className = 'status-badge';
     }
 }
 
-function pulse(id) {
-    const el = document.getElementById(id);
-    el.style.transform = 'scale(1.2)';
-    el.style.color = '#7A9B7A';
-    setTimeout(() => {
-        el.style.transform = 'scale(1)';
-        el.style.color = 'inherit';
-    }, 300);
-}
-
-function updateProducePreview() {
-    const product = document.getElementById('product-select').value;
-    const req = RECIPES[product];
-    const preview = document.getElementById('req-preview');
-    if (!preview) return;
-    
-    const chipClass = latestInventory.chips >= req.chips ? "sufficient" : "shortage";
-    const sensorClass = latestInventory.sensors >= req.sensors ? "sufficient" : "shortage";
-
-    preview.innerHTML = `
-        <div class="req-item">
-            <span>Chips: ${req.chips} req.</span>
-            <span class="${chipClass}">In Stock: ${latestInventory.chips} (Min: ${req.chips})</span>
-        </div>
-        <div class="req-item">
-            <span>Sensors: ${req.sensors} req.</span>
-            <span class="${sensorClass}">In Stock: ${latestInventory.sensors} (Min: ${req.sensors})</span>
-        </div>
-    `;
-}
+// UI Controls
+const modeSelect = document.getElementById('mode-select');
 
-function updateImpactPreview() {
-    const mode = document.getElementById('mode-select').value;
+function updatePreview() {
+    const mode = modeSelect.value;
     const s = SPECS[mode];
     const cost = 10 * 5 * s.cost;
     const carbon = 5 * s.carbon;
 
     document.getElementById('preview-cost').textContent = `$${cost.toFixed(0)}`;
     document.getElementById('preview-carbon').textContent = `+${carbon.toFixed(1)}kg CO2`;
-    
-    // Add visual feedback to impact based on carbon
-    const carbonLabel = document.getElementById('preview-carbon');
-    if (s.carbon > 1.0) carbonLabel.style.color = '#E76F51';
-    else carbonLabel.style.color = '#2D5F2D';
 }
 
-// Global Execute
-window.execute = async function(type) {
-    if (type === 'produce') {
-        const product = document.getElementById('product-select').value;
-        const req = RECIPES[product];
-        if (latestInventory.chips < req.chips || latestInventory.sensors < req.sensors) {
-            log(`STALLED: Insufficient materials for ${product}.`, 'error');
-            return;
-        }
-    }
+modeSelect.addEventListener('change', updatePreview);
 
+function log(message, type = 'system') {
+    const box = document.getElementById('activity-log');
+    const entry = document.createElement('p');
+    entry.className = `log-entry ${type}`;
+    entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
+    box.prepend(entry);
+}
+
+// Global Execute Function (exposed to onclick in HTML)
+window.execute = async function(type) {
     document.querySelector('main').classList.add('transitioning');
     
-    const actionObj = { action_type: type };
+    let actionObj = { action_type: type };
     if (type === 'order_parts') {
         actionObj.part_type = document.getElementById('part-select').value;
         actionObj.mode = document.getElementById('mode-select').value;
@@ -167,28 +131,41 @@ window.execute = async function(type) {
         const result = await response.json();
         
         if (result.info && result.info.error) {
-            log(`DENIED: ${result.info.error}`, 'error');
+            log(`ERROR: ${result.info.error}`, 'error');
         } else {
-            log(`EXECUTED: ${type === 'skip' ? 'Day Advanced' : type.replace('_', ' ')}`, 'action');
+            log(`SUCCESS: ${type === 'skip' ? 'Skipped Day' : 'Executed ' + type}`, 'action');
         }
         
         await updateState();
     } catch (e) {
-        log(`CRITICAL: Comm-link offline`, 'error');
+        log(`CRITICAL: Connection lost`, 'error');
     } finally {
         setTimeout(() => {
             document.querySelector('main').classList.remove('transitioning');
-        }, 400);
+        }, 300);
     }
 }
 
 // Tutorial Logic
 function showStep(step) {
     const content = document.getElementById('tutorial-step');
+    const modal = document.querySelector('.modal-card');
     const data = TUTORIAL_STEPS[step];
+    
     content.innerHTML = `<h2>${data.title}</h2><p>${data.text}</p>`;
     document.getElementById('tut-prev').classList.toggle('hidden', step === 0);
-    document.getElementById('tut-next').textContent = step === TUTORIAL_STEPS.length - 1 ? "Initialize HUD" : "Next";
+    document.getElementById('tut-next').textContent = step === TUTORIAL_STEPS.length - 1 ? "Start Simulation" : "Next";
+
+    // Position modal near target
+    const targetEl = document.querySelector(data.target);
+    if (targetEl && step > 0) {
+        const rect = targetEl.getBoundingClientRect();
+        document.getElementById('tutorial-modal').style.alignItems = 'flex-start';
+        document.getElementById('tutorial-modal').style.paddingTop = `${Math.max(20, rect.top - 100)}px`;
+    } else {
+        document.getElementById('tutorial-modal').style.alignItems = 'center';
+        document.getElementById('tutorial-modal').style.paddingTop = '0';
+    }
 }
 
 document.getElementById('tut-next').addEventListener('click', () => {
@@ -218,11 +195,38 @@ document.getElementById('info-btn').addEventListener('click', () => {
 });
 
 // Initialization
-document.getElementById('mode-select').addEventListener('change', updateImpactPreview);
-document.getElementById('product-select').addEventListener('change', updateProducePreview);
+async function manualReset() {
+    if (!confirm("Are you sure you want to reset the simulation?")) return;
+    try {
+        await fetch(`${API_BASE}/reset`, { 
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ task: 'easy' })
+        });
+        log("Environment Reset to Day 0", "system");
+        await updateState();
+    } catch (e) {
+        log("Reset Failed", "error");
+    }
+}
+
+async function triggerSuezJam() {
+    try {
+        await fetch(`${API_BASE}/trigger`, { method: 'POST' });
+        log(`CRISIS: Suez Jam Triggered!`, 'error');
+        await updateState();
+    } catch (e) {
+        log(`Trigger failed`, 'error');
+    }
+}
+
+document.getElementById('skip-btn').addEventListener('click', () => window.execute('skip'));
+document.getElementById('trigger-btn').addEventListener('click', triggerSuezJam);
+document.getElementById('reset-btn').addEventListener('click', manualReset);
 
+// Start
 updateState();
 setInterval(updateState, 3000);
-updateImpactPreview();
+updatePreview();
 showStep(0);
 document.getElementById('tutorial-modal').classList.remove('hidden');

dashboard/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>NetZero-Nav | Logistics Command</title>
+    <title>NetZero-Nav Dashboard</title>
     <link rel="stylesheet" href="style.css">
     <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
 </head>
@@ -15,7 +15,7 @@
                 <h1>NETZERO-NAV</h1>
                 <button id="info-btn" class="help-circle">?</button>
             </div>
-            <div id="connection-status" class="status-badge">TELEMETRY OFFLINE</div>
+            <div id="connection-status" class="status-badge">Connecting...</div>
         </header>
 
         <!-- Interactive Walkthrough -->
@@ -25,153 +25,158 @@
                     <!-- Dynamic Content -->
                 </div>
                 <div class="modal-footer">
-                    <button id="tut-prev" class="btn btn-outline hidden">Back</button>
-                    <button id="tut-next" class="btn btn-primary">Next</button>
-                    <button id="tut-close" class="btn btn-ghost">Skip Tour</button>
+                    <button id="tut-prev" class="btn btn-outline small hidden">Back</button>
+                    <button id="tut-next" class="btn btn-primary small">Next</button>
+                    <button id="tut-close" class="btn btn-ghost small">Skip Tour</button>
                 </div>
             </div>
         </div>
 
         <main>
-            <!-- Fixed Left Sidebar Console -->
-            <section id="command-console" class="control-panel card">
-                <h3><span class="i-icon">🕹️</span> Command Console</h3>
+            <section class="control-panel card">
+                <h3><span class="i-icon">ℹ️</span> Command Console</h3>
                 
                 <div class="operation-sections">
-                    <!-- Supply -->
+                    <!-- Section 1: Logistics -->
                     <div id="section-order" class="op-section">
                         <h4>📦 Supply Logistics</h4>
                         <div class="op-row">
                             <select id="part-select">
-                                <option value="chips">Microchips (Procurement)</option>
-                                <option value="sensors">Sensors (Procurement)</option>
+                                <option value="chips">Order Microchips</option>
+                                <option value="sensors">Order Sensors</option>
                             </select>
                             <select id="mode-select">
-                                <option value="sea">SEA (Ultra-Low CO2 | ETA: 10d)</option>
-                                <option value="rail">RAIL (Low CO2 | ETA: 5d)</option>
-                                <option value="air">AIR (High CO2 | ETA: 2d)</option>
+                                <option value="sea">SEA ($50, 10d, 0.5kg)</option>
+                                <option value="rail">RAIL ($125, 5d, 2.5kg)</option>
+                                <option value="air">AIR ($250, 2d, 10kg)</option>
                             </select>
-                            <button onclick="execute('order_parts')" class="btn btn-primary">Process Order</button>
+                            <button onclick="execute('order_parts')" class="btn btn-primary small">Order</button>
                         </div>
                     </div>
 
                     <hr class="divider">
 
-                    <!-- Production -->
+                    <!-- Section 2: Manufacturing -->
                     <div id="section-produce" class="op-section">
                         <h4>🏭 Manufacturing</h4>
                         <div class="op-row">
                             <select id="product-select">
-                                <option value="EcoPhone">Assemble EcoPhone</option>
-                                <option value="GreenTab">Assemble GreenTab</option>
+                                <option value="EcoPhone">Produce EcoPhone</option>
+                                <option value="GreenTab">Produce GreenTab</option>
                             </select>
-                            <button onclick="execute('produce')" class="btn btn-primary">Initiate Run</button>
+                            <button onclick="execute('produce')" class="btn btn-primary small">Start Run</button>
                         </div>
-                        <div id="req-preview" class="req-preview"></div>
                     </div>
 
                     <hr class="divider">
 
-                    <!-- Offsetting -->
+                    <!-- Section 3: ESG / Offsetting -->
                     <div id="section-offset" class="op-section">
-                        <h4>🏢 ESG ESG Strategy</h4>
+                        <h4>🌳 ESG Strategy</h4>
                         <div class="op-row">
-                            <button onclick="execute('offset')" class="btn btn-secondary">Purchase Carbon Offset (100u)</button>
+                            <span class="op-text">Carbon Offset Purchase (100 units)</span>
+                            <button onclick="execute('offset')" class="btn btn-primary small">Buy Offset</button>
                         </div>
                     </div>
                 </div>
 
-                <!-- Impact Preview -->
-                <div id="impact-preview" class="impact-preview card" style="box-shadow: none; border: 1px dashed var(--sage-green); margin-top: 1rem; padding: 1rem;">
-                    <div style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem;">Estimated Shipment Impact:</div>
-                    <div style="display: flex; justify-content: space-between; font-weight: 600;">
-                        <span id="preview-cost" style="color: var(--deep-forest)">$0</span>
-                        <span id="preview-carbon" style="color: var(--sage-green)">0kg CO2</span>
-                    </div>
+                <div id="impact-preview" class="impact-preview">
+                    <span class="preview-label">Live Estimate:</span>
+                    <span id="preview-cost" class="val">$0</span>
+                    <span class="sep">|</span>
+                    <span id="preview-carbon" class="val">0kg CO2</span>
                 </div>
 
-                <div class="time-controls" style="margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem;">
-                    <button id="skip-btn" onclick="execute('skip')" class="btn btn-outline" style="width: 100%;">Advance Single Day</button>
-                    <button id="trigger-btn" class="btn btn-danger">Manual Crisis: Suez Jam</button>
+                <div class="time-controls">
+                    <button id="skip-btn" class="btn btn-secondary">Advance to Next Day</button>
+                    <button id="trigger-btn" class="btn btn-danger">Trigger Suez Jam</button>
+                    <button id="reset-btn" class="btn btn-outline">Reset Sim</button>
                 </div>
-
                 <div id="news-alert" class="news-alert hidden">
+                    <span class="warning-icon">⚠️</span>
                     <span id="news-text"></span>
                 </div>
             </section>
 
-            <!-- Fluid Right Content Column -->
-            <div class="metrics-column">
-                <section class="metrics-grid">
-                    <div class="card metric-card">
-                        <h3>Carbon Footprint</h3>
-                        <div class="gauge-container">
-                            <div class="gauge">
-                                <span id="carbon-value">0</span><small>kg</small>
-                            </div>
+            <section class="metrics-grid">
+                <div class="card metric-card">
+                    <h3>Carbon Footprint</h3>
+                    <div class="gauge-container">
+                        <div id="carbon-gauge" class="gauge">
+                            <span id="carbon-value">0</span><small>kg</small>
                         </div>
-                        <div style="font-size: 0.75rem; color: var(--text-muted);">Regional Quota: 1000kg</div>
                     </div>
+                    <p class="limit">Limit: <span id="carbon-limit">1000</span>kg</p>
+                </div>
 
-                    <div class="card metric-card">
-                        <h3>Operating Capital</h3>
-                        <div class="value-large">$<span id="cash-value">0</span></div>
-                        <div style="font-size: 0.75rem; color: var(--text-muted);">Current Liquid Assets</div>
-                    </div>
+                <div class="card metric-card">
+                    <h3>Capital Balance</h3>
+                    <div class="value-large">$<span id="cash-value">0</span></div>
+                    <div class="trend" id="cash-trend">Fulfillment: <span id="orders-done">0</span></div>
+                </div>
 
-                    <div class="card metric-card">
-                        <h3>Raw Inventory</h3>
-                        <div class="inventory-grid" style="margin-top: 1rem;">
-                            <div class="inv-item">
-                                <span class="label">Chips</span>
-                                <span id="chips-count" class="count">0</span>
-                            </div>
-                            <div class="inv-item">
-                                <span class="label">Sensors</span>
-                                <span id="sensors-count" class="count">0</span>
-                            </div>
+                <div class="card metric-card">
+                    <h3>Raw Inventory</h3>
+                    <div class="inventory-grid">
+                        <div class="inv-item">
+                            <span class="label">Chips</span>
+                            <span id="chips-count" class="count">0</span>
+                        </div>
+                        <div class="inv-item">
+                            <span class="label">Sensors</span>
+                            <span id="sensors-count" class="count">0</span>
                         </div>
                     </div>
-                </section>
+                </div>
+            </section>
 
-                <section class="log-section">
-                    <div class="card full-width">
-                        <h3>📠 Live Operations Log</h3>
-                        <div id="activity-log" class="log-box">
-                            <p class="log-entry system">[SYSTEM] Encrypted link established.</p>
-                        </div>
+            <section class="details-section">
+                <div class="card full-width">
+                    <h3>Active Logistics Stream</h3>
+                    <div id="shipments-container" class="shipment-list">
+                        <p class="placeholder">Awaiting shipment data...</p>
                     </div>
-                </section>
+                </div>
+            </section>
 
-                <section class="details-section">
-                    <div class="card full-width" style="border-style: dashed;">
-                        <h3>🚚 Incoming Supply Stream</h3>
-                        <div id="shipments-container" class="shipment-list">
-                            <p class="placeholder">No active shipments in transit.</p>
-                        </div>
+            <section class="log-section">
+                <div class="card full-width">
+                    <h3>Simulation Activity Log</h3>
+                    <div id="activity-log" class="log-box">
+                        <p class="log-entry system">[SYSTEM] Dashboard initialized. Awaiting user action...</p>
                     </div>
-                </section>
+                </div>
+            </section>
 
-                <section class="guide-section">
-                    <div class="card full-width" style="background: rgba(45, 95, 45, 0.02);">
-                        <h3>📁 ESG Master Guidelines</h3>
-                        <div class="guide-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1rem;">
-                            <div>
-                                <h4 style="font-size: 0.8rem; color: var(--deep-forest);">MISSION PHILOSOPHY</h4>
-                                <p style="font-size: 0.85rem; color: var(--text-muted);">The NetZero-Nav initiative prioritizes 'Green-First' logistics. Always verify the Carbon Impact Preview before committing to high-speed transit.</p>
+            <section class="guide-section">
+                <div class="card full-width mission-card">
+                    <h3>📁 Mission Briefing (Operator's Manual)</h3>
+                    <div class="guide-content">
+                        <div class="guide-grid">
+                            <div class="guide-item">
+                                <h4>🎯 Objective</h4>
+                                <p>Fulfill "EcoPhone" and "GreenTab" orders by managing a global supply chain. You must keep <strong>Carbon Footprint</strong> below the quota while maximizing <strong>Capital Balance</strong>.</p>
+                            </div>
+                            <div class="guide-item">
+                                <h4>🚢 Logistics Trade-offs</h4>
+                                <ul class="guide-list">
+                                    <li><strong>SEA:</strong> Cheapest ($50), cleanest (0.5kg CO2), but very slow (10 days).</li>
+                                    <li><strong>RAIL:</strong> Balanced cost ($125), low CO2 (2.5kg), medium speed (5 days).</li>
+                                    <li><strong>AIR:</strong> Expensive ($250), high CO2 (10kg), but ultra-fast (2 days).</li>
+                                </ul>
                             </div>
-                            <div>
-                                <h4 style="font-size: 0.8rem; color: var(--deep-forest);">CRISIS ADAPTATION</h4>
-                                <p style="font-size: 0.85rem; color: var(--text-muted);">Regional blockades (Suez Jam) occur without warning. Divert all sea procurement to Rail or Air networks immediately upon alert.</p>
+                            <div class="guide-item">
+                                <h4>☢️ Crisis Handling</h4>
+                                <p>Clicking <strong>Trigger Suez Jam</strong> simulates a real-world blockade. Sea routes become unavailable for 7 days, forcing you to pivot to expensive Rail/Air routes to meet your deadlines.</p>
                             </div>
                         </div>
                     </div>
-                </section>
-            </div>
+                </div>
+            </section>
         </main>
 
-        <footer style="margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border-soft); text-align: center; color: var(--text-muted); font-size: 0.8rem;">
-            &copy; 2026 NetZero-Nav | Enterprise Supply Chain Resilience
+        <footer>
+            <p>&copy; 2026 NetZero-Nav | Eco-Resilient Supply Chain Intelligence</p>
         </footer>
     </div>
     <script src="app.js"></script>

dashboard/style.css

@@ -1,13 +1,13 @@
 :root {
-    --cream-bg: #FDFCFB;
-    --deep-forest: #2D5F2D;
-    --sage-green: #7A9B7A;
-    --accent-gold: #D4B483;
-    --glass-white: rgba(255, 255, 255, 0.7);
-    --border-soft: rgba(45, 95, 45, 0.1);
-    --text-main: #2C3E2C;
-    --text-muted: #5C6E5C;
-    --danger: #E76F51;
+    --bg-cream: #FDFBF7;
+    --card-white: #FFFFFF;
+    --primary-green: #2C5F2D;
+    --sage-green: #97BC62;
+    --deep-forest: #004225;
+    --border-tan: #E9E1D4;
+    --text-main: #333333;
+    --text-muted: #666666;
+    --accent-gold: #D4AF37;
 }
 
 * {
@@ -17,345 +17,419 @@
 }
 
 body {
-    background-color: var(--cream-bg);
+    background-color: var(--bg-cream);
     color: var(--text-main);
     font-family: 'Outfit', sans-serif;
     line-height: 1.6;
-    padding: 2rem;
-    background-image: 
-        radial-gradient(circle at 10% 20%, rgba(122, 155, 122, 0.05) 0%, transparent 40%),
-        radial-gradient(circle at 90% 80%, rgba(212, 180, 131, 0.05) 0%, transparent 40%);
-    min-height: 100vh;
 }
 
 .container {
-    max-width: 1400px;
+    max-width: 1200px;
     margin: 0 auto;
+    padding: 2rem;
 }
 
-/* Header */
 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 3rem;
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid var(--border-soft);
+    border-bottom: 2px solid var(--border-tan);
+    padding-bottom: 1rem;
 }
 
 .logo {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 0.75rem;
 }
 
-h1 {
+.logo h1 {
     font-family: 'Playfair Display', serif;
     font-size: 1.8rem;
+    letter-spacing: 2px;
     color: var(--deep-forest);
-    letter-spacing: 0.05em;
 }
 
-.help-circle {
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    border: 1px solid var(--sage-green);
-    background: transparent;
-    color: var(--sage-green);
+.controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.btn {
+    padding: 0.6rem 1.2rem;
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 600;
     cursor: pointer;
-    font-size: 14px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.2s ease;
+    border: none;
 }
 
-.help-circle:hover {
-    background: var(--deep-forest);
+.btn-primary {
+    background-color: var(--primary-green);
     color: white;
-    transform: rotate(360deg);
+}
+
+.btn-primary:hover {
+    background-color: var(--deep-forest);
+}
+
+.btn-outline {
+    background-color: transparent;
+    border: 1.5px solid var(--primary-green);
+    color: var(--primary-green);
+}
+
+.btn-outline:hover {
+    background-color: #E1F5E1;
 }
 
 .status-badge {
+    background: var(--border-tan);
     padding: 0.5rem 1rem;
-    border-radius: 30px;
-    font-size: 0.75rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
     font-weight: 600;
-    background: #F0F0F0;
-    color: #888;
-    backdrop-filter: blur(5px);
-    border: 1px solid var(--border-soft);
 }
 
-.status-online {
-    background: rgba(45, 95, 45, 0.1);
-    color: var(--deep-forest);
-    border: 1px solid rgba(45, 95, 45, 0.2);
-}
+.status-online { background: #E1F5E1; color: #2C5F2D; }
 
-/* Main Layout */
-main {
+.metrics-grid {
     display: grid;
-    grid-template-columns: 420px 1fr;
-    gap: 3rem;
-    align-items: start;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-bottom: 2rem;
 }
 
-/* Cards */
 .card {
-    background: var(--glass-white);
-    backdrop-filter: blur(10px);
-    border: 1px solid var(--glass-white);
-    border-radius: 20px;
+    background: var(--card-white);
+    border: 1px solid var(--border-tan);
+    border-radius: 12px;
     padding: 2rem;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
-    margin-bottom: 2rem;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
+    transition: transform 0.3s ease;
 }
 
 .card h3 {
-    font-family: 'Playfair Display', serif;
-    font-size: 1.25rem;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--text-muted);
     margin-bottom: 1.5rem;
-    color: var(--deep-forest);
+}
+
+.gauge-container {
+    height: 100px;
     display: flex;
+    justify-content: center;
     align-items: center;
-    gap: 0.5rem;
 }
 
-/* Left Sidebar: Command Console */
-.control-panel {
-    position: sticky;
-    top: 2rem;
+.gauge {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--primary-green);
+}
+
+.gauge small {
+    font-size: 1rem;
+    margin-left: 0.2rem;
+}
+
+.value-large {
+    font-size: 3rem;
+    font-weight: 600;
+    color: var(--deep-forest);
+}
+
+.shipment-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.shipment-item {
+    background: var(--bg-cream);
+    padding: 1rem;
+    border-radius: 8px;
     border-left: 4px solid var(--sage-green);
+    display: flex;
+    justify-content: space-between;
+}
+
+.ticker-box {
+    background: var(--bg-cream);
+    padding: 1rem;
+    border-radius: 8px;
+    font-style: italic;
+    color: var(--deep-forest);
+}
+
+.operation-sections {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 }
 
 .op-section {
-    margin-bottom: 2rem;
+    padding: 0.5rem 0;
 }
 
 .op-section h4 {
-    font-size: 0.75rem;
-    text-transform: uppercase;
+    font-size: 0.8rem;
     color: var(--text-muted);
-    letter-spacing: 0.1em;
-    margin-bottom: 1rem;
+    text-transform: uppercase;
+    margin-bottom: 0.75rem;
 }
 
 .op-row {
     display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
+    gap: 1rem;
+    align-items: center;
 }
 
-/* Custom Styled Selects */
-select {
-    width: 100%;
-    padding: 1rem;
-    border-radius: 12px;
-    border: 1px solid var(--border-soft);
-    background: white;
-    font-family: inherit;
+.op-text {
     font-size: 0.9rem;
     color: var(--text-main);
-    appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232D5F2D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 1rem center;
-    background-size: 1em;
-    cursor: pointer;
-    transition: all 0.2s;
+    flex-grow: 1;
 }
 
-select:hover {
-    border-color: var(--sage-green);
-    background-color: #fcfdfc;
+.divider {
+    border: none;
+    border-top: 1px solid var(--border-tan);
 }
 
-/* Buttons */
-.btn {
-    padding: 1rem 1.5rem;
-    border-radius: 12px;
-    border: none;
-    font-family: inherit;
-    font-weight: 600;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
+.time-controls {
+    margin-top: 2rem;
+    display: flex;
+    gap: 1rem;
+    padding-top: 1.5rem;
+    border-top: 2px solid var(--border-tan);
 }
 
-.btn-primary {
-    background: var(--deep-forest);
-    color: white;
-    width: 100%;
+.hidden { display: none !important; }
+
+.sub-inputs {
+    display: flex;
+    gap: 1rem;
 }
 
-.btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(45, 95, 45, 0.3);
+.log-box {
+    height: 150px;
+    overflow-y: auto;
+    background: #1A1A1A;
+    color: #00FF41;
+    font-family: 'Courier New', Courier, monospace;
+    padding: 1rem;
+    border-radius: 8px;
+    font-size: 0.85rem;
 }
 
-.btn-secondary {
-    background: #F0F4EF;
-    color: var(--deep-forest);
+.log-entry { margin-bottom: 0.4rem; }
+.log-entry.system { color: #AAAAAA; }
+.log-entry.action { color: #00FF41; }
+.log-entry.error { color: #FF4136; }
+
+.inventory-grid {
+    display: flex;
+    justify-content: space-around;
+    padding-top: 0.5rem;
 }
 
-.btn-danger {
-    background: #FFF1F0;
-    color: var(--danger);
-    width: 100%;
+.inv-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-.btn-outline {
-    background: transparent;
-    border: 1px solid var(--border-soft);
+.inv-item .label {
+    font-size: 0.7rem;
     color: var(--text-muted);
 }
 
-/* Inventory Preview */
-.req-preview {
-    margin-top: 1rem;
-    padding: 1rem;
-    background: rgba(45, 95, 45, 0.03);
-    border-radius: 12px;
-    font-size: 0.8rem;
+.inv-item .count {
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--primary-green);
 }
 
-.req-item {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 0.5rem;
+.btn-danger {
+    background-color: #FF4136;
+    color: white;
 }
 
-.shortage { color: var(--danger); font-weight: 700; }
-.sufficient { color: var(--deep-forest); font-weight: 600; opacity: 0.8; }
+.btn-danger:hover {
+    background-color: #B22222;
+}
 
-/* Right Column: Stats */
-.metrics-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-    margin-bottom: 3rem;
+.news-alert {
+    margin-top: 1.5rem;
+    padding: 1rem;
+    background: #FFF5F5;
+    border: 1px solid #FFC1C1;
+    border-radius: 8px;
+    color: #FF4136;
+    font-weight: 600;
+    display: flex;
+    gap: 1rem;
+    animation: pulse-border 2s infinite;
 }
 
-.metric-card {
-    text-align: center;
+@keyframes pulse-border {
+    0% { border-color: #FFC1C1; }
+    50% { border-color: #FF4136; }
+    100% { border-color: #FFC1C1; }
 }
 
-.metric-card h3 {
-    justify-content: center;
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+.impact-preview {
+    margin: 1.5rem 0;
+    padding: 1rem;
+    background: #F0F4F0;
+    border-radius: 8px;
+    border-left: 4px solid var(--primary-green);
+    font-size: 0.9rem;
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+}
+
+.impact-preview .preview-label {
+    font-weight: 600;
     color: var(--text-muted);
 }
 
-.value-large {
-    font-family: 'Playfair Display', serif;
-    font-size: 2.5rem;
+.impact-preview .val {
+    font-weight: 600;
     color: var(--deep-forest);
-    margin: 1rem 0;
 }
 
-.gauge-container {
-    width: 120px;
-    height: 120px;
-    margin: 0 auto 1rem;
-    position: relative;
-    border: 8px solid rgba(45, 95, 45, 0.05);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.impact-preview .sep {
+    color: var(--border-tan);
 }
 
-.gauge {
-    font-family: 'Playfair Display', serif;
-    font-size: 1.5rem;
-    color: var(--deep-forest);
+.mission-card {
+    background: #F4F7F9;
+    border: 1px dashed var(--sage-green);
 }
 
-.inventory-grid {
+.guide-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-top: 1rem;
 }
 
-.inv-item {
-    padding: 1rem;
-    background: white;
-    border-radius: 15px;
-    border: 1px solid var(--border-soft);
+.guide-item h4 {
+    color: var(--primary-green);
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+    text-transform: uppercase;
 }
 
-.inv-item .label {
-    display: block;
-    font-size: 0.7rem;
-    text-transform: uppercase;
+.guide-item p, .guide-item li {
+    font-size: 0.85rem;
     color: var(--text-muted);
-    margin-bottom: 0.25rem;
 }
 
-.inv-item .count {
-    font-size: 1.5rem;
-    font-weight: 600;
+.guide-list {
+    padding-left: 1.2rem;
 }
 
-/* Activity Log */
-.log-box {
-    background: #1A1D1A;
-    color: #A0C0A0;
-    padding: 1.5rem;
-    border-radius: 15px;
-    height: 250px;
-    overflow-y: auto;
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 0.85rem;
+.guide-list li {
+    margin-bottom: 0.3rem;
 }
 
-.log-entry { margin-bottom: 0.5rem; }
-.log-entry.error { color: #E76F51; }
-.log-entry.action { color: #88B04B; }
-
-/* Modal Overlay */
+/* Modal & Tutorial Styles */
 .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(45, 95, 45, 0.4);
-    backdrop-filter: blur(8px);
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(4px);
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 2000;
+    z-index: 1000;
+    transition: all 0.3s ease;
 }
 
 .modal-card {
     background: white;
-    padding: 3rem;
-    border-radius: 30px;
-    max-width: 550px;
-    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
+    padding: 2.5rem;
+    border-radius: 20px;
+    max-width: 500px;
+    width: 90%;
+    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
+    border: 1px solid var(--border-tan);
+    animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
-.news-alert {
-    background: #FFF5F2;
-    padding: 1rem;
-    border-radius: 12px;
-    border: 1px solid rgba(231, 111, 81, 0.2);
-    color: var(--danger);
-    font-weight: 600;
-    font-size: 0.9rem;
-    margin-top: 1.5rem;
+@keyframes slideUp {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-/* Utility */
-.hidden { display: none !important; }
+.tutorial-content h2 {
+    font-family: 'Playfair Display', serif;
+    color: var(--deep-forest);
+    margin-bottom: 1rem;
+}
 
-@media (max-width: 1100px) {
-    main { grid-template-columns: 1fr; }
-    .control-panel { position: static; }
+.tutorial-content p {
+    color: var(--text-muted);
+    font-size: 1rem;
+    margin-bottom: 2rem;
 }
+
+.modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.help-circle {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 1px solid var(--sage-green);
+    background: white;
+    color: var(--primary-green);
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 12px;
+    transition: all 0.2s;
+}
+
+.help-circle:hover { background: var(--sage-green); color: white; }
+
+.small { padding: 0.4rem 0.8rem; font-size: 0.75rem; }
+.btn-ghost { background: transparent; color: var(--text-muted); }
+
+/* Day Transition Blur */
+.transitioning {
+    filter: blur(2px);
+    pointer-events: none;
+    transition: filter 0.3s ease;
+}
+
+footer {
+    text-align: center;
+    margin-top: 4rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-tan);
+    color: var(--text-muted);
+    font-size: 0.8rem;
+}
+
+@media (max-width: 768px) {
+    .container { padding: 1rem; }
+}
+
+.action-buttons { display: flex; gap: 0.75rem; }
+.btn-secondary { background-color: var(--sage-green); color: var(--deep-forest); }
+.btn-secondary:hover { background-color: #7AA346; }