:root{
  --bg:#f4f5f7;--card:#fff;--ink:#1f2328;--muted:#6b7280;--line:#e2e5ea;--brand:#27445B;--brand-2:#1b3242;
  --ok:#1f8a4c;--warn:#b7791f;--err:#c0392b;--new:#27ae60;--updated:#2980b9;--fixed:#eb4d4b;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font:14.5px/1.45 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);display:flex;flex-direction:column;min-height:100vh}
a{color:var(--brand)}
code{font:12.5px/1.3 Consolas,"Cascadia Mono",Menlo,monospace;background:#eef1f5;padding:1px 5px;border-radius:3px}
h1{font-size:1.45rem;margin:.2rem 0 .8rem}
h2{font-size:1.05rem;margin:0 0 .6rem}
h3{font-size:.95rem;margin:1rem 0 .4rem;color:var(--muted)}
p{margin:.3rem 0 .6rem}
main{flex:1;width:100%;max-width:1380px;margin:0 auto;padding:18px 22px}
footer{color:var(--muted);font-size:.8rem;text-align:center;padding:14px}

header.top{display:flex;align-items:center;gap:22px;background:var(--brand);color:#fff;padding:0 22px;height:50px}
header .brand{color:#fff;font-weight:700;text-decoration:none;font-size:1.05rem;letter-spacing:.3px}
header nav{display:flex;gap:4px;flex:1}
header nav a,header .me a{color:#dbe4ec;text-decoration:none;padding:6px 10px;border-radius:5px}
header nav a.on,header .me a.on{background:rgba(255,255,255,.16);color:#fff}
header nav a:hover{background:rgba(255,255,255,.1)}
header .me{display:flex;align-items:center;gap:8px}
header form{margin:0}
button.link{background:none;border:0;color:#dbe4ec;cursor:pointer;font:inherit;padding:6px 8px}
button.link:hover{color:#fff;text-decoration:underline}

.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin-bottom:16px}
.card.narrow{max-width:520px;margin:40px auto}
.card.highlight{border-color:var(--warn);background:#fffaf0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-console{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.row{display:flex;align-items:center;gap:12px}
.row.between{justify-content:space-between;flex-wrap:wrap}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:.4rem}
.cols{display:flex;gap:16px;flex-wrap:wrap}
.cols>*{flex:1;min-width:180px}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.nowrap{white-space:nowrap}
.num{text-align:right;font-variant-numeric:tabular-nums}
.pre{white-space:pre-line}
.desc{max-width:520px}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600}
table.compact td{padding:5px 6px}
tr.excluded td{opacity:.55}
tr.warn-row td{background:#fff8ee}
tr.dirty td{background:#f3f8ff}

label{display:block;margin:0 0 10px;font-weight:600;font-size:.88rem}
label .muted{font-weight:400}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=date],input[type=file],select,textarea{
  display:block;width:100%;margin-top:4px;padding:7px 9px;border:1px solid #cfd4db;border-radius:5px;font:inherit;background:#fff;color:var(--ink)}
textarea{resize:vertical;min-height:38px}
input:focus,select:focus,textarea:focus{outline:2px solid #9cc0dd;border-color:var(--brand)}
input[readonly],textarea[readonly]{background:#f7f8fa}
.form input,.form select,.form textarea{max-width:560px}
.inline{display:inline-block;margin:0}
.inline-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.inline-form label{margin:0}
.inline-form input,.inline-form select{width:auto;min-width:120px}
.filters{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.filters label{margin:0;min-width:150px}
.filters input,.filters select{width:100%}
fieldset{border:0;padding:0;margin:0 0 10px}
legend{font-weight:600;font-size:.88rem;padding:0;margin-bottom:6px}
.types{display:flex;gap:8px;flex-wrap:wrap}
.types legend{width:100%}
.radio{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:20px;cursor:pointer;font-weight:600;flex:0}
.radio input{margin:0}
.radio.new{color:var(--new)}.radio.updated{color:var(--updated)}.radio.fixed{color:var(--fixed)}
.hint{display:block;font-weight:400;color:var(--muted);font-size:.8rem;min-height:1em;margin-top:3px}

button,.btn{display:inline-block;padding:7px 13px;border:1px solid #cfd4db;border-radius:5px;background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;line-height:1.2}
button:hover,.btn:hover{background:#f0f2f5}
button.primary,.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
button.primary:hover,.btn.primary:hover{background:var(--brand-2)}
button.danger,.btn.danger{color:var(--err);border-color:#e6b8b3}
button.danger:hover,.btn.danger:hover{background:#fdf1ef}
button.small,.btn.small{padding:4px 9px;font-size:.82rem}
button[disabled],.btn[disabled]{opacity:.5;cursor:not-allowed}

.flash{padding:10px 14px;border-radius:6px;margin-bottom:14px;border:1px solid;background:#eef7f1;border-color:#bfe3cc;color:#14532d}
.flash.ok{background:#eef7f1;border-color:#bfe3cc;color:#14532d}
.flash.warn{background:#fff8ee;border-color:#f3d9a4;color:#6b4a0a}
.flash.error{background:#fdf1ef;border-color:#f0c4be;color:#7a1f16}
.flash.small{padding:6px 10px;font-size:.85rem}
.flash a{color:inherit}

.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.72rem;font-weight:700;color:#fff;letter-spacing:.3px}
.badge.new{background:var(--new)}.badge.updated{background:var(--updated)}.badge.fixed{background:var(--fixed)}
.tag{display:inline-block;padding:2px 8px;border-radius:12px;font-size:.75rem;font-weight:600;background:#eef1f5;color:#4b5563;text-decoration:none}
.tag.ok{background:#e4f4ea;color:#166534}
.tag.warn{background:#fdf0d5;color:#7a4c05}
.tag.draft{background:#e8eef7;color:#1e3a5f}
.pill{display:inline-block;background:#eef1f5;color:#374151;border-radius:12px;padding:1px 9px;font-size:.78rem;font-weight:600;vertical-align:middle;margin-left:4px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:baseline;margin-right:2px}
.dot.big{width:14px;height:14px}
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:3px 0}
ul.checks label{font-weight:500;margin:0;display:flex;gap:6px;align-items:center}
pre.codes{background:#1f2328;color:#e6edf3;padding:12px 16px;border-radius:6px;font-size:1.05rem;letter-spacing:1px}
img.qr{display:block;margin:10px 0;border:1px solid var(--line);border-radius:6px;background:#fff}

/* console */
table.editable td{padding:6px 5px}
table.editable input.cmd{min-width:170px;font-family:Consolas,Menlo,monospace;font-size:.85rem}
table.editable textarea{min-width:320px;font-size:.9rem}
table.editable select.type-select{width:auto;font-weight:700;font-size:.78rem;padding:4px 6px}
select.type-select.new{color:var(--new)}select.type-select.updated{color:var(--updated)}select.type-select.fixed{color:var(--fixed)}
table.editable input[type=checkbox]{width:17px;height:17px;margin-top:6px}
details.add-note{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
details.add-note summary{cursor:pointer;font-weight:600;color:var(--brand)}
.dl-row{display:grid;grid-template-columns:1fr 60px 1.6fr 30px;gap:6px;margin-bottom:6px;align-items:center}
.dl-row input{margin:0;padding:5px 7px;font-size:.85rem}
.dl-row button{padding:3px 0;text-align:center}
#preview{width:100%;height:640px;border:1px solid var(--line);border-radius:6px;background:#1a1d23}
.busy{opacity:.6;pointer-events:none}

@media (max-width:980px){
  .grid2,.grid-console{grid-template-columns:1fr}
  header.top{flex-wrap:wrap;height:auto;padding:8px 14px}
  main{padding:12px}
}