*{box-sizing:border-box; margin:0; padding:0;}

/* Theme variables: dark defaults, light overrides below */
:root{
	--bg-grad-1: #0a1628; /* deep navy */
	--bg-grad-2: #132a45; /* bluish */
	--surface: rgba(255,255,255,0.04);
	--card-bg: #0f2438; /* dark card */
	--text-on-surface: #e6f0f6; /* light text */
	--muted: rgba(230,240,247,0.7);
	--accent: #06b6d4; /* cyan accent */
	--accent-2: #8b5cf6; /* purple */
	--success: #10b981; /* green */
	--warning: #f59e0b; /* amber */
	--error: #ef4444; /* red */
	--btn-text: #ffffff;
	--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html, body { height: 100%; margin: 0; overflow: hidden; }

body{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, var(--bg-grad-1), var(--bg-grad-2));
	color: var(--text-on-surface);
	font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
	padding: 0;
}

.container{
	width: min(1200px, 98%);
	height: 94vh;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	backdrop-filter: blur(12px);
	padding: 15px;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(2,6,23,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255,255,255,0.08);
	gap: 0;
	margin-bottom: 8px;
}

.header-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	flex-shrink: 0;
}

.header-left h1 {
	text-align: left;
	margin-bottom: 4px;
	font-size: 28px;
}

.tagline {
	font-size: 12px;
	opacity: 0.7;
	font-weight: 500;
}

.header-right {
	display: flex;
	gap: 8px;
}

.icon-btn {
	background: transparent;
	border: 1.5px solid rgba(255,255,255,0.14);
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
	color: var(--text-on-surface);
	font-size: 18px;
	transition: var(--transition);
}

.icon-btn:hover {
	border-color: rgba(255,255,255,0.3);
	background: rgba(6,182,212,0.1);
	transform: scale(1.05);
}

.topControls{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	margin-bottom:6px;
	flex-shrink: 0;
}

.leftControls{
	display:flex;
	gap:10px;
	flex-wrap: wrap;
}

.tabs{
	display:flex;
	gap:8px;
	margin-bottom:6px;
	overflow-x: auto;
	padding-bottom: 4px;
	flex-shrink: 0;
}

.tabs::-webkit-scrollbar {
	height: 4px;
}

.tabs::-webkit-scrollbar-track {
	background: transparent;
}

.tabs::-webkit-scrollbar-thumb {
	background: rgba(6,182,212,0.3);
	border-radius: 2px;
}

.tab{
	flex-shrink: 0;
	padding:10px 14px;
	border:1.5px solid transparent;
	border-radius:10px;
	cursor:pointer;
	background:transparent;
	color:var(--muted);
	transition: var(--transition);
	font-weight: 500;
	font-size: 13px;
	white-space: nowrap;
}

.tab:hover {
	border-color: rgba(6,182,212,0.3);
	color: var(--accent);
}

.tab.active{
	background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(139,92,246,0.1));
	color:var(--accent);
	border-color: var(--accent);
	box-shadow: 0 6px 20px rgba(6,182,212,0.1);
}

.tabContent{display:none;}
.tabContent.active{display:flex; flex-direction:column; animation: slideIn 0.3s ease; flex: 1; min-height: 0; overflow: hidden;}

#chatTab { flex: 1; min-height: 0; }

@keyframes slideIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ===== CHAT ===== */
.chatbox{
	flex: 1 1 100%;
	min-height: 300px;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	background: rgba(15,36,56,0.6);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 12px;
	gap: 10px;
}

.chatbox::-webkit-scrollbar {
	width: 6px;
}

.chatbox::-webkit-scrollbar-track {
	background: transparent;
}

.chatbox::-webkit-scrollbar-thumb {
	background: rgba(6,182,212,0.2);
	border-radius: 3px;
}

.message{
	margin:0;
	padding:12px 16px;
	border-radius:12px;
	max-width:80%;
	position:relative;
	word-break: break-word;
	overflow-wrap: anywhere;
	animation: messageAppear 0.3s ease;
}

