:root {
--bg: #0f172a;
--surface: #111827;
--muted: #334155;
--text: #e5e7eb;
--accent: #22c55e;
--danger: #ef4444;
--card: #0b1220;
--ring: #22c55e33;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: linear-gradient(180deg, #0b1220, #0f172a);
color: var(--text);
}
.accessibility-banner {
background: linear-gradient(135deg, #1e40af, #3b82f6);
color: white;
padding: 12px 16px;
text-align: center;
border-bottom: 2px solid #60a5fa;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
.accessibility-banner p {
margin: 0;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
}
.app-header { padding: 24px 16px; text-align: center; }
.app-header h1 { margin: 0; font-weight: 700; letter-spacing: 0.3px; }
.tagline { margin: 6px 0 0; color: #cbd5e1; }
main { max-width: 800px; margin: 20px auto; padding: 0 12px 80px; }
.card { background: radial-gradient(1200px 500px at 10% -10%, #13223a 0%, transparent 30%), radial-gradient(800px 400px at 100% 120%, #13223a 0%, transparent 40%), var(--card); border: 1px solid #1f2937; border-radius: 16px; padding: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
label { display: grid; gap: 6px; font-weight: 600; color: #cbd5e1; }
input, select { width: 100%; background: #0b1220; color: var(--text); border: 1px solid #1f2937; border-radius: 10px; padding: 10px 12px; outline: none; transition: 0.2s ease; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.results { margin-top: 14px; border-top: 1px dashed #263244; padding-top: 12px; display: grid; gap: 8px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.kpi { background: #0b1220; border: 1px solid #1f2937; padding: 10px; border-radius: 12px; text-align: center; }
.kpi .big { font-size: 20px; font-weight: 700; color: var(--accent); }
.danger { color: var(--danger); }
.app-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 12px; background: rgba(11,18,32,0.8); border-top: 1px solid #1f2937; color: #94a3b8; text-align: center; backdrop-filter: blur(8px); }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr; } }