:root
{
	--bg0:#070910;
	--text:#e8ecff;
	--muted:rgba(232,236,255,.72);

	--card:rgba(16,20,34,.62);
	--stroke:rgba(232,236,255,.12);

	--accentA:rgba(97,94,239,1);
	--accentB:rgba(238,0,0,1);
	--accentC:rgba(255,180,90,1);

	--shadow: 0 30px 70px rgba(0,0,0,.50);
	--r: 26px;

	/* Dynamic sunset palette (set from JS) */
	--skyA: rgba(97,94,239,.18);
	--skyB: rgba(0,0,0,.55);
	--glowA: rgba(255,180,90,.36);
	--glowB: rgba(238,0,0,.22);
	--sunA: rgba(255,240,220,1);
	--sunB: rgba(255,180,90,1);
	--sunC: rgba(238,0,0,.28);
	--sparkA: rgba(255,255,255,.22);
	--sparkB: rgba(255,255,255,.14);
}

*
{
	box-sizing:border-box;
}

html,body
{
	height:100%;
}

body
{
	margin:0;
	font-family:"Manrope","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	color:var(--text);
	background:var(--bg0);
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased;
}

h1,.badgeTitle,.loadingTitle,.scoreNum,.reasonsTitle,.ctaTitle
{
	font-family:"Inter","Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	letter-spacing:-0.4px;
}

