/* ============================================================
   031 SYSTEM — design "Interface Refinery" (Lovable)
   Sora (títulos) + Manrope (corpo), sidebar navy, azul primário,
   cards claros com sombra sutil. Tokens em oklch.
   ============================================================ */
:root {
  --radius: 10px;
  --bg: oklch(0.975 0.004 250);
  --card: oklch(1 0 0);
  --input-bg: oklch(0.975 0.004 250);
  --text: oklch(0.2 0.03 260);
  --muted: oklch(0.52 0.03 260);
  --border: oklch(0.92 0.01 255);
  --line: oklch(0.95 0.008 255);
  --accent: oklch(0.58 0.2 258);
  --accent-2: oklch(0.66 0.17 258);
  --accent-hover: oklch(0.53 0.2 258);
  --ghost-hover: oklch(0.97 0.006 255);
  --tabs-bg: oklch(0.97 0.006 255);
  --ok: oklch(0.6 0.15 155);
  --err: oklch(0.577 0.245 27.325);
  --warn: oklch(0.72 0.14 70);
  --sidebar: oklch(0.17 0.03 262);
  --sidebar-text: oklch(0.78 0.02 260);
  --sidebar-hover: oklch(0.23 0.035 262);
  --sidebar-active: oklch(0.62 0.19 258);
  --sidebar-border: oklch(0.26 0.03 262);
  --shadow: 0 1px 2px oklch(0.2 0.03 260 / 0.04), 0 8px 24px -12px oklch(0.2 0.03 260 / 0.12);
  --glow: 0 8px 22px -8px color-mix(in oklab, var(--sidebar-active) 65%, transparent);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: oklch(0.15 0.025 262); --card: oklch(0.195 0.03 262); --input-bg: oklch(0.17 0.03 262);
  --text: oklch(0.96 0.005 250); --muted: oklch(0.68 0.02 260);
  --border: oklch(1 0 0 / 0.1); --line: oklch(1 0 0 / 0.07);
  --ghost-hover: oklch(1 0 0 / 0.06); --tabs-bg: oklch(0.17 0.03 262);
  --accent: oklch(0.62 0.19 258); --accent-hover: oklch(0.68 0.19 258);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.45);
} }
:root[data-theme="dark"] {
  --bg: oklch(0.15 0.025 262); --card: oklch(0.195 0.03 262); --input-bg: oklch(0.17 0.03 262);
  --text: oklch(0.96 0.005 250); --muted: oklch(0.68 0.02 260);
  --border: oklch(1 0 0 / 0.1); --line: oklch(1 0 0 / 0.07);
  --ghost-hover: oklch(1 0 0 / 0.06); --tabs-bg: oklch(0.17 0.03 262);
  --accent: oklch(0.62 0.19 258); --accent-hover: oklch(0.68 0.19 258);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Sora', system-ui, sans-serif; letter-spacing: -0.02em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Forms ---------- */
label.field { display:block; margin-bottom:14px; }
label.field span { display:block; font-weight:600; margin-bottom:6px; font-size:12.5px; color:var(--muted); }
input, select, textarea {
  width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius);
  font-size:14px; font-family:inherit; outline:none; background:var(--input-bg); color:var(--text); transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); }
