/* Complete Systems catalog — filterable list with left sidebar.
   Scoped under .sys-cat so it never collides with Bootstrap or glocal-theme.css. */
.sys-cat{--blue:#0f62fe;--ink:#161616;--mut:#525252;--line:#e3e7ee;--soft:#f4f6fa;--orange:#FF7A30;color:var(--ink)}
.sys-cat *{box-sizing:border-box}
.sys-cat .lst-wrap{max-width:1240px;margin:0 auto;padding:26px 24px 64px;display:grid;grid-template-columns:248px 1fr;gap:32px}
@media(max-width:820px){.sys-cat .lst-wrap{grid-template-columns:1fr}}

.sys-cat .filters{align-self:start;position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden}
.sys-cat .filters h4{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#8a93a0;margin:0 0 8px;border-bottom:1px solid var(--line);padding-bottom:8px}
.sys-cat .fgroup{margin-bottom:22px}
.sys-cat .fgroup label{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--ink);padding:5px 0;cursor:pointer}
.sys-cat .fgroup input{accent-color:var(--blue)}
.sys-cat .freset{background:none;border:1px solid var(--line);color:var(--mut);font-size:.8rem;padding:8px 14px;cursor:pointer;width:100%;font-family:inherit}
.sys-cat .freset:hover{border-color:var(--blue);color:var(--blue)}
/* collapsible groups */
.sys-cat .fgroup .fhead{display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer;font-size:.8rem;font-weight:600;margin-bottom:6px;user-select:none}
.sys-cat .fgroup .fhead:hover{color:var(--blue)}
.sys-cat .fgroup .fhead .chev{color:#8a93a0;font-size:.66rem;transition:transform .15s}
.sys-cat .fgroup.collapsed .fhead{margin-bottom:0}
.sys-cat .fgroup.collapsed .fhead .chev{transform:rotate(-90deg)}
.sys-cat .fgroup.collapsed .fbody{display:none}

.sys-cat .lst-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.sys-cat .lst-top .count{font-size:.88rem;color:var(--mut)}
.sys-cat .lst-srch{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;padding:0 10px;height:38px;min-width:220px}
.sys-cat .lst-srch input{border:0;outline:0;width:100%;font-family:inherit;font-size:.86rem;background:transparent}
.sys-cat .lst-srch svg{color:#8a93a0;flex:none}

.sys-cat .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.sys-cat .pcard{background:#fff;border:1px solid var(--line);padding:0;display:flex;flex-direction:column;transition:box-shadow .16s,border-color .16s;border-radius:0}
.sys-cat .pcard:hover{border-color:var(--blue);box-shadow:0 8px 22px rgba(15,30,60,.09)}
.sys-cat .pcard-clk{position:relative;cursor:pointer}
.sys-cat .pcard-clk a.q::after{content:"";position:absolute;inset:0;z-index:1}
.sys-cat .pcard-clk a.q{position:static}
.sys-cat .pcard .img{height:170px;background:var(--soft);display:grid;place-items:center;border-bottom:1px solid var(--line);overflow:hidden}
.sys-cat .pcard .img>*{grid-area:1/1}
.sys-cat .pcard .img .picon{display:grid;place-items:center;background:var(--soft);color:#aeb6c4}
.sys-cat .pcard .img img{width:100%;height:100%;object-fit:contain;padding:8px;background:#fff}
.sys-cat .pcard .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.sys-cat .pcard .brand{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:6px}
.sys-cat .pcard h3{margin:0 0 8px;font-size:1.02rem;font-weight:600;line-height:1.32;color:var(--ink)}
.sys-cat .pcard p{margin:0 0 14px;font-size:.84rem;color:var(--mut);line-height:1.5;flex:1}
.sys-cat .pcard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.sys-cat .pcard .tags span{font-size:.7rem;background:var(--soft);color:#516079;padding:3px 9px}
.sys-cat .pcard .tags span.k{background:#eef4ff;color:#23457e}
.sys-cat .pcard a.q{background:var(--blue);color:#fff;font-weight:600;font-size:.84rem;text-align:center;padding:10px;text-decoration:none}
.sys-cat .pcard a.q:hover{background:#3b82f6}
.sys-cat .sl-empty,.sys-cat #empty{padding:40px 4px;color:#8a93a0;font-size:.9rem}

/* ===== Complete Systems HUB (/systems): 4 dark cards + 4 filterable rows ===== */
.sys-hub{--blue:#0f62fe;--ink:#161616;--mut:#525252;--line:#e3e7ee;--soft:#f4f6fa;--orange:#FF7A30;color:var(--ink)}
.sys-hub *{box-sizing:border-box}
.sys-hub .intro{max-width:1240px;margin:0 auto;padding:34px 24px 6px}
.sys-hub .intro .kicker{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700}
.sys-hub .intro h2{font-size:1.6rem;font-weight:600;margin:8px 0 8px;color:var(--ink)}
.sys-hub .intro p{color:var(--mut);font-size:.98rem;max-width:840px;line-height:1.62;margin:0}
.sys-hub .s-x86{--ac:#0f62fe;--g1:#e7eeff;--g2:#fafcff;--bg:#eef4ff;--bd:#d7e3fb}
.sys-hub .s-gpu{--ac:#ef6c1a;--g1:#ffeede;--g2:#fffbf7;--bg:#fff4ec;--bd:#f7d9c4}
.sys-hub .s-storage{--ac:#0e9e74;--g1:#e4f5ed;--g2:#f7fdfb;--bg:#e9f7f1;--bd:#c6e8dc}
.sys-hub .s-ws{--ac:#7c5cdb;--g1:#efe8fb;--g2:#fcfbff;--bg:#f3eefc;--bd:#e1d4f6}
.sys-hub .cathead{max-width:1240px;margin:14px auto 26px;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1080px){.sys-hub .cathead{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sys-hub .cathead{grid-template-columns:1fr}}
.sys-hub .catcard{position:relative;display:flex;flex-direction:column;text-decoration:none;color:#fff;background:linear-gradient(140deg,#0a0f1f 0%,#12204a 62%,#1b1437 100%);border:1px solid rgba(255,255,255,.10);overflow:hidden;min-height:360px;transition:transform .18s,box-shadow .18s,border-color .18s}
.sys-hub .catcard:hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(8,16,40,.42);border-color:rgba(255,122,48,.55)}
.sys-hub .catcard .art{position:relative;height:190px;display:grid;place-items:center;border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(120% 100% at 50% 0,rgba(46,82,172,.34),transparent 70%)}
.sys-hub .catcard .art .circuit{position:absolute;inset:0;width:100%;height:100%;opacity:.32}
.sys-hub .catcard .art .ico{position:relative;z-index:2;color:var(--orange);filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.sys-hub .catcard .badge{position:absolute;top:14px;right:14px;z-index:3;font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;color:#0f7a3d;background:#dff3e6}
.sys-hub .catcard .bd{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.sys-hub .catcard .tag{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:8px}
.sys-hub .catcard h3{font-size:1.28rem;margin:0 0 10px;font-weight:600;color:#fff}
.sys-hub .catcard .cd{color:#aebcd8;font-size:.88rem;line-height:1.55;margin:0 0 16px;flex:1}
.sys-hub .catcard .cgo{font-size:.86rem;font-weight:700;color:#6db3ff}
.sys-hub .catcard:hover .cgo{color:var(--orange)}
.sys-hub .sysrow{max-width:1240px;margin:0 auto 18px;padding:0 24px;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:22px;align-items:stretch;scroll-margin-top:84px}
@media(max-width:860px){.sys-hub .sysrow{grid-template-columns:1fr;gap:14px}}
.sys-hub .syscard,.sys-hub .sysbox{--star:color-mix(in srgb,var(--ac) 28%,transparent);background-color:#fff;background-image:radial-gradient(1.5px 1.5px at 24px 30px,var(--star) 99%,transparent),radial-gradient(1.3px 1.3px at 98px 64px,var(--star) 99%,transparent),radial-gradient(1.2px 1.2px at 58px 112px,var(--star) 99%,transparent),radial-gradient(1.1px 1.1px at 128px 20px,var(--star) 99%,transparent),radial-gradient(1.2px 1.2px at 16px 96px,var(--star) 99%,transparent),linear-gradient(155deg,var(--g1) 0%,var(--g2) 72%);background-size:150px 150px,150px 150px,150px 150px,150px 150px,150px 150px,100% 100%;background-repeat:repeat,repeat,repeat,repeat,repeat,no-repeat}
.sys-hub .syscard{border:1px solid var(--line);border-top:3px solid var(--ac);padding:20px 22px;display:flex;flex-direction:column;min-height:240px}
.sys-hub .syscard .ck{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ac);font-weight:700}
.sys-hub .syscard h2{font-size:1.28rem;font-weight:600;margin:6px 0 8px;letter-spacing:-.01em;color:var(--ink)}
.sys-hub .syscard>p{color:var(--mut);font-size:.88rem;line-height:1.55;margin:0 0 11px}
.sys-hub .sysbul{list-style:none;margin:0 0 14px;padding:0}
.sys-hub .sysbul li{position:relative;padding:3px 0 3px 20px;font-size:.85rem;color:#33405a;line-height:1.45}
.sys-hub .sysbul li:before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;background:var(--ac)}
.sys-hub .syscard .view{margin-top:auto;align-self:flex-start;color:var(--ac);font-weight:600;font-size:.88rem;text-decoration:none}
.sys-hub .syscard .view:hover{text-decoration:underline}
.sys-hub .sysbox{border:1px solid var(--line);border-top:3px solid var(--ac);display:flex;flex-direction:column;min-height:240px;max-height:300px;overflow:hidden}
.sys-hub .sl-mount{flex:1;min-height:0;display:flex;flex-direction:column}
.sys-hub .sl-bar{display:flex;gap:7px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.45)}
.sys-hub .sl-search{flex:1;min-width:140px;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;padding:0 9px}
.sys-hub .sl-search input{border:0;outline:0;width:100%;padding:7px 2px;font-family:inherit;font-size:.8rem;background:transparent}
.sys-hub .sl-search svg{color:#8a93a0;flex:none}
.sys-hub .sl-sel select{border:1px solid var(--line);background:#fff;font-family:inherit;font-size:.78rem;padding:7px 6px;color:#33405a;cursor:pointer;max-width:118px}
.sys-hub .sl-count{padding:7px 14px;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:#8a93a0;font-weight:700;border-bottom:1px solid var(--line);background:rgba(255,255,255,.35)}
.sys-hub .sl-list{flex:1;min-height:0;overflow-y:auto}
.sys-hub .sl-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 14px;text-decoration:none;border-bottom:1px solid #eef1f6;color:inherit}
.sys-hub .sl-item:hover{background:var(--bg)}
.sys-hub .sl-name{font-weight:600;font-size:.79rem;color:#15233c}
.sys-hub .sl-item:hover .sl-name{color:var(--ac)}
.sys-hub .sl-meta{font-size:.67rem;color:var(--mut);white-space:nowrap;flex:none;text-align:right}
.sys-hub .sl-cpu{color:#9aa3af}
.sys-hub .sl-empty{padding:18px 14px;color:var(--mut);font-size:.82rem}