/* Estilo das telas de login e de usuários. Mesmos tokens da ferramenta (flowconfig.html). */
/* identidade Flowbix: preto azulado + vermelho #FB2C36 (flowbix.com), fonte Rethink Sans */
:root{
  --bg:#F3F4F7; --surface:#FFFFFF; --surface-2:#F7F8FA; --surface-3:#ECEEF3; --line:#DADEE6; --line-2:#E7E9EF;
  --ink:#0B0E14; --muted:#5B6172; --brand:#FB2C36; --accent:#C2161F; --accent-hover:#A3121A; --accent-ink:#FFFFFF; --accent-soft:#FDE8E9; --accent-text:#C2161F;
  --err:#B3261E; --err-soft:#FBE9E7; --ok:#1C6B3A; --ok-soft:#E1F2E6; --warn:#8A4B0F; --warn-soft:#F6E9DA;
  --term-bg:#05070D; --term-ink:#DDE1EA;
  --page-bg:radial-gradient(1100px 520px at 0% -12%,rgba(251,44,54,.07),transparent 62%),#F3F4F7;
  --panel-hi:inset 0 1px 0 rgba(255,255,255,.6);
  --shadow:0 1px 2px rgba(11,14,20,.05),0 12px 32px -16px rgba(11,14,20,.18);
  --fs-1:11px; --fs-2:12px; --fs-3:13px; --fs-4:14px; --fs-5:16px; --fs-6:22px;
  --sans:"Rethink Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --display:"Rethink Sans",system-ui,-apple-system,sans-serif;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --ease:cubic-bezier(.16,1,.3,1); --fast:140ms;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#070A12; --surface:#0E1320; --surface-2:#131A2A; --surface-3:#1A2335; --line:#222B3E; --line-2:#1A2233;
    --ink:#EEF0F5; --muted:#999EAF; --accent:#E0222C; --accent-hover:#F0303A; --accent-ink:#FFFFFF; --accent-soft:#3A1218; --accent-text:#FF5A62;
    --err:#FF7A80; --err-soft:#3A1218; --ok:#8FE3BE; --ok-soft:#173326; --warn:#F0B67A; --warn-soft:#3A2A1A;
    --term-bg:#04060B;
    --page-bg:radial-gradient(1200px 620px at 0% -14%,rgba(251,44,54,.13),transparent 60%),radial-gradient(1100px 640px at 100% 112%,rgba(38,58,120,.22),transparent 62%),#070A12;
    --panel-hi:inset 0 1px 0 rgba(255,255,255,.045);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#070A12; --surface:#0E1320; --surface-2:#131A2A; --surface-3:#1A2335; --line:#222B3E; --line-2:#1A2233;
  --ink:#EEF0F5; --muted:#999EAF; --accent:#E0222C; --accent-hover:#F0303A; --accent-ink:#FFFFFF; --accent-soft:#3A1218; --accent-text:#FF5A62;
  --err:#FF7A80; --err-soft:#3A1218; --ok:#8FE3BE; --ok-soft:#173326; --warn:#F0B67A; --warn-soft:#3A2A1A;
  --term-bg:#04060B;
  --page-bg:radial-gradient(1200px 620px at 0% -14%,rgba(251,44,54,.13),transparent 60%),radial-gradient(1100px 640px at 100% 112%,rgba(38,58,120,.22),transparent 62%),#070A12;
  --panel-hi:inset 0 1px 0 rgba(255,255,255,.045);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -16px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--page-bg);background-attachment:fixed;color:var(--ink);font-family:var(--sans);font-size:var(--fs-4);line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-soft);color:var(--ink)}
input,select{caret-color:var(--accent);accent-color:var(--accent)}
::placeholder{color:var(--muted);opacity:.85}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance}
.ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.brand{font-family:var(--display);font-weight:800;font-size:var(--fs-6);letter-spacing:.03em;line-height:1;color:var(--ink);text-decoration:none;text-transform:uppercase}
.brand span{color:var(--brand)}

/* seletor de tema (sol e lua) */
.theme{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:2px;gap:2px}
.theme button{cursor:pointer;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);padding:6px 9px;display:inline-grid;place-items:center;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.theme button:hover{color:var(--ink);background:var(--surface-2)}
.theme button[aria-checked="true"]{background:var(--accent-soft);color:var(--accent-text)}
.theme .ico{width:16px;height:16px}
.theme-switching *{transition:none!important}

/* campos */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label{font-size:var(--fs-2);font-weight:500}
.fld input,.fld select{font:inherit;font-size:var(--fs-4);padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);width:100%;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.fld input:hover,.fld select:hover{border-color:var(--muted)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.fld .hint{font-size:var(--fs-2);color:var(--muted)}
.pwrow{position:relative}
.pwrow input{padding-right:42px}
.eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:none;color:var(--muted);border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center}
.eye:hover{color:var(--ink);background:var(--surface-3)}

/* botões */
.btn{font:inherit;font-size:var(--fs-3);font-weight:600;cursor:pointer;border:1px solid transparent;border-radius:var(--r-md);padding:9px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:progress}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted);background:var(--surface-2)}
.btn-danger{background:var(--surface);color:var(--err);border-color:var(--line)}
.btn-danger:hover{border-color:var(--err);background:var(--err-soft)}
.btn-sm{padding:5px 10px;font-size:var(--fs-2);font-weight:500}

/* mensagens */
.msg{border-radius:var(--r-md);padding:10px 12px;font-size:var(--fs-3);display:flex;gap:8px;align-items:flex-start}
.msg-err{background:var(--err-soft);color:var(--err)}
.msg-ok{background:var(--ok-soft);color:var(--ok)}
.msg-info{background:var(--accent-soft);color:var(--ink)}
.msg .ico{margin-top:2px}

/* selos */
.pill{font-size:var(--fs-1);font-weight:600;letter-spacing:.02em;padding:2px 8px;border-radius:999px;white-space:nowrap}
.pill-admin{background:var(--accent-soft);color:var(--accent-text)}
.pill-tec{background:var(--surface-3);color:var(--muted)}
.pill-off{background:var(--err-soft);color:var(--err)}
.pill-warn{background:var(--warn-soft);color:var(--warn)}
.pill-on{background:var(--ok-soft);color:var(--ok)}

@media (prefers-reduced-motion:reduce){*{transition-duration:1ms!important}}