* { box-sizing: border-box; }
:root{
	--bg: #f6f7fb;
	--text: #222;
	--app-bg: #fff;
	--muted: #666;
	--panel: #fafafa;
	--border: #eee;
	--primary: #4b2cc3;
	--accent-soft: #e9e9ff;
	--code-bg: #f8f9fb;
}
@media (prefers-color-scheme: dark){
	:root{
		--bg: #0b0d10;
		--text: #e6e6e6;
		--app-bg: #0f1113;
		--muted: #9aa0a6;
		--panel: #0b0d10;
		--border: #1a1d21;
		--primary: #7a6af8;
		--accent-soft: #1a1730;
		--code-bg: #0f1113;
	}
}
html[data-theme='dark']{
	--bg: #0b0d10;
	--text: #e6e6e6;
	--app-bg: #0f1113;
	--muted: #9aa0a6;
	--panel: #0b0d10;
	--border: #1a1d21;
	--primary: #7a6af8;
	--accent-soft: #1a1730;
	--code-bg: #0f1113;
}

body { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; background:var(--bg); color:var(--text); }
.app { max-width:980px; margin:28px auto; background:var(--app-bg); border-radius:12px; box-shadow:0 6px 20px rgba(20,20,40,0.06); overflow:hidden }
.top { padding:24px 32px; border-bottom:1px solid var(--border) }
.top h1 { margin:0; font-size:20px; color:var(--primary) }
main { display:flex; gap:24px; padding:20px; align-items:stretch }
.controls { width:320px; padding:20px }
.tabs { display:flex; gap:8px; margin-bottom:12px }
.tabs button { padding:8px 12px; border-radius:8px; border:1px solid transparent; background:var(--panel); cursor:pointer }
.tabs button.active { background:var(--primary); color:#fff }
.tabs { align-items:center }
.form label { display:block; margin-bottom:10px; font-size:13px }
.form input { width:100%; padding:8px; border-radius:8px; border:1px solid var(--border) }
.form fieldset { border:1px solid #eee; padding:10px; border-radius:8px; margin-bottom:10px }
.form .checkboxes { display:flex; flex-direction:column; gap:6px }
.form .checkboxes label { font-size:13px }
.csv-sugg { display:flex; gap:8px; align-items:center }
.csv-sugg button { padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--app-bg); cursor:pointer }
.csv-common-list { margin-top:8px; padding:8px; border:1px solid var(--border); border-radius:8px; background:var(--app-bg); max-height:220px; overflow:auto }
.csv-common-list .csv-item { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; margin-bottom:6px }
.csv-common-list .csv-item span { display:inline-block; width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.csv-common-list .csv-item input[type="checkbox"] { flex:0; margin-left:8px }
.csv-common-actions { display:flex; gap:8px; margin-top:8px }
.csv-common-actions button { padding:6px 8px; border-radius:8px; border:none; cursor:pointer }
.csv-common-actions #csvAddSelected { background:var(--primary); color:#fff }
.csv-common-actions #csvClearSelected { background:var(--panel) }
.actions { display:flex; gap:8px; margin-top:8px }
.actions button { padding:8px 12px; border-radius:8px; border:none; cursor:pointer }
.actions #build { background:var(--primary); color:#fff }
.actions #open { background:var(--accent-soft) }
.output { flex:1 1 460px; padding:12px; display:flex; flex-direction:column }
.doc { width:100%; border-radius:8px; padding:12px; border:1px solid var(--border); font-family:monospace; white-space:pre-wrap; overflow:auto; flex:1 }
.btn { display:inline-block; padding:10px 16px; background:var(--primary); color:#fff; border-radius:8px; text-decoration:none }
.btn:hover { opacity:0.95 }

pre { background:var(--code-bg); padding:12px; border-radius:8px; overflow:auto; white-space:pre-wrap; word-break:break-word }
pre code { white-space:inherit }
.about { background:var(--panel); border-radius:8px; padding:20px; margin-top:0; flex:1; color:var(--text) }
.about h2 { margin-top:0; color:var(--primary) }
.about p { margin:8px 0; line-height:1.45 }

footer { background:var(--panel); border-top:1px solid var(--border); padding:12px 24px }
.footer-inner { display:flex; justify-content:space-between; align-items:center; max-width:980px; margin:0 auto }
.footer-right a { margin-left:12px; color:var(--primary); text-decoration:none }
.footer-right a:hover { text-decoration:underline }
.footer-left small { color:var(--muted) }

/* Theme toggle in footer-left */
.theme-toggle { background:transparent; border:1px solid var(--border); padding:8px; border-radius:8px; color:var(--text); display:inline-flex; align-items:center; gap:6px; cursor:pointer }
.theme-toggle .icon { display:inline-flex; align-items:center; justify-content:center }
.theme-toggle .icon svg { display:block; color:var(--primary); }
/* show sun in light, moon in dark */
.theme-toggle .moon { display:none }
html[data-theme='dark'] .theme-toggle .sun { display:none }
html[data-theme='dark'] .theme-toggle .moon { display:inline-flex }