:root {
	--ui-success: #16a34a;
	--ui-danger: #dc2626;
	--ui-warning: #d97706;
	--ui-info: #0891b2;
	--ui-status-on: #ffffff;
	--ui-status-dark: #111111;
	--ui-nav-active: var(--surface-hover);
	--ui-supporter: var(--color-warning);
	--ui-table-head: var(--surface2);
	--ui-table-row: var(--surface);
	--ui-table-row-alt: var(--surface-subtle);
	--ui-table-hover: var(--surface-hover);
	--ui-table-border: var(--border-soft);
	--ui-online: var(--health-ok);
}

.badge-success, .bg-success { background: var(--ui-success) !important; color: var(--ui-status-on) !important; }
.badge-danger, .bg-danger { background: var(--ui-danger) !important; color: var(--ui-status-on) !important; }
.badge-warning, .bg-warning { background: var(--ui-warning) !important; color: var(--ui-status-dark) !important; }
.badge-info, .bg-info { background: var(--ui-info) !important; color: var(--ui-status-on) !important; }
.badge-secondary, .bg-secondary { background: var(--border-medium) !important; color: var(--color-text) !important; }
.app-nav-link.active { background: var(--ui-nav-active) !important; color: var(--color-text) !important; }
.app-nav-link.active i { color: inherit !important; }
.header-support-callout-icon, .app-scroll-donate, .app-scroll-donate:hover { color: var(--ui-supporter) !important; }

.table-responsive { border: 1px solid var(--ui-table-border); border-radius: var(--radius-md); background: var(--ui-table-row); }
.table { border-collapse: collapse !important; border-spacing: 0 !important; margin-bottom: 0; }
.table thead th { padding: .72rem .8rem; background: var(--ui-table-head) !important; border-bottom: 1px solid var(--ui-table-border) !important; letter-spacing: .035em; }
.table tbody tr, .table tbody tr:nth-child(odd), .table tbody tr:nth-child(even) { background: var(--ui-table-row) !important; }
.table tbody tr:nth-child(even) { background: var(--ui-table-row-alt) !important; }
.table tbody tr:hover { background: var(--ui-table-hover) !important; }
.table tbody td, .table tbody th { padding: .68rem .8rem; border-bottom: 1px solid var(--ui-table-border) !important; }
.table tbody tr:last-child > * { border-bottom: 0 !important; }
.table tbody td:first-child, .table tbody td:last-child { border-radius: 0 !important; }

/* Kezdőlapi feltöltő: a funkciók maradnak, de egyértelműbb a vizuális hierarchia. */
.home-upload-card { border: 1px solid var(--border-soft) !important; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.home-upload-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px !important; background: var(--surface2) !important; border-bottom: 1px solid var(--border-soft) !important; }
.home-upload-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.home-upload-title > div { display: grid; gap: 2px; }
.home-upload-title strong { font-family: var(--font-header); font-size: 1.02rem; }
.home-upload-title small { color: var(--color-muted); }
.home-upload-title-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--border-medium); border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--color-muted); }
.home-upload-body { padding: 16px !important; }
.home-upload-notices { display: grid; gap: 8px; margin-bottom: 12px; }
.home-upload-notices .alert { margin: 0; border-radius: var(--radius-md); }
.home-upload-limit { font-weight: 700; }
.home-upload-dropzone { border: 1px dashed var(--border-medium) !important; border-radius: var(--radius-lg) !important; background: var(--surface-subtle) !important; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.home-upload-dropzone:hover { border-color: var(--color-muted) !important; background: var(--surface-hover) !important; transform: translateY(-1px); }
.home-upload-paste { padding: 8px 0 2px; color: var(--color-muted); }
.home-upload-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.home-upload-options > .home-upload-option-card:only-child { grid-column: 1 / -1; }
.home-upload-option-card { padding: 13px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-subtle); }
.home-upload-option-card .form-label { font-weight: 800; margin-bottom: 8px; }
.home-upload-option-title { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.home-upload-option-title i { width: 18px; color: var(--color-muted); text-align: center; }
.home-upload-option-help { display: block; margin-top: 5px; color: var(--color-muted); line-height: 1.35; }
.home-upload-explanation { display: flex; gap: 9px; margin: 10px 0 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface2); color: var(--color-muted); font-size: .82rem; }
.home-upload-explanation > i { margin-top: 2px; }
.home-upload-submit { min-width: 180px; font-weight: 800; }

/* Kezdőlap: egy gyors KPI-sor, alatta összehasonlítható időablakok. */
.home-dashboard { display: grid; gap: 16px; }
.home-dashboard-panel { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.home-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border-soft); background: var(--surface2); }
.home-dashboard-heading h2 { margin: 0; font-size: 1.08rem; }
.home-dashboard-heading small { color: var(--color-muted); }
.home-dashboard-kicker, .api-console-kicker { display: block; color: var(--color-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-dashboard-count { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 32px; padding: 0 10px; border: 1px solid var(--border-medium); border-radius: 999px; background: var(--surface-subtle); font-weight: 800; }
.home-kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.home-kpi { display: grid; gap: 5px; min-height: 112px; padding: 17px 18px; background: var(--surface); }
.home-kpi span { color: var(--color-muted); font-size: .77rem; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; }
.home-kpi strong { align-self: end; font-family: var(--font-header); font-size: 1.75rem; line-height: 1; }
.home-kpi small { color: var(--color-muted); }
.home-stat-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 18px; }
.home-stat-block { border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-subtle); overflow: hidden; }
.home-stat-block-head { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-bottom: 1px solid var(--border-soft); background: var(--surface2); }
.home-stat-block-head i { width: 20px; color: var(--color-muted); text-align: center; }
.home-stat-block-head div { display: grid; gap: 1px; }
.home-stat-block-head small { color: var(--color-muted); font-size: .72rem; }
.home-period-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid var(--border-soft); }
.home-period-row:last-child { border-bottom: 0; }
.home-period-row span { color: var(--color-muted); }
.home-period-row strong { font-family: var(--font-header); font-size: 1.05rem; }
.home-stats-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; padding: 11px 18px; border-top: 1px solid var(--border-soft); color: var(--color-muted); font-size: .82rem; background: var(--surface2); }
.home-online-users { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; }
.home-online-user { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border-medium); border-radius: 999px; background: var(--surface-subtle); color: var(--color-text); font-size: .88rem; font-weight: 600; text-decoration: none; }
.home-online-user:hover { background: var(--surface-hover); color: var(--color-text); }
.home-online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-online); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-online) 18%, transparent); }
.home-dashboard-empty { margin: 16px 18px; padding: 14px; border: 1px dashed var(--border-medium); border-radius: var(--radius-md); color: var(--color-muted); background: var(--surface-subtle); }