.bg
{
	position:fixed;
	inset:0;
	background:
		radial-gradient(1100px 600px at 18% 22%, rgba(97,94,239,.25), transparent 55%),
		radial-gradient(900px 520px at 82% 24%, rgba(238,0,0,.18), transparent 55%),
		radial-gradient(900px 600px at 70% 92%, rgba(255,180,90,.14), transparent 62%),
		linear-gradient(180deg, #070910 0%, #05060b 100%);
	filter:saturate(1.1);
}

.grain
{
	position:fixed;
	inset:-40%;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
	opacity:.18;
	mix-blend-mode:overlay;
	pointer-events:none;
	transform:rotate(8deg);
}

.vignette
{
	position:fixed;
	inset:0;
	background:radial-gradient(1200px 800px at 50% 40%, transparent 40%, rgba(0,0,0,.65) 100%);
	pointer-events:none;
}

.app
{
	min-height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:34px 18px 22px;
}

.stage
{
	width:min(1120px, 100%);
	margin:0 auto;
	background:linear-gradient(180deg, rgba(14,18,34,.72), rgba(10,12,20,.55));
	border:1px solid var(--stroke);
	border-radius:var(--r);
	box-shadow:var(--shadow);
	padding:28px;
	position:relative;
}

.panel
{
	display:none;
}

.panel.isActive
{
	display:block;
	animation:fadeIn .35s ease both;
}

@keyframes fadeIn
{
	from { opacity:0; transform:translateY(8px); }
	to { opacity:1; transform:translateY(0); }
}

.heroGrid
{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:26px;
	align-items:center;
}

@media (max-width: 980px)
{
	.heroGrid
	{
		grid-template-columns:1fr;
	}
}

.hero h1
{
	font-size:56px;
	line-height:1.03;
	margin:0 0 14px;
}

.lead
{
	margin:0 0 22px;
	color:var(--muted);
	font-size:16px;
	line-height:1.55;
	max-width:560px;
}

.ctaGrid
{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:12px;
	max-width:560px;
}

@media (max-width: 620px)
{
	.ctaGrid
	{
		grid-template-columns:1fr;
	}
}

.cta
{
	border-radius:18px;
	border:1px solid rgba(232,236,255,.14);
	background:rgba(255,255,255,.03);
	color:var(--text);
	padding:14px 14px;
	display:flex;
	align-items:center;
	gap:12px;
	cursor:pointer;
	transition:transform .15s ease, background .15s ease, border-color .15s ease;
}

.cta:hover
{
	transform:translateY(-1px);
	border-color:rgba(232,236,255,.22);
	background:rgba(255,255,255,.05);
}

.ctaText
{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:4px;
	text-align:left;
}

.ctaIcon
{
	width:42px;
	height:42px;
	display:grid;
	place-items:center;
	border-radius:14px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(232,236,255,.12);
}

.ctaTitle
{
	display:block;
	font-weight:800;
	font-size:14px;
}

.ctaDesc
{
	display:block;
	font-size:12px;
	color:rgba(232,236,255,.70);
	margin-top:0;
}

.ctaArrow
{
	margin-left:auto;
	opacity:.85;
}

.ctaPrimary
{
	background:
		linear-gradient(90deg, rgba(97,94,239,.85) 0%, rgba(238,0,0,.90) 70%, rgba(238,0,0,.90) 100%);
	border-color:rgba(255,255,255,.14);
}

.ctaPrimary:hover
{
	filter:saturate(1.07);
}

.ctaGhost
{
	background:rgba(255,255,255,.03);
}

.microNote
{
	margin-top:14px;
	color:rgba(232,236,255,.72);
	font-size:13px;
}

.linkBtn
{
	all:unset;
	cursor:pointer;
	color:rgba(255,200,120,.92);
	font-weight:700;
	margin-left:6px;
}

.manual
{
	margin-top:12px;
	max-width:560px;
	padding:12px;
	border-radius:16px;
	border:1px solid rgba(232,236,255,.12);
	background:rgba(0,0,0,.18);
}

.manualRow
{
	display:flex;
	gap:10px;
	align-items:center;
	flex-wrap:wrap;
	min-width:0;
}

.input
{
	flex:1;
	min-width:120px;
	border-radius:14px;
	border:1px solid rgba(232,236,255,.14);
	background:rgba(255,255,255,.04);
	color:var(--text);
	padding:12px 12px;
	outline:none;
}

.miniBtn
{
	border-radius:14px;
	border:1px solid rgba(232,236,255,.14);
	background:rgba(255,255,255,.06);
	color:var(--text);
	padding:10px 12px;
	cursor:pointer;
	font-weight:800;
	transition:transform .15s ease, background .15s ease;
	white-space:nowrap;
}

.miniBtn:hover
{
	transform:translateY(-1px);
	background:rgba(255,255,255,.09);
}

.miniGhost
{
	background:rgba(255,255,255,.03);
}

.hint
{
	margin-top:8px;
	font-size:12px;
	color:rgba(232,236,255,.62);
}

.citySelectBlock
{
	margin-top:18px;
	max-width:560px;
	width:100%;
	display:flex;
	flex-direction:column;
	gap:6px;
}

.citySelectLabel
{
	font-size:12px;
	color:rgba(232,236,255,.62);
}

.select
{
	border-radius:14px;
	border:1px solid rgba(232,236,255,.14);
	background:rgba(0,0,0,.32);
	color:var(--text);
	padding:10px 12px;
	font-family:inherit;
	font-size:14px;
	outline:none;
}

.hidden
{
	display:none !important;
}

.errorLine
{
	margin-top:12px;
	padding:12px 12px;
	border-radius:14px;
	border:1px solid rgba(255,80,80,.35);
	background:rgba(255,0,0,.06);
	color:rgba(255,180,180,.95);
	font-size:13px;
}

.heroArt
{
	display:flex;
	flex-direction:column;
	gap:12px;
	justify-content:center;
	align-items:flex-end;
}

.sunCycle
{
	width:min(430px, 100%);
	aspect-ratio: 16 / 10;
	border-radius:22px;
	border:1px solid rgba(232,236,255,.14);
	background:
		linear-gradient(180deg, var(--skyA), var(--skyB)),
		radial-gradient(120px 120px at 25% 55%, var(--glowA), transparent 60%);
	position:relative;
	overflow:hidden;
	box-shadow: 0 22px 50px rgba(0,0,0,.45);
}

.cycleGlow
{
	position:absolute;
	inset:-40%;
	background:radial-gradient(circle, var(--glowA), transparent 62%);
	filter:blur(30px);
	animation:glowPulse 5s ease-in-out infinite;
}

@keyframes glowPulse
{
	0%,100% { transform:translate(0,0) scale(1); opacity:.75; }
	50% { transform:translate(10px, -8px) scale(1.05); opacity:.92; }
}

.cyclePath
{
	position:absolute;
	left:-20%;
	right:-20%;
	top:20%;
	height:80%;
	border-top:1px dashed rgba(232,236,255,.18);
	border-radius:50%;
	opacity:.55;
	transform:rotate(-10deg);
}

.cycleSun
{
	position:absolute;
	width:64px;
	height:64px;
	border-radius:999px;
	background:radial-gradient(circle at 30% 30%, var(--sunA), var(--sunB) 60%, var(--sunC) 120%);
	filter: drop-shadow(0 18px 24px rgba(255,160,80,.22));
	left:-10%;
	top:52%;
	transform:translate(-50%,-50%);
	animation:sunArc 6s ease-in-out infinite;
}

@keyframes sunArc
{
	0% { left:-8%; top:66%; opacity:.00; }
	18% { opacity:1; }
	50% { left:50%; top:34%; opacity:1; }
	82% { opacity:1; }
	100% { left:108%; top:66%; opacity:.00; }
}

.cycleCloud
{
	position:absolute;
	width:110px;
	height:58px;
	border-radius:999px;
	background:rgba(232,236,255,.09);
	border:1px solid rgba(232,236,255,.12);
	filter:blur(.1px);
}

.cc1 { top:18%; left:14%; animation:cloudDrift 6.5s ease-in-out infinite; }
.cc2 { top:28%; left:52%; transform:scale(1.12); animation:cloudDrift 7.2s ease-in-out infinite reverse; }
.cc3 { top:16%; left:70%; transform:scale(.92); animation:cloudDrift 6.9s ease-in-out infinite; }

@keyframes cloudDrift
{
	0%,100% { transform:translateX(0) scale(1); opacity:.75; }
	50% { transform:translateX(22px) scale(1.03); opacity:.92; }
}

.cycleHorizon
{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:34%;
	background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.52));
}

