* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; background-color: #f9fafb; }
    .container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
    .card { background: white; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); width: 100%; max-width: 56rem; }
    .card-header { padding: 2rem 2rem 1rem; text-align: center; }
    .card-title { font-size: 1.875rem; font-weight: 700; color: #1e1b50; margin-bottom: 0.5rem; }
    .card-subtitle { color: #4a4a4a; font-size: 1rem; }
    .card-content { padding: 0 2rem 2rem; }
    .section { margin-bottom: 2rem; }
    .section-title { font-size: 1.25rem; font-weight: 600; color: #1e1b50; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; margin-bottom: 1.5rem; }
    .form-grid { display: grid; gap: 1.5rem; }
    .form-grid-2 { grid-template-columns: 1fr; }
    @media (min-width: 768px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
    .form-group { display: flex; flex-direction: column; gap: 0.5rem; }
    .label { font-weight: 500; color: #333; font-size: 0.875rem; }
    .input, .select { padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
    .input:focus, .select:focus { outline: none; border-color: #1e1b50; box-shadow: 0 0 0 3px rgba(30, 27, 80, 0.1); }
    .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; }
    .radio-item { display: flex; align-items: center; gap: 0.5rem; }
    .radio-input { width: 1rem; height: 1rem; accent-color: #1e1b50; }
    .predict-btn { width: 100%; padding: 1rem; font-size: 1.125rem; font-weight: 600; color: white; background: linear-gradient(to right, #1e1b50, #a084d6); border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s; margin-top: 1.5rem; }
    .predict-btn:hover { background: linear-gradient(to right, #2a2660, #b094e6); transform: translateY(-1px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

    /* Results Screen */
    .results-card { max-width: 28rem; }
    .results-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
    .results-header { padding: 2rem 2rem 1.5rem; text-align: center; }
    .section-title { text-align: center;}
    .results-content { padding: 0 2rem 2rem; }
    .score-display { text-align: center; margin-bottom: 1.5rem; }
    .score-number { font-size: 3rem; font-weight: 700; color: #1e1b50; margin-bottom: 0.5rem; }
    .score-label { font-size: 0.875rem; color: #6b7280; margin-bottom: 1rem; }
    .progress-bar { width: 100%; height: 0.75rem; background-color: #e5e7eb; border-radius: 0.375rem; overflow: hidden; margin-bottom: 1rem; }
    .progress-fill { height: 100%; background: linear-gradient(to right, #1e1b50, #a084d6); transition: width 0.5s ease; }

    .risk-badge { display: inline-block; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; margin-bottom: 1.5rem; }
    .risk-low { background-color: #dcfce7; color: #166534; }
    .risk-high { background-color: #fee2e2; color: #991b1b; }
    .risk-medium { background-color: #fef3c7; color: #92400e; }

    .risk-message { text-align: center; color: #374151; line-height: 1.6; margin-bottom: 1.5rem; }
    .try-again-btn { display: inline-block; width: 100%; text-align: center; padding: 0.75rem; font-size: 1.125rem; font-weight: 600; color: white; background: linear-gradient(to right, #1e1b50, #a084d6); border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s; text-decoration: none; }
    .try-again-btn:hover { background: linear-gradient(to right, #2a2660, #b094e6); }
    .hidden { display: none; }
    .kv { display: grid; gap: 0.25rem; }
    .kv .k { font-size: 0.75rem; color: #6b7280; }
    .kv .v { font-weight: 600; }