:root { --bg:#0f1115; --card:#181b22; --line:#2a2f3a; --fg:#e7e9ee; --muted:#9aa3b2; --accent:#6ea8fe; --ok:#3ddc97; --err:#ff6b6b; --warn:#ffb454; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
.wrap { max-width:1040px; margin:0 auto; padding:40px 20px 90px; }
h1 { font-size:1.55rem; margin:0 0 6px; }
p.lead { color:var(--muted); margin:0 0 24px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; }
label { display:block; font-weight:600; margin:0 0 6px; font-size:.9rem; }
input[type=text], input[type=url], select { padding:10px 12px; border-radius:9px; border:1px solid var(--line); background:#10131a; color:var(--fg); font-size:.95rem; }
input:focus, select:focus { outline:none; border-color:var(--accent); }
button { border:0; border-radius:9px; background:var(--accent); color:#0b1020; font-weight:700; font-size:.95rem; cursor:pointer; padding:10px 16px; }
button:hover { filter:brightness(1.06); }
button.ghost { background:#243042; color:var(--fg); }
button.tiny { padding:6px 10px; font-size:.85rem; }
.hint { color:var(--muted); font-size:.85rem; }
.err { margin-top:14px; padding:12px; border-radius:10px; border:1px solid #5a1f1f; background:#1c1113; color:var(--err); }
.err-text { color:var(--err); }
.row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.grow { flex:1 1 320px; }

/* utility classes (replacing former inline styles for a strict CSP) */
.full { width:100%; }
.row-hint { margin-top:8px; }
.btn-block { width:100%; margin-top:10px; }

/* layout after load */
.builder { display:grid; grid-template-columns:1fr; gap:20px; margin-top:22px; }
@media (min-width:880px){ .builder { grid-template-columns:380px 1fr; align-items:start; } }
.panel { position:sticky; top:20px; }

.rule { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px; border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:#10131a; }
.rule .val { grid-column:1 / -1; }
.rule .val input { width:100%; }
.rule select { width:100%; }
.rule .ctl { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; }
.rule .ctl label { display:flex; gap:6px; align-items:center; font-weight:400; color:var(--muted); margin:0; }
.matchmode { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.count { font-weight:700; margin:14px 0; }
.count b { color:var(--ok); }

.events { display:flex; flex-direction:column; gap:12px; }
.ev { border:1px solid var(--line); border-radius:11px; padding:14px 16px; transition:opacity .12s, filter .12s; }
.ev.out { opacity:.38; filter:grayscale(.6); }
.ev.out .ev-title { text-decoration:line-through; }
.ev-title { font-weight:700; margin:0 0 4px; }
.ev-meta { color:var(--muted); font-size:.85rem; display:flex; gap:14px; flex-wrap:wrap; }
.ev-badges { float:right; gap:6px; }
.ev-field { margin-top:8px; font-size:.9rem; }
.ev-field .k { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.badge { font-size:.7rem; padding:2px 7px; border-radius:99px; border:1px solid var(--line); }
.badge.out { color:var(--warn); border-color:#5a431f; }
.badge.cancelled { color:var(--err); border-color:#5a1f1f; }
.desc { white-space:pre-wrap; color:#c7ccd6; max-height:5.4em; overflow:hidden; position:relative; }
.desc.open { max-height:none; }
.desc-toggle { background:none; color:var(--accent); padding:2px 0; font-size:.82rem; }

.save { margin-top:16px; border-top:1px solid var(--line); padding-top:16px; }
.urlrow { display:flex; gap:8px; margin-top:10px; }
.urlrow input { flex:1; font-family:ui-monospace,Menlo,monospace; font-size:.85rem; }
.result { margin-top:14px; padding:14px; border-radius:10px; border:1px solid #1f5a44; background:#10171a; }
.spinner { color:var(--muted); }
.hidden { display:none; }