.heroBadge
{
	width:min(430px, 100%);
	padding:14px 14px;
	border-radius:18px;
	border:1px solid rgba(232,236,255,.12);
	background:rgba(0,0,0,.18);
}

.badgeTitle
{
	font-weight:900;
	font-size:16px;
}

.badgeSub
{
	margin-top:4px;
	color:rgba(232,236,255,.68);
	font-size:13px;
}

.loaderWrap
{
	display:grid;
	grid-template-columns: 1fr;
	justify-items:center;
	gap:18px;
	padding:22px 10px 18px;
}

.skyLoader
{
	width:min(780px, 100%);
	aspect-ratio: 16/6;
	border-radius:24px;
	border:1px solid rgba(232,236,255,.14);
	background:
		radial-gradient(220px 180px at 26% 52%, var(--glowA), transparent 62%),
		linear-gradient(180deg, var(--skyA), rgba(0,0,0,.38));
	position:relative;
	overflow:hidden;
	box-shadow: 0 22px 60px rgba(0,0,0,.42);
}

.skyLoader .sun
{
	position:absolute;
	width:72px;
	height:72px;
	border-radius:999px;
	background:radial-gradient(circle at 30% 30%, var(--sunA), var(--sunB) 60%, rgba(238,0,0,.30) 120%);
	left:10%;
	top:56%;
	transform:translate(-50%,-50%);
	animation:loaderSun 2.9s ease-in-out infinite;
}

@keyframes loaderSun
{
	0% { left:6%; top:66%; opacity:.05; }
	15% { opacity:1; }
	50% { left:50%; top:40%; opacity:1; }
	85% { opacity:1; }
	100% { left:94%; top:66%; opacity:.05; }
}

.skyLoader .cloud
{
	position:absolute;
	width:160px;
	height:78px;
	border-radius:999px;
	background:rgba(232,236,255,.08);
	border:1px solid rgba(232,236,255,.12);
}