/* API dokumentáció és Weboldalak/API kezelő: közös vizuális nyelv. */
.api-docs-page, .settings-api-page { display: grid; gap: 14px; }
.api-console-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface); }
.api-console-hero h1 { margin: 2px 0 7px; font-size: 1.45rem; }
.api-console-hero p { margin: 0; max-width: 760px; color: var(--color-muted); }
.api-console-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.api-docs-nav { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-subtle); position: sticky; top: calc(var(--kh-nav-h, 0px) + 8px); z-index: 5; }
.api-docs-nav a { padding: 7px 10px; border-radius: var(--radius-sm); color: var(--color-muted); text-decoration: none; font-weight: 700; font-size: .84rem; }
.api-docs-nav a:hover { background: var(--surface-hover); color: var(--color-text); }
.api-docs-section { scroll-margin-top: calc(var(--kh-nav-h, 0px) + 72px); padding: 18px; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface); }
.api-docs-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.api-docs-section-head h2 { margin: 2px 0 0; font-size: 1.18rem; }
.api-docs-section h3 { font-size: .98rem; margin-bottom: 10px; }
.api-docs-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.api-docs-overview-card { display: flex; gap: 12px; padding: 13px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-subtle); }
.api-docs-overview-card > i { width: 25px; margin-top: 3px; color: var(--color-muted); text-align: center; }
.api-docs-overview-card div { display: grid; gap: 3px; min-width: 0; }
.api-docs-overview-card span, .api-docs-overview-card small { color: var(--color-muted); overflow-wrap: anywhere; }
.api-method { display: inline-flex; min-width: 58px; justify-content: center; padding: 3px 7px; border-radius: 999px; font-size: .69rem; font-weight: 900; letter-spacing: .04em; background: var(--surface-hover); border: 1px solid var(--border-medium); }
.api-method--get { color: var(--ui-info); }
.api-method--post { color: var(--ui-success); }
.api-method--patch { color: var(--ui-warning); }
.api-method--delete { color: var(--ui-danger); }
.api-endpoint-table code, .api-option-table code { white-space: nowrap; }
.api-option-grid, .api-response-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.api-option-grid > div, .api-response-grid > div { display: grid; gap: 4px; padding: 10px 11px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.api-option-grid span, .api-response-grid span { color: var(--color-muted); font-size: .8rem; }
.api-legacy summary { cursor: pointer; font-weight: 800; }
.api-snippets { padding: 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-subtle); }
.api-snippets-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.api-snippets-controls .form-label { margin: 0; }
.api-snippets-controls .form-select, .api-snippets-controls .form-control { margin-top: 5px; }
.api-snippets-note { margin: 10px 0; color: var(--color-muted); }
.api-snippets-output { margin: 0; min-height: 170px; white-space: pre-wrap; overflow-wrap: anywhere; }

.settings-api-page > .card, .settings-api-card { border: 1px solid var(--border-soft) !important; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.settings-api-card > .card-header { padding: 13px 16px; background: var(--surface2); border-bottom: 1px solid var(--border-soft); }
.settings-api-list-grid { display: grid; gap: 10px; }
.settings-api-list-item { border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-subtle); }
.settings-api-list-head { padding: 12px 13px; border-bottom: 1px solid var(--border-soft); }
.settings-api-list-meta { padding: 11px 13px; }
.settings-api-list-key { padding: 0 13px 13px; }
.settings-user-api-item { padding: 11px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-subtle); }

.upload-result-proxy-hint { margin-top: 12px; padding: 11px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-subtle); }
.upload-result-proxy-hint strong { display: block; margin-bottom: 5px; }
.upload-result-proxy-hint code { display: block; margin: 7px 0; white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 991.98px) {
	.home-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-stat-matrix { grid-template-columns: 1fr; }
	.home-upload-options { grid-template-columns: 1fr; }
	.api-snippets-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.api-option-grid, .api-response-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
	.home-dashboard-heading, .api-console-hero, .api-docs-section-head { align-items: flex-start; }
	.home-upload-header { align-items: flex-start; flex-direction: column; }
	.home-upload-header .btn { width: 100%; }
	.api-console-hero { flex-direction: column; }
	.api-docs-nav { position: static; }
	.api-docs-overview-grid { grid-template-columns: 1fr; }
	.table-responsive { border-radius: var(--radius-sm); }
}
@media (max-width: 575.98px) {
	.home-kpi-strip, .api-snippets-controls, .api-option-grid, .api-response-grid { grid-template-columns: 1fr; }
	.home-stats-foot { display: grid; }
	.home-upload-body { padding: 12px !important; }
	.home-upload-submit { width: 100%; }
	.api-docs-section { padding: 14px; }
}