/* EvoLiving Cloud portal (installers, owners, platform admin). Brand: teal, orange-gold, cream, warm grey.
   Spacing 4px steps; status always has text, never colour alone. */
:root {
  --bg: #F5EFE6; --surface: #fffdf9; --surface-2: #ece5d8; --border: #ddd4c4;
  --text: #3A3F3C; --text-2: #686c66; --accent: #0E4C5A; --accent-ink: #F5EFE6; --gold: #F4A024;
  --ok: #2f7a45; --ok-soft: #e4f1e7; --warn: #8a5a00; --warn-soft: #fbf0d9; --alert: #b3261e; --alert-soft: #fbe5e3;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --r: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161513; --surface: #1F1D1A; --surface-2: #2A2723; --border: #36322D;
    --text: #F2ECE2; --text-2: #B3ADA3; --accent: #7cc4b8; --accent-ink: #0f1f1c;
    --ok: #7cc78f; --ok-soft: #1c2e21; --warn: #f0c060; --warn-soft: #33290f; --alert: #f2918a; --alert-soft: #3a1d1b;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5; }
a { color: var(--accent); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border-bottom: 1px solid var(--border); }
.bar__brand { font-weight: 700; color: var(--accent); text-decoration: none; font-size: 18px; }
.bar__brand span { color: var(--gold); }
.bar__user { font-size: 14px; color: var(--text-2); display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
main { max-width: 860px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-8); outline: none; }
h1 { font-size: 24px; margin: 0 0 var(--s-4); }
h2 { font-size: 18px; margin: var(--s-6) 0 var(--s-3); }
.muted { color: var(--text-2); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s-4); margin-bottom: var(--s-3); }
.tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.tab { padding: var(--s-2) var(--s-3); border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: 14px; }
.tab[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.field { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-3); }
.field label { font-weight: 600; font-size: 14px; }
.hint { font-size: 13px; color: var(--text-2); }
input, select, textarea { font: inherit; padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); min-height: 44px; width: 100%; }
textarea { min-height: 80px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button, .button { font: inherit; font-weight: 600; font-size: 15px; padding: var(--s-2) var(--s-4); min-height: 44px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.danger { color: var(--alert); }
button:disabled { opacity: 0.55; cursor: default; }
.actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-3); }
.error { background: var(--alert-soft); color: var(--alert); padding: var(--s-2) var(--s-3); border-radius: var(--r); margin-bottom: var(--s-3); }
.notice { background: var(--warn-soft); color: var(--warn); padding: var(--s-3); border-radius: var(--r); margin-bottom: var(--s-3); }
.list { list-style: none; margin: 0; padding: 0; }
.row { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; padding: var(--s-3) 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.row:first-child { border-top: 0; }
.row__main { min-width: 0; flex: 1 1 240px; }
.row__title { font-weight: 600; overflow-wrap: anywhere; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px var(--s-2); border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.badge[data-tone="ok"] { background: var(--ok-soft); color: var(--ok); }
.badge[data-tone="warn"] { background: var(--warn-soft); color: var(--warn); }
.badge[data-tone="alert"] { background: var(--alert-soft); color: var(--alert); }
.check { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-2) 0; }
.check input { width: 22px; min-height: 22px; height: 22px; margin-top: 1px; flex: none; }
.check__mark { width: 22px; flex: none; text-align: center; font-weight: 700; }
.check__mark[data-ok="true"] { color: var(--ok); }
.check__mark[data-ok="false"] { color: var(--alert); }
.qr { width: 220px; height: 220px; background: #fff; border-radius: var(--r); padding: var(--s-2); }
.code { font-family: ui-monospace, Consolas, monospace; font-size: 18px; letter-spacing: 1px; overflow-wrap: anywhere; }
.grid2 { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps { padding-left: var(--s-5); }
.steps li { margin-bottom: var(--s-2); }
.toast { position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: var(--s-3) var(--s-4); border-radius: var(--r); max-width: calc(100% - 32px); }