:root { --bg:#14161a; --panel:#1c1f25; --line:#2c3038; --text:#e6e8eb; --dim:#9aa1ab;
        --accent:#5aa9ff; --ok:#4cc38a; --warn:#f0b429; --bad:#ef5350; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); }
header { display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel); height:53px; }
header h1 { font-size:18px; margin:0; }
header .info { color:var(--dim); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
button, .btn { background:#2a2f38; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:6px 12px; cursor:pointer; font:inherit; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { border-color:var(--accent); }
button.primary { background:var(--accent); color:#071422; border-color:var(--accent); font-weight:600; }
button.danger { color:#ffb4b2; }
button.small { padding:2px 8px; font-size:12px; }
button:disabled { opacity:.45; cursor:not-allowed; }
a { color:var(--accent); }
input[type=text], input[type=password], input[type=number], select {
  width:100%; background:#101215; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
th { position:sticky; top:0; background:var(--panel); color:var(--dim); font-weight:500; z-index:1; }
.muted { color:var(--dim); }
.err { color:var(--bad); }
.okc { color:var(--ok); }
.warnc { color:var(--warn); }
.tag { display:inline-block; background:#263042; color:#bcd6ff; border-radius:4px; padding:0 6px; margin:1px 3px 1px 0; font-size:12px; }
.tag.edited { background:#3a2f17; color:#ffd77a; }
.pill { display:inline-block; border-radius:10px; padding:1px 8px; font-size:12px; background:#2a2f38; }
.pill.submitted { background:#173a2a; color:#7be3b0; }
.pill.completed { background:#1b2d45; color:#9cc9ff; }
.pill.draft { background:#3a2f17; color:#ffd77a; }
.pill.expired, .pill.revoked { background:#3d1c1c; color:#ffb4b2; }
.row { display:flex; gap:8px; align-items:center; }
.row label { color:var(--dim); white-space:nowrap; }
.bar { height:10px; background:#101215; border-radius:5px; overflow:hidden; margin-top:6px; }
.bar > div { height:100%; background:var(--ok); width:0; transition:width .2s; }
.bar.over > div { background:var(--bad); }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:10; }
.modal { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px; width:min(520px, 92vw); max-height:85vh; overflow:auto; }
.modal h2 { margin:0 0 12px; font-size:18px; }
.modal .actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.field { margin:10px 0; }
.field > label { display:block; color:var(--dim); margin-bottom:4px; }
.banner { padding:10px 16px; background:#173a2a; color:#c8f5dd; border-bottom:1px solid var(--line); }
.banner.warn { background:#3a2f17; color:#ffe2a0; }