.hc-app {
	--hc-primary: #0B54A0;
	--hc-primary-dark: #083E76;
	--hc-bg: #f7f8fa;
	--hc-card: #ffffff;
	--hc-border: #e2e5ea;
	--hc-text: #1f2733;
	--hc-muted: #6b7280;
	--hc-accent: #2891CF;
	max-width: 920px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--hc-text);
	line-height: 1.5;
}

.hc-loading {
	padding: 40px;
	text-align: center;
	color: var(--hc-muted);
}

/* Tabs */
.hc-tabs {
	display: flex;
	gap: 4px;
	background: var(--hc-bg);
	padding: 6px;
	border-radius: 14px 14px 0 0;
	border: 1px solid var(--hc-border);
	border-bottom: none;
}
.hc-tab {
	flex: 1;
	padding: 14px 18px;
	border: none;
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	color: var(--hc-muted);
	cursor: pointer;
	border-radius: 10px;
	transition: all .15s ease;
}
.hc-tab:hover { color: var(--hc-text); }
.hc-tab.is-active {
	background: var(--hc-card);
	color: var(--hc-primary);
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.hc-tab-content {
	background: var(--hc-card);
	border: 1px solid var(--hc-border);
	border-radius: 0 0 14px 14px;
	padding: 24px;
}

/* Inputs */
.hc-inputs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 8px;
}
.hc-field { display: flex; flex-direction: column; gap: 6px; }
.hc-label { font-size: 13px; font-weight: 600; color: var(--hc-muted); }
.hc-note { font-size: 12px; color: var(--hc-accent); font-style: italic; }
.hc-input {
	padding: 10px 12px;
	border: 1px solid var(--hc-border);
	border-radius: 9px;
	font-size: 14px;
	background: #fff;
	color: var(--hc-text);
	width: 100%;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.hc-input:focus {
	outline: none;
	border-color: var(--hc-primary);
	box-shadow: 0 0 0 3px rgba(11,84,160,.15);
}
.hc-input[readonly] { background: #f1f3f5; color: var(--hc-muted); }
.hc-input.hc-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

/* Subtitle */
.hc-subtitle {
	margin: 24px 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--hc-text);
	border-bottom: 2px solid var(--hc-border);
	padding-bottom: 8px;
}

/* Rooms */
.hc-rooms { display: flex; flex-direction: column; gap: 16px; }
.hc-room {
	border: 1px solid var(--hc-border);
	border-radius: 12px;
	padding: 16px;
	background: var(--hc-bg);
}
.hc-room-header {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 12px;
}
.hc-room-name { font-weight: 600; flex: 1; }
.hc-room-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
}
.hc-room-derived { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.hc-chip {
	background: #fff;
	border: 1px solid var(--hc-border);
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 13px;
	color: var(--hc-muted);
}
.hc-chip strong { color: var(--hc-primary); }

/* Buttons */
.hc-btn {
	display: inline-block;
	padding: 12px 20px;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s ease;
}
.hc-btn-add {
	margin-top: 16px;
	background: var(--hc-accent);
	color: #fff;
}
.hc-btn-add:hover { filter: brightness(1.05); }
.hc-btn-remove {
	background: transparent;
	color: #dc2626;
	border: 1px solid #fecaca;
	padding: 8px 14px;
}
.hc-btn-remove:hover { background: #fef2f2; }
.hc-btn-pdf {
	margin-top: 24px;
	background: var(--hc-primary);
	color: #fff;
	width: 100%;
	padding: 16px;
	font-size: 15px;
}
.hc-btn-pdf:hover { background: var(--hc-primary-dark); }
.hc-btn-pdf:disabled { opacity: .6; cursor: wait; }
.hc-btn-secondary {
	margin-top: 16px;
	background: #fff;
	color: var(--hc-text);
	border: 1px solid var(--hc-border);
}
.hc-btn-secondary:hover { background: var(--hc-bg); }

/* Results */
.hc-results { margin-top: 8px; }
.hc-result-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}
.hc-result-card {
	background: linear-gradient(135deg, #eef6ff, #ffffff);
	border: 1px solid var(--hc-border);
	border-radius: 12px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hc-result-label { font-size: 13px; color: var(--hc-muted); font-weight: 600; }
.hc-result-value { font-size: 26px; font-weight: 800; color: var(--hc-primary); }
.hc-result-value small { font-size: 14px; font-weight: 600; color: var(--hc-muted); }
.hc-result-card--highlight {
	border-color: var(--hc-accent, #2891CF);
	box-shadow: 0 0 0 1px rgba(40, 145, 207, 0.25);
}
.hc-result-card--highlight .hc-result-label { color: var(--hc-primary); }

.hc-energy-section { margin-top: 18px; }
.hc-energy-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	background: #fff;
	border: 1px solid var(--hc-border);
	border-radius: 10px;
	overflow: hidden;
}
.hc-energy-table th,
.hc-energy-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--hc-border);
	font-size: 13px;
	text-align: right;
}
.hc-energy-table th:first-child,
.hc-energy-table td:first-child { text-align: left; }
.hc-energy-table th {
	background: #f8fafc;
	color: var(--hc-muted);
	font-weight: 700;
}
.hc-energy-table tbody tr:nth-child(even) { background: #fcfcfd; }
.hc-energy-table .hc-energy-cost {
	font-weight: 800;
	color: var(--hc-primary);
}

.hc-brand-banner {
	background: linear-gradient(90deg, rgba(11,84,160,.12), rgba(40,145,207,.12));
	border: 1px solid rgba(11,84,160,.25);
	color: var(--hc-primary-dark);
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 14px;
}

.hc-boiler-section { margin-top: 18px; }
.hc-boiler-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.hc-boiler-card {
	position: relative;
	display: block;
	background: #fff;
	border: 1px solid var(--hc-border);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	aspect-ratio: 4 / 3;
	background: #fff;
	width: 220px;
	flex: 0 0 220px;
}
.hc-boiler-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: 10px;
	box-sizing: border-box;
}
.hc-boiler-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.70));
}

@media (max-width: 600px) {
	.hc-tab-content { padding: 16px; }
	.hc-result-value { font-size: 22px; }
}