:root { --bg:#f6f7f9; --panel:#fff; --text:#1d2330; --muted:#6b7280; --line:#e3e6eb; --primary:#1f6feb; --danger:#c62828; --ok:#1b7f3b; --warn:#b26a00; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--text); background:var(--bg); }
.topbar { display:flex; align-items:center; gap:24px; padding:10px 24px; background:#111827; color:#fff; }
.topbar .brand { color:#fff; font-weight:700; text-decoration:none; font-size:17px; }
.topbar nav a { color:#cbd5e1; text-decoration:none; margin-right:16px; }
.topbar nav a:hover { color:#fff; }
.topbar .user { margin-left:auto; color:#94a3b8; font-size:13px; }
main { max-width:1100px; margin:0 auto; padding:24px; }
h1 { font-size:24px; margin:0 0 16px; }
h2 { font-size:17px; margin:0 0 10px; }
h3 { font-size:15px; margin:16px 0 6px; }
a { color:var(--primary); }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn { display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--text); text-decoration:none; font:inherit; cursor:pointer; line-height:1.3; }
.btn:hover { border-color:#b9c0cc; }
.btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-small { padding:4px 10px; font-size:13px; }
.btn-link { border-color:transparent; background:transparent; color:var(--muted); }
.table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.table th, .table td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.table th { background:#f1f3f6; font-weight:600; font-size:13px; }
.table tr:last-child td { border-bottom:0; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin-top:20px; }
.banner { padding:12px 16px; border-radius:8px; margin-bottom:16px; border:1px solid; }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:10px; border:1px solid; }
.banner-error, .flash-error { background:#fdecea; border-color:#f5c2c0; color:#8a1c1c; }
.banner-warning, .flash-warning { background:#fff6e5; border-color:#f3dcaa; color:#7a4b00; }
.banner-info, .flash-info { background:#e8f1fd; border-color:#bcd4f6; color:#17457f; }
.flash-success { background:#e7f6ec; border-color:#b7e0c4; color:#135c2d; }
.muted { color:var(--muted); }
.small { font-size:13px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; background:#eef0f3; padding:1px 4px; border-radius:4px; }
.tag { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; }
.tag-ok { background:#e7f6ec; color:var(--ok); }
.tag-off { background:#eef0f3; color:var(--muted); }
.tag-warn { background:#fff6e5; color:var(--warn); }
.form .field { margin-bottom:14px; }
.form label { display:block; font-weight:600; margin-bottom:4px; font-size:14px; }
.form label.checkbox { font-weight:600; margin-top:28px; }
.form input:not([type=checkbox]), .form textarea { width:100%; padding:8px 10px; border:1px solid #c9cfd8; border-radius:6px; font:inherit; background:#fff; }
.form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; resize:vertical; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:800px) { .grid-2 { grid-template-columns:1fr; } }
fieldset.lists { border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin:0 0 16px; background:var(--panel); }
fieldset.lists legend { font-weight:700; padding:0 6px; }
.help { color:var(--muted); font-size:13px; margin:4px 0 0; }
.messages { list-style:none; padding:0; margin:6px 0 0; }
.msg { font-size:13px; padding:4px 8px; border-radius:4px; margin-bottom:3px; }
.msg-error { background:#fdecea; color:#8a1c1c; }
.msg-warning { background:#fff6e5; color:#7a4b00; }
.msg-info { background:#eef0f3; color:#374151; }
.counter { color:var(--muted); font-weight:400; font-size:12px; }
.token-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.token { user-select:all; }
.urls { margin-top:8px; font-size:13px; }
.urls ul { padding-left:18px; }
.urls li { margin:4px 0; word-break:break-all; }
.filebox { background:#0f172a; color:#e2e8f0; padding:12px; border-radius:6px; font-size:12.5px; max-height:360px; overflow:auto; white-space:pre; margin:0; }
.form-actions { display:flex; gap:8px; align-items:center; margin-top:8px; }
.inline-form { display:inline-block; margin-top:8px; }
.topbar .logout { margin:0; } .topbar .logout .btn { background:transparent; color:#cbd5e1; border-color:#374151; }
.login-box { max-width:480px; margin:48px auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:24px 28px; }
.btn-wide { display:block; text-align:center; padding:12px 16px; font-size:16px; }
.panel.readonly { margin:0 0 16px; }

.fetches { margin:0 0 16px; } .fetches summary { font-weight:600; cursor:pointer; margin-bottom:8px; }
.fetch-table th, .fetch-table td { padding:6px 8px; white-space:nowrap; } .fetch-table code { font-size:12px; }

.tag-err { background:#fdecea; color:#8a1c1c; }
.source-picks { margin-top:8px; }
.source-picks > .small { display:block; margin-bottom:4px; }
.source-picks .pick { display:flex; margin:3px 0 !important; }
.pick { font-weight:400 !important; font-size:13px; display:inline-flex; align-items:center; gap:6px; margin:0 !important; }
.pick-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px 12px; margin-bottom:12px; }
.actions form { display:inline; }