@keyframes messageAppear {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.user{
	background: linear-gradient(135deg, var(--accent), rgba(6,182,212,0.8));
	color: var(--btn-text);
	margin-left: auto;
	box-shadow: 0 4px 12px rgba(6,182,212,0.2);
}

.bot{
	background: rgba(255,255,255,0.06);
	color: var(--text-on-surface);
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.message .ts{
	display: block;
	font-size: 11px;
	opacity: 0.6;
	margin-top: 6px;
}

.message .content {
	white-space: pre-wrap;
	line-height: 1.5;
}

.inputArea{
	display:flex;
	gap:8px;
	align-items: flex-end;
	flex-shrink: 0;
	flex-grow: 0;
	margin-bottom: 0;
}

input[type="text"], input[type="number"], select, textarea {
	flex:1;
	padding:12px;
	border-radius:10px;
	border: 1.5px solid rgba(255,255,255,0.08);
	outline:none;
	background: rgba(255,255,255,0.04);
	color: var(--text-on-surface);
	font-family: inherit;
	font-size: 14px;
	transition: var(--transition);
}

input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(6,182,212,0.1);
	background: rgba(255,255,255,0.06);
}

/* ===== BUTTONS ===== */
.btn-primary {
	padding: 11px 18px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: var(--btn-text);
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	transition: var(--transition);
	box-shadow: 0 4px 12px rgba(6,182,212,0.25);
	white-space: nowrap;
}

.btn-primary:hover{
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(6,182,212,0.35);
}

.btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(6,182,212,0.2);
}

.btn-secondary {
	padding: 10px 14px;
	border: 1.5px solid rgba(6,182,212,0.3);
	border-radius: 10px;
	background: transparent;
	color: var(--accent);
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	transition: var(--transition);
	white-space: nowrap;
}

.btn-secondary:hover {
	background: rgba(6,182,212,0.1);
	border-color: var(--accent);
}

.btn-send {
	padding: 11px 24px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: var(--btn-text);
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	transition: var(--transition);
	white-space: nowrap;
}

.btn-send:hover {
	transform: translateY(-2px);
}

.btn-send:active {
	transform: translateY(0);
}

.btn-voice {
	padding: 11px 14px;
	border: 1.5px solid rgba(6,182,212,0.5);
	border-radius: 10px;
	background: rgba(6,182,212,0.1);
	color: var(--accent);
	cursor: pointer;
	font-weight: 600;
	font-size: 16px;
	transition: var(--transition);
	white-space: nowrap;
}

.btn-voice:hover {
	background: rgba(6,182,212,0.2);
	border-color: var(--accent);
}

.btn-voice.active {
	background: var(--accent);
	color: white;
	box-shadow: 0 0 15px rgba(6,182,212,0.5);
	animation: pulse 1s infinite;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

/* ===== TABS CONTENT ===== */
.symptoms-box, .exercise-box, .profile-box, .tips-box {
	background: rgba(15,36,56,0.6);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 20px;
	color: var(--text-on-surface);
	max-height: calc(95vh - 220px);
	overflow-y: auto;
}

.symptoms-box h2, .exercise-box h2, .profile-box h2, .tips-box h2 {
	margin-bottom: 12px;
	font-size: 22px;
	color: var(--accent);
}

.subtitle {
	font-size: 13px;
	opacity: 0.8;
	margin-bottom: 12px;
	font-weight: 500;
}

.symptom-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.symptom-btn {
	padding: 14px 12px;
	border: 1.5px solid rgba(6,182,212,0.3);
	border-radius: 10px;
	background: rgba(6,182,212,0.08);
	color: var(--accent);
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	transition: var(--transition);
	text-align: center;
}

.symptom-btn:hover {
	background: rgba(6,182,212,0.15);
	border-color: var(--accent);
	transform: translateY(-2px);
}

/* ===== METRICS ===== */
.metrics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	max-height: calc(95vh - 220px);
	overflow-y: auto;
}

.metric-card {
	background: rgba(15,36,56,0.6);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 18px;
	transition: var(--transition);
}

.metric-card:hover {
	border-color: rgba(6,182,212,0.3);
	box-shadow: 0 8px 24px rgba(6,182,212,0.1);
	transform: translateY(-2px);
}

.metric-card h3 {
	font-size: 16px;
	margin-bottom: 14px;
	color: var(--accent);
}