.skyLoader .c1 { top:16%; left:10%; animation:loaderCloud 2.7s ease-in-out infinite; }
.skyLoader .c2 { top:30%; left:44%; transform:scale(1.12); animation:loaderCloud 3.1s ease-in-out infinite reverse; }
.skyLoader .c3 { top:18%; left:72%; transform:scale(.95); animation:loaderCloud 2.9s ease-in-out infinite; }

@keyframes loaderCloud
{
	0%,100% { transform:translateX(0) scale(1); opacity:.70; }
	50% { transform:translateX(28px) scale(1.02); opacity:.92; }
}

.skyLoader .horizon
{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:36%;
	background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}

.loadingText
{
	width:min(780px, 100%);
	text-align:center;
}

.loadingTitle
{
	font-size:28px;
	font-weight:900;
}

.loadingLine
{
	margin-top:8px;
	color:rgba(232,236,255,.78);
	font-size:14px;
	min-height:20px;
}

.loadingTips
{
	display:flex;
	justify-content:center;
	gap:10px;
	align-items:center;
	margin-top:14px;
	color:rgba(232,236,255,.58);
	font-size:12px;
}

.tipDot
{
	width:10px;
	height:10px;
	border-radius:999px;
	background:linear-gradient(90deg, rgba(97,94,239,.95), rgba(238,0,0,.95));
	box-shadow: 0 10px 26px rgba(97,94,239,.18);
}

.resultGrid
{
	display:grid;
	grid-template-columns: 1fr .95fr;
	gap:16px;
	align-items:stretch;
}

@media (max-width: 980px)
{
	.resultGrid
	{
		grid-template-columns:1fr;
	}
}

.resultCard,.artCard
{
	border-radius:22px;
	border:1px solid rgba(232,236,255,.12);
	background:rgba(0,0,0,.18);
	padding:16px;
}

.pill
{
	display:inline-flex;
	gap:8px;
	align-items:center;
	padding:8px 10px;
	border-radius:999px;
	border:1px solid rgba(232,236,255,.12);
	background:rgba(255,255,255,.03);
	font-size:12px;
	color:rgba(232,236,255,.82);
}

.pillSoft
{
	background:rgba(255,255,255,.02);
	color:rgba(232,236,255,.68);
}

