Upload 8 files

Dockerfile

@@ -0,0 +1,29 @@
+# Use an official Python runtime as a parent image
+FROM python:3.11-slim
+
+# Set up a new user named "user" with user ID 1000 for security (common for HF Spaces)
+RUN useradd -m -u 1000 user
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the requirements file and install dependencies first (leverages cache)
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code
+COPY --chown=user . .
+
+# Set environment variables
+ENV PYTHONPATH=/app
+ENV PORT=7860
+ENV PYTHONUNBUFFERED=1
+
+# Switch to the "user" user
+USER user
+
+# Hugging Face Spaces expects port 7860
+EXPOSE 7860
+
+# Run the application
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

calculator.py

@@ -0,0 +1,152 @@
+from config import FLOW_RATES, USAGE_PATTERNS, USER_MULTIPLIERS, DRINKING_WATER
+
+def calculate_usage(requirements):
+    """
+    Calculates daily water usage and survival days.
+    
+    IMPORTANT - How effective multipliers work (matching Excel model):
+    - eff_shower/sink = SUM of (count × mult) across all user types
+      → This already encodes total group usage, so NO extra × num_adults needed
+    - eff_toilet      = SUM of all adult counts (toilet mult = 1 for everyone)
+      → Used for display only; toilet formula uses base per-person × 1 event
+    - Toilet daily    = flow × frequency × 1  (base, not scaled by eff_toilet)
+    - Drinking adults = 0.7 × num_adults from CORE PARAMS (not user type total)
+    """
+
+    # ── User type counts (from User Type Distribution) ──────────────────────
+    num_expert   = requirements.get("num_expert", 0)
+    num_typical  = requirements.get("num_typical", 0)
+    num_glamper  = requirements.get("num_glamper", 0)
+
+    # ── Core params ──────────────────────────────────────────────────────────
+    num_adults   = requirements.get("num_adults", num_expert + num_typical + num_glamper)
+    num_children = requirements.get("num_children", 0)
+    climate_mult = requirements.get("climate_mult", 1.0)
+
+    # ── Effective Multipliers (SUM — already encodes all adults) ─────────────
+    #    Excel: Eff Shower = 2×0.6 + 0×1.0 + 1×1.5 = 2.7  (NOT divided by adults)
+    eff_shower_mult = (
+        num_expert  * USER_MULTIPLIERS["expert"]["shower"] +
+        num_typical * USER_MULTIPLIERS["typical"]["shower"] +
+        num_glamper * USER_MULTIPLIERS["glamper"]["shower"]
+    )
+
+    eff_sink_mult = (
+        num_expert  * USER_MULTIPLIERS["expert"]["sink"] +
+        num_typical * USER_MULTIPLIERS["typical"]["sink"] +
+        num_glamper * USER_MULTIPLIERS["glamper"]["sink"]
+    )
+
+    # Toilet mult = 1 for all types → eff_toilet = total adults (display only)
+    eff_toilet_mult = num_expert + num_typical + num_glamper
+
+    # ── Daily Fresh Water Per Activity ───────────────────────────────────────
+
+    # Shower: flow × duration × frequency × eff_shower_mult × climate
+    # (eff_shower_mult already accounts for all adults — no × num_adults)
+    shower_daily = (
+        FLOW_RATES["shower"] *
+        USAGE_PATTERNS["shower"]["duration"] *
+        USAGE_PATTERNS["shower"]["frequency"] *
+        eff_shower_mult *
+        climate_mult
+    )
+
+    # Kitchen Sink: same pattern
+    kitchen_sink_daily = (
+        FLOW_RATES["kitchen_sink"] *
+        USAGE_PATTERNS["kitchen_sink"]["duration"] *
+        USAGE_PATTERNS["kitchen_sink"]["frequency"] *
+        eff_sink_mult *
+        climate_mult
+    )
+
+    # Bathroom Sink: same pattern
+    bathroom_sink_daily = (
+        FLOW_RATES["bathroom_sink"] *
+        USAGE_PATTERNS["bathroom_sink"]["duration"] *
+        USAGE_PATTERNS["bathroom_sink"]["frequency"] *
+        eff_sink_mult *
+        climate_mult
+    )
+
+    # Toilet: base per-person usage only (1.8 gal × 6 flushes × 1 person base)
+    # Excel shows 10.8 regardless of group size in activity table
+    toilet_daily = (
+        FLOW_RATES["toilet"] *
+        USAGE_PATTERNS["toilet"]["frequency"] *
+        1  # base single-person; eff_toilet is display only
+    )
+
+    # Drinking: uses core num_adults (e.g., 2) not user-type total
+    drinking_adults_daily   = DRINKING_WATER["adult"] * num_adults
+    drinking_children_daily = DRINKING_WATER["child"] * num_children
+    total_drinking_daily    = drinking_adults_daily + drinking_children_daily
+
+    # ── Totals ───────────────────────────────────────────────────────────────
+    total_fresh_used_per_day = (
+        shower_daily + kitchen_sink_daily + bathroom_sink_daily +
+        toilet_daily + total_drinking_daily
+    )
+    total_grey_added_per_day  = shower_daily + kitchen_sink_daily + bathroom_sink_daily
+    total_black_added_per_day = toilet_daily
+
+    # ── Tank Levels ──────────────────────────────────────────────────────────
+    fresh_cap   = requirements.get("fresh_cap", 0)
+    grey_cap    = requirements.get("grey_cap", 0)
+    black_cap   = requirements.get("black_cap", 0)
+    fresh_level = requirements.get("fresh_level", 0)
+    grey_level  = requirements.get("grey_level", 0)
+    black_level = requirements.get("black_level", 0)
+
+    # ── Survival Days ────────────────────────────────────────────────────────
+    # Fresh:  runs DOWN  → days until empty
+    # Grey:   fills UP   → days until full
+    # Black:  fills UP   → days until full
+    days_fresh = (fresh_level / total_fresh_used_per_day
+                  if total_fresh_used_per_day > 0 and fresh_level > 0
+                  else 0.0)
+
+    days_grey  = ((grey_cap - grey_level) / total_grey_added_per_day
+                  if total_grey_added_per_day > 0
+                  else float('inf'))
+
+    days_black = ((black_cap - black_level) / total_black_added_per_day
+                  if total_black_added_per_day > 0
+                  else float('inf'))
+
+    overall_survival = min(days_fresh, days_grey, days_black)
+
+    # Limiting factor
+    tank_map = {days_fresh: "Fresh", days_grey: "Grey", days_black: "Black"}
+    limiting_tank = tank_map[min(days_fresh, days_grey, days_black)]
+
+    return {
+        "daily_usage": {
+            "fresh":         round(total_fresh_used_per_day, 2),
+            "grey":          round(total_grey_added_per_day, 2),
+            "black":         round(total_black_added_per_day, 2),
+            "drinking":      round(total_drinking_daily, 2),
+            "shower":        round(shower_daily, 2),
+            "kitchen_sink":  round(kitchen_sink_daily, 2),
+            "bathroom_sink": round(bathroom_sink_daily, 2),
+            "toilet":        round(toilet_daily, 2),
+        },
+        "survival_days": {
+            "fresh":         round(days_fresh, 4),
+            "grey":          round(days_grey, 4),
+            "black":         round(days_black, 4),
+            "overall":       round(overall_survival, 4),
+            "limiting_tank": limiting_tank,
+        },
+        "effective_multipliers": {
+            "shower": round(eff_shower_mult, 3),
+            "sink":   round(eff_sink_mult, 3),
+            "toilet": eff_toilet_mult,
+        },
+        "tanks": {
+            "fresh": {"cap": fresh_cap, "level": fresh_level},
+            "grey": {"cap": grey_cap, "level": grey_level},
+            "black": {"cap": black_cap, "level": black_level}
+        }
+    }

