:root {
	--font:'Inter','Segoe UI',sans-serif;
	--ink:#0f172a;
	--muted:#64748b;
	--line:#dbe4ef;
	--line-strong:#c7d3e2;
	--surface:#fff;
	--surface-soft:#f8fafc;
	--accent:#6d5efc;
	--accent-ink:#5a4ef0;
	--danger:#ef4444;
}

* { box-sizing:border-box; }

body {
	margin:0;
	font-family:var(--font);
	color:var(--ink);
	background:
		radial-gradient(circle at top left, rgba(109,94,252,.12), transparent 26%),
		radial-gradient(circle at top right, rgba(20,184,166,.08), transparent 24%),
		linear-gradient(180deg,#f8faff,#eef3ff);
}

.sp-page { max-width:1280px; margin:0 auto; padding:20px; }
.sp-page h1 { margin:0; font-size:clamp(1.4rem,2.5vw,2.1rem); letter-spacing:-.02em; }
.sp-page p { margin:6px 0 14px; color:var(--muted); }

.sp-layout { display:grid; grid-template-columns:340px 1fr; gap:16px; align-items:start; }

.sp-side {
	border:1px solid var(--line);
	border-radius:16px;
	background:rgba(255,255,255,.92);
	padding:12px;
	box-shadow:0 14px 26px rgba(15,23,42,.06);
}

.sp-side-block { margin-top:12px; }

.sp-side label { font-size:.86rem; color:#334155; font-weight:700; }

.sp-side textarea {
	width:100%;
	margin-top:8px;
	border:1px solid var(--line);
	border-radius:12px;
	padding:10px;
	font:inherit;
	resize:vertical;
	transition:border-color .2s ease,box-shadow .2s ease;
}

.sp-side textarea:focus-visible {
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 3px rgba(109,94,252,.18);
}

.sp-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

.sp-btn {
	border:1px solid var(--line);
	border-radius:12px;
	background:#fff;
	padding:10px 14px;
	font:inherit;
	font-weight:700;
	cursor:pointer;
	transition:transform .12s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}

.sp-btn:hover { border-color:var(--line-strong); background:var(--surface-soft); }

.sp-btn:focus-visible {
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 3px rgba(109,94,252,.18);
}

.sp-btn:active { transform:translateY(1px); }

.sp-btn-primary {
	background:linear-gradient(135deg,var(--accent),#8c7eff);
	border-color:var(--accent);
	color:#fff;
	box-shadow:0 12px 22px rgba(109,94,252,.24);
}

.sp-btn-primary:hover { background:linear-gradient(135deg,var(--accent-ink),#7a6cf7); border-color:var(--accent-ink); }


.sp-btn-danger {
	background:#fff1f2;
	border-color:rgba(239,68,68,.18);
	color:#dc2626;
}

.sp-btn-danger:hover {
	background:#ffe4e8;
	border-color:rgba(239,68,68,.28);
}


.sp-setting input {
	width:18px;
	height:18px;
	accent-color:var(--accent);
}

.sp-winner {
	margin-top:12px;
	padding:18px;
	border:1px solid var(--line);
	border-radius:20px;
	background:
		radial-gradient(circle at top right, rgba(109,94,252,.16), transparent 42%),
		#fff;
	box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.sp-winner-label {
	color:var(--muted);
	font-size:.84rem;
	text-transform:uppercase;
	letter-spacing:.07em;
	font-weight:800;
	margin-bottom:8px;
}

.sp-winner-name {
	font-size:clamp(1.45rem,2.2vw,1.9rem);
	font-weight:900;
	letter-spacing:-.04em;
	margin-bottom:8px;
}

.sp-winner-sub {
	color:var(--muted);
	font-size:.94rem;
}

.sp-stage {
	border:1px solid rgba(255,255,255,.86);
	border-radius:24px;
	background:rgba(255,255,255,.86);
	box-shadow:0 18px 36px rgba(15,23,42,.08);
	padding:14px;
}

.sp-stage-top {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	margin-bottom:12px;
}

.sp-stage-pill-wrap { display:flex; gap:10px; flex-wrap:wrap; }

.sp-stage-pill {
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:9px 12px;
	border-radius:999px;
	border:1px solid var(--line);
	background:#fff;
	color:var(--muted);
	font-size:.9rem;
	font-weight:700;
}

.sp-stage-pill strong { color:var(--ink); }

.sp-stage-actions { display:flex; gap:8px; flex-wrap:wrap; }

.sp-wheel-shell { display:grid; grid-template-columns:1fr; gap:14px; align-items:start; }

.sp-wheel-wrap {
	position:relative;
	border:0;
	border-radius:28px;
	background:transparent;
	padding:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:640px;
	overflow:hidden;
}

.sp-wheel-wrap::before {
	content:"";
	position:absolute;
	width:180px;
	height:180px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(109,94,252,.14), transparent 72%);
	left:22px;
	bottom:24px;
	pointer-events:none;
}

#wheelCanvas {
	width:min(100%,560px);
	height:auto;
	display:block;
	cursor:grab;
	touch-action:none;
}

#wheelCanvas.sp-dragging { cursor:grabbing; }

.sp-pointer {
	position:absolute;
	top:52px;
	left:50%;
	transform:translateX(-50%);
	width:0;
	height:0;
	border-left:16px solid transparent;
	border-right:16px solid transparent;
	border-top:28px solid var(--danger);
	z-index:3;
	filter:drop-shadow(0 8px 12px rgba(239,68,68,.25));
}

.sp-center-spin {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:112px;
	height:112px;
	border:0;
	border-radius:50%;
	background:linear-gradient(180deg,#1f2937,#0f172a);
	color:#fff;
	font-weight:900;
	font-size:1rem;
	letter-spacing:.08em;
	cursor:pointer;
	z-index:3;
	box-shadow:0 16px 34px rgba(15,23,42,.22);
}

.sp-center-spin:hover { transform:translate(-50%,-50%) scale(1.02); }
.sp-center-spin:active { transform:translate(-50%,-50%) scale(.98); }

.sp-confetti-layer {
	position:absolute;
	inset:0;
	pointer-events:none;
	overflow:hidden;
	z-index:4;
}

.sp-confetti {
	position:absolute;
	top:-16px;
	width:10px;
	height:16px;
	border-radius:3px;
	opacity:.9;
	animation:sp-fall 1.2s ease-in forwards;
}

@keyframes sp-fall {
	0% { transform:translate3d(0,0,0) rotate(0deg); opacity:1; }
	100% { transform:translate3d(var(--x,0px),620px,0) rotate(520deg); opacity:0; }
}

.sp-meta-card {
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	padding:14px;
}

.sp-meta-card h3 {
	margin:0 0 10px;
	font-size:1rem;
	letter-spacing:-.02em;
}

.sp-setting-row {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	padding:12px 0;
	border-bottom:1px solid var(--line);
}

.sp-setting-row:first-of-type { padding-top:0; }
.sp-setting-row:last-of-type {
	padding-bottom:0;
	border-bottom:0;
}

.sp-setting-text strong {
	display:block;
	font-size:.95rem;
	line-height:1.3;
	color:#334155;
}

.sp-setting-text span {
	color:var(--muted);
	font-size:.86rem;
}

.sp-switch { position:relative; display:inline-flex; }

.sp-switch input {
	position:absolute;
	opacity:0;
	pointer-events:none;
}

.sp-switch-ui {
	width:46px;
	height:28px;
	border-radius:999px;
	background:rgba(100,116,139,.24);
	position:relative;
	transition:background .2s ease;
}

.sp-switch-ui::after {
	content:"";
	position:absolute;
	width:22px;
	height:22px;
	border-radius:50%;
	background:#fff;
	top:3px;
	left:3px;
	box-shadow:0 3px 8px rgba(15,23,42,.12);
	transition:left .2s ease;
}

.sp-switch input:checked + .sp-switch-ui {
	background:rgba(109,94,252,.34);
}

.sp-switch input:checked + .sp-switch-ui::after {
	left:21px;
}

.sp-result-list {
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	gap:8px;
}

.sp-result-list li {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:9px 10px;
	border:1px solid var(--line);
	border-radius:12px;
	background:#f8faff;
	font-weight:700;
}

.sp-result-list small {
	color:var(--muted);
	font-weight:600;
}

.sp-empty {
	margin:8px 0 0;
	color:var(--muted);
	font-size:.92rem;
}

@media (min-width:768px) and (max-width:1160px) {
	.sp-page { padding:18px; }
	.sp-layout { grid-template-columns:300px 1fr; gap:12px; }
	.sp-wheel-shell { grid-template-columns:1fr; }
	.sp-wheel-wrap { min-height:520px; }
	.sp-pointer { top:22px; }
}

@media (max-width:960px) {
	.sp-page { padding:16px; }
	.sp-layout { grid-template-columns:1fr; }
	.sp-side textarea { min-height:180px; }
	.sp-btn { min-height:44px; padding:10px 14px; }
	.sp-wheel-shell { grid-template-columns:1fr; }
	.sp-stage { padding:10px; }
	.sp-stage-top { margin-bottom:8px; gap:8px; }
	.sp-wheel-wrap { min-height:0; padding:0; }
	.sp-wheel-wrap::before { display:none; }
	#wheelCanvas { width:100%; max-width:100%; }
	.sp-pointer {
		top:calc(6.8% - 24px);
		border-left:16px solid transparent;
		border-right:16px solid transparent;
		border-top:28px solid var(--danger);
	}
	.sp-center-spin { width:90px; height:90px; font-size:.86rem; }
}