.pillBtn
{
	cursor:pointer;
	transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.pillBtn:hover
{
	transform:translateY(-1px);
	background:rgba(255,255,255,.06);
	border-color:rgba(232,236,255,.20);
}

.resultTop
{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:space-between;
}

.scoreRow
{
	margin-top:14px;
	display:flex;
	gap:14px;
	align-items:baseline;
	justify-content:space-between;
}

.score
{
	display:flex;
	flex-direction:column;
	gap:4px;
}

.scoreMeta
{
	display:flex;
	flex-direction:column;
	gap:6px;
}

.scoreCaption
{
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:.18em;
	color:var(--muted);
	font-weight:700;
}

.scoreValue
{
	display:flex;
	align-items:baseline;
	gap:8px;
}

.scoreNum
{
	font-size:56px;
	font-weight:900;
	line-height:1;
}

.scoreUnit
{
	color:rgba(232,236,255,.72);
	font-weight:800;
	font-size:20px;
	letter-spacing:.08em;
}

.scoreLabel
{
	font-weight:900;
	color:rgba(232,236,255,.90);
}

.timeRow
{
	margin-top:12px;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
}

.timePill
{
	border-radius:18px;
	border:1px solid rgba(232,236,255,.10);
	background:rgba(255,255,255,.02);
	padding:12px 12px;
}

.timeCap
{
	font-size:12px;
	color:rgba(232,236,255,.62);
}

.timeVal
{
	margin-top:6px;
	font-weight:900;
	letter-spacing:.2px;
}

.barWrap
{
	margin-top:14px;
}

.bar
{
	position:relative;
	height:14px;
	border-radius:999px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(232,236,255,.10);
	overflow:hidden;
}

.barFill
{
	height:100%;
	width:0%;
	border-radius:999px;
	background:linear-gradient(90deg, rgba(97,94,239,.95) 0%, rgba(238,0,0,.95) 70%, rgba(238,0,0,.95) 100%);
	transition:width .7s ease;
}

.barGlow
{
	position:absolute;
	inset:-40%;
	background:radial-gradient(circle, rgba(255,180,90,.14), transparent 58%);
	filter:blur(26px);
	pointer-events:none;
}

.barLegend
{
	margin-top:6px;
	display:flex;
	justify-content:space-between;
	color:rgba(232,236,255,.52);
	font-size:11px;
}

.reasonsBlock
{
	margin-top:14px;
}

.reasonsTitle
{
	font-weight:900;
	margin-bottom:8px;
}

.reasons
{
	margin:0;
	padding-left:18px;
	color:rgba(232,236,255,.72);
	line-height:1.45;
	font-size:13px;
}

.colorBlock
{
	margin-top:14px;
	padding:12px 12px;
	border-radius:18px;
	border:1px solid rgba(232,236,255,.10);
	background:rgba(255,255,255,.02);
}

.colorTitleRow
{
	display:flex;
	gap:10px;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
}

.colorTitle
{
	font-weight:900;
}

.colorChip
{
	display:inline-flex;
	gap:8px;
	align-items:center;
	padding:6px 10px;
	border-radius:999px;
	border:1px solid rgba(232,236,255,.12);
	background:
		linear-gradient(90deg, rgba(97,94,239,.45) 0%, rgba(255,180,90,.45) 45%, rgba(238,0,0,.45) 100%);
	color:rgba(232,236,255,.88);
	font-size:12px;
	white-space:nowrap;
}

.colorDesc
{
	margin-top:6px;
	color:rgba(232,236,255,.72);
	font-size:13px;
	line-height:1.35;
}

.colorForecast
{
	margin-top:10px;
	display:flex;
	flex-direction:column;
	gap:8px;
}

.colorForecastEmpty
{
	font-size:12px;
	color:rgba(232,236,255,.62);
}

.colorSwatch
{
	position:relative;
	border-radius:16px;
	border:1px solid rgba(232,236,255,.12);
	padding:12px;
	background:linear-gradient(135deg, var(--colorA, rgba(255,180,90,.25)), var(--colorB, rgba(97,94,239,.25)));
	overflow:hidden;
	box-shadow:0 8px 24px rgba(0,0,0,.25);
	animation:colorPulse 4.4s ease-in-out infinite;
}

.colorSwatch::after
{
	content:"";
	position:absolute;
	inset:-20%;
	background:radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
	filter:blur(18px);
	opacity:.4;
	animation:swatchGlow 6s ease-in-out infinite;
	pointer-events:none;
}

.colorSwatchMeta
{
	position:relative;
	display:flex;
	justify-content:space-between;
	gap:12px;
	align-items:center;
}

.colorSwatchName
{
	font-weight:800;
}

.colorSwatchValue
{
	font-size:13px;
	font-weight:700;
	color:rgba(232,236,255,.85);
}

@keyframes colorPulse
{
	0%,100% { transform:translateY(0); }
	50% { transform:translateY(-3px); }
}

@keyframes swatchGlow
{
	0%,100% { transform:scale(1); opacity:.4; }
	50% { transform:scale(1.1); opacity:.7; }
}

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

.toast
{
	margin-top:12px;
	padding:10px 12px;
	border-radius:14px;
	border:1px solid rgba(232,236,255,.12);
	background:rgba(0,0,0,.28);
	font-size:12px;
	color:rgba(232,236,255,.82);
	width:max-content;
}

.sunsetArt
{
	border-radius:22px;
	border:1px solid rgba(232,236,255,.12);
	background:
		linear-gradient(180deg, var(--skyA), var(--skyB)),
		radial-gradient(220px 180px at 58% 56%, var(--glowA), transparent 62%);
	height:260px;
	position:relative;
	overflow:hidden;
	box-shadow: 0 22px 60px rgba(0,0,0,.40);
}

.sunsetArt .sunDisk
{
	position:absolute;
	width:84px;
	height:84px;
	border-radius:999px;
	background:radial-gradient(circle at 30% 30%, var(--sunA), var(--sunB) 60%, var(--sunC) 120%);
	left:58%;
	top:56%;
	transform:translate(-50%,-50%);
	filter: drop-shadow(0 18px 26px rgba(255,160,80,.18));
	animation:floaty 4.2s ease-in-out infinite;
}

@keyframes floaty
{
	0%,100% { transform:translate(-50%,-50%) translateY(0); }
	50% { transform:translate(-50%,-50%) translateY(-6px); }
}

.sunsetArt .cloudArt
{
	position:absolute;
	width:140px;
	height:68px;
	border-radius:999px;
	background:rgba(232,236,255,.08);
	border:1px solid rgba(232,236,255,.12);
}

.ca1 { top:16%; left:10%; animation:loaderCloud 3.2s ease-in-out infinite; }
.ca2 { top:30%; left:42%; transform:scale(1.15); animation:loaderCloud 3.6s ease-in-out infinite reverse; }
.ca3 { top:18%; left:68%; transform:scale(.95); animation:loaderCloud 3.4s ease-in-out infinite; }

.sunsetArt .sea
{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:38%;
	background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.58));
}