.heightRow {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.heightRow input {
	flex: 1;
}

.heightRow select {
	width: 80px;
}

.result-box {
	background: rgba(6,182,212,0.1);
	border: 1px solid rgba(6,182,212,0.2);
	border-radius: 8px;
	padding: 12px;
	margin-top: 12px;
	font-weight: 600;
	font-size: 13px;
	text-align: center;
	color: var(--accent);
	min-height: 20px;
}

.water-display {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 14px 0;
	min-height: 40px;
}

.water-glass {
	width: 28px;
	height: 40px;
	border: 2px solid var(--accent);
	border-radius: 4px;
	background: rgba(6,182,212,0.2);
	position: relative;
}

.water-glass.filled {
	background: linear-gradient(to top, var(--accent), rgba(6,182,212,0.4));
}

.water-controls {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.exercise-form label {
	display: block;
	margin-top: 12px;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 13px;
	color: var(--muted);
}

.tips-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 14px;
	padding-top: 10px;
}

.tip-card {
	background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(139,92,246,0.06));
	border: 1px solid rgba(6,182,212,0.2);
	border-radius: 10px;
	padding: 16px;
	transition: var(--transition);
	cursor: pointer;
}

.tip-card:hover {
	border-color: var(--accent);
	box-shadow: 0 6px 18px rgba(6,182,212,0.15);
	transform: translateY(-2px);
}

.tip-card h4 {
	color: var(--accent);
	margin-bottom: 8px;
	font-size: 14px;
}

.tip-card p {
	font-size: 13px;
	opacity: 0.9;
	line-height: 1.5;
}

/* ===== PROFILE ===== */
.profile-box h2 {
	margin-bottom: 16px;
}

.form-group {
	margin-bottom: 14px;
}

.form-group label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 13px;
	color: var(--muted);
}

.form-row {
	display: flex;
	gap: 12px;
}

.profile-box textarea {
	resize: vertical;
	min-height: 60px;
	font-family: inherit;
}

#profileSummary {
	line-height: 1.8;
	font-size: 13px;
}

#profileSummary p {
	margin-bottom: 8px;
}

/* ===== EMERGENCY CONTACTS ===== */
.emergency-box, .faq-box {
	background: rgba(15,36,56,0.6);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 20px;
	color: var(--text-on-surface);
	max-height: calc(95vh - 220px);
	overflow-y: auto;
}

.emergency-box h2, .emergency-box h3, .faq-box h2 {
	margin-bottom: 12px;
	font-size: 22px;
	color: var(--accent);
}

.emergency-box h3 {
	font-size: 16px;
	margin-top: 16px;
	margin-bottom: 12px;
}

.emergency-form {
	background: rgba(6,182,212,0.08);
	border: 1px solid rgba(6,182,212,0.2);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 20px;
}

.emergencyContactCard {
	background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(139,92,246,0.06));
	border: 1px solid rgba(6,182,212,0.2);
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: var(--transition);
}

.emergencyContactCard:hover {
	border-color: var(--accent);
	box-shadow: 0 4px 12px rgba(6,182,212,0.1);
}

.contactInfo {
	flex: 1;
}

.contactInfo strong {
	color: var(--accent);
	font-size: 14px;
}

.contactInfo p {
	font-size: 13px;
	opacity: 0.8;
	margin: 4px 0;
}

.contactActions {
	display: flex;
	gap: 8px;
}

.contactActions button {
	padding: 6px 10px;
	font-size: 12px;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	transition: var(--transition);
}

.deleteContactBtn {
	background: rgba(239,68,68,0.2);
	color: #ef4444;
	border: 1px solid rgba(239,68,68,0.3);
}

.deleteContactBtn:hover {
	background: rgba(239,68,68,0.3);
}

/* ===== FAQ ===== */
.faq-list {
	display: grid;
	gap: 12px;
}

.faq-item {
	background: rgba(15,36,56,0.4);
	border: 1px solid rgba(6,182,212,0.2);
	border-radius: 10px;
	padding: 14px;
	cursor: pointer;
	transition: var(--transition);
}

.faq-item:hover {
	border-color: var(--accent);
	background: rgba(6,182,212,0.1);
	transform: translateX(4px);
}

.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	color: var(--accent);
	user-select: none;
}

.faq-icon {
	font-size: 18px;
	transition: var(--transition);
}

.faq-item.active .faq-icon {
	transform: rotate(180deg);
}

.faq-answer {
	display: none;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(6,182,212,0.2);
	font-size: 13px;
	line-height: 1.6;
	opacity: 0.9;
}

