:root { --bg:#111418; --panel:#1a1f26; --panel2:#20262e; --border:#2b333d; --fg:#e6e9ee; --muted:#8b96a5; --accent:#3b82f6; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.5 "Segoe UI", "Malgun Gothic", system-ui, sans-serif; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
header.top { display:flex; align-items:center; gap:16px; padding:12px 24px; background:var(--panel); border-bottom:1px solid var(--border); }
header.top .brand { font-weight:600; font-size:16px; color:var(--fg); }
header.top .spacer { flex:1; }
header.top form { margin:0; }
main { max-width: 1100px; margin: 0 auto; padding: 20px 24px 60px; }
h1 { font-size:22px; margin:0 0 6px; } h2 { font-size:17px; margin:0 0 10px; } h3 { font-size:14px; margin:0 0 8px; color:var(--muted); }
.card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin:0 0 16px; }
.muted { color:var(--muted); } .small { font-size:12px; }
code, pre { font-family: Consolas, "Cascadia Mono", monospace; font-size:12.5px; }
pre { background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; overflow:auto; white-space:pre-wrap; word-break:break-all; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-weight:500; font-size:12px; }
.badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11.5px; border:1px solid var(--border); }
.badge.PUBLISHED { background:rgba(34,197,94,.15); color:var(--ok); border-color:rgba(34,197,94,.4); }
.badge.DRAFT { background:rgba(139,150,165,.15); color:var(--muted); }
.badge.REVOKED { background:rgba(239,68,68,.15); color:var(--err); border-color:rgba(239,68,68,.4); }
.badge.latest { background:rgba(59,130,246,.15); color:var(--accent); border-color:rgba(59,130,246,.4); }
input[type=text], input[type=password], textarea, select { width:100%; background:var(--panel2); color:var(--fg); border:1px solid var(--border); border-radius:8px; padding:7px 10px; font:inherit; }
input[type=file] { color:var(--muted); }
textarea { min-height:60px; }
label { display:block; font-size:12px; color:var(--muted); margin:8px 0 3px; }
button, .btn { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:7px 14px; font:inherit; cursor:pointer; }
button.ghost { background:transparent; border:1px solid var(--border); color:var(--fg); }
button.danger { background:transparent; border:1px solid rgba(239,68,68,.5); color:var(--err); }
button.small { padding:3px 9px; font-size:12px; }
.row { display:flex; gap:12px; flex-wrap:wrap; } .row > * { flex:1; min-width:160px; }
.flash { padding:10px 14px; border-radius:8px; margin:0 0 14px; border:1px solid; }
.flash.ok { border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.1); }
.flash.error { border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.1); }
.flash.token { border-color:rgba(245,158,11,.6); background:rgba(245,158,11,.12); }
.actions form { display:inline; }
.login { max-width:360px; margin:80px auto; }
details summary { cursor:pointer; color:var(--muted); }