:root { --navy:#1e3a5f; --green:#15803d; --red:#b91c1c; --amber:#b45309; --bg:#f4f6f9; --line:#d9dee7; --muted:#5b6778; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); font:14px/1.5 "Segoe UI", Helvetica, Arial, sans-serif; color:#1f2937; }
  header { background:var(--navy); color:#fff; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
  header h1 { font-size:18px; margin:0; letter-spacing:.3px; }
  nav { display:flex; gap:4px; flex-wrap:wrap; }
  nav button { background:transparent; color:#cfe0f5; border:1px solid transparent; }
  nav button.on { background:#fff; color:var(--navy); }
  main { max-width:1100px; margin:0 auto; padding:20px 16px 80px; }
  .card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin-bottom:16px; }
  .card h2 { font-size:15px; margin:0 0 4px; color:var(--navy); }
  p.help { margin:0 0 12px; color:var(--muted); font-size:12.5px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 14px; }
  label { display:block; font-size:12px; color:var(--muted); margin-bottom:3px; }
  input, select, textarea { width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:5px; font:inherit; background:#fff; }
  textarea { min-height:70px; font-family:Consolas, monospace; font-size:12.5px; }
  .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
  button { padding:7px 14px; border-radius:5px; border:1px solid var(--navy); background:#fff; color:var(--navy); font:inherit; cursor:pointer; }
  button.primary { background:var(--navy); color:#fff; }
  button.danger { border-color:var(--red); color:var(--red); }
  .token { font-family:Consolas, monospace; font-size:12px; background:#0f172a; color:#e2e8f0; padding:10px 12px; border-radius:6px; word-break:break-all; }
  .badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; font-weight:600; }
  .ok { background:#dcfce7; color:var(--green); } .bad { background:#fee2e2; color:var(--red); } .warn { background:#fef3c7; color:var(--amber); }
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th { background:var(--navy); color:#fff; text-align:left; padding:6px 8px; font-weight:600; }
  td { border-bottom:1px solid var(--line); padding:6px 8px; vertical-align:top; }
  tr:nth-child(even) td { background:#f8fafc; }
  .tablewrap { overflow-x:auto; }
  .kv { display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; font-size:13px; }
  .kv div:nth-child(odd) { color:var(--muted); }
  .note { background:#fef9c3; border:1px solid #fde68a; padding:8px 10px; border-radius:6px; font-size:12.5px; margin-top:8px; }
  .msg { position:fixed; left:50%; transform:translateX(-50%); bottom:24px; max-width:90%; padding:10px 16px; border-radius:6px; color:#fff; display:none; z-index:10; white-space:pre-wrap; }
  .msg.ok { background:var(--green); } .msg.bad { background:var(--red); }
  .mono { font-family:Consolas, monospace; font-size:12px; }
  .view { max-width:460px; margin:60px auto; }
  .err { color:var(--red); font-size:13px; margin-top:10px; min-height:1em; white-space:pre-wrap; }
  .code { font-size:22px; letter-spacing:6px; text-align:center; font-family:Consolas, monospace; }
  .revoke-form td { background:#fff7ed !important; }
  #idle { color:#cfe0f5; font-size:12px; align-self:center; padding:0 6px; }
  .wide { grid-column:1/-1; }
  .inline-check { display:flex; align-items:flex-end; }
  .inline-check label { display:flex; gap:6px; align-items:center; color:#1f2937; }
  .inline-check input { width:auto; }
  .mt { margin-top:10px; } .mt0 { margin-top:0; } .q { max-width:420px; }
  .dim { color:var(--muted); font-size:12.5px; }
  .nowrap { white-space:nowrap; }
  [hidden] { display:none !important; }