.sp-hero{padding:120px 22px 40px;text-align:center}
.sp-hero h1{font-size:clamp(36px,6vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-bottom:8px}
.dk .sp-hero h1{color:#f5f5f7}.lt .sp-hero h1{color:#1d1d1f}
.sp-hero p{font-size:16px;max-width:420px;margin:0 auto}
.dk .sp-hero p{color:rgba(255,255,255,.35)}.lt .sp-hero p{color:#86868b}

/* Filter bar */
.sp-filters{position:sticky;top:92px;z-index:88;padding:10px 0;transition:background .3s;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.dk .sp-filters{background:rgba(0,0,0,.7)}.lt .sp-filters{background:rgba(255,255,255,.8)}
.sp-filters-w{max-width:980px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sp-filters-w::-webkit-scrollbar{display:none}
.sp-f{padding:6px 16px;font-size:12px;font-weight:600;border:none;border-radius:980px;cursor:pointer;transition:all .2s;white-space:nowrap;font-family:inherit;letter-spacing:.01em}
.dk .sp-f{background:rgba(255,255,255,.04);color:rgba(255,255,255,.4)}
.lt .sp-f{background:rgba(0,0,0,.04);color:#86868b}
.sp-f:hover{transform:translateY(-1px)}
.dk .sp-f:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.lt .sp-f:hover{background:rgba(0,0,0,.07);color:#1d1d1f}
.sp-f.on{font-weight:700}
.dk .sp-f.on{background:rgba(255,255,255,.12);color:#f5f5f7}
.lt .sp-f.on{background:#1d1d1f;color:#f5f5f7}
.sp-f[data-n="LINK"].on{background:#3B82F6;color:#fff}
.sp-f[data-n="BAZAR"].on{background:#EF4444;color:#fff}
.sp-f[data-n="LAB"].on{background:#06B6D4;color:#fff}
.sp-f[data-n="FORGE"].on{background:#F59E0B;color:#fff}
.sp-f[data-n="OPS"].on{background:#10B981;color:#fff}
.sp-sep{width:1px;height:18px;flex-shrink:0;margin:0 4px}
.dk .sp-sep{background:rgba(255,255,255,.08)}.lt .sp-sep{background:rgba(0,0,0,.08)}

/* Grid */
.sp-grid{max-width:980px;margin:0 auto;padding:24px 22px 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

/* Card */
.sp-c{display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:12px;text-decoration:none;transition:all .25s;position:relative;overflow:hidden}
.dk .sp-c{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04)}
.lt .sp-c{background:#fff;border:1px solid rgba(0,0,0,.06)}
.sp-c:hover{transform:translateY(-2px)}
.dk .sp-c:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.lt .sp-c:hover{background:#fafafa;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.sp-c-fav{width:40px;height:40px;border-radius:10px;object-fit:contain;flex-shrink:0;padding:3px}
.dk .sp-c-fav{background:rgba(255,255,255,.06)}.lt .sp-c-fav{background:rgba(0,0,0,.03)}
.sp-c-body{flex:1;min-width:0}
.sp-c-top{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.sp-c-name{font-size:15px;font-weight:700;letter-spacing:-.01em}
.dk .sp-c-name{color:#f5f5f7}.lt .sp-c-name{color:#1d1d1f}
.sp-c-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sp-c-tag{font-size:15px;font-weight:600;margin-bottom:4px}
.dk .sp-c-tag{color:rgba(255,255,255,.5)}.lt .sp-c-tag{color:#6e6e73}
.sp-c-net{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sp-c-arr{position:absolute;right:16px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .2s}
.sp-c:hover .sp-c-arr{opacity:.4}
.dk .sp-c-arr{color:#f5f5f7}.lt .sp-c-arr{color:#1d1d1f}

/* Status dots */
.sp-c-dot[data-s="on"]{background:#34C759}.sp-c-dot[data-s="degraded"]{background:#FF3B30}.sp-c-dot[data-s="maintenance"]{background:#FFD60A}.sp-c-dot[data-s="dev"]{background:#007AFF}

.sp-c-dot[data-s="soon"]{background:#86868b}

/* Hidden cards */
.sp-c.hide{display:none}

/* Empty state */
.sp-empty{display:none;text-align:center;padding:80px 22px;grid-column:1/-1}
.sp-empty.show{display:block}
.dk .sp-empty{color:rgba(255,255,255,.25)}.lt .sp-empty{color:#86868b}

/* Network section headers */
.sp-net-h{grid-column:1/-1;padding:24px 0 8px;display:flex;align-items:center;gap:10px}
.sp-net-h:first-child{padding-top:0}
.sp-net-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sp-net-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.dk .sp-net-label{color:rgba(255,255,255,.3)}.lt .sp-net-label{color:#86868b}
.sp-net-line{flex:1;height:1px}
.dk .sp-net-line{background:rgba(255,255,255,.04)}.lt .sp-net-line{background:rgba(0,0,0,.06)}
.sp-net-count{font-size:10px;font-weight:600}
.dk .sp-net-count{color:rgba(255,255,255,.15)}.lt .sp-net-count{color:#aeaeb2}

/* Stats bar */
.sp-stats{max-width:980px;margin:0 auto;padding:0 22px 32px;display:flex;gap:32px;justify-content:center}
.sp-stat-n{font-size:28px;font-weight:800;letter-spacing:-.03em}
.dk .sp-stat-n{color:#f5f5f7}.lt .sp-stat-n{color:#1d1d1f}
.sp-stat-l{font-size:11px;margin-top:1px}
.dk .sp-stat-l{color:rgba(255,255,255,.2)}.lt .sp-stat-l{color:#86868b}

/* Bottom networks */
.sp-nets{max-width:980px;margin:0 auto;padding:0 22px 80px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.sp-net-c{padding:24px 16px;border-radius:12px;text-decoration:none;text-align:center;transition:all .25s}
.dk .sp-net-c{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04)}
.lt .sp-net-c{background:#fff;border:1px solid rgba(0,0,0,.06)}
.sp-net-c:hover{transform:translateY(-2px)}
.dk .sp-net-c:hover{background:rgba(255,255,255,.05)}
.lt .sp-net-c:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.sp-net-c-name{font-size:16px;font-weight:800;letter-spacing:-.02em;margin-bottom:2px}
.dk .sp-net-c-name{color:#f5f5f7}.lt .sp-net-c-name{color:#1d1d1f}
.sp-net-c-desc{font-size:11px}
.dk .sp-net-c-desc{color:rgba(255,255,255,.25)}.lt .sp-net-c-desc{color:#86868b}

@media(max-width:834px){
  .sp-grid{grid-template-columns:repeat(2,1fr)}
  .sp-nets{grid-template-columns:repeat(3,1fr)}
  .sp-stats{gap:20px;flex-wrap:wrap}
  .sp-hero{padding:100px 18px 32px}
}
@media(max-width:480px){
  .sp-grid{grid-template-columns:1fr}
  .sp-nets{grid-template-columns:repeat(2,1fr)}
  .sp-filters{top:48px}
}
.svc-sel{margin-left:auto;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);font-size:11px;font-weight:500;padding:4px 24px 4px 10px;border-radius:6px;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,.4)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:border-color .2s}
.svc-sel:hover{border-color:rgba(255,255,255,.2)}
.svc-sel option{background:#111;color:#fff}
.sp-search{max-width:480px;margin:0 auto 24px;padding:0 22px}
.sp-search-w{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;transition:border-color .3s}
.dk .sp-search-w{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.lt .sp-search-w{background:#fff;border:1px solid rgba(0,0,0,.08)}
.sp-search-w:focus-within{border-color:#f37f0d}
.dk .sp-search-w svg{color:rgba(255,255,255,.3)}.lt .sp-search-w svg{color:rgba(0,0,0,.3)}
.sp-search-input{flex:1;border:none;background:none;outline:none;font-size:15px;font-family:inherit}
.dk .sp-search-input{color:#f5f5f7}.lt .sp-search-input{color:#1d1d1f}
.dk .sp-search-input::placeholder{color:rgba(255,255,255,.25)}.lt .sp-search-input::placeholder{color:rgba(0,0,0,.25)}
.lt .svc-sel{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1);color:#6e6e73;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(0,0,0,.3)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E")}
.lt .svc-sel:hover{border-color:rgba(0,0,0,.2)}
.lt .svc-sel option{background:#fff;color:#1d1d1f}
.svc-bar-btn{margin-left:auto;padding:5px 14px;border-radius:980px;font-size:11px;font-weight:700;letter-spacing:.02em;transition:all .2s}
.dk .svc-bar-btn{background:rgba(255,255,255,.06);color:rgba(255,255,255,.5)}
.dk .svc-bar-btn:hover{background:rgba(255,255,255,.12);color:#f5f5f7}
.lt .svc-bar-btn{background:rgba(0,0,0,.05);color:#6e6e73}
.lt .svc-bar-btn:hover{background:rgba(0,0,0,.1);color:#1d1d1f}