:root {
    --primary: #2563eb;
    --bg-color: #f1f5f9;
    --card-bg: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #cbd5e1;
    --success: #10b981;
    --danger: #ef4444;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
}

body { 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    padding: 0.5rem; /* Tight padding for mobile */
    font-size: 16px; /* Prevents iOS auto-zoom */
}

.title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.container { 
    max-width: 600px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
}

.card { 
    background: var(--card-bg); 
    padding: 0.75rem; 
    border-radius: 8px; 
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); 
}

.row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.form-group { flex: 1; }
.form-group.full-width { margin-bottom: 0.5rem; }

label { 
    display: block; 
    font-size: 0.75rem; 
    font-weight: 600; 
    margin-bottom: 0.25rem; 
    color: var(--text-muted); 
    text-transform: uppercase;
}

input, select { 
    width: 100%; 
    padding: 0.5rem; 
    border: 1px solid var(--border-color); 
    border-radius: 6px; 
    font-size: 1rem; 
    background: #fff;
    appearance: none; /* Smooths out default mobile styling */
}

input:focus, select:focus { 
    outline: none; 
    border-color: var(--primary); 
}

.input-wrapper { position: relative; }
.prefix { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.9rem;}
.suffix { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.9rem;}
.has-prefix input { padding-left: 1.5rem; }
.has-suffix input { padding-right: 1.5rem; }

.results { 
    background: var(--primary); 
    color: white; 
}

.highlight-row { margin-bottom: 0; }

.result-box { 
    flex: 1;
    background: rgba(255, 255, 255, 0.1); 
    padding: 0.75rem; 
    border-radius: 6px; 
    text-align: center; 
}

.liability-box { background: rgba(0, 0, 0, 0.2); }

.result-label { 
    font-size: 0.7rem; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    opacity: 0.9; 
}

.result-value { 
    font-size: 1.25rem; 
    font-weight: bold; 
    margin-top: 0.15rem; 
}

.table-container { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 0.75rem; 
    font-size: 0.75rem; /* Small enough for all columns to fit without scrolling */
}

.table-container th, .table-container td { 
    padding: 0.4rem 0.2rem; 
    text-align: right; /* Aligning numbers to the right is easier to read */
    border-bottom: 1px solid rgba(255,255,255,0.2); 
}

.table-container th:first-child, .table-container td:first-child { 
    text-align: left; 
}

.table-container th { 
    font-weight: 600; 
    opacity: 0.9; 
}

.profit { color: #34d399; font-weight: bold; }
.loss { color: #fca5a5; font-weight: bold; }