:root { --fg:#1d2430; --muted:#6b7280; --line:#d9dde3; --bg:#f6f7f9; --card:#fff; --accent:#1f5fbf; --err:#b42318; --ok:#067647; --warn-bg:#fff6e0; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fg); background: var(--bg); display: flex; flex-direction: column; }
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .75rem; }
.top { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; padding: .6rem 1rem; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { font-weight: 600; }
.top nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.top nav a { text-decoration: none; }
.page { padding: 1.5rem 1rem; max-width: 1200px; width: 100%; margin: 0 auto; }
.narrow { padding: 3rem 1rem; max-width: 420px; width: 100%; margin: 0 auto; }
.full { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.formbar { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .5rem 1rem; background: var(--card); border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
#deal-frame { flex: 1; width: 100%; min-height: 80vh; border: 0; background: #fff; }
form.inline { display: inline; margin: 0; }
.stack { display: flex; flex-direction: column; gap: .8rem; max-width: 420px; }
.stack.wide { max-width: 800px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem 1rem; align-items: end; }
.filters { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; margin-bottom: 1rem; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 3rem; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; font-weight: 500; }
label.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
input, select { font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; width: 100%; }
input[type=checkbox] { width: auto; }
button { font: inherit; padding: .5rem 1rem; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
button.link { background: none; color: var(--accent); padding: 0; }
button.danger { background: var(--err); }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); font-size: .9rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #eef0f3; font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; }
td.ua { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
td.url { word-break: break-all; }
tr.dim td { color: var(--muted); }
tr.ev-login_failed td:nth-child(2) { color: var(--err); font-weight: 600; }
.stats { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.muted { color: var(--muted); font-size: .9rem; }
.error { color: var(--err); background: #fdecea; padding: .6rem .8rem; border-radius: 6px; }
.ok { color: var(--ok); background: #e7f6ee; padding: .6rem .8rem; border-radius: 6px; }
.warn { background: var(--warn-bg); padding: .6rem .8rem; border-radius: 6px; }
.banner { border-radius: 0; text-align: center; font-size: .9rem; }
.secret code { font-size: 1.2rem; background: #fff; border: 1px solid var(--line); padding: .4rem .6rem; border-radius: 6px; user-select: all; }
@media (max-width: 700px) { table { display: block; overflow-x: auto; } }