:root{
	--maxw: 1200px;
	--pad: 14px;
	--r: 14px;

	--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	--sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

	--bg0: rgb(8,8,10);
	--bg1: rgba(14,14,18,.62);
	--bg2: rgba(18,18,22,.45);
	--ink: rgb(210,210,210);
	--mut: rgb(140,140,140);
	--line: rgba(80,80,85,.28);
	--acc: rgba(120,120,120,.35);
	--glass: rgba(10,10,12,.55);
	--ov: rgba(0,0,0,.68);
	--imgdim: .55;

	/* normalized aliases */
	--bg: var(--bg0);
	--fg: var(--ink);
	--fg2: var(--mut);
	--glass2: var(--bg2);
	--btn-bg: var(--bg2);
	--inp-bg: var(--bg2);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
	margin:0;
	min-height:100vh;
	background: var(--bg0);
	color: var(--ink);
	font-family: var(--sans);
}

a{ color:inherit; }
button,input{ font:inherit; }

.wrap{
	width: min(95vw, var(--maxw));
	margin: 0 auto;
	padding: 0 var(--pad);
}

.card{
	background: var(--bg1);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 12px;
}

.bar{
	display:flex;
	justify-content:flex-end;
	gap: 8px;
	margin-bottom: 10px;
}

.base_btn{
	border: 1px solid var(--acc);
	background: var(--btn-bg);
	color: var(--ink);
	padding: 8px 10px;
	border-radius: 12px;
	cursor: pointer;
}

.base_btn_i{
	width: 40px;
	height: 40px;
	padding: 0;
	display:grid;
	place-items:center;
}

.base_btn_ring{
	border-radius: 999px;
	border: 3px dashed var(--acc);
	background: var(--bg2);
}

.base_inp{
	width: 100%;
	border: 1px solid var(--acc);
	background: var(--inp-bg);
	color: var(--ink);
	padding: 10px 12px;
	border-radius: 12px;
	outline:none;
	font-family: var(--mono);
	font-size: 14px;
}

.dlg{
	width: min(760px, 96vw);
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--bg1);
	color: var(--ink);
	box-shadow: 0 20px 80px var(--ov);
	padding: 0;
}

.dlg::backdrop{ background: var(--ov); }

.dlg_h{
	padding: 12px;
	border-bottom: 1px solid var(--line);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 10px;
	background: var(--bg1);
}

.dlg_b{ padding: 12px; }

.dlg_f{
	padding: 12px;
	border-top: 1px solid var(--line);
	display:flex;
	justify-content:flex-end;
	gap: 8px;
}

.p_m{ color: var(--mut); font-family: var(--mono); font-size: 12px; }


/* visibility toggles */
[hidden]{display:none !important;}