/* ─── Светлая тема (по умолчанию) ──────────────────────────── */
:root {
	--bg:            #f5f7fa;
	--surface:       #ffffff;
	--shadow:        0 2px 8px rgba(0, 0, 0, 0.08);
	--text:          #333333;
	--text-muted:    #888888;
	--text-label:    #666666;
	--border:        #eeeeee;
	--border-input:  #dddddd;
	--th-bg:         #f8fafc;
	--th-text:       #666666;
	--accent:        #2563eb;
	--accent-hover:  #1d4ed8;
	--accent-focus:  rgba(37, 99, 235, 0.15);
	--price-up:      #dc2626;
	--price-down:    #16a34a;
	--err-msg:       #991b1b;
	--badge-net-bg:  #fef3c7; --badge-net-fg: #92400e;
	--badge-str-bg:  #fce7f3; --badge-str-fg: #9d174d;
	--badge-unk-bg:  #e5e7eb; --badge-unk-fg: #374151;
	--chart-line:    #2563eb;
	--chart-fill:    rgba(37, 99, 235, 0.1);
	--chart-point:   #2563eb;
	--chart-grid:    rgba(0, 0, 0, 0.08);
	--chart-tick:    #666666;
	--btn-danger:       #ef4444;
	--btn-danger-hover: #dc2626;
}

/* ─── Тёмная тема (системные настройки, если JS отключён) ───── */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:            #0f172a;
		--surface:       #1e293b;
		--shadow:        0 2px 8px rgba(0, 0, 0, 0.4);
		--text:          #e2e8f0;
		--text-muted:    #94a3b8;
		--text-label:    #cbd5e1;
		--border:        #334155;
		--border-input:  #475569;
		--th-bg:         #162032;
		--th-text:       #94a3b8;
		--accent:        #3b82f6;
		--accent-hover:  #60a5fa;
		--accent-focus:  rgba(59, 130, 246, 0.25);
		--price-up:      #f87171;
		--price-down:    #4ade80;
		--err-msg:       #fca5a5;
		--badge-net-bg:  #422006; --badge-net-fg: #fde68a;
		--badge-str-bg:  #4a044e; --badge-str-fg: #f9a8d4;
		--badge-unk-bg:  #1e293b; --badge-unk-fg: #cbd5e1;
		--chart-line:    #60a5fa;
		--chart-fill:    rgba(96, 165, 250, 0.15);
		--chart-point:   #60a5fa;
		--chart-grid:    rgba(255, 255, 255, 0.08);
		--chart-tick:    #94a3b8;
		--btn-danger:       #ef4444;
		--btn-danger-hover: #dc2626;
	}
}

/* ─── Тёмная тема (явный выбор пользователя через JS) ──────── */
[data-theme="dark"] {
	--bg:            #0f172a;
	--surface:       #1e293b;
	--shadow:        0 2px 8px rgba(0, 0, 0, 0.4);
	--text:          #e2e8f0;
	--text-muted:    #94a3b8;
	--text-label:    #cbd5e1;
	--border:        #334155;
	--border-input:  #475569;
	--th-bg:         #162032;
	--th-text:       #94a3b8;
	--accent:        #3b82f6;
	--accent-hover:  #60a5fa;
	--accent-focus:  rgba(59, 130, 246, 0.25);
	--price-up:      #f87171;
	--price-down:    #4ade80;
	--err-msg:       #fca5a5;
	--badge-net-bg:  #422006; --badge-net-fg: #fde68a;
	--badge-str-bg:  #4a044e; --badge-str-fg: #f9a8d4;
	--badge-unk-bg:  #1e293b; --badge-unk-fg: #cbd5e1;
	--chart-line:    #60a5fa;
	--chart-fill:    rgba(96, 165, 250, 0.15);
	--chart-point:   #60a5fa;
	--chart-grid:    rgba(255, 255, 255, 0.08);
	--chart-tick:    #94a3b8;
	--btn-danger:       #ef4444;
	--btn-danger-hover: #dc2626;
}

/* ─── Сброс и базовые стили ─────────────────────────────────── */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--bg);
	color: var(--text);
	padding: 24px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

h1 {
	text-align: center;
	margin-bottom: 8px;
	font-size: 1.6rem;
}

