:root {
	--c-bg: #0a0b10;
	--c-s1: rgba(255, 255, 255, .04);
	--c-s2: rgba(255, 255, 255, .07);
	--c-b: rgba(255, 255, 255, .09);
	--c-bh: rgba(0, 216, 255, .42);
	--c-a: #00d8ff;
	--c-ad: rgba(0, 216, 255, .14);
	--c-p: #8b5cf6;
	--c-pd: rgba(139, 92, 246, .14);
	--c-o: #f97316;
	--c-txt: #cbd5e1;
	--c-mu: #64748b;
	--c-w: #f8fafc;
	--rr: 8px;
	--rm: 12px;
	--rl: 16px;
	--rxl: 22px;
	--sc: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .25);
	--sl: 0 8px 40px rgba(0, 0, 0, .45);
	--t: .2s ease
}

*,
*::before,
*::after {
	box-sizing: border-box
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15px;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch
}

/* Performance hooks */
.sp-hero,
.sp-card,
.glass-card,
.sp-btn,
.sp-mod {
	transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000px
}

/* Shell */
.sp-shell {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px 64px;
	color: var(--c-txt)
}

/* Breadcrumb */
.sp-bc {
	max-width: 1100px;
	margin: 20px auto 0;
	padding: 0 20px;
	font-size: .82rem;
	color: var(--c-mu);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap
}

.sp-bc a {
	color: var(--c-mu);
	text-decoration: none;
	transition: color var(--t)
}

.sp-bc a:hover {
	color: var(--c-w)
}

.sp-bc .sep {
	opacity: .35
}

/* Hero */
.sp-hero {
	margin-top: 18px;
	border-radius: var(--rxl);
	border: 1px solid var(--c-b);
	overflow: hidden;
	position: relative;
	background: linear-gradient(145deg, rgba(8, 10, 18, .98), rgba(12, 14, 24, .96))
}

.sp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 55% at 90% -10%, rgba(0, 216, 255, .13), transparent 60%), radial-gradient(ellipse 55% 60% at -5% 110%, rgba(139, 92, 246, .18), transparent 55%);
	pointer-events: none;
	z-index: 0
}

.sp-hero-inner {
	position: relative;
	z-index: 1;
	padding: 36px
}

.sp-top-res {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2
}

.sp-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid rgba(0, 216, 255, .3);
	background: rgba(0, 216, 255, .08);
	color: #a5f3ff;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-bottom: 16px
}

.sp-hero h1 {
	margin: 0 0 12px;
	color: var(--c-w);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em
}

.sp-hero h1 span {
	background: linear-gradient(135deg, var(--c-a), var(--c-p));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text
}

.sp-hero-desc {
	margin: 0;
	color: #94a3b8;
	font-size: .97rem;
	max-width: 760px;
	line-height: 1.7
}

.sp-divider {
	height: 1px;
	background: var(--c-b);
	margin: 24px 0
}

.sp-updated strong {
	color: var(--c-w);
	font-weight: 700
}

.sp-hero-info {
	position: absolute;
	right: 20px;
	bottom: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 5
}

.sp-btn-save-top {
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(0, 216, 255, .31);
	background: rgba(0, 216, 255, .08);
	color: #a5f3ff;
	font-size: .72rem;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all .2s;
	letter-spacing: .02em;
	text-transform: uppercase;
	user-select: none;
	line-height: 1.2;
	box-sizing: border-box
}

.sp-btn-save-top:hover {
	background: rgba(0, 216, 255, .15);
	border-color: rgba(0, 216, 255, .5)
}

.sp-btn-save-top.saved {
	background: rgba(74, 222, 128, .15);
	border-color: rgba(74, 222, 128, .4);
	color: #4ade80
}

.sp-updated {
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .05);
	color: #9fb0c9;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
	line-height: 1.2;
	box-sizing: border-box;
	display: flex;
	align-items: center
}

/* Meta pills */
.sp-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px
}

.sp-mp {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--rm);
	border: 1px solid var(--c-b);
	background: rgba(255, 255, 255, .03);
	font-size: .82rem
}

