:root {
	--nord0: #2e3440;
	--nord1: #3b4252;
	--nord2: #434c5e;
	--nord3: #4c566a;
	--nord4: #d8dee9;
	--nord5: #e5e9f0;
	--nord6: #eceff4;
	--frost: #8fbcbb;
	--blue: #88c0d0;
	--cyan: #81a1c1;
	--green: #a3be8c;
	--yellow: #ebcb8b;
	--red: #bf616a;
	--panel: rgba(59, 66, 82, 0.82);
	--panel-strong: rgba(46, 52, 64, 0.9);
	--line: rgba(216, 222, 233, 0.16);
	--text: rgba(236, 239, 244, 0.76);
	--text-strong: #eceff4;
	--shadow: 0 24px 70px rgba(15, 17, 22, 0.28);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background:
		linear-gradient(135deg, rgba(46, 52, 64, 0.98), rgba(59, 66, 82, 0.96) 42%, rgba(67, 76, 94, 0.98)),
		var(--nord0);
	color: var(--text);
	font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	margin: 0;
	min-height: 100vh;
}

[hidden] {
	display: none !important;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea {
	font: inherit;
}

button {
	cursor: pointer;
}

code {
	background: rgba(236, 239, 244, 0.07);
	border: 1px solid rgba(216, 222, 233, 0.16);
	border-radius: 6px;
	color: var(--nord6);
	font-family: "Cascadia Mono", "Courier New", monospace;
	font-size: 0.92em;
	padding: 0.14em 0.38em;
}

label {
	color: var(--text-strong);
	display: block;
	font-size: 0.82rem;
	font-weight: 800;
	margin-bottom: 0.45rem;
	text-transform: uppercase;
}

input,
textarea {
	background: rgba(46, 52, 64, 0.72);
	border: 1px solid rgba(216, 222, 233, 0.18);
	border-radius: 8px;
	color: var(--text-strong);
	min-width: 0;
	outline: 0;
	padding: 0.78rem 0.9rem;
	width: 100%;
}

textarea {
	font-family: "Cascadia Mono", "Courier New", monospace;
	line-height: 1.5;
	resize: vertical;
}

input:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
	border-color: rgba(143, 188, 187, 0.78);
	box-shadow: 0 0 0 3px rgba(143, 188, 187, 0.18);
	outline: 0;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1,
h2,
h3 {
	color: var(--text-strong);
	line-height: 1.15;
}

h1 {
	font-size: clamp(2.6rem, 5vw, 4.35rem);
	margin-bottom: 0.5rem;
	text-shadow: 0 16px 42px rgba(15, 17, 22, 0.34);
}

h2 {
	font-size: 1.55rem;
	margin-bottom: 0;
}

h3 {
	font-size: 1.05rem;
	margin-bottom: 0.35rem;
}

.eyebrow,
.section-eyebrow {
	color: var(--frost);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.brand {
	align-items: center;
	color: var(--text-strong);
	display: flex;
	font-weight: 800;
	gap: 0.75rem;
}

.brand-mark {
	align-items: center;
	background: linear-gradient(135deg, var(--cyan), var(--frost));
	border-radius: 8px;
	color: var(--nord0);
	display: inline-flex;
	height: 2.6rem;
	justify-content: center;
	width: 2.6rem;
}

.button {
	align-items: center;
	background: rgba(236, 239, 244, 0.06);
	border: 1px solid rgba(236, 239, 244, 0.24);
	border-radius: 8px;
	color: var(--text-strong);
	display: inline-flex;
	font-size: 0.84rem;
	font-weight: 800;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.65rem 1rem;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}

.button:hover {
	background: rgba(236, 239, 244, 0.1);
	border-color: rgba(143, 188, 187, 0.54);
	transform: translateY(-2px);
}

.button:disabled {
	cursor: not-allowed;
	opacity: 0.42;
	transform: none;
}

.button:disabled:hover {
	background: rgba(236, 239, 244, 0.06);
	border-color: rgba(236, 239, 244, 0.24);
	transform: none;
}

.button.primary {
	background-image: linear-gradient(90deg, var(--cyan), var(--frost));
	border-color: transparent;
	box-shadow: 0 14px 32px rgba(136, 192, 208, 0.2);
	color: var(--nord0);
}

.button.quiet {
	background: transparent;
}

.button.small {
	font-size: 0.74rem;
	min-height: 2.35rem;
	padding: 0.45rem 0.8rem;
}

.button.danger {
	border-color: rgba(191, 97, 106, 0.48);
	color: #ffd9dd;
}

.button.danger:hover {
	background: rgba(191, 97, 106, 0.16);
	border-color: rgba(191, 97, 106, 0.72);
}

.inline-controls {
	align-items: stretch;
	display: flex;
	gap: 0.65rem;
}

.grow {
	flex: 1;
}

.prefixed-input {
	align-items: stretch;
	display: flex;
}

.prefixed-input span {
	align-items: center;
	background: rgba(136, 192, 208, 0.14);
	border: 1px solid rgba(216, 222, 233, 0.18);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	color: var(--frost);
	display: inline-flex;
	font-weight: 800;
	padding: 0 0.82rem;
}

.prefixed-input input {
	border-radius: 0 8px 8px 0;
}

.unlock-screen {
	align-items: center;
	display: grid;
	min-height: 100vh;
	padding: 1.25rem;
	position: relative;
}

.unlock-screen:before {
	background-image:
		linear-gradient(rgba(236, 239, 244, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(236, 239, 244, 0.045) 1px, transparent 1px);
	background-size: 38px 38px;
	content: "";
	inset: 0;
	opacity: 0.34;
	pointer-events: none;
	position: absolute;
}

.unlock-card {
	background:
		linear-gradient(135deg, rgba(59, 66, 82, 0.9), rgba(46, 52, 64, 0.86)),
		var(--nord1);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: var(--shadow);
	margin: 0 auto;
	max-width: 46rem;
	padding: clamp(1.5rem, 4vw, 2.4rem);
	position: relative;
	width: 100%;
}

.unlock-brand {
	margin-bottom: 2rem;
}

.unlock-form {
	display: grid;
	gap: 0.55rem;
	margin-top: 1.4rem;
}

.hero-summary {
	color: rgba(236, 239, 244, 0.74);
	font-size: 1.06rem;
	max-width: 58rem;
}

.flat-note,
.flat-rule,
.form-note {
	color: rgba(236, 239, 244, 0.64);
	font-size: 0.9rem;
	margin: 0.75rem 0 0;
}

.form-note.warning {
	color: var(--yellow);
}

.form-note.ok {
	color: var(--green);
}

.flat-note {
	border-top: 1px solid var(--line);
	margin-top: 1.4rem;
	padding-top: 1rem;
}

.sidebar {
	background:
		linear-gradient(180deg, rgba(59, 66, 82, 0.96), rgba(46, 52, 64, 0.96)),
		var(--nord1);
	border-right: 1px solid var(--line);
	box-shadow: 12px 0 45px rgba(15, 17, 22, 0.24);
	height: 100vh;
	left: 0;
	overflow: auto;
	position: fixed;
	top: 0;
	width: 16rem;
	z-index: 20;
}

.sidebar-inner {
	display: flex;
	flex-direction: column;
	gap: 1.7rem;
	min-height: 100%;
	padding: 2.2rem 1.4rem;
}

.sidebar nav {
	display: grid;
	gap: 0.35rem;
}

.sidebar nav a {
	border-radius: 8px;
	color: rgba(236, 239, 244, 0.58);
	display: block;
	font-size: 0.78rem;
	font-weight: 800;
	padding: 0.78rem 0.9rem;
	text-transform: uppercase;
}

.sidebar nav a:hover {
	background: rgba(136, 192, 208, 0.12);
	box-shadow: inset 3px 0 0 var(--frost);
	color: var(--text-strong);
}

#lockButton {
	margin-top: auto;
	width: 100%;
}

.shell {
	margin-left: 16rem;
	min-height: 100vh;
	padding: 0 0 3rem;
}

.hero {
	background:
		linear-gradient(135deg, rgba(136, 192, 208, 0.12), rgba(163, 190, 140, 0.06), transparent),
		rgba(59, 66, 82, 0.42);
	border-bottom: 1px solid var(--line);
	padding: 5rem min(5vw, 5rem) 3.4rem;
	position: relative;
}

.hero:before {
	background-image:
		linear-gradient(rgba(236, 239, 244, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(236, 239, 244, 0.045) 1px, transparent 1px);
	background-size: 38px 38px;
	content: "";
	inset: 0;
	opacity: 0.34;
	pointer-events: none;
	position: absolute;
}

.hero > * {
	position: relative;
}

.status-strip {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 1.8rem;
	max-width: 62rem;
}

.status-strip > div {
	background: rgba(46, 52, 64, 0.5);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 14px 40px rgba(15, 17, 22, 0.18);
	padding: 0.9rem 1rem;
}

.metric-value {
	color: var(--frost);
	display: block;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.metric-label {
	color: rgba(236, 239, 244, 0.62);
	display: block;
	font-size: 0.78rem;
	text-transform: uppercase;
}

.panel {
	background:
		linear-gradient(135deg, rgba(59, 66, 82, 0.86), rgba(46, 52, 64, 0.78)),
		var(--nord1);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: var(--shadow);
	margin: 1.1rem min(5vw, 5rem) 0;
	padding: 1.5rem;
}

.store-alert {
	align-items: center;
	border-color: rgba(191, 97, 106, 0.52);
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr) auto;
}

.store-alert h2 {
	margin-bottom: 0.5rem;
}

.store-error-text {
	color: #ffd9dd;
	font-family: "Cascadia Mono", "Courier New", monospace;
	font-size: 0.92rem;
	margin-bottom: 0;
	overflow-wrap: anywhere;
}

.section-heading {
	border-bottom: 1px solid var(--line);
	margin: -0.2rem 0 1.35rem;
	padding-bottom: 1rem;
}

.section-heading.compact {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.stack {
	display: grid;
	gap: 0.9rem;
}

.handles-list {
	display: grid;
	gap: 1rem;
	margin-top: 1rem;
}

.handle-card {
	background: rgba(46, 52, 64, 0.42);
	border: 1px solid rgba(216, 222, 233, 0.14);
	border-radius: 8px;
	display: grid;
	gap: 1rem;
	padding: 1rem;
}

.handle-card-header,
.pair-heading {
	align-items: start;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.handle-path {
	color: var(--text-strong);
	font-size: 1.22rem;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 0.25rem;
	overflow-wrap: anywhere;
}

.handle-meta {
	color: rgba(236, 239, 244, 0.62);
	font-size: 0.9rem;
	margin-bottom: 0;
}

.handle-actions,
.row-actions {
	display: flex;
	gap: 0.55rem;
}

.handle-rename-form {
	display: grid;
	gap: 0.55rem;
}

.kv-list {
	display: grid;
	gap: 0.65rem;
}

.kv-header,
.kv-row {
	display: grid;
	gap: 0.65rem;
	grid-template-columns: minmax(9rem, 0.28fr) minmax(14rem, 1fr) minmax(4.5rem, 0.12fr) auto;
}

.kv-header {
	color: rgba(236, 239, 244, 0.56);
	font-size: 0.74rem;
	font-weight: 800;
	padding: 0 0.2rem;
	text-transform: uppercase;
}

.kv-row {
	align-items: start;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 0.2rem;
}

.kv-row textarea {
	min-height: 4.25rem;
}

.kv-row.is-dirty {
	background: rgba(235, 203, 139, 0.08);
	border-color: rgba(235, 203, 139, 0.34);
}

.kv-row.is-invalid {
	background: rgba(191, 97, 106, 0.08);
	border-color: rgba(191, 97, 106, 0.46);
}

.kv-row.add-row {
	grid-template-columns: minmax(9rem, 0.28fr) minmax(14rem, 1fr) auto;
}

.value-type {
	align-items: center;
	background: rgba(136, 192, 208, 0.12);
	border: 1px solid rgba(143, 188, 187, 0.22);
	border-radius: 8px;
	color: var(--frost);
	display: inline-flex;
	font-size: 0.8rem;
	font-weight: 800;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.35rem 0.6rem;
	text-transform: uppercase;
}

.add-pair-form {
	border-top: 1px solid var(--line);
	display: grid;
	gap: 0.65rem;
	padding-top: 1rem;
}

.pair-heading {
	border-top: 1px solid var(--line);
	margin-top: 0.45rem;
	padding-top: 1rem;
}

.pairs-editor {
	display: grid;
	gap: 0.75rem;
}

.pair-row {
	align-items: end;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: minmax(9rem, 0.28fr) minmax(14rem, 1fr) auto;
}

.pair-row label {
	margin-bottom: 0;
}

.pair-row label span {
	display: block;
	margin-bottom: 0.45rem;
}

.empty-state {
	background: rgba(46, 52, 64, 0.42);
	border: 1px dashed rgba(216, 222, 233, 0.24);
	border-radius: 8px;
	color: rgba(236, 239, 244, 0.62);
	padding: 1.5rem;
}

.empty-state.compact {
	padding: 0.95rem;
}

.route-grid {
	display: grid;
	gap: 0.8rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-grid > div {
	background: rgba(46, 52, 64, 0.42);
	border: 1px solid rgba(216, 222, 233, 0.14);
	border-radius: 8px;
	padding: 0.95rem;
}

.route-grid code {
	display: inline-block;
	margin-bottom: 0.45rem;
}

.route-grid span {
	color: rgba(236, 239, 244, 0.64);
	display: block;
	font-size: 0.9rem;
}

.toast {
	background: rgba(46, 52, 64, 0.96);
	border: 1px solid rgba(143, 188, 187, 0.46);
	border-radius: 8px;
	bottom: 1.2rem;
	box-shadow: var(--shadow);
	color: var(--text-strong);
	left: 50%;
	max-width: min(34rem, calc(100vw - 2rem));
	opacity: 0;
	padding: 0.85rem 1rem;
	pointer-events: none;
	position: fixed;
	transform: translate(-50%, 0.7rem);
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 50;
}

.toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

.toast.error {
	border-color: rgba(191, 97, 106, 0.72);
}

.bulk-edit-bar {
	align-items: center;
	background:
		linear-gradient(135deg, rgba(59, 66, 82, 0.98), rgba(46, 52, 64, 0.98)),
		var(--nord1);
	border: 1px solid rgba(143, 188, 187, 0.46);
	border-radius: 8px;
	bottom: 1rem;
	box-shadow: var(--shadow);
	color: var(--text-strong);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	left: calc(16rem + 1rem);
	padding: 0.85rem 1rem;
	position: fixed;
	right: 1rem;
	z-index: 45;
}

.bulk-edit-bar span {
	color: var(--frost);
	font-size: 0.9rem;
	font-weight: 800;
	text-transform: uppercase;
}

.bulk-edit-actions {
	display: flex;
	gap: 0.65rem;
}

.bulk-edit-bar:not([hidden]) ~ .toast {
	bottom: 6.1rem;
}

@media (max-width: 1180px) {
	.sidebar {
		border-bottom: 1px solid var(--line);
		border-right: 0;
		height: auto;
		overflow-x: auto;
		width: 100%;
	}

	.sidebar-inner {
		align-items: center;
		flex-direction: row;
		gap: 1rem;
		justify-content: space-between;
		min-height: 0;
		padding: 0.7rem 1rem;
	}

	.sidebar nav {
		display: flex;
		overflow-x: auto;
	}

	#lockButton {
		margin-top: 0;
		width: auto;
	}

	.shell {
		margin-left: 0;
		padding-top: 4rem;
	}

	.bulk-edit-bar {
		left: 1rem;
	}
}

@media (max-width: 860px) {
	body {
		font-size: 15px;
	}

	.hero,
	.panel {
		margin-left: 1rem;
		margin-right: 1rem;
	}

	.hero {
		margin-left: 0;
		margin-right: 0;
		padding: 3.2rem 1rem 2rem;
	}

	.status-strip,
	.route-grid,
	.kv-header,
	.kv-row,
	.kv-row.add-row,
	.pair-row {
		grid-template-columns: 1fr;
	}

	.kv-header {
		display: none;
	}

	.inline-controls,
	.section-heading.compact,
	.handle-card-header,
	.handle-actions,
	.row-actions,
	.store-alert,
	.pair-heading {
		align-items: stretch;
		flex-direction: column;
	}

	.store-alert {
		grid-template-columns: 1fr;
	}

	.bulk-edit-bar,
	.bulk-edit-actions {
		align-items: stretch;
		flex-direction: column;
	}
}

@media (max-width: 560px) {
	.sidebar-inner {
		align-items: stretch;
		flex-direction: column;
	}

	.sidebar nav a {
		white-space: nowrap;
	}

	.shell {
		padding-top: 8.5rem;
	}

	h1 {
		font-size: 2.35rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*:before,
	*:after {
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}