:root { --line:#e2e6ea; --head:#f3f5f7; --muted:#6b7480; --bad:#c0392b; --good:#1e824c; --link:#2457c5; }
* { box-sizing: border-box; }
body { font: 14px/1.4 -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; color:#1b2733; }
header#top { padding: 10px 20px; border-bottom: 1px solid var(--line); display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
h1 { font-size: 17px; margin: 0; }
h2 { font-size: 15px; margin: 18px 0 8px; }
nav.main { display:flex; gap:4px; flex-wrap:wrap; }
nav.main a { padding:6px 12px; border-radius:6px; color:#1b2733; }
nav.main a.on { background:#eef2f6; font-weight:600; }
nav.main a:hover { background:#f5f7f9; text-decoration:none; }
.user { margin-left:auto; color:var(--muted); font-size:13px; }
.meta { color: var(--muted); font-size: 12px; }
nav.tabs { display:flex; gap:4px; padding: 8px 20px 0; border-bottom:1px solid var(--line); }
nav.tabs button { border:1px solid var(--line); border-bottom:none; background:#fafbfc; padding:7px 14px;
  border-radius:6px 6px 0 0; cursor:pointer; font-size:13px; }
nav.tabs button.on { background:#fff; font-weight:600; }
.controls { padding: 12px 20px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.wrap { padding: 0 20px 40px; }
.narrow { max-width: 360px; margin: 60px auto; }
select, input[type=text], input[type=password], input[type=date], input[type=search] {
  padding:5px 8px; border:1px solid var(--line); border-radius:6px; font-size:13px; }
input[type=file] { font-size:13px; }
form.row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin:10px 0; }
form.row label, form.stack label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
form.stack { display:flex; flex-direction:column; gap:12px; }
form.stack input { padding:8px 10px; font-size:14px; }
button { padding:6px 14px; border:1px solid #c9d1d9; border-radius:6px; background:#fff; cursor:pointer; font-size:13px; }
button.primary { background:#2457c5; border-color:#2457c5; color:#fff; }
button:disabled { opacity:.6; cursor:default; }
button.link { border:none; background:none; color:var(--link); padding:0 4px; }
button.danger { color:var(--bad); }
.btn { display:inline-block; padding:6px 14px; border:1px solid #c9d1d9; border-radius:6px; color:#1b2733; font-size:13px; }
.btn:hover { text-decoration:none; background:#f5f7f9; }
label.chk { font-size:13px; color:#333; display:inline-flex; gap:5px; align-items:center; }
table { border-collapse: collapse; width:100%; font-size:13px; }
table.auto { width:auto; margin-bottom:14px; }
th, td { padding:6px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:var(--head); position:sticky; top:0; font-weight:600; }
td.num, th.num { text-align:right; white-space:nowrap; }
td.strong { font-weight:600; }
tr:hover td { background:#f8fafc; }
tr.inactive td { color:var(--muted); }
.dev-bad { color:var(--bad); font-weight:600; }
.dev-good { color:var(--good); font-weight:600; }
.muted { color:var(--muted); }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
.sale { color:var(--bad); }
.note { color:var(--muted); font-size:12px; margin:8px 0; }
.error { color:var(--bad); }
.box { border-radius:6px; padding:8px 12px; margin:10px 0; font-size:13px; }
.box ul { margin:6px 0 0; padding-left:20px; }
.box.bad { background:#fdecea; border:1px solid #f5c6c0; }
.box.warn { background:#fff8e1; border:1px solid #f0dfa5; }
.box.ok { background:#e9f7ef; border:1px solid #b9e2c9; }
.box.secret { background:#eef2f6; border:1px solid var(--line); font-size:14px; }
.box.secret code { font-size:16px; font-weight:600; letter-spacing:1px; }
img.thumb { height:48px; border-radius:3px; border:1px solid var(--line); margin-right:3px; vertical-align:top; }
.scroll { overflow-x:auto; }