*{box-sizing:border-box}
:root{font-family:Inter,Arial,sans-serif;color:#20242b;background:#f4f6f9;--red:#d71920;--line:#e5e8ed;--muted:#737b87}
body{margin:0}
.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,76px)}
.brand{display:flex;align-items:center;gap:12px}.logo{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--red);color:#fff;font-size:25px}
.brand strong{font-size:14px}.brand em{color:var(--red);font-style:normal}.brand small{display:block;color:#9299a3;font-size:9px;letter-spacing:1.5px;margin-top:4px}
.online{font-size:11px;color:#66707d}
main{max-width:1440px;margin:auto;padding:6px clamp(18px,5vw,76px) 22px}
.hero,.panel,.category{background:#fff;border:1px solid var(--line);border-radius:14px}
.hero{padding:22px 28px;border-left:5px solid var(--red);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(110deg,#fff 70%,#fff4f4)}
.hero small{font-size:10px;letter-spacing:1.5px;color:var(--red);font-weight:800}.hero h1{font-size:30px;margin:8px 0 7px;letter-spacing:-.7px}.hero p,.sub{font-size:12px;color:var(--muted);margin:0;line-height:1.55}
.hero-icon{font-size:36px;color:var(--red);background:#fff1f1;padding:12px 18px;border-radius:15px}
section{margin-top:22px}h2{font-size:17px;margin:0 0 6px;letter-spacing:-.25px}
.categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:12px}
.category{text-align:left;padding:15px 16px;min-height:108px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:5px;transition:transform .16s,border-color .16s,box-shadow .16s}
.category:hover{border-color:#ed9a9e;transform:translateY(-2px);box-shadow:0 6px 16px #20242b0c}
.category b{display:grid;place-items:center;background:#f1f3f6;border-radius:8px;width:31px;height:31px;font-size:18px;margin-bottom:5px}
.category strong{font-size:14px}.category small{font-size:11px;color:var(--muted)}
.category.active{border:1.5px solid var(--red);background:#fffafa;box-shadow:0 0 0 3px #d719200b}.category.active b{background:var(--red);color:#fff}
.panel{padding:19px 20px;margin-top:22px}
.filters{display:grid;grid-template-columns:1.15fr 1.05fr 1fr 1fr;gap:18px;margin-top:16px;align-items:end}
.filters label{font-size:11px;font-weight:700;display:flex;flex-direction:column;gap:7px;min-width:0}
.filters input,.filters select{width:100%;height:40px;border:1px solid #dfe3e9;border-radius:8px;padding:0 10px;background:#fff;font:inherit;font-size:12px;color:#303741;outline:none}
.filters input:focus,.filters select:focus{border-color:var(--red);box-shadow:0 0 0 3px #d7192012}
.note,.footnote{font-size:11px;color:var(--muted);margin:10px 0 0;line-height:1.55}
.actions,.result-head,.result-actions{display:flex;align-items:center;gap:10px}.actions{margin-top:15px}
.actions span{font-size:11px;color:var(--muted)}
button{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:11px 15px;font-size:12px;font-weight:700;transition:background .15s,border-color .15s}
.primary{background:var(--red);color:#fff}.primary:hover{background:#b9141b}
.result-head{justify-content:space-between;margin-bottom:14px}.result-head h2 em{color:var(--red);font-style:normal}
.result-actions button:first-child{background:#f1f3f6;color:#39414d;border:1px solid #e5e8ed}
.result-actions button:last-child{background:#202a36;color:#fff}
.result-actions button:disabled{opacity:.45;cursor:not-allowed}
.table-wrap{border:1px solid var(--line);border-radius:9px;overflow:auto;min-height:210px}
.empty{min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:11px}
.empty b{font-size:25px;background:#f2f4f7;padding:10px 16px;border-radius:10px}.empty strong{color:#444d58;font-size:13px}
table{border-collapse:collapse;width:100%;font-size:11px;white-space:nowrap}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid #edf0f3}th{background:#f7f8fa;color:#555e6a;position:sticky;top:0}
footer{text-align:center;color:#a0a6af;font-size:9px;letter-spacing:1.2px;padding:26px}
dialog{border:0;border-radius:14px;width:min(540px,calc(100% - 28px));padding:22px;box-shadow:0 20px 70px #11182740}
dialog::backdrop{background:#11182770}.column-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 0;max-height:300px;overflow:auto;font-size:11px}
.column-list label{display:flex;gap:7px;align-items:center}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}
.dialog-actions button{background:#f1f3f6}.dialog-actions button:last-child{background:var(--red);color:#fff}
@media(max-width:800px){.categories{grid-template-columns:repeat(3,minmax(0,1fr))}.filters{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:540px){main{padding:16px 13px}.topbar{padding:0 14px}.online{display:none}.hero{padding:20px}.hero-icon{display:none}.categories{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr}.result-head{align-items:flex-start;flex-direction:column}.result-actions{width:100%}.result-actions button{flex:1}.actions{align-items:flex-start;flex-direction:column}.column-list{grid-template-columns:1fr}}