.sp-mp .ico {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .75rem;
	flex-shrink: 0
}

.sp-mp .lbl {
	color: var(--c-mu);
	font-weight: 500
}

.sp-mp .val {
	color: var(--c-w);
	font-weight: 700
}

/* Hero actions */
.sp-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border-radius: var(--rm);
	border: 1px solid var(--c-b);
	background: var(--c-s2);
	color: var(--c-w);
	font-size: .84rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--t), border-color var(--t), transform var(--t);
	min-height: 40px
}

.sp-btn:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .25);
	transform: translateY(-1px)
}

.sp-btn:focus-visible {
	outline: 2px solid var(--c-a);
	outline-offset: 2px
}

.sp-btn--prim {
	background: var(--c-ad);
	border-color: rgba(0, 216, 255, .4);
	color: #a5f3ff
}

.sp-btn--prim:hover {
	background: rgba(0, 216, 255, .25);
	border-color: var(--c-a)
}

/* Layout */
.sp-layout {
	display: grid;
	grid-template-columns: 1fr 296px;
	gap: 18px;
	margin-top: 18px;
	align-items: start
}

/* Card */
.sp-card {
	border-radius: var(--rl);
	border: 1px solid var(--c-b);
	background: var(--c-s1);
	box-shadow: var(--sc);
	overflow: hidden
}

.sp-card-head {
	padding: 16px 20px 14px;
	border-bottom: 1px solid var(--c-b);
	display: flex;
	align-items: center;
	gap: 10px
}

.sp-card-head h2,
.sp-card-head h3 {
	margin: 0;
	color: var(--c-w);
	font-size: .93rem;
	font-weight: 700
}

.sp-ci {
	width: 32px;
	height: 32px;
	border-radius: var(--rr);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .82rem;
	flex-shrink: 0
}

.sp-ci--bl {
	background: var(--c-ad);
	color: var(--c-a)
}

.sp-ci--pu {
	background: var(--c-pd);
	color: var(--c-p)
}

.sp-ci--or {
	background: rgba(249, 115, 22, .15);
	color: var(--c-o)
}

.sp-ci--gr {
	background: rgba(34, 197, 94, .15);
	color: #4ade80
}

.sp-cb {
	padding: 18px 20px
}

/* Modules */
.sp-mods {
	display: grid;
	gap: 10px
}

.sp-mod {
	border: 1px solid var(--c-b);
	border-radius: var(--rm);
	padding: 16px 18px;
	background: rgba(255, 255, 255, .02);
	transition: border-color var(--t), background var(--t), transform var(--t)
}

.sp-mod:hover {
	border-color: rgba(0, 216, 255, .3);
	background: rgba(0, 216, 255, .04);
	transform: translateX(2px)
}

.sp-mod-top {
	display: flex;
	gap: 12px;
	align-items: flex-start
}

.sp-mn {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--c-ad);
	color: var(--c-a);
	font-size: .72rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	letter-spacing: .02em
}

.sp-mt {
	margin: 0 0 6px;
	color: var(--c-w);
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.3
}

.sp-mb {
	color: #94a3b8;
	font-size: .84rem;
	line-height: 1.65;
	margin: 0
}

.sp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, .06)
}

.sp-tag {
	font-size: .72rem;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .06);
	color: #94a3b8;
	border: 1px solid rgba(255, 255, 255, .08);
	letter-spacing: .02em
}

/* Sidebar */
.sp-sidebar {
	display: grid;
	gap: 14px
}

.sp-sidebar-sticky {
	position: sticky;
	top: 80px
}

.sp-guide {
	display: grid;
	gap: 8px
}

.sp-gi {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 12px;
	border-radius: var(--rr);
	background: rgba(255, 255, 255, .02);
	border: 1px solid rgba(255, 255, 255, .06);
	font-size: .82rem;
	color: var(--c-txt);
	transition: border-color var(--t)
}

.sp-gi:hover {
	border-color: rgba(139, 92, 246, .3)
}

