:root { --bg:#f5f6f4; --card:#fff; --ink:#1d2521; --muted:#6b7570; --line:#e3e6e3; --acc:#1f6f4f; --warn:#b4531b; --bad:#b3261e; --ok:#1f6f4f; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif; background:var(--bg); color:var(--ink); }
.hidden { display:none !important; }
header { display:flex; gap:16px; align-items:center; padding:12px 20px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; flex-wrap:wrap; }
header nav { display:flex; gap:4px; flex:1; }
header nav button { background:none; border:0; padding:8px 12px; border-radius:8px; cursor:pointer; color:var(--muted); font:inherit; }
header nav button.active { background:#e8f1ec; color:var(--acc); font-weight:600; }
main { padding:20px; max-width:1500px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
h1 { font-size:20px; margin:0 0 14px; } h2 { font-size:16px; margin:0 0 12px; }
.grid2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
@media (max-width:900px) { .grid2 { grid-template-columns:1fr; } main { padding:12px; } }
label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); margin-bottom:10px; flex:1; }
label.inline { flex-direction:row; align-items:center; margin:0; flex:0 0 auto; color:var(--ink); font-size:13px; }
input, select, button, .button { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
button, .button { cursor:pointer; text-decoration:none; display:inline-block; }
.primary { background:var(--acc); color:#fff; border-color:var(--acc); font-weight:600; }
.ghost { background:transparent; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.muted { color:var(--muted); font-size:12px; }
.error { color:var(--bad); }
.hint { font-size:12px; padding:8px 10px; border-radius:8px; background:#f3f4f2; flex:1; align-self:stretch; }
.login { display:grid; place-items:center; min-height:100vh; } .login form { width:320px; }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.toolbar .spacer { flex:1; }
.sendbar { background:#f7f8f6; padding:8px; border-radius:10px; }
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; } th { text-align:left; font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
td, th { padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
table.compact td { font-size:13px; }
td small { display:block; color:var(--muted); }
td a { color:var(--acc); }
td select { padding:4px 6px; font-size:12px; }
.badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:99px; background:#eee; white-space:nowrap; }
.badge.ok { background:#e2f2e8; color:var(--ok); } .badge.warn { background:#fbeee2; color:var(--warn); } .badge.bad { background:#fbe5e3; color:var(--bad); }
.chip { background:#e8f1ec; color:var(--acc); padding:4px 10px; border-radius:99px; cursor:pointer; font-size:12px; }
ul.plain { list-style:none; padding:0; margin:0 0 10px; } ul.plain li { padding:4px 0; }
code { background:#f0f1ef; padding:1px 5px; border-radius:4px; font-size:12px; }
.why { font-size:11px; color:var(--muted); max-width:220px; }