config.py

@@ -0,0 +1,30 @@
+# Water Management System Configuration
+
+# Flow rates (gallons per minute or flushes)
+FLOW_RATES = {
+    "shower": 1.9,
+    "kitchen_sink": 1.5,
+    "toilet": 1.8,  # gallons per flush
+    "bathroom_sink": 1.0
+}
+
+# Durations and frequencies
+USAGE_PATTERNS = {
+    "shower": {"duration": 5, "frequency": 1},
+    "kitchen_sink": {"duration": 3, "frequency": 3},
+    "toilet": {"frequency": 6},
+    "bathroom_sink": {"duration": 0.5, "frequency": 4}
+}
+
+# Multipliers for user types
+USER_MULTIPLIERS = {
+    "expert": {"shower": 0.6, "sink": 0.7},
+    "typical": {"shower": 1.0, "sink": 1.0},
+    "glamper": {"shower": 1.5, "sink": 1.4}
+}
+
+# Drinking water (gallons per day)
+DRINKING_WATER = {
+    "adult": 0.7,
+    "child": 0.35
+}

index.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Off-grid calculator</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Outfit:wght@400;700&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+    <div class="container">
+        <header>
+            <h1>Off-grid calculator</h1>
+            <div class="nav-buttons">
+                <button class="nav-btn">Range Calculator</button>
+                <button class="nav-btn active">Off-Grid Calculator</button>
+            </div>
+        </header>
+
+        <p class="subtitle">Estimates are based on a single charge with a full fuel tank. Actual results will vary by
+            usage and conditions.</p>
+
+        <main class="dashboard-grid">
+            <!-- Configuration Column -->
+            <section class="config-column">
+                <div class="card">
+                    <h2>Number of Travellers</h2>
+                    <div class="input-grid">
+                        <div class="input-group">
+                            <label>Expert Adults</label>
+                            <div class="input-wrapper">
+                                <input type="number" id="num_expert" min="0" value="0">
+                            </div>
+                        </div>
+                        <div class="input-group">
+                            <label>Typical Adults</label>
+                            <div class="input-wrapper">
+                                <input type="number" id="num_typical" min="0" value="1">
+                            </div>
+                        </div>
+                        <div class="input-group">
+                            <label>Glamper Adults</label>
+                            <div class="input-wrapper">
+                                <input type="number" id="num_glamper" min="0" value="0">
+                            </div>
+                        </div>
+                        <div class="input-group">
+                            <label>Children</label>
+                            <div class="input-wrapper">
+                                <input type="number" id="num_children" min="0" value="0">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h2>Tank Capacities (Gallons)</h2>
+                    <div class="input-grid">
+                        <div class="input-group">
+                            <label>Fresh Tank</label>
+                            <div class="input-wrapper">
+                                <input type="number" id="fresh_cap" min="0" value="50">
+                            </div>
+                        </div>
+                        <div class="input-group">
+                            <label>Grey Tank</label>
+                            <div class="input-wrapper">
+                                <input type="number" id="grey_cap" min="0" value="40">
+                            </div>
+                        </div>
+                        <div class="input-group">
+                            <label>Black Tank</label>
+                            <div class="input-wrapper">
+                                <input type="number" id="black_cap" min="0" value="30">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h2>Current Levels (Gallons)</h2>
+                    <div class="input-grid">
+                        <div class="input-group">
+                            <label>Current Fresh</label>
+                            <div class="input-wrapper">
+                                <input type="number" id="fresh_level" min="0" value="50">
+                            </div>
+                        </div>
+                        <div class="input-group">
+                            <label>Current Grey</label>
+                            <div class="input-wrapper">
+                                <input type="number" id="grey_level" min="0" value="0">
+                            </div>
+                        </div>
+                        <div class="input-group">
+                            <label>Current Black</label>
+                            <div class="input-wrapper">
+                                <input type="number" id="black_level" min="0" value="0">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h2>Environment</h2>
+                    <div class="input-grid">
+                        <div class="input-group">
+                            <label>Climate Multiplier</label>
+                            <div class="input-wrapper">
+                                <input type="number" id="climate_mult" min="0.1" step="0.1" value="1.0">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <button id="calculate-btn">Calculate Survival Status</button>
+            </section>
+
+            <!-- Visuals/Results Column -->
+            <section class="visuals-column">
+                <div class="card">
+                    <div class="usage-bars">
+                        <div class="bar-item">
+                            <div class="bar-info">
+                                <span>FRESH WATER USAGE</span>
+                                <span id="val-fresh">0.00 gal</span>
+                            </div>
+                            <div class="bar-track">
+                                <div id="fill-fresh" class="bar-fill"></div>
+                            </div>
+                        </div>
+                        <div class="bar-item">
+                            <div class="bar-info">
+                                <span>GREY WATER ADDED</span>
+                                <span id="val-grey">0.00 gal</span>
+                            </div>
+                            <div class="bar-track">
+                                <div id="fill-grey" class="bar-fill"></div>
+                            </div>
+                        </div>
+                        <div class="bar-item">
+                            <div class="bar-info">
+                                <span>BLACK WATER ADDED</span>
+                                <span id="val-black">0.00 gal</span>
+                            </div>
+                            <div class="bar-track">
+                                <div id="fill-black" class="bar-fill"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="projection-section">
+                        <h2>Tank Projection</h2>
+                        <table class="projection-table">
+                            <thead>
+                                <tr>
+                                    <th>Resource</th>
+                                    <th>Capacity</th>
+                                    <th>Current Level</th>
+                                    <th>Daily Change</th>
+                                    <th>Days Off-Grid</th>
+                                </tr>
+                            </thead>
+                            <tbody id="projection-body">
+                                <!-- Populated via JS -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div class="summary-visual">
+                    <!-- Standard high-quality placeholder if generation failed -->
+                    <img src="https://images.unsplash.com/photo-1523987355523-c7b5b0dd90a7?auto=format&fit=crop&q=80&w=1200"
+                        alt="Expedition Vehicle">
+                    <div class="summary-overlay">
+                        <div class="overall-stat">
+                            <div class="stat-box">
+                                <h4>Daily Power Usage</h4>
+                                <p>0.0 <span style="font-size: 0.8rem; color: var(--text-dim);">kWh</span></p>
+                            </div>
+                            <div class="stat-box">
+                                <h4>Daily Water Usage</h4>
+                                <p id="daily-water-total">0.0 <span
+                                        style="font-size: 0.8rem; color: var(--text-dim);">gallons</span></p>
+                            </div>
+                        </div>
+                        <div class="survival-big">
+                            <h3>Off-Grid Duration</h3>
+                            <span id="overall-days-big">--</span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <footer style="margin-top: 4rem; text-align: center; color: var(--text-dim); font-size: 0.8rem;">
+            &copy; 2026 Water Intelligence Systems &bull; Smart Resource Management
+        </footer>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>

