:root { --ink:#173246; --muted:#627789; --primary:#0e4a70; --secondary:#1279a8; --line:#dbe8ef; --background:#f3f8fb; }
    * { box-sizing:border-box; }
    body { margin:0; color:var(--ink); background:radial-gradient(circle at top left,#e6f5ff,var(--background) 42%,#fff 100%); font-family:"Segoe UI",Tahoma,sans-serif; line-height:1.5; }
    .shell { max-width:1440px; margin:0 auto; padding:24px; }
    header { color:#fff; padding:34px clamp(22px,5vw,64px); border-radius:18px; background:linear-gradient(135deg,#0e4a70,#1279a8 60%,#39a9d0); box-shadow:0 16px 36px rgba(14,74,112,.18); }
    header h1 { margin:0 0 8px; font-size:clamp(1.8rem,4vw,3rem); }
    header p { max-width:760px; margin:0; opacity:.92; }
    .panel { margin-top:22px; padding:22px; border:1px solid rgba(219,232,239,.9); border-radius:16px; background:rgba(255,255,255,.94); box-shadow:0 12px 30px rgba(25,68,90,.08); }
    .controls { display:grid; grid-template-columns:minmax(240px,1fr) minmax(180px,260px) auto; gap:12px; align-items:end; }
    label { display:block; color:var(--muted); font-size:.82rem; font-weight:700; margin-bottom:5px; }
    input,select { width:100%; min-height:44px; padding:10px 12px; border:1px solid #b9d0dc; border-radius:9px; color:var(--ink); background:#fff; font:inherit; }
    input:focus,select:focus { outline:3px solid rgba(18,121,168,.18); border-color:var(--secondary); }
    button { min-height:44px; padding:10px 16px; border:0; border-radius:9px; color:#fff; background:var(--primary); font:inherit; font-weight:700; cursor:pointer; }
    button:hover { background:#0a3854; }
    .summary { display:flex; gap:16px; flex-wrap:wrap; margin:18px 0 0; color:var(--muted); font-size:.92rem; }
    .summary strong { color:var(--primary); }
    .table-wrap { margin-top:18px; overflow:auto; border:1px solid var(--line); border-radius:12px; }
    table { width:100%; min-width:980px; border-collapse:collapse; }
    th,td { padding:12px 13px; border-bottom:1px solid #e8f0f4; text-align:left; vertical-align:top; }
    th { position:sticky; top:0; z-index:1; color:#104568; background:#e9f4ff; font-size:.82rem; letter-spacing:.02em; text-transform:uppercase; }
    th.sortable-header { cursor:pointer; user-select:none; }
    th.sortable-header:hover, th.sortable-header:focus-visible { background:#d9ecfb; outline:none; }
    .sort-indicator { display:inline-block; min-width:1em; margin-left:4px; color:var(--secondary); }
    tbody tr:hover { background:#f7fbfd; }
    tbody tr:last-child td { border-bottom:0; }
    .section-cell { color:var(--primary); font-weight:700; }
    .search-hit { padding:0 2px; border-radius:3px; color:#173246; background:#ffe08a; box-shadow:0 0 0 1px rgba(154,103,0,.18); }
    .code { white-space:nowrap; color:#37586b; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.88rem; }
    .empty,.loading,.error { padding:28px; text-align:center; color:var(--muted); }
    .error { color:#9b2c2c; background:#fff5f5; }
    .note { margin:14px 0 0; color:var(--muted); font-size:.82rem; }
    .catalog-footer { margin:22px 0 0; padding:18px 12px 4px; border-top:1px solid var(--line); color:var(--muted); text-align:center; font-size:.82rem; }
    @media (max-width:720px) { .shell{padding:12px;} .controls{grid-template-columns:1fr;} .panel{padding:15px;} header{border-radius:12px;padding:28px 20px;} }