:root{
	color-scheme: dark;
	--bg:#07111f;
	--card:rgba(13,21,39,.95);
	--card-2:rgba(9,16,30,.94);
	--border:rgba(148,163,184,.18);
	--text:#e5edf9;
	--muted:#9aa8bb;
	--accent:#7c8cff;
	--accent-2:#9b59ff;
}

*{box-sizing:border-box}

body{
	margin:0;
	min-height:100vh;
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:var(--text);
	background:
		radial-gradient(circle at top left, rgba(124,140,255,.14), transparent 30%),
		linear-gradient(180deg, #050b16 0%, #07111f 100%);
}

a{color:#a8c7ff;text-decoration:none}
a:hover{text-decoration:underline}

.app{
	width:min(980px, calc(100% - 24px));
	margin:0 auto;
	padding:24px 0 36px;
}

.page-header{
	display:flex;
	justify-content:space-between;
	gap:16px;
	align-items:flex-start;
	margin-bottom:16px;
}

.eyebrow{
	margin:0 0 8px;
	font-size:.78rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:#9fb3ff;
}

h1{
	margin:0;
	font-size:clamp(2rem, 4vw, 3rem);
	line-height:1.05;
}

.lead{
	margin:10px 0 0;
	color:#c4d0e0;
	line-height:1.6;
	max-width:58ch;
}

.back-link{
	padding-top:8px;
	white-space:nowrap;
}

.converter-card,
.seo-content{
	border:1px solid var(--border);
	border-radius:20px;
	background:linear-gradient(180deg, var(--card), var(--card-2));
	box-shadow:0 18px 50px rgba(0,0,0,.28);
	padding:22px;
}

.layout-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:14px;
	align-items:start;
}

.directory-card{
	margin:14px 0;
	border:1px solid var(--border);
	border-radius:20px;
	background:linear-gradient(180deg, var(--card), var(--card-2));
	box-shadow:0 18px 50px rgba(0,0,0,.24);
	padding:22px;
}

.compact-head{margin-bottom:14px}

.directory-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0,1fr));
	gap:10px;
}

.directory-link{
	display:flex;
	flex-direction:column;
	gap:4px;
	padding:14px;
	border-radius:16px;
	border:1px solid rgba(148,163,184,.16);
	background:rgba(255,255,255,.03);
	color:var(--text);
	min-height:72px;
}

.directory-link span{
	font-weight:700;
	font-size:.98rem;
	line-height:1.25;
}

.directory-link small{
	color:var(--muted);
	font-size:.84rem;
}

.links-panel{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.links-card{
	border:1px solid var(--border);
	border-radius:20px;
	background:linear-gradient(180deg, var(--card), var(--card-2));
	box-shadow:0 18px 50px rgba(0,0,0,.24);
	padding:18px;
}

.links-card h3{
	margin:0;
	font-size:1rem;
}

.links-note{
	margin:8px 0 0;
	color:var(--muted);
	line-height:1.5;
}

.links-list{
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-top:14px;
}

.links-list a{
	display:flex;
	flex-direction:column;
	gap:4px;
	padding:12px 13px;
	border-radius:14px;
	border:1px solid rgba(148,163,184,.16);
	background:rgba(255,255,255,.03);
	color:var(--text);
}

.links-list a span{
	font-weight:700;
	font-size:.96rem;
}

.links-list a small{
	color:var(--muted);
	font-size:.84rem;
}

.subtle-card p{margin-top:10px}

.converter-card{margin-bottom:14px}

.card-head{
	display:flex;
	justify-content:space-between;
	gap:16px;
	align-items:flex-start;
	margin-bottom:18px;
}

.card-head h2,
.seo-content h2{
	margin:0;
	font-size:1.18rem;
}

.card-subtitle{
	margin:8px 0 0;
	color:var(--muted);
	line-height:1.5;
}

.toolbar{
	display:flex;
	flex-direction:column;
	gap:14px;
}

.field-group{
	display:flex;
	flex-direction:column;
	gap:7px;
}

.field-group label,
.result-shell label{
	font-size:.88rem;
	font-weight:600;
	color:#bcc8d8;
}

.grow{flex:1 1 220px}

.unit-row,
.action-row{
	display:flex;
	gap:12px;
	align-items:center;
	flex-wrap:wrap;
}

.height-fields{
	display:grid;
	grid-template-columns:minmax(0,1.2fr) minmax(180px,.6fr);
	gap:12px;
}

.swap-label{
	min-width:34px;
	text-align:center;
	font-weight:700;
	color:#aebccc;
}

button,
select,
input,
textarea{
	font:inherit;
	border:1px solid rgba(148,163,184,.22);
	border-radius:12px;
	background:#0b1220;
	color:var(--text);
	padding:12px 14px;
}

button{cursor:pointer}

button:hover,
select:hover,
input:hover,
textarea:hover{border-color:rgba(168,199,255,.45)}

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible{
	outline:3px solid rgba(124,140,255,.24);
	outline-offset:2px;
}

.primary-btn{
	background:linear-gradient(135deg, var(--accent), var(--accent-2));
	border-color:transparent;
	font-weight:700;
}

.secondary-btn{background:rgba(255,255,255,.05)}

.result-shell{
	margin-top:16px;
	padding:0;
	border:0;
	background:transparent;
}

#resultText{
	width:100%;
	min-height:92px;
	margin-top:10px;
	resize:vertical;
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	background:#ffffff;
	color:#111827;
	border-color:#d1d5db;
}

.status,
.help-text{
	margin:12px 0 0;
	color:var(--muted);
	line-height:1.6;
}

.help-text{font-size:.96rem}

.seo-content p{margin:10px 0 0;color:#c4d0e0;line-height:1.65}

.hidden{display:none!important}

@media (max-width: 760px){
	.app{width:min(100%, calc(100% - 18px));padding:16px 0 24px}
	.page-header,
	.card-head{flex-direction:column}
	.layout-grid{grid-template-columns:1fr}
	.directory-grid{grid-template-columns:1fr 1fr}
	.back-link{padding-top:0}
	.height-fields{grid-template-columns:1fr}
	.unit-row{align-items:stretch}
	.swap-label{width:100%}
	.action-row{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));width:100%}
	.action-row button{width:100%}
}

@media (max-width: 560px){
	.directory-grid{grid-template-columns:1fr}
}

@import "../base64-tools/styles.css";