.sp-gi .ico {
	color: var(--c-a);
	font-size: .8rem;
	margin-top: 2px;
	flex-shrink: 0
}

.sp-gi .lbl {
	color: var(--c-mu);
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 2px
}

.sp-gi .val {
	color: var(--c-w);
	font-weight: 600;
	font-size: .82rem
}

.sp-tip {
	padding: 14px 16px;
	border-radius: var(--rm);
	border: 1px dashed rgba(0, 216, 255, .3);
	background: rgba(0, 216, 255, .05);
	font-size: .82rem;
	color: #94a3b8;
	line-height: 1.65;
	margin-top: 14px
}

.sp-tip strong {
	color: var(--c-a)
}

/* Sidebar quick actions */
.sp-qact {
	display: grid;
	gap: 7px
}

.sp-qab {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 14px;
	border-radius: var(--rr);
	border: 1px solid var(--c-b);
	background: rgba(255, 255, 255, .04);
	color: var(--c-w);
	font-size: .83rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--t), border-color var(--t), transform var(--t);
	width: 100%;
	text-align: left;
	min-height: 42px;
	box-sizing: border-box
}

.sp-qab:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .22);
	transform: translateY(-1px)
}

.sp-qab:focus-visible {
	outline: 2px solid var(--c-a);
	outline-offset: 2px
}

.sp-qab--share {
	border-color: rgba(0, 216, 255, .3);
	color: var(--c-a)
}

.sp-qab--share:hover {
	background: rgba(0, 216, 255, .1);
	border-color: rgba(0, 216, 255, .5)
}

.sp-qab--wa {
	border-color: rgba(37, 211, 102, .3);
	color: #4ade80
}

.sp-qab--wa:hover {
	background: rgba(37, 211, 102, .1);
	border-color: rgba(37, 211, 102, .5)
}

.sp-qab--tg {
	border-color: rgba(0, 136, 204, .3);
	color: #7dd3fc
}

.sp-qab--tg:hover {
	background: rgba(0, 136, 204, .1);
	border-color: rgba(0, 136, 204, .5)
}

.sp-qab.saved {
	background: rgba(74, 222, 128, 0.1);
	border-color: rgba(74, 222, 128, 0.4);
	color: #4ade80
}

.sp-chv {
	margin-left: auto;
	font-size: .7rem;
	transition: transform var(--t)
}

.sp-share-sub {
	display: grid;
	gap: 7px;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height .35s ease, opacity .25s ease;
	pointer-events: none;
	margin-top: 0
}

.sp-share-sub.open {
	max-height: 180px;
	opacity: 1;
	pointer-events: auto;
	margin-top: 0
}

.sp-qab--share.open .sp-chv {
	transform: rotate(180deg)
}

.sp-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px
}

.sp-stat {
	padding: 10px;
	border-radius: var(--rr);
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--c-b);
	text-align: center
}

.sp-sv {
	display: block;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--c-w);
	line-height: 1.1
}

.sp-sl {
	display: block;
	font-size: .68rem;
	color: var(--c-mu);
	margin-top: 3px;
	text-transform: uppercase;
	letter-spacing: .04em
}

/* Resources */
.sp-res {
	margin-top: 18px
}

.sp-res .sp-card-head {
	justify-content: space-between
}

.sp-res-intro {
	padding: 12px 20px 14px;
	color: #8892a4;
	font-size: .84rem;
	border-bottom: 1px solid var(--c-b);
	line-height: 1.6
}

#driveList-wrap {
	padding: 16px 20px 20px
}

#driveList .glass-card {
	border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .04);
	border-radius: var(--rm);
	transition: transform var(--t), box-shadow var(--t), border-color var(--t)
}

#driveList .glass-card:hover {
	transform: translateY(-3px);
	border-color: rgba(0, 216, 255, .4);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .35)
}

#driveList .card-title {
	color: #e2e8f8
}

.sp-bbtn {
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--c-b);
	background: rgba(255, 255, 255, .06);
	color: var(--c-w);
	font-size: .79rem;
	font-weight: 600;
	cursor: pointer;
	display: none;
	align-items: center;
	gap: 6px;
	transition: background var(--t), border-color var(--t);
	min-height: 34px
}

