.sph{--ink:#0f172a;--mut:#5b6472;--line:#dfe5ee;font-size:15px;line-height:1.7;color:var(--ink)}
.sph *{box-sizing:border-box}
.sph h2,.sph h3{margin:0;line-height:1.35}
.sph-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;background:linear-gradient(135deg,#0f172a 0%,#1e2a44 60%,#2f3f66 100%);color:#fff;border-radius:18px;padding:30px 30px 26px;position:relative;overflow:hidden;box-shadow:0 14px 36px rgba(15,23,42,.22)}
.sph-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(245,158,11,.35),transparent 70%)}
.sph-kicker{display:inline-block;background:#f59e0b;color:#1f2a3a;font-weight:800;font-size:12px;letter-spacing:.08em;padding:3px 10px;border-radius:999px;margin-bottom:10px}
.sph-hero h2{font-size:28px;font-weight:800;color:#fff}
.sph-hero p{margin:12px 0 0;color:#cbd5e1;font-size:14px}
.sph-hero p b{color:#fbbf24}
.sph-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-self:center;position:relative}
.sph-steps li{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.4}
.sph-steps b{flex:0 0 34px;height:34px;border-radius:50%;background:#f59e0b;color:#1f2a3a;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900}
.sph-find{margin:22px 0 6px}
.sph-find h3,.sph-note h3{font-size:16px;font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.sph-find h3::before,.sph-note h3::before{content:"";width:6px;height:20px;border-radius:3px;background:#f59e0b}
.sph-chips{display:flex;flex-wrap:wrap;gap:7px}
.sph-chip{display:inline-block;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 13px;font-size:13px;text-decoration:none!important;transition:.12s}
.sph-chip:hover{border-color:#f59e0b;background:#fff7e6;transform:translateY(-1px)}
.sph-tabs{position:sticky;top:0;z-index:5;display:flex;gap:6px;overflow-x:auto;padding:12px 0 10px;margin:14px 0 4px;background:#fff;scrollbar-width:none;border-bottom:1px solid var(--line)}
.sph-tabs::-webkit-scrollbar{display:none}
.sph-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;color:#334155;cursor:pointer;white-space:nowrap}
.sph-tab i{width:10px;height:10px;border-radius:50%;background:var(--c,#64748b)}
.sph-tab b{font-weight:800;color:#94a3b8;font-size:12px}
.sph-tab.on{background:var(--c,#0f172a);border-color:var(--c,#0f172a);color:#fff}
.sph-tab.on b,.sph-tab.on i{color:#fff;background:#fff}
.sph-g{margin:22px 0 0;padding:18px 18px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);border-top:6px solid var(--c);box-shadow:0 6px 20px rgba(15,23,42,.06)}
.sph-g[hidden]{display:none}
.sph-gh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sph-gh h3{font-size:19px;font-weight:800;color:var(--c)}
.sph-gh p{margin:0;color:var(--mut);font-size:13px}
.sph-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.sph-card{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;text-decoration:none!important;color:var(--ink);transition:.12s;position:relative}
.sph-card:hover{border-color:var(--c);box-shadow:0 8px 22px rgba(15,23,42,.1);transform:translateY(-2px)}
.sph-card.first{grid-column:1/-1;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 8%,#fff),#fff 60%);border-color:color-mix(in srgb,var(--c) 45%,#fff)}
.sph-ic{width:58px;height:58px;border-radius:14px;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11.5px;font-weight:800;line-height:1.2;padding:4px;box-shadow:0 4px 10px color-mix(in srgb,var(--c) 40%,transparent)}
.sph-b{min-width:0;display:flex;flex-direction:column;gap:3px}
.sph-n{font-size:15px;font-weight:800;line-height:1.3}
.sph-n em{font-style:normal;font-size:11px;background:var(--c);color:#fff;border-radius:999px;padding:1px 8px;margin-left:8px;vertical-align:2px}
.sph-d{font-size:12.5px;color:var(--mut);line-height:1.55}
.sph-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.sph-tags span{font-size:11px;background:#f1f5f9;color:#475569;border-radius:6px;padding:1px 7px}
.sph-go{font-size:13px;font-weight:800;color:var(--c);white-space:nowrap}
.sph-note{margin:26px 0 10px}
.sph-note-g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sph-note-g>div{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.sph-note-g b{font-size:14px}
.sph-note-g span{color:var(--mut);line-height:1.6}
.sph-hl{animation:sphhl 1.6s ease}
@keyframes sphhl{0%,50%{box-shadow:0 0 0 3px #f59e0b,0 0 0 9px rgba(245,158,11,.3)}100%{box-shadow:none}}
@media (max-width:820px){
 .sph-hero{grid-template-columns:1fr;padding:22px 18px 18px;border-radius:14px}
 .sph-hero h2{font-size:21px}
 .sph-cards{grid-template-columns:1fr}
 .sph-note-g{grid-template-columns:1fr}
 .sph-g{padding:14px 12px 12px}
 .sph-card{padding:10px 12px}
 .sph-ic{width:50px;height:50px;font-size:10.5px}
 .sph-go{display:none}
}

.sph-tabs{top:var(--sph-top,0)}