body { 
	margin:0;
	font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif; 
	background:linear-gradient(135deg,#e0f2fe,#eef2ff); 
	min-height:100vh; 
	display:flex; 
	align-items:center; 
	justify-content:center; 
	padding:16px; 
}


.container { 
	background:#fff; 
	width:100%; 
	max-width:560px; 
	padding:32px; 
	border-radius:20px; 
	box-shadow:0 20px 40px rgba(0,0,0,.08); 

}
    h1{
    	text-align:center;
    	font-size:1.6rem;
    	color:#4338ca;
    	margin-bottom:6px
    }

    p.subtitle{
    	text-align:center;
    	font-size:.9rem;
    	color:#6b7280;
    	margin-bottom:12px
    }

    .info-box{
    	background:#f9fafb;
    	border-radius:14px;
    	padding:14px 16px;
    	margin-bottom:16px;
    	font-size:.85rem;
    	color:#374151;
    	line-height:1.5
    }

    .info-box button{
    	background:none;
    	border:none;
    	color:#4f46e5;
    	font-size:.8rem;
    	cursor:pointer;
    	padding:0;
    	margin-top:8px
    }

    .mode-toggle{
    	display:flex;
    	gap:8px;
    	margin-bottom:12px
    }

    .mode-toggle button{
    	flex:1;padding:10px;
    	border-radius:12px;
    	border:1px solid #d1d5db;
    	background:#f9fafb;
    	cursor:pointer;
    	font-size:.85rem
    }

    .mode-toggle button.active{
    	background:#4f46e5;
    	color:#fff;
    	border-color:#4f46e5
    }

    h2{
    	font-size:1rem;
    	color:#374151;
    	margin:18px 0 10px
    }

    label{
    	font-size:.85rem;
    	color:#374151;
    	display:block;
    	margin-bottom:6px
    }

    select,input[type=number]{
    	width:100%;
    	padding:12px;
    	border-radius:12px;
    	border:1px solid #d1d5db;
    	margin-bottom:14px;
    	font-size:.9rem
    }

    button.calculate{width:100%;
    	padding:14px;
    	background:#4f46e5;
    	color:#fff;
    	border:none;
    	border-radius:14px;
    	font-size:1rem;
    	cursor:pointer;
    	margin-top:10px
    }

    .result{
    	margin-top:24px;
    	display:none;
    	text-align:center
    }

    .risk-level{
    	font-size:1.3rem;
    	font-weight:600;
    	margin-bottom:10px
    }

    .progress-bar{
    	background:#e5e7eb;
    	border-radius:999px;
    	overflow:hidden;
    	height:10px;
    	margin-bottom:12px
    }

    .progress-fill{
    	height:100%;
    	width:0;
    	background:linear-gradient(90deg,#38bdf8,#6366f1);
    	transition:width .6s ease
    }

    .recommendations{
    	text-align:left;
    	margin-top:16px;
    	background:#f9fafb;
    	padding:14px;
    	border-radius:12px;
    	font-size:.85rem
    }
    .recommendations ul{
    	padding-left:18px;
    	margin:8px 0 0
    }

    .low{
    	color:#16a34a
    }

    .moderate{
    	color:#ca8a04
    }

    .high{
    	color:#dc2626
    }

    .disclaimer{
    	font-size:.75rem;
    	color:#6b7280;
    	margin-top:10px
    }