:root {
  color-scheme: light;
  --bg: #f5f3f3; --surface: #fff; --text: #231f20; --muted: #5c5557; --hint: #857c7e; --dim: #a59c9e;
  --border: #e5dcdd; --line: #ece5e6; --th: #f6efef; --row-hover: #fdf8f8; --input-border: #d2c5c7;
  --header: #b3121f; --header-line: #7d0c15; --nav: #fde3e5; --accent: #c8102e; --accent-hover: #a20c24; --accent-text: #b80f2a; --link: #b80f2a;
  --light-hover: #fdeef0; --focus: #f3a7b1; --focus-border: #d93a50;
  --ok-bg: #e6f6ea; --ok-border: #9fd8ac; --err-bg: #fdecec; --err-border: #f0a8a8; --warn-bg: #fff7e0; --warn-border: #f0d080;
  --b-ok-bg: #d5f0dc; --b-ok: #1f6b35; --b-err-bg: #fbd5d5; --b-err: #9b1c1c; --b-warn-bg: #fdefc5; --b-warn: #7a5a00;
}
/* Тъмна тема (антрацит и червено): по избор от бутона в менюто или според настройката на устройството */
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #1c1d20; --surface: #26282c; --text: #ebe7e7; --muted: #b3acad; --hint: #948c8e; --dim: #6f696a;
  --border: #393b40; --line: #33353a; --th: #2e3034; --row-hover: #2c2e33; --input-border: #4a4c52;
  --header: #141517; --header-line: #d0172b; --nav: #e2dcdc; --accent: #d0172b; --accent-hover: #e52a3e; --accent-text: #ff6f7d; --link: #ff7a86;
  --light-hover: #3a2226; --focus: #8a1c28; --focus-border: #ff4d5e;
  --ok-bg: #15301f; --ok-border: #2c6b41; --err-bg: #3a1a1c; --err-border: #8a3a3e; --warn-bg: #352b10; --warn-border: #7d6522;
  --b-ok-bg: #1d4029; --b-ok: #8fdca6; --b-err-bg: #4a2023; --b-err: #f5a3a3; --b-warn-bg: #4a3a12; --b-warn: #f3d27a;
}
header.top { border-bottom: 3px solid var(--header-line); }
.home-banner.banner-dark { display: none; }
:root[data-theme=dark] .home-banner.banner-light { display: none; }
:root[data-theme=dark] .home-banner.banner-dark { display: block; box-shadow: none; }
.theme-btn { background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 5px; padding: 3px 8px; cursor: pointer; font-size: 14px; line-height: 1.2; }
.theme-btn:hover { background: rgba(255,255,255,.15); }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
header.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--header); color: #fff; padding: 10px 20px; }
header.top .brand { font-weight: 700; font-size: 16px; }
header.top .brand span { font-weight: 400; opacity: .7; }
header.top nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
header.top nav a { color: var(--nav); padding: 6px 8px; border-radius: 5px; }
header.top nav a.on, header.top nav a:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
header.top .user { font-size: 13px; opacity: .9; }
header.top .user a { color: #fff; }
main { max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { font-size: 22px; margin: 4px 0 16px; }
h2 { font-size: 17px; margin: 22px 0 10px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.stat b { display: block; font-size: 22px; margin-top: 4px; }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--input-border); border-radius: 5px; font: inherit; background: var(--surface); color: inherit; }
textarea { min-height: 90px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); border-color: var(--focus-border); }
.check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: inherit; }
.btn { display: inline-block; padding: 8px 14px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 5px; font: inherit; cursor: pointer; }
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn.light { background: var(--surface); color: var(--accent-text); }
.btn.light:hover { background: var(--light-hover); }
.btn.danger { background: #c53030; border-color: #c53030; }
.btn.small { padding: 4px 9px; font-size: 13px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
table.list { width: 100%; border-collapse: collapse; background: var(--surface); }
table.list th, table.list td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.list th { background: var(--th); font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
table.list tr:hover td { background: var(--row-hover); }
table.list td.r, table.list th.r { text-align: right; }
table.list .muted td { color: var(--dim); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; border: 1px solid; }
.flash.ok { background: var(--ok-bg); border-color: var(--ok-border); }
.flash.err { background: var(--err-bg); border-color: var(--err-border); }
.flash.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 12px; background: var(--line); color: var(--muted); }
.badge.ok { background: var(--b-ok-bg); color: var(--b-ok); }
.badge.err { background: var(--b-err-bg); color: var(--b-err); }
.badge.warn { background: var(--b-warn-bg); color: var(--b-warn); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.filters > div { min-width: 140px; }
.hint { font-size: 12px; color: var(--hint); margin-top: 4px; }
.items-edit td { padding: 4px; }
.items-edit input, .items-edit select { padding: 5px 6px; }
.login { max-width: 360px; margin: 80px auto; }
code, pre { background: var(--th); padding: 2px 5px; border-radius: 4px; font-size: 13px; }
pre { padding: 10px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs a { padding: 6px 12px; border-radius: 5px; background: var(--line); color: var(--text); }
.tabs a.on { background: var(--accent); color: #fff; }
.pager { margin-top: 12px; display: flex; gap: 6px; }
#items td:nth-child(2) input, #lines td:nth-child(2) input { min-width: 300px; }
.menu-btn { display: none; background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 20px; border-radius: 5px; padding: 2px 10px; cursor: pointer; }

/* Мобилни устройства */
@media (max-width: 760px) {
  body { font-size: 15px; }
  main { padding: 12px; }
  h1 { font-size: 19px; }
  header.top { padding: 10px 12px; gap: 8px; }
  header.top .brand { flex: 1; font-size: 15px; }
  .menu-btn { display: block; }
  header.top nav, header.top .user { display: none; flex: 1 1 100%; }
  body.nav-open header.top nav { display: flex; flex-direction: column; }
  body.nav-open header.top .user { display: block; padding: 6px 10px; }
  header.top nav a { padding: 10px; font-size: 16px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { font-size: 16px; }
  .grid { grid-template-columns: 1fr; }
  .grid > div { grid-column: auto !important; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat b { font-size: 18px; }
  .filters > div { flex: 1 1 100%; min-width: 0; }
  .filters .btn { width: 100%; text-align: center; }
  .card { padding: 12px; }
  .btn { padding: 10px 14px; }
  .actions .btn { flex: 1 1 auto; text-align: center; }
  .actions input[type=text], .actions input[type=file] { flex: 1 1 100%; }

  /* Таблиците стават карти: всеки ред е блок, всяка клетка има етикет от заглавието */
  .table-wrap { border: 0; overflow: visible; }
  table.list:not(.no-stack), table.list:not(.no-stack) tbody, table.list:not(.no-stack) tr, table.list:not(.no-stack) td { display: block; width: 100%; }
  table.list:not(.no-stack) tr.head, table.list:not(.no-stack) thead { display: none; }
  table.list:not(.no-stack) tr { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; padding: 6px 0; }
  table.list:not(.no-stack) td { border: 0; padding: 4px 12px; display: flex; gap: 10px; justify-content: space-between; align-items: center; text-align: right; }
  table.list:not(.no-stack) td::before { content: attr(data-label); color: var(--hint); font-size: 13px; text-align: left; flex: 0 0 auto; }
  table.list:not(.no-stack) td[data-label=""]::before { display: none; }
  table.list:not(.no-stack) td.r { text-align: right; }
  table.list:not(.no-stack) td > form, table.list:not(.no-stack) td > input, table.list:not(.no-stack) td > select { flex: 1; }
  .items-edit td input, .items-edit td select { width: 100% !important; min-width: 0 !important; }
  .items-edit td { justify-content: flex-start; }
  .items-edit td::before { min-width: 90px; }
  .table-wrap > table.no-stack { display: block; overflow-x: auto; }
  .pager { flex-wrap: wrap; }
}

.home-banner{display:block;width:100%;max-width:1100px;height:auto;margin:0 auto 14px;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.theme-btn::after { content: "🌙"; }
:root[data-theme=dark] .theme-btn::after { content: "☀"; }
@media (max-width: 760px) {
  .theme-btn::after { content: "🌙 Тъмна тема"; }
  :root[data-theme=dark] .theme-btn::after { content: "☀ Светла тема"; }
  .theme-btn { display: block; margin-bottom: 8px; padding: 8px 12px; font-size: 15px; }
}
@media (max-width: 1400px) and (min-width: 761px) { header.top .brand span { display: none; } }

.help-btn { display: inline-block; border: 1px solid rgba(255,255,255,.35); border-radius: 5px; padding: 2px 8px; margin-right: 4px; }
.help-btn:hover, .help-btn.on { background: rgba(255,255,255,.15); text-decoration: none; }
.help-toc input { margin-bottom: 10px; }
.help-links { display: flex; flex-wrap: wrap; gap: 6px; }
.help-links a { padding: 4px 10px; border-radius: 5px; background: var(--line); color: var(--text); }
.help-sec { scroll-margin-top: 12px; line-height: 1.55; }
.help-sec li { margin-bottom: 4px; }
@media (min-width: 761px) { .help-btn .t { display: none; } .help-btn { font-weight: 700; } }
@media (max-width: 760px) { .help-btn { margin: 0 0 8px; padding: 8px 12px; font-size: 15px; } }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
[hidden] { display: none !important; }

/* тестов режим и преглед */
.test-banner { background: var(--warn-bg); border: 2px dashed var(--warn-border); border-radius: 6px; padding: 9px 14px; margin-bottom: 14px; }
.test-box { grid-column: 1 / -1; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; }
.preview-box { background: var(--surface, #fff); border: 1px solid var(--border, #ddd); border-left: 4px solid var(--accent); border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; }
.preview-box .actions { margin: 8px 0 0; }
.nowrap { white-space: nowrap; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; font: inherit; text-decoration: underline; }