.sp-bbtn:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .25)
}

.sp-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--c-mu);
	font-size: .88rem
}

.sp-ei {
	font-size: 2.4rem;
	margin-bottom: 10px;
	opacity: .3
}

.sp-skel {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px
}

.sp-sk-c {
	border-radius: var(--rm);
	height: 210px;
	background: linear-gradient(110deg, rgba(255, 255, 255, .02) 8%, rgba(255, 255, 255, .07) 18%, rgba(255, 255, 255, .02) 33%);
	background-size: 200% 100%;
	animation: sk-sh 1.3s linear infinite;
	border: 1px solid var(--c-b)
}

@keyframes sk-sh {
	to {
		background-position-x: -200%
	}
}

/* Bottom grid */
.sp-bot {
	margin-top: 18px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px
}

.sp-bot--full {
	grid-column: 1/-1
}

/* Action buttons */
.sp-ag {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px
}

.sp-ab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 14px;
	border-radius: var(--rr);
	border: 1px solid var(--c-b);
	background: rgba(255, 255, 255, .04);
	color: var(--c-w);
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--t), border-color var(--t), transform var(--t);
	min-height: 42px
}

.sp-ab:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .22);
	transform: translateY(-1px)
}

.sp-ab:focus-visible {
	outline: 2px solid var(--c-a);
	outline-offset: 2px
}

.sp-ab--wa {
	border-color: rgba(37, 211, 102, .3);
	color: #4ade80
}

.sp-ab--wa:hover {
	background: rgba(37, 211, 102, .1);
	border-color: rgba(37, 211, 102, .5)
}

.sp-ab--tg {
	border-color: rgba(0, 136, 204, .3);
	color: #7dd3fc
}

.sp-ab--tg:hover {
	background: rgba(0, 136, 204, .1);
	border-color: rgba(0, 136, 204, .5)
}

.sp-share-st {
	font-size: .8rem;
	color: var(--c-mu);
	min-height: 18px;
	margin-top: 8px
}

/* Feedback */
.sp-vrow {
	display: flex;
	gap: 8px;
	margin-bottom: 12px
}

.sp-vbtn {
	flex: 1;
	padding: 9px;
	border-radius: var(--rr);
	border: 1px solid var(--c-b);
	background: rgba(255, 255, 255, .04);
	color: var(--c-txt);
	font-size: .84rem;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background var(--t), border-color var(--t);
	min-height: 40px
}

.sp-vbtn:hover {
	background: rgba(255, 255, 255, .1)
}

.sp-vbtn--y:hover {
	border-color: #4ade80;
	color: #4ade80
}

.sp-vbtn--n:hover {
	border-color: #fb7185;
	color: #fb7185
}

.sp-frow {
	display: flex;
	gap: 8px
}

.sp-frow input {
	flex: 1;
	padding: 9px 12px;
	border-radius: var(--rr);
	border: 1px solid var(--c-b);
	background: rgba(255, 255, 255, .05);
	color: var(--c-w);
	font-size: .83rem;
	min-height: 40px;
	outline: none;
	font-family: inherit;
	transition: border-color var(--t)
}

.sp-frow input:focus {
	border-color: rgba(0, 216, 255, .5)
}

.sp-frow input::placeholder {
	color: var(--c-mu)
}

.sp-fsub {
	width: 46px;
	height: 40px;
	padding: 0;
	border-radius: var(--rr);
	border: 1px solid var(--c-a);
	background: rgba(0, 216, 255, .1);
	color: var(--c-a);
	font-size: .95rem;
	cursor: pointer;
	transition: all var(--t);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.sp-fsub:hover {
	background: var(--c-a);
	color: var(--c-bg);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 216, 255, 0.3)
}

.sp-fsub:active {
	transform: translateY(0)
}

.sp-fst {
	font-size: .8rem;
	color: var(--c-mu);
	min-height: 18px;
	margin-top: 8px
}

