@layer reset, ui;

@layer reset {
	:where(*, *::before, *::after) {
		box-sizing: border-box;
	}
	
	:where(html) {
		min-block-size: 100%;
		text-size-adjust: none;
	}
	
	:where(body) {
		margin: 0;
		min-block-size: 100vh;
		-webkit-font-smoothing: antialiased;
	}
	
	:where(h1, h2, h3, h4, p) {
		margin-block: 0;
	}
	
	:where(input, textarea, button) {
		font: inherit;
	}
	
	:where(:focus-visible) {
		outline: 3px solid rgb(55 113 255 / .35);
		outline-offset: 3px;
	}
	
	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			animation-duration: .01ms !important;
			transition-duration: .01ms !important;
		}
	}
}

@layer ui {
	:root {
		--ink: #17243a;
		--red: #b94450;
		--blue: #315fce;
		--line: #e4e9f1;
		--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
		--green: #16815d;
		--muted: #748198;
		
		color: var(--ink);
		background: #f4f6fa;
		font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		color-scheme: light;
	}
	
	body {
		padding: 44px 28px 24px;
		font-size: 15px;
		background: radial-gradient(ellipse at 12% 0%, rgb(222 232 255 / .7), transparent 34rem), #f4f6fa;
		line-height: 1.55;
	}
	
	body > header, body > article, body > footer:not(#ui-debug) {
		width: min(100%, 920px);
		margin-inline: auto;
	}
	
	body > header {
		gap: 20px;
		display: flex;
		align-items: center;
		margin-bottom: 30px;
		justify-content: space-between;
		
		h1 {
			margin: 0;
		}
	}
	
	body > footer:not(#ui-debug) {
		gap: 10px;
		color: var(--muted);
		display: flex;
		font-size: .76rem;
		margin-top: 22px;
		align-items: center;
		justify-content: flex-end;
		
		a {
			color: inherit;
			text-decoration: none;
			
			&:hover {
				color: var(--blue);
				text-decoration: underline;
			}
		}
		
		.separator::before {
			width: 1px;
			height: 14px;
			content: "";
			display: block;
			background: #cbd3df;
		}
	}
	
	.brand-logo {
		color: var(--ink);
		display: inline-grid;
		column-gap: 11px;
		align-items: center;
		text-decoration: none;
		grid-template-rows: 25px 15px;
		grid-template-columns: 44px auto;
	}
	
	.brand-icon {
		fill: none;
		width: 44px;
		filter: drop-shadow(0 3px 5px rgb(49 95 206 / .15));
		height: 44px;
		stroke: var(--blue);
		grid-row: 1 / 3;
		stroke-width: 1.7;
		stroke-linecap: round;
		stroke-linejoin: round;
		
		rect {
			fill: rgb(49 95 206 / .08);
			color: var(--blue);
		}
		
		circle {
			fill: var(--blue);
		}
	}
	
	.brand-name {
		font-size: 1.35rem;
		align-self: end;
		font-weight: 800;
		line-height: 1;
		letter-spacing: -.065em;
		
		> span {
			color: var(--blue);
			margin-left: 1px;
		}
	}
	
	.brand-caption {
		color: var(--muted);
		font-size: .56rem;
		align-self: start;
		font-weight: 750;
		line-height: 1.3;
		letter-spacing: .19em;
	}
	
	.device-console {
		width: min(100%, 920px);
		margin-inline: auto;
	}
	
	.eyebrow {
		color: var(--muted);
		font-size: .72rem;
		font-weight: 750;
		letter-spacing: .105em;
		text-transform: uppercase;
	}
	
	.connection-status {
		gap: 9px;
		color: #176b4e;
		border: 1px solid #cdebdc;
		display: inline-flex;
		padding: 8px 12px;
		font-size: .83rem;
		background: #f0fbf5;
		align-items: center;
		font-weight: 650;
		border-radius: 999px;
		
		&.is-inactive {
			color: #a23945;
			background: #fff5f5;
			border-color: #f1d5d8;
		}
	}
	
	.connection-dot {
		width: 8px;
		height: 8px;
		background: #1aa66f;
		box-shadow: 0 0 0 3px rgb(26 166 111 / .12);
		border-radius: 50%;
		
		.is-inactive & {
			background: #cc5963;
			box-shadow: 0 0 0 3px rgb(204 89 99 / .12);
		}
	}
	
	.device-status, .content-panel {
		border: 1px solid var(--line);
		background: #fff;
		box-shadow: 0 12px 32px rgb(25 43 74 / .045);
		border-radius: 16px;
	}
	
	.device-status {
		padding: 23px 26px 20px;
		margin-bottom: 20px;
	}
	
	.content-panel {
		overflow: hidden;
		margin-top: 14px;
	}
	
	.panel-heading {
		gap: 18px;
		cursor: pointer;
		display: flex;
		padding: 16px 23px;
		list-style: none;
		min-height: 76px;
		transition: background-color .15s ease;
		align-items: center;
		justify-content: space-between;
		
		&::-webkit-details-marker {
			display: none;
		}
		
		&:hover {
			background: #f8faff;
		}
	}
	
	.panel-heading-copy {
		gap: 2px;
		display: grid;
		
		strong {
			font-size: 1.02rem;
			letter-spacing: -.02em;
		}
	}
	
	.panel-toggle-label {
		gap: 9px;
		color: var(--blue);
		display: inline-flex;
		font-size: .8rem;
		align-items: center;
		font-weight: 650;
		white-space: nowrap;
		
		&::after {
			width: 8px;
			height: 8px;
			content: "";
			transform: rotate(45deg) translateY(-2px);
			transition: transform .15s ease;
			border-right: 1.5px solid currentColor;
			border-bottom: 1.5px solid currentColor;
		}
	}
	
	.content-panel[open] > .panel-heading {
		border-bottom: 1px solid var(--line);
		
		.panel-toggle-label::after {
			transform: rotate(225deg) translate(-1px, -1px);
		}
	}
	
	.panel-content {
		padding: 0 23px 22px;
	}
	
	.section-title {
		gap: 16px;
		display: flex;
		align-items: center;
		margin-bottom: 19px;
		justify-content: space-between;
		
		h3 {
			font-size: 1.05rem;
			margin-top: 2px;
			letter-spacing: -.02em;
		}
	}
	
	.state-badge {
		color: #176b4e;
		padding: 6px 10px;
		font-size: .77rem;
		background: #eaf8f0;
		font-weight: 700;
		white-space: nowrap;
		border-radius: 7px;
		
		&.is-inactive {
			color: #a23945;
			background: #fff0f0;
		}
	}
	
	.status-details {
		display: grid;
		border-top: 1px solid var(--line);
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
	.status-detail {
		gap: 5px;
		display: grid;
		padding: 16px 14px 0 0;
		
		&:not(:first-child) {
			border-left: 1px solid var(--line);
			padding-left: 18px;
		}
		
		strong {
			font-size: .88rem;
			font-weight: 650;
			overflow-wrap: anywhere;
		}
		
		code {
			font-size: .85em;
			font-family: var(--mono);
		}
	}
	
	.detail-label {
		color: var(--muted);
		font-size: .76rem;
	}
	
	.device-config-form {
		gap: 20px;
		display: grid;
		padding-top: 18px;
		
		.form-field {
			gap: 7px;
			display: grid;
		}
		
		label {
			font-size: .88rem;
			font-weight: 650;
		}
		
		small, label span {
			color: var(--muted);
			font-size: .78rem;
			font-weight: 400;
		}
		
		input[type="text"] {
			color: var(--ink);
			width: 100%;
			border: 1px solid #cbd5e3;
			padding: 9px 12px;
			background: #fff;
			min-height: 44px;
			transition: border-color .15s ease, box-shadow .15s ease;
			border-radius: 8px;
			
			&:focus-visible {
				outline: 0;
				box-shadow: 0 0 0 4px rgb(49 95 206 / .14);
				border-color: var(--blue);
			}
			
			&:user-invalid {
				border-color: var(--red);
			}
		}
		
		.config-form-actions {
			gap: 14px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			
			small {
				font-size: .76rem;
			}
		}
		
		.save-config-button {
			color: #173a7a;
			border: 1px solid #7698e2;
			cursor: pointer;
			padding: 9px 16px;
			font-size: .86rem;
			transform: translateY(0);
			background: linear-gradient(145deg, #dce7ff, #bbd0ff);
			box-shadow: 0 4px 10px rgb(49 95 206 / .12);
			min-height: 42px;
			transition: box-shadow .15s ease, transform .15s ease;
			font-weight: 700;
			border-radius: 8px;
			
			&:hover {
				transform: translateY(-1px);
				background: linear-gradient(145deg, #cbdcff, #a9c2fa);
				box-shadow: 0 6px 14px rgb(49 95 206 / .2);
			}
			
			&:active {
				transform: translateY(0);
				box-shadow: 0 2px 5px rgb(49 95 206 / .14);
			}
		}
		
		.authorization-code-field input {
			width: min(100%, 20ch);
			padding: 12px 14px;
			font-size: 1.3rem;
			max-width: 100%;
			min-height: 58px;
			text-align: center;
			font-family: var(--mono);
			font-weight: 650;
			border-color: #8da9e8;
			border-width: 2px;
			margin-inline: auto;
			letter-spacing: .18em;
		}
		
		.authorization-code-field > label,
		.authorization-code-field > small,
		.authorization-code-field > .field-validation {
			text-align: center;
		}
	}
	
	.field-validation {
		color: #922f3a;
		margin: 0;
		font-size: .8rem;
		font-weight: 600;

		&[hidden] {
			display: none;
		}
	}
	
	.config-section {
		gap: 16px;
		border: 1px solid var(--line);
		display: grid;
		padding: 18px;
		border-radius: 12px;
		
		legend {
			padding: 0 8px;
			font-size: .96rem;
			font-weight: 700;

			label {
				font: inherit;
			}
		}
	}
	
	.network-settings {
		&[hidden] {
			display: none;
		}
	}
	
	.network-mode-options {
		gap: 12px;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
	.network-mode-option {
		gap: 11px;
		border: 1px solid var(--line);
		cursor: pointer;
		display: flex;
		padding: 13px;
		transition: border-color .15s ease, background-color .15s ease;
		align-items: flex-start;
		border-radius: 9px;
		
		&:hover {
			background: #f6f8fd;
			border-color: #aabce2;
		}
		
		&:has(input:checked) {
			background: #f2f6ff;
			box-shadow: 0 0 0 1px var(--blue);
			border-color: var(--blue);
		}
		
		input {
			margin: 4px 0 0;
			accent-color: var(--blue);
		}
		
		span {
			gap: 3px;
			display: grid;
		}
		
		strong {
			font-size: .87rem;
		}
	}
	
	.static-network-fields {
		gap: 16px;
		border: 0;
		display: grid;
		padding: 16px 0 0;
		border-top: 1px solid var(--line);
		
		legend {
			padding: 0 8px 0 0;
			font-size: .84rem;
			font-weight: 650;
		}
		
		&[hidden] {
			display: none;
		}
	}
	
	.network-fields-grid {
		gap: 16px;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
	.network-field--wide {
		grid-column: 1 / -1;
	}
	
	.validation-status {
		color: #76520d;
		padding: 9px 12px;
		font-size: .82rem;
		background: #fff8e8;
		border-radius: 8px;
		
		&.is-valid {
			color: #176b4e;
			background: #eaf8f0;
		}
		
		&.is-invalid {
			color: #922f3a;
			background: #fff2f3;
		}
	}
	
	.config-missing-badge {
		gap: 7px;
		color: #76520d;
		border: 1px solid #f0d49b;
		display: inline-flex;
		padding: 6px 10px;
		font-size: .75rem;
		background: #fff8e8;
		align-items: center;
		font-weight: 700;
		white-space: nowrap;
		border-radius: 999px;
		
		&[hidden] {
			display: none;
		}
	}
	
	.config-missing-icon {
		flex: 0 0 auto;
		color: #fff;
		width: 17px;
		height: 17px;
		display: grid;
		font-size: .68rem;
		background: #c38a1b;
		font-weight: 800;
		place-items: center;
		border-radius: 50%;
	}
	
	.logs-unavailable {
		color: var(--muted);
		padding: 24px 16px;
		text-align: center;
		
		strong {
			color: var(--ink);
			display: block;
			font-size: .9rem;
			margin-bottom: 4px;
		}
		
		p {
			margin: 0;
			font-size: .82rem;
		}
	}
	
	.device-logs {
		margin: 16px 0 0;
		padding: 0;
		list-style: none;
	}
	
	.log-entry {
		gap: 12px;
		display: grid;
		padding: 12px 0;
		font-size: .82rem;
		align-items: baseline;
		border-bottom: 1px solid var(--line);
		grid-template-columns: 155px auto 1fr;
		
		&:last-child {
			border-bottom: 0;
		}
		
		time {
			color: var(--muted);
			font-size: .76rem;
			font-family: var(--mono);
			white-space: nowrap;
		}
		
		p {
			margin: 0;
			overflow-wrap: anywhere;
		}
	}
	
	.log-level {
		color: #43516a;
		width: fit-content;
		padding: 2px 7px;
		font-size: .69rem;
		background: #edf1f7;
		font-weight: 750;
		border-radius: 5px;
		text-transform: uppercase;
	}
	
	.error-message, .message--error, .alert--error {
		color: #922f3a;
		border: 1px solid var(--red);
		padding: 12px 15px;
		font-size: .88rem;
		background: #fff2f3;
		border-radius: 9px;
		
		&:empty {
			display: none;
		}
	}
	
	#ui-debug {
		color: #17243a;
		inset: auto 0 0;
		width: 100vw;
		opacity: .65;
		padding: 8px 18px;
		z-index: 10;
		overflow: hidden;
		position: fixed;
		background: rgb(255 255 255 / .42);
		border-top: 1px solid rgb(118 152 226 / .5);
		box-shadow: 0 18px 60px rgb(10 20 38 / .12);
		max-height: 44px;
		transition: max-height .2s ease, opacity .2s ease, padding .2s ease;
		border-radius: 0;
		backdrop-filter: blur(14px);
		
		&:hover, &:focus-within {
			opacity: 1;
			padding: 18px;
			overflow: auto;
			max-height: min(68vh, 720px);
		}
		
		h3 {
			gap: 8px;
			color: #31507e;
			margin: 0 0 8px;
			display: flex;
			font-size: .72rem;
			align-items: center;
			font-weight: 700;
			letter-spacing: .08em;
			text-transform: uppercase;
		}
		
		pre {
			color: #263750;
			border: 1px solid rgb(118 152 226 / .45);
			margin: 0 0 16px;
			padding: 12px;
			overflow: auto;
			tab-size: 2;
			font-size: .76rem;
			background: rgb(239 244 253 / .62);
			word-break: break-all;
			font-family: var(--mono);
			line-height: 1.55;
			white-space: pre-wrap;
			border-radius: 8px;
			overflow-wrap: anywhere;
		}
		
		pre:last-child {
			margin-bottom: 0;
		}
	}
	
	@media (max-width: 700px) {
		body {
			padding: 25px 16px 20px;
		}
		
		.status-details {
			row-gap: 14px;
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		
		.status-detail {
			padding-top: 13px;
			
			&:nth-child(3) {
				border-left: 0;
				padding-left: 0;
			}
		}
		
		.network-fields-grid {
			grid-template-columns: minmax(0, 1fr);
		}
		
		.network-mode-options {
			grid-template-columns: minmax(0, 1fr);
		}
		
		.config-form-actions {
			align-items: stretch;
			flex-direction: column-reverse;
		}
		
		.save-config-button {
			width: 100%;
		}
	}
	
	@media (max-width: 460px) {
		body {
			padding-inline: 12px;
		}
		
		.connection-status {
			gap: 7px;
			padding: 7px 9px;
			font-size: .72rem;
		}
		
		.device-status {
			padding: 18px 16px;
			margin-bottom: 14px;
		}
		
		.panel-heading {
			padding: 13px 16px;
			min-height: 68px;
		}
		
		.panel-content {
			padding: 0 16px 16px;
		}
		
		.log-entry {
			gap: 6px 10px;
			grid-template-columns: 1fr auto;
			
			p {
				grid-column: 1 / -1;
			}
		}
		
		.status-detail {
			padding-right: 8px;
			
			&:not(:first-child) {
				padding-left: 10px;
			}
			
			strong {
				font-size: .8rem;
			}
		}
		
		.status-detail:nth-child(3) {
			padding-left: 0;
		}
		
		.section-title {
			align-items: flex-start;
		}
		
		.state-badge {
			font-size: .68rem;
		}
		
		.editor-footer {
			gap: 4px;
			align-items: flex-start;
			flex-direction: column;
		}
		
		.validation-status {
			text-align: left;
		}
		
		body > footer:not(#ui-debug) {
			flex-wrap: wrap;
			font-size: .69rem;
			text-align: center;
			justify-content: center;
		}
		
		#ui-debug {
			inset: auto 0 0;
			width: 100vw;
			padding: 8px 14px;
			
			&:hover, &:focus-within {
				padding: 14px;
				max-height: 60vh;
			}
		}
	}
	
	@media (prefers-color-scheme: dark) {
		:root {
			--ink: #e6ecf5;
			--red: #ff929b;
			--blue: #8aabff;
			--line: #344257;
			--green: #67d4a5;
			--muted: #a0aec2;
			
			background: #101722;
			color-scheme: dark;
		}
		
		.device-config-form .save-config-button {
			color: #fff;
			background: linear-gradient(145deg, #4679e8, #244cae);
			box-shadow: 0 4px 10px rgb(49 95 206 / .2);
			border-color: #244cae;
			
			&:hover {
				background: linear-gradient(145deg, #4679e8, #244cae);
				box-shadow: 0 6px 14px rgb(49 95 206 / .28);
			}
			
			&:active {
				box-shadow: 0 2px 5px rgb(49 95 206 / .2);
			}
		}
		
		body {
			background:
				radial-gradient(ellipse at 12% 0%, rgb(48 72 119 / .32), transparent 34rem),
				#101722;
		}
		
		.device-status, .content-panel {
			background: #192435;
			box-shadow: 0 12px 32px rgb(0 0 0 / .18);
		}
		
		.content-panel {
			background: #192435;
		}
		
		.panel-heading:hover {
			background: #202d41;
		}
		
		.config-missing-badge {
			color: #f4d38d;
			background: #382f20;
			border-color: #705b34;
		}
		
		.config-missing-icon {
			color: #282012;
			background: #e0b75f;
		}
		
		.log-level {
			color: #d1dced;
			background: #2b394e;
		}
		
		.connection-status {
			color: #9ce3c0;
			background: #1b352d;
			border-color: #285742;
			
			&.is-inactive {
				color: #ffabb1;
				background: #38262b;
				border-color: #63383f;
			}
			
			.brand-icon rect {
				fill: rgb(138 171 255 / .12);
			}
		}
		
		.state-badge {
			color: #9ce3c0;
			background: #1d3b30;
			
			&.is-inactive {
				color: #ffabb1;
				background: #40282e;
			}
		}
		
		.validation-status.is-invalid,
		.error-message, .message--error, .alert--error {
			color: #ffb4ba;
			background: #3b272d;
			border-color: #704149;
		}
		
		.field-validation {
			color: #ffb4ba;
		}
		
		#ui-debug {
			color: #e6ecf5;
			background: rgb(12 19 30 / .42);
			border-color: #3a4b64;
			
			h3 {
				color: #b7c9e7;
			}
			
			pre {
				color: #e0e9f8;
				background: rgb(11 18 29 / .62);
				border-color: #344257;
			}
		}
		
		.device-config-form input[type="text"] {
			color: var(--ink);
			background: #101a29;
			border-color: #46546a;
		}
		
		.network-mode-option {
			background: #192435;
			
			&:hover {
				background: #202d41;
			}
			
			&:has(input:checked) {
				background: #1d2c49;
			}
		}
		
		.validation-status {
			color: #f4d38d;
			background: #382f20;
			
			&.is-valid {
				color: #9ce3c0;
				background: #1d3b30;
			}
			
			&.is-invalid {
				color: #ffb4ba;
				background: #3b272d;
			}
		}
		
		body > footer:not(#ui-debug) .separator::before {
			background: #435168;
		}
	}
}