.sunsetArt .shine
{
	position:absolute;
	inset:-40%;
	background:radial-gradient(circle, var(--glowB), transparent 60%);
	filter:blur(28px);
	animation:glowPulse 6s ease-in-out infinite;
}

.sunsetArt .sparkles
{
	position:absolute;
	inset:0;
	background:
		radial-gradient(2px 2px at 20% 20%, var(--sparkA), transparent 55%),
		radial-gradient(2px 2px at 60% 28%, rgba(255,255,255,.18), transparent 55%),
		radial-gradient(2px 2px at 74% 44%, var(--sparkB), transparent 55%),
		radial-gradient(2px 2px at 40% 55%, rgba(255,255,255,.10), transparent 55%);
	opacity:.55;
}

.artCaption
{
	margin-top:12px;
}

.capTitle
{
	font-weight:900;
}

.capSub
{
	margin-top:4px;
	color:rgba(232,236,255,.68);
	font-size:13px;
	line-height:1.35;
}

.footerRow
{
	width:min(1120px, 100%);
	margin:12px auto 0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

.footer
{
	color:rgba(232,236,255,.50);
	font-size:12px;
}

.footerControls
{
	display:flex;
	gap:10px;
	align-items:center;
}

.pill,
.timeVal,
.capSub,
.reasons,
.loadingLine,
.footer
{
	max-width:100%;
	overflow-wrap:anywhere;
	word-break:break-word;
	white-space:normal;
}

.resultTop,
.scoreRow,
.footerRow,
.footerControls
{
	min-width:0;
}

.resultTop > *,
.scoreRow > *,
.footerRow > *,
.footerControls > *
{
	min-width:0;
}

.toast
{
	max-width:100%;
	width:fit-content;
	white-space:normal;
	overflow-wrap:anywhere;
	word-break:break-word;
}

.footerRow,
.footerControls
{
	flex-wrap:wrap;
	justify-content:center;
}

@media (max-width: 520px)
{
	.app
	{
		padding:22px 12px 18px;
	}

	.stage
	{
		padding:18px;
	}

	.timeRow
	{
		grid-template-columns:1fr;
	}
}

@media (max-width: 420px)
{
	.scoreRow
	{
		flex-direction:column;
		align-items:flex-start;
		gap:10px;
	}
}

@media (max-width: 420px)
{
	.manualRow
	{
		flex-direction:column;
		align-items:stretch;
	}

	.input
	{
		min-width:0;
		width:100%;
	}

	.miniBtn
	{
		width:100%;
	}
}