:root { --ink:#17231e; --muted:#617169; --paper:#f6f2e9; --panel:#fffdf8; --line:#d9d1c2; --green:#0d6b49; --red:#a63d2e; --amber:#a16f17; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:radial-gradient(circle at 12% 0%,#e2f0df,transparent 31rem),var(--paper); font:16px/1.45 Georgia, serif; }
 a { color:#075f9a; } header { border-bottom:1px solid var(--line); background:rgba(255,253,248,.92); } .bar { max-width:1080px; margin:auto; padding:18px 24px; display:flex; gap:18px; align-items:center; } .brand { font-weight:bold; font-size:20px; color:var(--ink); text-decoration:none; } nav { display:flex; gap:14px; margin-right:auto; } main { max-width:1080px; margin:32px auto; padding:0 24px 60px; } h1 { font-size:30px; margin:0 0 8px; } h2 { font-size:20px; margin:0 0 14px; } .lead { color:var(--muted); margin:0 0 24px; } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; } .card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; box-shadow:0 8px 25px rgba(60,48,26,.05); } .critical { border-color:var(--red); background:#fff5f1; } .ok { color:var(--green); font-weight:bold; } .bad { color:var(--red); font-weight:bold; } .pending { color:var(--amber); font-weight:bold; } table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; } th,td { text-align:left; padding:12px; border-bottom:1px solid var(--line); vertical-align:top; } th { color:var(--muted); font-weight:normal; } tr:last-child td { border:0; } .actions { display:flex; flex-wrap:wrap; gap:8px; } form.inline { display:inline; } label { display:block; font-weight:bold; margin:12px 0 5px; } input, textarea { width:100%; font:inherit; padding:10px; border:1px solid #aa9f8d; border-radius:7px; background:#fffefa; } textarea { min-height:290px; font:13px/1.35 ui-monospace,Consolas,monospace; } .qr { display:block; width:min(100%,420px); image-rendering:pixelated; background:#fff; padding:16px; border:1px solid var(--line); } button,.button { display:inline-block; padding:9px 13px; border:1px solid #0d5d42; border-radius:7px; background:var(--green); color:#fff; font:inherit; cursor:pointer; text-decoration:none; } button.secondary,.button.secondary { background:#fffdf8; color:var(--ink); border-color:#aa9f8d; } button.danger { background:var(--red); border-color:#8b2b20; } .notice { padding:12px; border-left:4px solid var(--amber); background:#fff6de; margin:18px 0; } .warning { padding:14px; border-left:4px solid var(--red); background:#fff2ef; margin:18px 0; } .login { max-width:420px; margin:12vh auto; } .muted { color:var(--muted); } .top-space { margin-top:24px; } @media (max-width:640px) { main { margin-top:22px; padding:0 14px 38px; } .bar { padding:14px; flex-wrap:wrap; } table { display:block; overflow:auto; } }
.happ-dialog { width:min(92vw,520px); max-height:90vh; overflow:auto; border:1px solid var(--line); border-radius:16px; padding:24px; background:var(--panel); color:var(--ink); box-shadow:0 24px 80px rgba(12,25,18,.3); }
.happ-dialog::backdrop { background:rgba(13,30,22,.72); }
.credential-source { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }