:root { color-scheme: light dark; --fg:#1a1a1a; --bg:#f6f6f7; --card:#fff; --mut:#6b7280;
        --ok:#0a7c3f; --bad:#b3261e; --line:#e3e3e6; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#e8e8ea; --bg:#141416; --card:#1d1d20; --mut:#9ca3af; --line:#2c2c31; }
}
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
       color:var(--fg); background:var(--bg); }
.wrap { max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 1.4rem; margin: 0 0 16px; }
h2 { font-size: 1rem; margin: 0 0 12px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
        padding:16px; margin-bottom:16px; width:100%; }
.row { display:flex; gap:8px; flex-wrap:wrap; }
/* Страница входа: одно поле и кнопка, по центру, без заголовков и подписей. */
.card.login { display:flex; gap:8px; flex-wrap:wrap; max-width:420px;
              margin:15vh auto 0; }
.card.login input[type=password] { flex:1 1 220px; }
input[type=text], input[type=password], input[name=name] {
  padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--fg); min-width:220px; }
label { display:block; margin-bottom:12px; }
button { padding:8px 14px; border:0; border-radius:8px; background:#2563eb; color:#fff;
         cursor:pointer; font:inherit; }
button.link { background:none; color:#2563eb; padding:2px 4px; }
button.danger { color:var(--bad); }
table { border-collapse:collapse; }
th, td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-weight:600; color:var(--mut); font-size:.85rem; }
td.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
td.actions form { display:inline; }
.ok { color:var(--ok); } .bad, .err { color:var(--bad); }
.muted, .off, .idle { color:var(--mut); }
.warn { background:#fff4e5; border:1px solid #f0c894; color:#7a4b00;
        padding:10px 12px; border-radius:8px; }
@media (prefers-color-scheme: dark) { .warn { background:#2a2010; border-color:#5c451a; color:#e9c07a; } }
@media (max-width:640px){ table, thead, tbody, tr, td, th { display:block; }
  thead { display:none; } tr { border-bottom:1px solid var(--line); padding:8px 0; } }