main.py

@@ -0,0 +1,64 @@
+from fastapi import FastAPI, HTTPException
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from pydantic import BaseModel
+import os
+import logging
+from calculator import calculate_usage
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = FastAPI(title="Water Intelligence Management System")
+
+# Pydantic model for request validation
+class CalculationRequirements(BaseModel):
+    num_expert: int = 0
+    num_typical: int = 0
+    num_glamper: int = 0
+    num_children: int = 0
+    fresh_cap: float = 0
+    grey_cap: float = 0
+    black_cap: float = 0
+    fresh_level: float = 0
+    grey_level: float = 0
+    black_level: float = 0
+    climate_mult: float = 1.0
+
+@app.post("/calculate")
+async def calculate(requirements: CalculationRequirements):
+    try:
+        results = calculate_usage(requirements.model_dump())
+        return results
+    except Exception as e:
+        logger.error(f"Calculation error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+# Setup paths - everything is now in the root
+current_dir = os.path.dirname(os.path.abspath(__file__))
+
+logger.info(f"Current directory: {current_dir}")
+logger.info(f"Contents of directory: {os.listdir(current_dir)}")
+
+# Serve specific static files to avoid exposing the whole directory
+@app.get("/script.js")
+async def get_js():
+    return FileResponse(os.path.join(current_dir, "script.js"))
+
+@app.get("/style.css")
+async def get_css():
+    return FileResponse(os.path.join(current_dir, "style.css"))
+
+@app.get("/")
+async def read_root():
+    index_file = os.path.join(current_dir, "index.html")
+    if os.path.exists(index_file):
+        return FileResponse(index_file)
+    logger.error(f"index.html NOT found at {index_file}")
+    return {"message": "index.html not found", "path": index_file}
+
+if __name__ == "__main__":
+    import uvicorn
+    port = int(os.environ.get("PORT", 7860))
+    uvicorn.run(app, host="0.0.0.0", port=port, forwarded_allow_ips='*')

requirements.txt

@@ -0,0 +1,4 @@
+fastapi
+uvicorn
+pydantic
+aiofiles

script.js

@@ -0,0 +1,87 @@
+document.getElementById('calculate-btn').addEventListener('click', async () => {
+    const requirements = {
+        num_expert: parseInt(document.getElementById('num_expert').value) || 0,
+        num_typical: parseInt(document.getElementById('num_typical').value) || 0,
+        num_glamper: parseInt(document.getElementById('num_glamper').value) || 0,
+        num_children: parseInt(document.getElementById('num_children').value) || 0,
+        fresh_cap: parseFloat(document.getElementById('fresh_cap').value) || 0,
+        grey_cap: parseFloat(document.getElementById('grey_cap').value) || 0,
+        black_cap: parseFloat(document.getElementById('black_cap').value) || 0,
+        fresh_level: parseFloat(document.getElementById('fresh_level').value) || 0,
+        grey_level: parseFloat(document.getElementById('grey_level').value) || 0,
+        black_level: parseFloat(document.getElementById('black_level').value) || 0,
+        climate_mult: parseFloat(document.getElementById('climate_mult').value) || 1.0
+    };
+
+    try {
+        const response = await fetch('calculate', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requirements)
+        });
+
+        if (!response.ok) {
+            throw new Error('Calculation failed');
+        }
+
+        const data = await response.json();
+        updateUI(data);
+    } catch (error) {
+        console.error('Error:', error);
+        alert('An error occurred while calculating. Please check your inputs.');
+    }
+});
+
+function updateUI(data) {
+    // Overall Stats
+    const overallDays = data.survival_days.overall;
+    const overallDisplay = document.getElementById('overall-days-big');
+    overallDisplay.innerText = overallDays === Infinity ? 'Unlimited' : (overallDays > 999 ? '999+' : overallDays.toFixed(1));
+
+    document.getElementById('daily-water-total').innerHTML = `${data.daily_usage.fresh.toFixed(1)} <span style="font-size: 0.8rem; color: var(--text-dim);">gallons</span>`;
+
+    // Usage Bars (Animate based on % of capacity used daily, capped at 100%)
+    const freshUsagePct = Math.min((data.daily_usage.fresh / (data.tanks.fresh.cap || 1)) * 100, 100);
+    const greyAddedPct = Math.min((data.daily_usage.grey / (data.tanks.grey.cap || 1)) * 100, 100);
+    const blackAddedPct = Math.min((data.daily_usage.black / (data.tanks.black.cap || 1)) * 100, 100);
+
+    animateBar('fill-fresh', freshUsagePct);
+    animateBar('fill-grey', greyAddedPct);
+    animateBar('fill-black', blackAddedPct);
+
+    document.getElementById('val-fresh').innerText = `${data.daily_usage.fresh.toFixed(2)} gal`;
+    document.getElementById('val-grey').innerText = `${data.daily_usage.grey.toFixed(2)} gal`;
+    document.getElementById('val-black').innerText = `${data.daily_usage.black.toFixed(2)} gal`;
+
+    // Populate Table
+    const tableBody = document.getElementById('projection-body');
+    tableBody.innerHTML = '';
+
+    const sortedResources = [
+        { name: 'Fresh', cap: data.tanks.fresh.cap, level: data.tanks.fresh.level, change: -data.daily_usage.fresh, days: data.survival_days.fresh },
+        { name: 'Grey', cap: data.tanks.grey.cap, level: data.tanks.grey.level, change: data.daily_usage.grey, days: data.survival_days.grey },
+        { name: 'Black', cap: data.tanks.black.cap, level: data.tanks.black.level, change: data.daily_usage.black, days: data.survival_days.black }
+    ];
+
+    sortedResources.forEach(res => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${res.name}</td>
+            <td>${res.cap}</td>
+            <td>${res.level.toFixed(1)}</td>
+            <td style="color: ${res.change > 0 ? '#ff4444' : '#00ff00'}">${res.change > 0 ? '+' : ''}${res.change.toFixed(2)}</td>
+            <td>${res.days === Infinity ? '∞' : res.days.toFixed(1)}</td>
+        `;
+        tableBody.appendChild(row);
+    });
+}
+
+function animateBar(id, pct) {
+    const bar = document.getElementById(id);
+    bar.style.width = '0%';
+    setTimeout(() => {
+        bar.style.width = `${pct}%`;
+    }, 50);
+}

style.css

@@ -0,0 +1,280 @@
+:root {
+    --primary-color: #00ff00;
+    --bg-dark: #0a0a0a;
+    --card-bg: #1a1a1a;
+    --text-main: #ffffff;
+    --text-dim: #888888;
+    --border-color: #333333;
+    --accent-glow: rgba(0, 255, 0, 0.2);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    line-height: 1.6;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+header {
+    margin-bottom: 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+header h1 {
+    font-family: 'Outfit', sans-serif;
+    font-size: 3.5rem;
+    color: var(--primary-color);
+    letter-spacing: -2px;
+}
+
+.nav-buttons {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.nav-btn {
+    background: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-dim);
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.nav-btn.active {
+    background: var(--card-bg);
+    color: var(--text-main);
+    border-color: var(--text-main);
+}
+
+.subtitle {
+    color: var(--text-dim);
+    font-size: 0.9rem;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+}
+
+.config-column {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    padding: 1.5rem;
+    border-radius: 4px;
+}
+
+.card h2 {
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    margin-bottom: 1rem;
+    letter-spacing: 1px;
+}
+
+.input-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.input-group label {
+    font-size: 0.75rem;
+    color: var(--text-dim);
+    text-transform: uppercase;
+}
+
+.input-wrapper {
+    display: flex;
+    align-items: center;
+    background: #111;
+    border: 1px solid var(--border-color);
+    padding: 0.5rem;
+    border-radius: 4px;
+}
+
+.input-wrapper input {
+    background: transparent;
+    border: none;
+    color: white;
+    font-size: 1.2rem;
+    width: 100%;
+    outline: none;
+}
+
+#calculate-btn {
+    margin-top: 1rem;
+    background: var(--primary-color);
+    color: black;
+    border: none;
+    padding: 1rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: filter 0.3s;
+}
+
+#calculate-btn:hover {
+    filter: brightness(1.2);
+}
+
+/* Results Column */
+.visuals-column {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.usage-bars {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.bar-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.bar-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.8rem;
+}
+
+.bar-track {
+    height: 4px;
+    background: #222;
+    width: 100%;
+    border-radius: 2px;
+}
+
+.bar-fill {
+    height: 100%;
+    background: var(--primary-color);
+    width: 0%;
+    transition: width 1s ease-out;
+}
+
+.projection-section {
+    margin-top: 1rem;
+}
+
+.projection-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.85rem;
+}
+
+.projection-table th {
+    text-align: left;
+    color: var(--text-dim);
+    padding: 0.5rem 0;
+    font-weight: normal;
+}
+
+.projection-table td {
+    padding: 0.75rem 0;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.summary-visual {
+    position: relative;
+    background: #111;
+    border-radius: 4px;
+    overflow: hidden;
+    aspect-ratio: 16/10;
+}
+
+.summary-visual img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.6;
+}
+
+.summary-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+}
+
+.overall-stat {
+    display: flex;
+    gap: 2rem;
+}
+
+.stat-box h4 {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    color: var(--text-dim);
+}
+
+.stat-box p {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.survival-big {
+    margin-top: auto;
+}
+
+.survival-big h3 {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    color: var(--text-dim);
+}
+
+.survival-big span {
+    font-size: 4rem;
+    display: block;
+    line-height: 1;
+    font-weight: 800;
+}
+
+@media (max-width: 900px) {
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+}