/* Relata operator console — dark "control room" theme, distinct from the portals. */
:root {
  --bg:#0b1220; --surface:#111a2e; --card:#0f1830; --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06);
  --ink:#e7ecf5; --muted:#9fb0cc; --accent:#5b9dff; --accent-700:#3f7fe0;
  --ok-bg:#10301f; --ok-fg:#7fe0a8; --warn-bg:#3a2e10; --warn-fg:#f0c869; --bad-bg:#3a1518; --bad-fg:#f08a8a;
  --radius:14px; --radius-sm:9px; --font-body:"Inter",system-ui,sans-serif; --font-head:"Fraunces",Georgia,serif;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.55; }
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:500; margin:0; letter-spacing:-.01em; color:#fff; }
a { color:inherit; text-decoration:none; } button { font-family:inherit; cursor:pointer; }
input { font-family:inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

.btn { display:inline-flex; align-items:center; gap:.4rem; justify-content:center; height:38px; padding:0 1rem; border-radius:999px; border:1px solid transparent; font-size:.9rem; font-weight:500; transition:.15s; }
.btn:active { transform:translateY(1px); }
.btn-solid { background:var(--accent); color:#04122e; } .btn-solid:hover { background:var(--accent-700); color:#fff; }
.btn-line { background:transparent; border-color:var(--line); color:var(--ink); } .btn-line:hover { border-color:var(--accent); }
.btn-danger { background:transparent; border-color:var(--bad-fg); color:var(--bad-fg); } .btn-danger:hover { background:var(--bad-bg); }
.btn-sm { height:32px; padding:0 .75rem; font-size:.82rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.field { margin-bottom:1rem; } .field label { display:block; font-size:.82rem; font-weight:500; margin-bottom:.35rem; }
.field input { width:100%; height:42px; padding:0 .8rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font-size:.95rem; }
.field input:focus { outline:none; border-color:var(--accent); }

.auth { min-height:100vh; display:grid; place-items:center; padding:1.5rem; }
.auth-card { background:var(--card); border:1px solid var(--line); border-radius:18px; width:100%; max-width:420px; padding:2.4rem; box-shadow:0 30px 80px -40px #000; }
.auth-brand { display:flex; align-items:center; gap:.5rem; color:var(--accent); margin-bottom:.3rem; }
.auth-brand b { font-family:var(--font-head); font-size:1.45rem; color:#fff; font-weight:500; }
.auth-tag { font-size:.72rem; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.3rem; }
.auth-card h1 { font-size:1.4rem; margin-bottom:1.2rem; }
.demo-hint { margin-top:1.1rem; padding:.7rem .9rem; background:var(--surface); border-radius:var(--radius-sm); font-size:.82rem; color:var(--muted); }

.topnav { background:#070d18; border-bottom:1px solid var(--line); }
.topnav__inner { max-width:1120px; margin:0 auto; padding:0 1.5rem; height:60px; display:flex; align-items:center; gap:1.2rem; }
.topnav .brand { display:flex; align-items:center; gap:.5rem; color:#fff; font-weight:600; }
.topnav .brand b { font-family:var(--font-head); font-size:1.25rem; }
.topnav .brand .tag { font-size:.62rem; background:rgba(91,157,255,.18); color:var(--accent); padding:.15rem .5rem; border-radius:999px; letter-spacing:.08em; text-transform:uppercase; }
.tabs { display:flex; gap:.2rem; }
.tab { padding:.4rem .85rem; border-radius:999px; font-size:.88rem; font-weight:500; color:var(--muted); }
.tab:hover { background:rgba(255,255,255,.06); color:#fff; } .tab.active { background:rgba(91,157,255,.16); color:#fff; }
.who { margin-left:auto; font-size:.86rem; color:var(--muted); } .who b { color:#fff; }
.topnav button { background:transparent; border:1px solid var(--line); color:var(--ink); height:32px; padding:0 .8rem; border-radius:999px; font-size:.82rem; margin-left:.8rem; }
.topnav button:hover { border-color:var(--accent); }

.wrap { max-width:1120px; margin:0 auto; padding:1.8rem 1.5rem 3rem; }
.page-head { margin-bottom:1.4rem; } .page-head h1 { font-size:1.6rem; } .page-head p { color:var(--muted); font-size:.9rem; margin-top:.2rem; }
.grid { display:grid; gap:1rem; } .cols-4 { grid-template-columns:repeat(4,1fr); } .cols-3 { grid-template-columns:repeat(3,1fr); }
.metric { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem; }
.metric .label { font-size:.78rem; color:var(--muted); } .metric .value { font-family:var(--font-head); font-size:1.8rem; margin-top:.3rem; color:#fff; }
.metric .value small { font-size:.8rem; color:var(--muted); }

.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; }
.section-title { display:flex; align-items:center; justify-content:space-between; margin:1.8rem 0 1rem; } .section-title h2 { font-size:1.2rem; }
.muted { color:var(--muted); } .t-sub { color:var(--muted); font-size:.82rem; } .t-strong { font-weight:500; }
.empty { text-align:center; padding:3rem 1rem; color:var(--muted); } .empty .big { font-size:2rem; margin-bottom:.5rem; }
.inline-actions { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }
.right { text-align:right; }

.table-wrap { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
table.data { width:100%; border-collapse:collapse; font-size:.9rem; }
table.data th { text-align:left; background:var(--surface); font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:.75rem 1rem; border-bottom:1px solid var(--line-soft); }
table.data td { padding:.7rem 1rem; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
table.data tr:last-child td { border-bottom:0; }

.badge { display:inline-flex; align-items:center; font-size:.73rem; font-weight:600; padding:.2rem .55rem; border-radius:999px; }
.b-ok { background:var(--ok-bg); color:var(--ok-fg); } .b-warn { background:var(--warn-bg); color:var(--warn-fg); }
.b-bad { background:var(--bad-bg); color:var(--bad-fg); } .b-gray { background:rgba(255,255,255,.08); color:var(--muted); }

.prod { display:flex; flex-direction:column; }
.thumb { height:110px; border-radius:var(--radius-sm); background:var(--surface); position:relative; overflow:hidden; margin-bottom:.7rem; }
.thumb::before { content:attr(data-emoji); position:absolute; inset:0; display:grid; place-items:center; font-size:2rem; }
.thumb img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }

.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.6); display:grid; place-items:center; padding:1.5rem; z-index:50; }
.modal { background:var(--card); border:1px solid var(--line); border-radius:16px; width:100%; max-width:520px; max-height:90vh; overflow:auto; }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line-soft); }
.modal-head h3 { font-size:1.15rem; } .modal-head .x { background:none; border:0; font-size:1.3rem; color:var(--muted); }
.modal-body { padding:1.2rem 1.3rem; } .modal-foot { padding:1rem 1.3rem; border-top:1px solid var(--line-soft); display:flex; gap:.6rem; justify-content:flex-end; }

#toast { position:fixed; bottom:1.4rem; right:1.4rem; display:flex; flex-direction:column; gap:.5rem; z-index:100; }
.toast { background:#000; border:1px solid var(--line); color:#fff; padding:.7rem 1rem; border-radius:var(--radius-sm); font-size:.88rem; max-width:340px; }
.toast.err { border-color:var(--bad-fg); } .toast.ok { border-color:var(--ok-fg); }

@media (max-width:860px){ .cols-4,.cols-3 { grid-template-columns:1fr 1fr; } .who { display:none; } }