/* /support around Uni's support kit (12 Oct 2026). sp- classes only: the kit's own .us- classes are never restyled. */
.sp-hero { position:relative; overflow:hidden; background:var(--black); color:#e6ebf2; padding:46px 0 0; }
.sp-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(34,211,238,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.07) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
.sp-hero::after { content:''; position:absolute; width:620px; height:620px; right:-180px; top:-260px; background:radial-gradient(circle, rgba(31,91,255,.22), transparent 62%); pointer-events:none; animation:sp-drift 14s ease-in-out infinite alternate; }
@keyframes sp-drift { to { transform:translate(-80px, 60px); } }
.sp-hero .in { position:relative; z-index:1; display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:end; }
.sp-copy { padding-bottom:40px; }
.sp-kw { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#8f9aab; font-weight:400; }
.sp-title { display:block; font-size:40px; font-weight:300; color:#fff; margin-top:8px; line-height:1.15; } .sp-title em { font-style:normal; color:var(--yel); }
.sp-lead { color:#aeb8c6; font-size:15px; margin-top:12px; max-width:560px; }
.sp-search { margin-top:22px; display:grid; grid-template-columns:1fr 140px; gap:8px; max-width:560px; }
.sp-search input { height:46px; border-radius:var(--r); border:1px solid #2b3240; background:#0c1018; color:#fff; padding:0 16px; font:inherit; font-size:15px; min-width:0; }
.sp-search input::placeholder { color:#6b7688; } .sp-search input:focus { outline:none; border-color:var(--blue); }
.sp-search .btn { min-width:0; height:46px; font:inherit; font-size:14px; }
.sp-pills { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; font-size:12px; color:#8f9aab; }
.sp-pills button { height:26px; padding:0 10px; border:1px solid #2b3240; border-radius:var(--r); color:#c3ccd8; background:transparent; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.sp-pills button:hover { border-color:var(--cyan); color:#fff; }
.sp-live { background:#0c1018; border:1px solid #1e2532; border-bottom:0; border-radius:var(--r) var(--r) 0 0; padding:16px; display:grid; gap:10px; }
.sp-live .h { font-size:12px; color:#8f9aab; display:flex; justify-content:space-between; } .sp-live .h a { color:#8f9aab; } .sp-live .h a:hover { color:#fff; }
.sp-row { display:grid; grid-template-columns:10px 1fr auto; gap:10px; align-items:center; font-size:13px; }
.sp-row i { width:8px; height:8px; border-radius:50%; background:#5d6b7e; }
.sp-row.up i { background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.18); animation:sp-pulse 1.8s infinite; }
.sp-row.down i { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
@keyframes sp-pulse { 50% { box-shadow:0 0 0 6px rgba(34,197,94,.05); } }
.sp-row .u { color:#8f9aab; font-variant-numeric:tabular-nums; } .sp-row.up .u { color:#86efac; } .sp-row.down .u { color:#fcd34d; }
.sp-reply { border-top:1px solid #1e2532; padding-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sp-reply div { background:#05070c; border-radius:var(--r); padding:10px; }
.sp-reply b { display:block; font-weight:300; font-size:20px; color:#fff; white-space:nowrap; } .sp-reply small { font-size:11px; color:#8f9aab; }
.sp-quick { background:var(--alt); padding:28px 0; border-bottom:1px solid var(--line); }
.sp-tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.sp-tile { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px; display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; transition:border-color .15s, transform .15s; }
.sp-tile:hover { border-color:var(--blue); transform:translateY(-2px); }
.sp-ic { width:34px; height:34px; border-radius:8px; background:#eef3ff; color:var(--blue); display:grid; place-items:center; }
.sp-ic svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.sp-tile .t { display:block; font-size:14px; white-space:nowrap; } .sp-tile .d { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.sp-main { padding:32px 0 64px; } .sp-main .in { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:24px; align-items:start; }
.sp-kit { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; min-width:0; scroll-margin-top:80px; }
.sp-side { display:grid; gap:14px; position:sticky; top:80px; }
.sp-card { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px; display:grid; gap:10px; }
.sp-card .t { font-size:15px; } .sp-card p { font-size:13px; color:var(--muted); }
.sp-card .btn { width:100%; min-width:0; }
.sp-card.dark { background:var(--black); border-color:var(--black); color:#e6ebf2; } .sp-card.dark p { color:#aeb8c6; }
.sp-steps { list-style:none; display:grid; gap:8px; counter-reset:s; }
.sp-steps li { counter-increment:s; display:grid; grid-template-columns:22px 1fr; gap:8px; font-size:13px; color:var(--text); }
.sp-steps li::before { content:counter(s); width:22px; height:22px; border-radius:50%; background:#eef3ff; color:var(--blue); display:grid; place-items:center; font-size:11px; }
.sp-links { display:grid; gap:2px; }
.sp-links a { height:34px; display:flex; align-items:center; justify-content:space-between; font-size:13px; padding:0 4px; border-bottom:1px solid var(--line-2); }
.sp-links a:hover { color:var(--blue); }
.sp-links a::after { content:''; width:6px; height:6px; border-right:1.5px solid var(--faint); border-top:1.5px solid var(--faint); transform:rotate(45deg); }
.sp-op { font-size:11px; color:var(--faint); }
@media (max-width:980px) { .sp-hero .in, .sp-main .in { grid-template-columns:1fr; } .sp-live { border-radius:var(--r); border-bottom:1px solid #1e2532; margin-bottom:24px; } .sp-tiles { grid-template-columns:1fr 1fr; } .sp-side { position:static; } }
@media (max-width:620px) { .sp-title { font-size:30px; } .sp-tiles { grid-template-columns:1fr; } .sp-search { grid-template-columns:1fr; } .sp-copy { padding-bottom:28px; } }