/* Evrion Office: ruhige Büro-Oberfläche, dunkel mit Gold-Akzent wie die übrigen Evrion-Seiten. */
:root { --bg:#0a0d16; --panel:#11151f; --panel2:#161b27; --line:#232a39; --ink:#eef0f6; --text:#c9cede; --muted:#8b93a7; --gold:#f2b45c; --green:#5fd39a; --red:#e5484d; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color:var(--gold); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { color:var(--ink); font-size:26px; margin:6px 0 14px; letter-spacing:-.01em; }
h2 { color:var(--ink); font-size:17px; margin:30px 0 10px; }
code { background:var(--panel2); padding:1px 6px; border-radius:6px; }
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:28px; padding:12px max(16px, 3vw); background:rgba(10,13,22,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); }
.brand span { display:grid; line-height:1; } .brand b { font-size:17px; letter-spacing:.12em; } .brand i { font-style:normal; font-size:10px; letter-spacing:.5em; color:var(--gold); margin-top:4px; }
.brand:hover { text-decoration:none; }
nav { display:flex; gap:4px; flex-wrap:wrap; }
nav a { color:var(--text); padding:7px 12px; border-radius:8px; } nav a:hover { background:var(--panel2); text-decoration:none; }
nav a.on { color:var(--bg); background:var(--gold); font-weight:600; }
.me { margin-left:auto; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; }
.wrap { max-width:1180px; margin:0 auto; padding:26px max(16px, 3vw) 60px; }
.foot { text-align:center; color:var(--muted); font-size:12px; padding:20px; border-top:1px solid var(--line); }
.muted { color:var(--muted); } .empty { color:var(--muted); padding:30px; text-align:center; background:var(--panel); border:1px dashed var(--line); border-radius:12px; }
.btn, button { font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--panel2); color:var(--ink); padding:8px 14px; border-radius:9px; display:inline-block; }
.btn:hover, button:hover { border-color:var(--gold); text-decoration:none; }
.btn.gold { background:var(--gold); color:#14100a; border-color:var(--gold); font-weight:600; text-align:center; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; display:grid; gap:4px; color:var(--text); }
.tile:hover { border-color:var(--gold); text-decoration:none; }
.tile b { font-size:30px; color:var(--ink); font-variant-numeric:tabular-nums; }
.feed { list-style:none; padding:0; margin:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.feed li { padding:10px 14px; border-bottom:1px solid var(--line); } .feed li:last-child { border:0; }
.t, .nowrap { white-space:nowrap; } .feed .t { color:var(--muted); font-size:13px; margin-right:8px; }
.bar { display:flex; gap:8px; margin:10px 0; flex-wrap:wrap; }
.bar input { flex:1; min-width:220px; }
input { font:inherit; background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:9px 12px; width:100%; }
input:focus { outline:2px solid var(--gold); outline-offset:1px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.chip { padding:5px 11px; border-radius:999px; border:1px solid var(--line); color:var(--text); font-size:13px; }
.chip.on { background:var(--gold); color:#14100a; border-color:var(--gold); font-weight:600; }
.tbl { overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--line); }
td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; } tr:last-child td { border:0; }
td small { color:var(--muted); } td.n { text-align:right; font-variant-numeric:tabular-nums; }
.pill { font-size:12px; padding:2px 8px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); white-space:nowrap; }
.pill.in { color:var(--green); border-color:rgba(95,211,154,.4); }
iframe.tx { width:100%; height:72vh; border:1px solid var(--line); border-radius:12px; background:#313338; }
.login { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(700px 400px at 50% 20%, rgba(242,180,92,.12), transparent 70%), var(--bg); }
.card { width:min(420px, 100%); background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:30px; display:grid; gap:16px; }
.brand.big b { font-size:22px; } .lead { color:var(--muted); margin:0; }
.card form { display:grid; gap:12px; } .card label { display:grid; gap:6px; font-size:13px; color:var(--muted); }
.err { color:#ffb4b4; background:rgba(229,72,77,.12); border:1px solid rgba(229,72,77,.35); padding:9px 12px; border-radius:9px; margin:0; }
.or { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; } .or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }
@media (max-width:640px) { .me span { display:none; } h1 { font-size:22px; } }