:root {
    --primary: #2563eb;
    --success: #10b981;
    --danger: #ef4444;
    --dark: #0f172a;
    --gray: #64748b;
    --bg: #f8fafc;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: var(--bg); 
    color: var(--dark);
    display: flex; justify-content: center; padding: 1.5rem;
}

.container { width: 100%; max-width: 550px; }

.calc-card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.07);
}

.header { text-align: center; margin-bottom: 2rem; }
.header h1 { font-size: 1.5rem; font-weight: 800; }
.header h1 span { color: var(--primary); }
.header p { color: var(--gray); font-size: 0.85rem; margin-top: 0.25rem; }

/* Input Styles */
.input-section { display: flex; flex-direction: column; gap: 1.25rem; }
.field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { display: block; font-size: 0.75rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--gray); text-transform: uppercase; }
input, select { 
    width: 100%; padding: 0.8rem; border: 1.5px solid #e2e8f0; 
    border-radius: 0.75rem; font-size: 1rem; font-family: inherit;
}
input:focus { outline: none; border-color: var(--primary); background: #f0f7ff; }

button {
    background: var(--primary); color: white; border: none; padding: 1rem;
    border-radius: 0.75rem; font-weight: 700; cursor: pointer; transition: 0.2s;
}
button:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Results & Badges */
.hidden { display: none; }
.divider { height: 1px; background: #f1f5f9; margin: 2rem 0; }
.badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
.badge-item { padding: 1.25rem; border-radius: 1rem; text-align: center; border: 1px solid transparent; }
.badge-item small { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; opacity: 0.8; }
.badge-item h2 { font-size: 1.4rem; margin: 0.25rem 0; }
.ara { background: #f0fdf4; color: var(--success); border-color: #dcfce7; }
.arb { background: #fef2f2; color: var(--danger); border-color: #fee2e2; }
.tag { font-size: 0.75rem; font-weight: 800; padding: 2px 10px; border-radius: 20px; background: rgba(255,255,255,0.5); }

/* Adaptive Chart & Table */
.visual-wrapper { margin-bottom: 2rem; }
.visual-header { margin-bottom: 1rem; }
.visual-header h3 { font-size: 1rem; }
.visual-header p { font-size: 0.75rem; color: var(--gray); }
.chart-box { 
    position: relative; height: 260px; width: 100%; 
    background: #fafafa; border-radius: 1rem; padding: 10px;
}

.table-container { 
    max-height: 300px; overflow-y: auto; border: 1px solid #f1f5f9; border-radius: 0.75rem;
}
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
th { position: sticky; top: 0; background: #f8fafc; padding: 0.75rem; text-align: left; font-weight: 700; }
td { padding: 0.75rem; border-top: 1px solid #f1f5f9; }

.footer { text-align: center; margin-top: 2rem; font-size: 0.7rem; color: var(--gray); }

@media (max-width: 480px) {
    .calc-card { padding: 1.25rem; }
    .badge-item h2 { font-size: 1.1rem; }
}