* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; padding: 0; background: #0b1020; color: #e6e9ef; }
header, footer { padding: 16px 20px; background: #0f152b; border-bottom: 1px solid #223; }
header h1 { margin: 0 0 6px; font-size: 20px; }
header p { margin: 0; color: #aab; }
main { padding: 16px 20px; }

#input-section form { display: flex; gap: 8px; align-items: center; }
#input-section input { flex: 1; padding: 10px 12px; border-radius: 6px; border: 1px solid #334; background: #121a37; color: #e6e9ef; }
#input-section button { padding: 10px 12px; border-radius: 6px; border: 1px solid #3a6; background: #1b5e20; color: #e6e9ef; cursor: pointer; }
#input-section button:disabled { opacity: .6; cursor: not-allowed; }
#status { margin-top: 8px; }

.card { background: #0f152b; border: 1px solid #223; border-radius: 8px; padding: 12px; margin-top: 16px; }
.hidden { display: none; }
.muted { color: #aab; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px; padding: 4px 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
pre { background: #0b1020; border: 1px solid #223; padding: 8px; border-radius: 6px; overflow: auto; max-height: 360px; white-space: pre-wrap; }

/* Fixed-size, scrollable HTML content box (both axes) */
#page-html {
	width: 100%;
	height: 420px;              /* fixed height */
	max-height: 420px;
	overflow-x: auto;           /* horizontal scroll */
	overflow-y: auto;           /* vertical scroll */
	white-space: pre;           /* no wrapping so horizontal scroll works */
}

/* Fixed-size iframe for rendered HTML preview (scripts blocked by sandbox) */
#page-rendered {
	width: 100%;
	height: 420px;
	border: 1px solid #223;
	border-radius: 6px;
	background: #0b1020;
}

.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; border: 1px solid #334; background: #141a33; }
.badge.ok { border-color: #3a6; background: #11331a; color: #bdf8bd; }
.badge.warn { border-color: #c96; background: #2b180f; color: #ffd9b3; }
.badge.err { border-color: #d66; background: #2b0f0f; color: #ffc1c1; }
.badge.info { border-color: #69c; background: #0f1e2b; color: #c7e1ff; }

h2 { margin-top: 0; }