.faq-item.active .faq-answer {
	display: block;
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Health Tips Share Button */
.tipShareBtn {
	margin-top: 8px;
	padding: 6px 12px;
	background: rgba(6,182,212,0.15);
	border: 1px solid rgba(6,182,212,0.3);
	border-radius: 6px;
	color: var(--accent);
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	transition: var(--transition);
	display: inline-block;
}

.tipShareBtn:hover {
	background: rgba(6,182,212,0.25);
	border-color: var(--accent);
}

/* ===== RESPONSIVE ===== */
/* Extra Small Devices (Mobile: < 480px) */
@media (max-width: 480px) {
	html, body {
		height: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	body {
		padding: 0;
	}

	.container {
		width: 100%;
		height: 100vh;
		padding: 8px;
		margin-bottom: 0;
		border-radius: 0;
		max-width: 100%;
	}

	.header-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-bottom: 6px;
		margin-bottom: 4px;
	}

	.header-left h1 {
		font-size: 18px;
		margin-bottom: 2px;
	}

	.tagline {
		font-size: 11px;
	}

	.header-right {
		width: 100%;
		justify-content: flex-end;
		gap: 6px;
	}

	.icon-btn {
		padding: 8px 10px;
		font-size: 16px;
	}

	.topControls {
		flex-direction: column;
		gap: 8px;
		margin-bottom: 4px;
	}

	.leftControls {
		width: 100%;
		gap: 6px;
	}

	.leftControls button {
		flex: 1;
		font-size: 12px;
		padding: 8px 10px;
	}

	.tabs {
		gap: 4px;
		margin-bottom: 4px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tab {
		padding: 7px 10px;
		font-size: 11px;
		min-width: 60px;
	}

	.chatbox {
		padding: 10px;
		margin-bottom: 8px;
		min-height: 200px;
	}

	.inputArea {
		gap: 6px;
		margin-bottom: 0;
	}

	.inputArea input,
	.inputArea button {
		padding: 10px;
		font-size: 14px;
	}

	.btn-voice {
		padding: 10px;
		font-size: 14px;
	}

	.btn-send {
		padding: 10px 14px;
		font-size: 14px;
	}

	.message {
		max-width: 95%;
		padding: 10px 12px;
		font-size: 13px;
	}

	.message .ts {
		font-size: 10px;
	}

	.symptoms-box, .exercise-box, .profile-box, .tips-box, .emergency-box, .faq-box {
		padding: 14px;
		max-height: calc(100vh - 160px);
		border-radius: 10px;
	}

	.symptoms-box h2, .exercise-box h2, .profile-box h2, .tips-box h2, .emergency-box h2, .faq-box h2 {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.symptom-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.symptom-btn {
		padding: 10px 8px;
		font-size: 12px;
	}

	.metrics-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.metric-card {
		padding: 14px;
	}

	.metric-card h3 {
		font-size: 14px;
	}

	.form-row {
		flex-direction: column;
		gap: 0;
	}

	.form-group {
		margin-bottom: 10px;
	}

	.form-group label {
		font-size: 12px;
	}

	.form-group input,
	.form-group select,
	.form-group textarea {
		padding: 10px;
		font-size: 14px;
	}

	.tips-container {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.tip-card {
		padding: 12px;
	}

	.tip-card h4 {
		font-size: 13px;
	}

	.tip-card p {
		font-size: 12px;
	}

	.tipShareBtn {
		padding: 5px 10px;
		font-size: 11px;
	}

	.faq-item {
		padding: 12px;
	}

	.faq-question {
		font-size: 13px;
	}

	.faq-answer {
		font-size: 12px;
		margin-top: 10px;
	}

	.emergencyContactCard {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 12px;
	}

	.contactActions {
		width: 100%;
	}

	.deleteContactBtn {
		width: 100%;
	}

	.emergency-form {
		padding: 12px;
	}

	.emergency-form h3 {
		font-size: 14px;
	}

	.footer {
		width: 100%;
		padding: 6px 8px;
		font-size: 9px;
		line-height: 1.2;
		margin-bottom: 0;
	}
}

/* Small Devices (Tablet: 480px - 768px) */
@media (max-width: 768px) and (min-width: 480px) {
	.container {
		width: 100%;
		height: 98vh;
		padding: 10px;
		margin-bottom: 0;
		border-radius: 12px;
	}

	.header-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 6px;
		padding-bottom: 6px;
	}

	.header-left h1 {
		font-size: 20px;
	}

	.tagline {
		font-size: 12px;
	}

	.topControls {
		flex-direction: column;
		gap: 8px;
		margin-bottom: 4px;
	}

	.leftControls {
		width: 100%;
		gap: 8px;
	}

	.leftControls button {
		flex: 1;
	}

	.tabs {
		gap: 6px;
	}

	.tab {
		padding: 8px 12px;
		font-size: 12px;
	}

	.message {
		max-width: 90%;
	}

	.metrics-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.form-row {
		flex-direction: column;
	}

	.symptom-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	.tips-container {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* Medium Devices (Tablet Landscape: 768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
	.container {
		width: min(95vw, 900px);
	}

	.symptoms-box, .exercise-box, .profile-box, .tips-box, .emergency-box, .faq-box {
		max-height: calc(90vh - 200px);
	}

	.metrics-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.tips-container {
		grid-template-columns: repeat(2, 1fr);
	}

	.symptom-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Desktop (> 1024px) */
@media (min-width: 1024px) {
	.tabs {
		gap: 8px;
	}

	.metrics-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.tips-container {
		grid-template-columns: repeat(2, 1fr);
	}

	.symptom-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ===== LIGHT THEME ===== */
body[data-theme="light"]{
	--bg-grad-1: #f0f7ff;
	--bg-grad-2: #ffffff;
	--surface: rgba(10,22,38,0.03);
	--card-bg: #ffffff;
	--text-on-surface: #0a1628;
	--muted: rgba(10,22,38,0.65);
	--accent: #0369a1;
	--btn-text: #ffffff;
	background: linear-gradient(135deg, var(--bg-grad-1), var(--bg-grad-2));
}

body[data-theme="light"] .container {
	box-shadow: 0 20px 60px rgba(10,15,30,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
	background: rgba(255,255,255,0.95);
}

body[data-theme="light"] .header-top {
	border-bottom-color: rgba(10,22,38,0.1);
}

body[data-theme="light"] .icon-btn {
	border-color: rgba(10,22,38,0.15);
	background: rgba(3,105,161,0.05);
}

body[data-theme="light"] .tabs {
	border-bottom-color: rgba(10,22,38,0.1);
}

body[data-theme="light"] .tab {
	color: rgba(10,22,38,0.6);
}

body[data-theme="light"] .tab.active {
	background: rgba(3,105,161,0.1);
	color: var(--accent);
	border-color: var(--accent);
}

body[data-theme="light"] input[type="text"],
body[data-theme="light"] input[type="number"],
body[data-theme="light"] select,
body[data-theme="light"] textarea {
	border-color: rgba(10,22,38,0.15);
	background: rgba(10,22,38,0.03);
	color: var(--text-on-surface);
}

body[data-theme="light"] .chatbox {
	background: rgba(240,247,255,0.5);
	border-color: rgba(10,22,38,0.1);
}

body[data-theme="light"] .bot {
	background: rgba(3,105,161,0.08);
	border-color: rgba(3,105,161,0.15);
}

body[data-theme="light"] .metric-card,
body[data-theme="light"] .symptoms-box,
body[data-theme="light"] .exercise-box,
body[data-theme="light"] .profile-box,
body[data-theme="light"] .tips-box {
	background: rgba(240,247,255,0.6);
	border-color: rgba(10,22,38,0.1);
}

body[data-theme="light"] .symptom-btn {
	border-color: rgba(3,105,161,0.3);
	background: rgba(3,105,161,0.08);
	color: var(--accent);
}

body[data-theme="light"] .tip-card {
	background: rgba(3,105,161,0.05);
	border-color: rgba(3,105,161,0.15);
}

/* ===== FOOTER / LICENSE ===== */
.footer {
	text-align: center;
	padding: 8px 12px;
	background: transparent;
	border-top: none;
	font-size: 10px;
	color: var(--muted);
	font-weight: 500;
	flex-shrink: 0;
	line-height: 1.3;
	width: min(1200px, 98%);
}

.footer p {
	margin: 0;
	letter-spacing: 0.2px;
	word-break: break-word;
}

body[data-theme="light"] .footer {
	background: transparent;
	border-top-color: none;
	color: rgba(10, 22, 38, 0.65);
}