/* ─── Шапка страницы ────────────────────────────────────────── */
.page-header {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.header-actions {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: 8px;
	align-items: center;
}

/* ─── Кнопка переключения темы ──────────────────────────────── */
.theme-toggle {
	background: var(--surface);
	border: 1px solid var(--border-input);
	color: var(--text);
	border-radius: 8px;
	padding: 4px 9px;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: var(--shadow);
}

.theme-toggle-fixed {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 100;
}

/* Управление иконками через CSS — JS не нужен */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: inline; }
	:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ─── Карточка ──────────────────────────────────────────────── */
.card {
	background: var(--surface);
	border-radius: 12px;
	box-shadow: var(--shadow);
	padding: 24px;
	margin-bottom: 24px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* ─── Главная страница ──────────────────────────────────────── */
.subtitle {
	text-align: center;
	color: var(--text-muted);
	margin-bottom: 24px;
	font-size: 0.9rem;
}

.current-price {
	text-align: center;
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--accent);
}

.current-price span {
	font-size: 1rem;
	color: var(--text-muted);
	font-weight: 400;
}

.chart-container {
	position: relative;
	height: 350px;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: 10px 16px;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

th {
	background: var(--th-bg);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--th-text);
	text-transform: uppercase;
}

td {
	font-size: 0.95rem;
}

.price-up  { color: var(--price-up); }
.price-down { color: var(--price-down); }

.empty {
	text-align: center;
	color: var(--text-muted);
	padding: 48px;
}

.errors-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.errors-header h2 {
	font-size: 1.1rem;
	color: var(--price-up);
}

.error-badge {
	background: var(--price-up);
	color: #fff;
	border-radius: 12px;
	padding: 2px 10px;
	font-size: 0.8rem;
	margin-left: 8px;
}

.btn-clear {
	background: var(--btn-danger);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	cursor: pointer;
	font-size: 0.85rem;
}

.btn-clear:hover { background: var(--btn-danger-hover); }

.error-row td { font-size: 0.9rem; }

.error-msg {
	color: var(--err-msg);
	word-break: break-word;
}

.badge {
	display: inline-block;
	border-radius: 6px;
	padding: 2px 8px;
	font-size: 0.75rem;
	font-weight: 600;
}

.badge-network   { background: var(--badge-net-bg); color: var(--badge-net-fg); }
.badge-structure { background: var(--badge-str-bg); color: var(--badge-str-fg); }
.badge-unknown   { background: var(--badge-unk-bg); color: var(--badge-unk-fg); }

.btn-logout {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 0.82rem;
	text-decoration: underline;
	padding: 0;
}

/* ─── Страница логина ───────────────────────────────────────── */
.page-login {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.card--login {
	padding: 40px 32px;
	max-width: 360px;
	width: 100%;
	margin-bottom: 0;
}

.card--login h1 {
	font-size: 1.2rem;
	margin-bottom: 24px;
}

label {
	font-size: 0.85rem;
	color: var(--text-label);
	display: block;
	margin-bottom: 6px;
}

input[type=password] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border-input);
	border-radius: 8px;
	font-size: 1rem;
	outline: none;
	background: var(--surface);
	color: var(--text);
}

input[type=password]:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-focus);
}

.btn {
	width: 100%;
	padding: 10px;
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	cursor: pointer;
	margin-top: 16px;
}

.btn:hover { background: var(--accent-hover); }

.form-error {
	color: var(--price-up);
	font-size: 0.88rem;
	margin-top: 14px;
	text-align: center;
}

/* ─── Страница админ-панели (/Admin) ────────────────────────── */
.btn-link {
	color: var(--text-muted);
	text-decoration: none;
	font-size: 0.82rem;
	padding: 0;
}
.btn-link:hover { color: var(--accent); text-decoration: underline; }

.btn-primary {
	display: inline-block;
	padding: 10px 20px;
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 0.95rem;
	cursor: pointer;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-danger {
	display: inline-block;
	padding: 10px 20px;
	background: var(--btn-danger);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 0.95rem;
	cursor: pointer;
}
.btn-danger:hover { background: var(--btn-danger-hover); }

.card-success { border-left: 4px solid var(--price-down); }
.card-error { border-left: 4px solid var(--price-up); }

.stats {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.stats li { font-size: 0.95rem; }

.form-row { margin-bottom: 16px; }

.radio-inline {
	display: inline-flex;
	align-items: center;
	margin-right: 16px;
	cursor: pointer;
	margin-bottom: 0;
}
.radio-inline input { margin-right: 6px; }

.hint {
	font-size: 0.82rem;
	color: var(--text-muted);
	margin-bottom: 12px;
}