:root { --ink:#13233a; --blue:#153f73; --line:#dce3eb; --paper:#f7f5ef; --card:#fff; --muted:#657180; --red:#ae2434; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
.shell { max-width:1240px; margin:auto; padding:34px 22px 70px; }
header { display:flex; align-items:start; justify-content:space-between; gap:20px; margin-bottom:28px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:5px; font-size:clamp(1.8rem,4vw,2.7rem); letter-spacing:-.04em; }
h2 { font-size:1.05rem; } .eyebrow { font-size:.72rem; letter-spacing:.12em; font-weight:800; color:var(--blue); margin-bottom:8px; }
.muted { color:var(--muted); } .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:0 8px 24px #13233a0b; }
.narrow { max-width:420px; } label { display:grid; gap:5px; font-weight:650; font-size:.86rem; }
form { display:grid; gap:13px; } input,select { width:100%; min-height:38px; border:1px solid #b7c2ce; border-radius:7px; padding:8px; color:var(--ink); font:inherit; background:white; }
button { min-height:38px; background:var(--blue); color:white; border:0; border-radius:7px; padding:8px 13px; font:inherit; font-weight:700; cursor:pointer; }
.button-link { display:inline-flex; align-items:center; min-height:38px; border-radius:7px; padding:8px 13px; background:#e8edf3; color:var(--ink); font-weight:700; text-decoration:none; }
button.secondary { background:#e8edf3; color:var(--ink); } .error { color:var(--red); min-height:1.2em; margin:0; font-size:.86rem; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }.stat { padding:15px; background:#eaf1f8; border-radius:10px; }.stat b { display:block; font-size:1.65rem; }
.filters { display:grid; grid-template-columns:2fr 1.2fr 1fr auto auto; align-items:end; gap:12px; margin-bottom:16px; }.layout { display:grid; grid-template-columns:1fr 330px; gap:16px; }
.operations { display:grid; gap:14px; margin-bottom:16px; }.segments { display:flex; flex-wrap:wrap; gap:9px; }.segments label { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-weight:600; }.segments input { width:auto; min-height:auto; }.operation-actions { display:flex; gap:10px; }.jobs { display:grid; gap:6px; color:var(--muted); font-size:.9rem; }.jobs div { border-top:1px solid var(--line); padding-top:7px; } summary { cursor:pointer; font-weight:700; }.segment-form { max-width:680px; margin-top:14px; } textarea { width:100%; border:1px solid #b7c2ce; border-radius:7px; padding:8px; font:12px/1.35 ui-monospace, monospace; }
.results { display:grid; gap:9px; }.result { width:100%; text-align:left; background:#fff; color:var(--ink); border:1px solid var(--line); padding:13px; }.result:hover { border-color:var(--blue); }.result small { display:block; color:var(--muted); font-weight:500; margin-top:3px; }.pill { float:right; font-size:.72rem; padding:3px 7px; border-radius:12px; background:#edf2f8; }
.detail-shell { max-width:920px; }.detail-form { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }.detail-form .wide { grid-column:1 / -1; }.detail-form button,.detail-form .error { grid-column:1 / -1; } pre { overflow:auto; padding:12px; background:#f5f7fa; border-radius:8px; font-size:.82rem; }
@media (max-width:760px) { .filters,.layout,.stats,.detail-form { grid-template-columns:1fr; } header { display:block; } header button { margin-top:14px; } }