/* Recent */
.sp-rl {
	display: flex;
	flex-wrap: wrap;
	gap: 7px
}

.sp-ri {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid var(--c-b);
	background: rgba(255, 255, 255, .04);
	color: var(--c-txt);
	font-size: .77rem;
	cursor: pointer;
	transition: border-color var(--t), background var(--t);
	max-width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.sp-ri:hover {
	border-color: var(--c-bh);
	background: var(--c-ad)
}

/* CTA */
.sp-cta {
	border-radius: var(--rl);
	border: 1px solid rgba(139, 92, 246, .25);
	background: linear-gradient(135deg, rgba(139, 92, 246, .1), rgba(0, 216, 255, .07));
	padding: 24px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 18px
}

.sp-cta h3 {
	margin: 0 0 4px;
	color: var(--c-w);
	font-size: 1.1rem;
	font-weight: 800
}

.sp-cta p {
	margin: 0;
	color: #94a3b8;
	font-size: .84rem
}

.sp-ctl {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex-shrink: 0
}

.sp-ctla {
	padding: 8px 16px;
	border-radius: var(--rr);
	border: 1px solid rgba(255, 255, 255, .15);
	background: rgba(255, 255, 255, .07);
	color: var(--c-w);
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none;
	transition: background var(--t), border-color var(--t), transform var(--t);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px
}

.sp-ctla:hover {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .28);
	transform: translateY(-1px)
}

/* FAQ */
.sp-faq {
	margin-top: 18px
}

.sp-faq .sp-cb {
	padding: 8px 12px 14px
}

.sp-fqi {
	border: 1px solid var(--c-b);
	border-radius: var(--rr);
	margin-bottom: 7px;
	overflow: hidden;
	transition: border-color var(--t)
}

.sp-fqi:last-child {
	margin-bottom: 0
}

.sp-fqi[open] {
	border-color: rgba(0, 216, 255, .3)
}

.sp-fqi summary {
	padding: 13px 16px;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--c-w);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.4;
	background: rgba(255, 255, 255, .03);
	transition: background var(--t)
}

.sp-fqi summary:hover {
	background: rgba(255, 255, 255, .06)
}

.sp-fqi summary::-webkit-details-marker {
	display: none
}

.sp-fqi summary::after {
	content: "+";
	color: var(--c-mu);
	font-size: 1.1rem;
	flex-shrink: 0
}

.sp-fqi[open] summary::after {
	content: "−";
	color: var(--c-a)
}

.sp-fqa {
	padding: 12px 16px 16px;
	color: #94a3b8;
	font-size: .86rem;
	line-height: 1.7;
	border-top: 1px solid var(--c-b);
	margin: 0
}

/* Related */
.sp-rel {
	margin-top: 18px
}

.sp-rll {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px 20px 20px
}

.sp-rla {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid rgba(139, 92, 246, .3);
	background: rgba(139, 92, 246, .08);
	color: #c4b5fd;
	font-size: .83rem;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--t), border-color var(--t), transform var(--t)
}

.sp-rla:hover {
	background: rgba(139, 92, 246, .18);
	border-color: rgba(139, 92, 246, .55);
	transform: translateY(-1px)
}

.sp-rla:focus-visible {
	outline: 2px solid var(--c-a);
	outline-offset: 2px
}

/* Reveal */
.sp-rv {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .4s ease, transform .4s ease;
	will-change: transform, opacity
}

.sp-rv.vis {
	opacity: 1;
	transform: translateY(0)
}

/* Responsive */
@media(max-width:960px) {
	.sp-layout {
		grid-template-columns: 1fr
	}

	.sp-sidebar {
		grid-template-columns: 1fr 1fr
	}

	.sp-sidebar>*:last-child {
		grid-column: 1/-1
	}

	.sp-sidebar-sticky {
		position: static
	}
}