textarea { resize: vertical; min-height: 84px; }
.btn { background:var(--accent); color:#fff; border:0; padding:10px 16px; border-radius:var(--radius); font-weight:600; transition:background .15s, transform .05s, filter .15s; }
.btn:hover { background:var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn.block { width:100%; }
.btn.ghost { background:var(--card); color:var(--text); border:1px solid var(--border); font-weight:600; }
.btn.ghost:hover { background:var(--ghost-hover); }
.btn.sm { padding:7px 11px; font-size:12.5px; }
.btn.danger { background:color-mix(in oklab, var(--err) 12%, var(--card)); color:var(--err); border:1px solid color-mix(in oklab, var(--err) 32%, var(--border)); }
.btn.danger:hover { background:color-mix(in oklab, var(--err) 20%, var(--card)); }

/* ---------- App shell ---------- */
.shell { display:grid; grid-template-columns: 256px 1fr; min-height:100vh; }
.sidebar { background:var(--sidebar); color:var(--sidebar-text); display:flex; flex-direction:column; padding:14px 12px; position:sticky; top:0; height:100vh; }
.sidebar .brand { display:flex; align-items:center; justify-content:center; height:52px; padding:4px 8px 10px; }
.sidebar .brand img { height:34px; width:auto; display:block; }
.sidebar .menu-label { font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--sidebar-text); opacity:.45; padding:12px 12px 6px; }
.nav { display:flex; flex-direction:column; gap:3px; flex:1; }
.nav a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius); color:var(--sidebar-text); font-weight:600; font-size:14px; }
.nav a svg { width:18px; height:18px; flex-shrink:0; stroke-width:2; }
.nav a:hover { background:var(--sidebar-hover); color:#fff; text-decoration:none; }
.nav a.active { background:var(--sidebar-active); color:#fff; box-shadow:var(--glow); }
.sidebar .foot { border-top:1px solid var(--sidebar-border); padding-top:8px; display:flex; flex-direction:column; gap:3px; }
.sidebar .foot button { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:transparent; border:0; color:var(--sidebar-text); font-weight:600; font-size:14px; padding:10px 12px; border-radius:var(--radius); }
.sidebar .foot button svg { width:18px; height:18px; }
.sidebar .foot button:hover { background:var(--sidebar-hover); color:#fff; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:0 28px; height:64px; background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5; }
.topbar h1 { font-size:20px; margin:0; font-weight:700; }
.topbar .who { display:flex; align-items:center; gap:12px; }
.topbar .who small { color:var(--muted); font-size:13px; }
.topbar .avatar { width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:'Sora',sans-serif; font-weight:700; font-size:14px; }
.content { padding:28px; max-width:1040px; margin:0 auto; width:100%; }

/* ---------- Cards / listas ---------- */
.card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:22px; margin-bottom:18px; box-shadow:var(--shadow); }
.card h3 { margin:0 0 4px; font-size:16px; font-weight:700; }
.card .hint { color:var(--muted); font-size:13px; margin:0 0 14px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.row > * { flex:1; min-width:160px; }
.list-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.list-item:last-child { border-bottom:0; }
.list-item.novo { background: color-mix(in oklab, var(--accent) 7%, transparent); border-radius:12px; padding-left:12px; padding-right:12px; }
.list-item .info { min-width:0; }
.list-item .info b { display:block; font-weight:600; }
.list-item .info small { color:var(--muted); word-break:break-all; display:block; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; }
.badge.ok { background:color-mix(in oklab, var(--ok) 15%, var(--card)); color:var(--ok); }
.badge.off { background:var(--tabs-bg); color:var(--muted); }
.badge.warn { background:color-mix(in oklab, var(--warn) 18%, var(--card)); color:var(--warn); }
.badge.err { background:color-mix(in oklab, var(--err) 15%, var(--card)); color:var(--err); }
.empty { color:var(--muted); text-align:center; padding:28px; }
.help-btn { width:30px; height:30px; border-radius:50%; border:1px solid var(--border); color:var(--muted); display:grid; place-items:center; font-weight:800; font-size:15px; text-decoration:none; }
.help-btn:hover { background:var(--ghost-hover); color:var(--text); text-decoration:none; }
.guia { border-bottom:1px solid var(--line); }
.guia:last-child { border-bottom:0; }
.guia > summary { cursor:pointer; padding:12px 4px; font-weight:600; font-size:14px; list-style:none; display:flex; align-items:center; gap:8px; }
.guia > summary::-webkit-details-marker { display:none; }
.guia > summary::before { content:'▸'; color:var(--muted); transition:transform .15s; }
.guia[open] > summary::before { transform:rotate(90deg); }
.guia > summary:hover { color:var(--accent); }
.guia-body { padding:2px 4px 14px 22px; color:var(--text); }
.guia-body ol { margin:0; padding-left:18px; }
.guia-body li { margin:6px 0; line-height:1.5; }
.guia-body code { background:var(--tabs-bg); padding:1px 6px; border-radius:6px; font-size:12.5px; }
.guia-body .hint { margin-top:8px; }
.chk { display:flex; align-items:center; gap:8px; margin:5px 0; font-size:13.5px; }
.chk input { width:auto; }
.chk small { color:var(--muted); }
.actions { display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.qr-box { text-align:center; }
.qr-box img { width:260px; height:260px; border:1px solid var(--border); border-radius:12px; background:#fff; }

/* ---------- Sub-abas (Conexões) ---------- */
.subtabs { display:inline-flex; gap:4px; background:var(--card); border:1px solid var(--border); padding:5px; border-radius:14px; margin-bottom:18px; box-shadow:var(--shadow); }
.subtab { border:0; background:transparent; padding:9px 18px; border-radius:var(--radius); font-weight:600; font-size:13.5px; color:var(--muted); cursor:pointer; font-family:inherit; }
.subtab:hover { color:var(--text); }
.subtab.active { background:var(--accent); color:#fff; }

/* ---------- Note / banners ---------- */
.note { border:1px solid var(--border); background:var(--card); border-radius:14px; padding:14px 16px; margin-bottom:18px; box-shadow:var(--shadow); }
.note p { margin:0; font-size:13px; color:var(--text); }
.note h3 { margin:0 0 4px; font-size:15px; }
.note.info { background:color-mix(in oklab, var(--accent) 9%, var(--card)); border-color:color-mix(in oklab, var(--accent) 28%, var(--border)); }
.note.warn { background:color-mix(in oklab, var(--warn) 13%, var(--card)); border-color:color-mix(in oklab, var(--warn) 34%, var(--border)); }
.note.err  { background:color-mix(in oklab, var(--err) 11%, var(--card)); border-color:color-mix(in oklab, var(--err) 32%, var(--border)); }
.note.accent2 { background:color-mix(in oklab, #7c3aed 10%, var(--card)); border-color:color-mix(in oklab, #7c3aed 30%, var(--border)); }

/* ---------- Toast ---------- */
#toast { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:9999; }
.toast { background:var(--sidebar); color:#fff; padding:12px 16px; border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.3); font-size:13px; max-width:340px; }
.toast.ok { background:var(--ok); }
.toast.err { background:var(--err); }
.toast.warn { background:var(--warn); }

@media (max-width:820px){
  .shell { grid-template-columns: 1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; overflow-x:auto; align-items:center; gap:4px; padding:8px; }
  .sidebar .brand, .sidebar .menu-label { display:none; }
  .nav { flex-direction:row; flex:none; gap:4px; }
  .nav a { white-space:nowrap; padding:8px 10px; }
  .nav a span { display:none; }
  .sidebar .foot { flex-direction:row; border-top:0; padding-top:0; }
  .sidebar .foot button span { display:none; }
  .content { padding:16px; }
  .topbar { padding:0 16px; }
}