/* support_system ops console — one hand-written stylesheet, no framework, no build step. */

:root {
	--ink: #14181f;
	--paper: #f5f6f8;
	--surface: #ffffff;
	--line: #dde1e6;
	--brand: #0f62d6;
	--brand-ink: #ffffff;
	--warn: #a35a00;
	--warn-ink: #ffffff;
	--danger: #b3261e;
	--danger-ink: #ffffff;
	--radius: 6px;
	--shadow: 0 1px 2px rgba(20, 24, 31, 0.06), 0 1px 8px rgba(20, 24, 31, 0.04);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

code, kbd, .mono,
input, select, textarea,
table td, table th {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

table { font-variant-numeric: tabular-nums; }

a { color: var(--brand); }

h1, h2, h3 { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0 0 .5em; }

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

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

/* --- layout shell --- */

.topbar {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.topbar-inner {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 20px;
}

.topbar a { text-decoration: none; font-weight: 600; }
.topbar .topbar-links { display: flex; gap: 16px; align-items: center; font-size: 13px; }
.topbar .topbar-links a { color: var(--ink); opacity: .75; }
.topbar .topbar-links a:hover { opacity: 1; }

.page {
	max-width: 960px;
	margin: 0 auto;
	padding: 24px 20px 64px;
}

.page h1 {
	font-size: 24px;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.back-link {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	opacity: .7;
	text-decoration: none;
	padding: 6px 0 10px;
}

.back-link:hover { opacity: 1; color: var(--brand); }

/* --- panel + mode rail --- */

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 24px;
	margin-bottom: 20px;
	border-top: 4px solid var(--brand);
	position: relative;
}

.panel--write { border-top-color: var(--warn); }
.panel--delete { border-top-color: var(--danger); }

.panel-mode {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 8px;
}

.panel--write .panel-mode { color: var(--warn); }
.panel--delete .panel-mode { color: var(--danger); }

.panel-note {
	font-size: 13px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 10px 14px;
	margin-bottom: 16px;
}

.panel--delete .panel-note {
	border-color: var(--danger);
	color: var(--danger);
}

/* --- forms --- */

.field { margin-bottom: 16px; }

.field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field input[type="color"],
.field input[type="file"],
.field select,
.field textarea {
	width: 100%;
	padding: 8px 10px;
	font-size: 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
}

.field textarea { resize: vertical; }

.field .hint { font-size: 12px; opacity: .65; margin-top: 4px; }

/* --- buttons --- */

.btn {
	display: inline-block;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
	border: 0;
	border-radius: var(--radius);
	background: var(--brand);
	color: var(--brand-ink);
	cursor: pointer;
	text-decoration: none;
}

.btn:hover { filter: brightness(0.92); }
.btn--write { background: var(--warn); color: var(--warn-ink); }
.btn--delete { background: var(--danger); color: var(--danger-ink); }

/* --- result banner --- */

.result {
	border-radius: var(--radius);
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 14px;
	border: 1px solid var(--line);
	background: var(--paper);
}

.result--ok { border-color: #1a7f4b; color: #1a7f4b; background: #eafaf1; }
.result--error { border-color: var(--danger); color: var(--danger); background: #fdecea; }

/* --- tables --- */

.table-scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

table th, table td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	white-space: nowrap;
}

table th {
	background: var(--paper);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

table tr:last-child td { border-bottom: 0; }

/* --- launcher --- */

.filter {
	width: 100%;
	max-width: 360px;
	padding: 9px 12px;
	font-size: 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 24px;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

.tag-chip {
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
}

.tag-chip:hover { border-color: var(--brand); }

.tag-chip.active {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--brand-ink);
}

.card-group { margin-bottom: 28px; }

.card-group h2 {
	font-size: 15px;
	font-weight: 650;
	color: var(--ink);
	margin-bottom: 10px;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.card {
	display: block;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--brand);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
}

.card:hover { border-color: var(--brand); box-shadow: var(--shadow); }

.card-tags { display: block; margin-top: 8px; }

.card-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px 7px;
	margin: 2px 4px 0 0;
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
}

.card-tag--sellershop { background: rgba(15, 98, 214, .12); color: #0f62d6; }
.card-tag--msglowapp  { background: rgba(192, 34, 126, .12); color: #c0227e; }
.card-tag--pgp        { background: rgba(109, 40, 217, .12); color: #6d28d9; }
.card-tag--oem        { background: rgba(15, 118, 110, .12); color: #0f766e; }
.card-tag--system     { background: rgba(75, 85, 99, .12); color: #4b5563; }

.card--write { border-left-color: var(--warn); }
.card--delete { border-left-color: var(--danger); }
.card--external::after {
	content: " ↗";
	opacity: .6;
	font-weight: 400;
}

/* --- login --- */

.auth-shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--paper);
	padding: 20px;
}

.auth-shell .panel { width: 100%; max-width: 360px; margin-bottom: 0; }

/* --- responsive floor --- */

@media (max-width: 600px) {
	.page { padding: 16px 14px 48px; }
	.panel { padding: 16px; }
	.topbar-inner { padding: 10px 14px; }
}