@media(max-width:680px) {
	.sp-shell {
		display: flex;
		flex-direction: column;
		gap: 18px
	}

	.sp-layout,
	.sp-sidebar {
		display: contents
	}

	.sp-hero {
		order: 1;
		margin: 0 !important
	}

	.sp-main-col {
		order: 2;
		margin: 0 !important
	}

	#sp-res {
		order: 3;
		margin: 0 !important
	}

	.sp-guide-card {
		order: 4;
		margin: 0 !important
	}

	.sp-qact-card {
		order: 5;
		margin: 0 !important
	}

	.sp-bot {
		order: 6;
		margin: 0 !important
	}

	.sp-cta {
		order: 7;
		margin: 0 !important
	}

	.sp-faq {
		order: 8;
		margin: 0 !important
	}

	.sp-rel {
		order: 9;
		margin: 0 !important
	}

	.sp-feedback-card {
		order: 10;
		margin: 0 !important
	}

	.sp-hero,
	.sp-layout,
	.sp-res,
	.sp-bot,
	.sp-cta,
	.sp-faq,
	.sp-rel,
	.sp-card {
		margin-top: 0 !important
	}

	.sp-hero-inner {
		position: relative;
		padding: 24px 20px 30px;
		display: flex;
		flex-direction: column
	}

	.sp-badge {
		order: 1;
		margin-bottom: 12px
	}

	.sp-hero h1 {
		order: 2;
		font-size: 1.5rem;
		margin-bottom: 10px
	}

	.sp-hero-desc {
		order: 3;
		margin-bottom: 18px
	}

	.sp-top-res {
		order: 4;
		position: static;
		display: inline-flex;
		width: fit-content;
		margin-bottom: 18px
	}

	.sp-divider {
		order: 5;
		margin: 15px 0 !important
	}

	.sp-meta {
		order: 6;
		margin-bottom: 15px
	}

	.sp-hero-info {
		order: 7;
		position: static;
		margin-top: 10px;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 10px;
		display: flex
	}

	.sp-btn-save-top,
	.sp-updated {
		height: 28px !important;
		max-height: 28px !important;
		min-height: 28px !important;
		padding: 0 12px !important;
		margin: 0 !important;
		font-size: .72rem !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
		border-width: 1px !important;
		border-style: solid !important;
		border-radius: 999px !important;
		line-height: 1 !important;
		white-space: nowrap !important
	}

	.sp-btn-save-top {
		order: 2
	}

	.sp-updated {
		order: 1
	}

	/* Mobile Performance: reduce backdrop filter recalculation during scroll */
	.sp-hero,
	.sp-card,
	.glass-card {
		backdrop-filter: none;
		background: rgba(13, 14, 20, 0.95)
	}

	/* Only apply blur when not scrolling or on static header if needed, 
		but to keep look identical we use high-alpha background on mobile */
	@supports (backdrop-filter: blur(10px)) {

		.sp-hero,
		.sp-card,
		.glass-card {
			background: rgba(13, 14, 20, 0.8);
			backdrop-filter: blur(12px)
		}
	}

	.sp-updated {
		order: 1
	}

	.sp-shell,
	.sp-bc {
		padding-left: 14px;
		padding-right: 14px
	}

	.sp-hero-desc {
		font-size: .9rem
	}

	.sp-btn {
		font-size: .79rem;
		padding: 8px 13px
	}

	.sp-bot {
		grid-template-columns: 1fr
	}

	.sp-bot--full {
		grid-column: auto
	}

	.sp-cta {
		padding: 18px;
		text-align: center;
		justify-content: center;
		flex-direction: column
	}

	.sp-ctl {
		justify-content: center
	}

	.sp-ag {
		grid-template-columns: 1fr
	}

	.sp-stats {
		grid-template-columns: repeat(3, 1fr)
	}

	.sp-meta {
		gap: 8px
	}

	.sp-mp {
		font-size: .77rem;
		padding: 7px 10px
	}
}

@media(max-width:400px) {
	.sp-hero h1 {
		font-size: 1.35rem
	}

	.sp-card-head h2,
	.sp-card-head h3 {
		font-size: .88rem
	}

	.sp-mt {
		font-size: .86rem
	}

	.sp-stats {
		grid-template-columns: 1fr
	}
}