/* ==========================================================================
 * Widgets & Applets — generic widget shell used by every applet
 * ========================================================================== */
.-hero-left-panel.---show-widget-panel,
.-hero-right-panel.---show-widget-panel {
	opacity: 1;
	visibility: visible;
}

.-hero-left-panel-box.---widgets >:first-child,
.-hero-right-panel-box.---widgets >:first-child {
	margin-top: 3.125vw;
}

.-widget-quota-value {
	color: var(--app-accent);
	font-size: 3.4375vw;
	margin: 0 0 3.125vw;
}

.-widget-switch-slab {
	display: flex;
	gap: 3.125vw;
	color: #b0a890;
	font-size: 3.75vw;
	margin: 0 3.125vw;
	align-items: center;
	min-height: 14.0625vw;
	clip-path: var(--squircle);
	width: -webkit-fill-available;
	background: var(--surface);
	justify-content: space-between;
	--switch-color: var(--app-accent);
}

.-widget-switch-slab .-widget-icon {
	background: var(--field-surface);
}

.-widget-switch {
	height: 8.75vw;
	width: 15.625vw;
	display: flex;
	position: relative;
	align-items: center;
	min-width: 15.625vw;
	margin-right: 3.125vw;
	border-radius: 6.25vw;
	touch-action: manipulation;
	background: var(--dimmer);
	border: 0.625vw solid #0000;
	transition: background 0.3s, transform 0.3s, filter 0.3s;
}

.---switch-on .-widget-switch {
	background: color-mix(in srgb, var(--switch-color) 42%, var(--dimmer));
}

.-widget-switch::before {
	content: "";
	width: 6.25vw;
	height: 6.25vw;
	margin: 0.625vw;
	position: absolute;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0.625vw 1.875vw #00000099;
	transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}

.---switch-on .-widget-switch::before {
	transform: translateX(6.875vw);
	background: var(--switch-color);
	box-shadow: 0 0.625vw 1.875vw rgb(0 0 0 / 24%);
}

.---switch-on .material-symbols-rounded,
.-widget-switch-slab.---switch-on .-widget-label {
	color: var(--switch-color);
}

.-widget-divider {
	height: 0;
	z-index: 3;
	display: flex;
	position: relative;
	overflow: visible;
	min-height: 0.625vw;
	align-items: center;
	justify-content: center;
	margin: 3.125vw 4.6875vw;
	width: -webkit-fill-available;
	transition: margin 0.3s, min-height 0.3s;
	background: linear-gradient(90deg,#0000,color-mix(in srgb,var(--app-accent) 44%,transparent),#0000);
}

.-widget-divider::before {
	top: 0;
	content: "";
	z-index: 40;
	width: 7.5vw;
	position: relative;
	aspect-ratio: 1/1;
	border-radius: 50%;
	pointer-events: auto;
	border: 1.5625vw solid var(--app-theme);
	background: color-mix(in srgb, var(--field-surface) 60%, #7A493A);
}

.-right-panel-box.---widgets >:first-child {
	margin-top: 3.125vw;
}

.-widget {
	z-index: 1;
	display: flex;
	flex: 0 0 auto;
	color: var(--app-muted);
	position: relative;
	isolation: isolate;
	flex-flow: column;
	margin: 0 3.125vw;
	clip-path: var(--squircle);
	width: -webkit-fill-available;
	background: var(--surface);
}

.-widget-head.---pressed {
	transform: none;
}

.-widget-head {
	display: flex;
	gap: 3.125vw;
	position: relative;
	align-items: center;
	min-height: 14.0625vw;
	touch-action: manipulation;
	width: -webkit-fill-available;
	justify-content: space-between;
}

.-widget-icon {
	display: flex;
	width: 9.375vw;
	height: 9.375vw;
	min-width: 9.375vw;
	position: relative;
	align-items: center;
	margin: 0 0 0 3.125vw;
	justify-content: center;
	transition: color 0.25s;
	clip-path: var(--squircle);
	background: rgb(255 255 255);
	color: var(--widget-icon-color);
	--icon-color: var(--widget-icon-color);
}

.-widget > .-widget-head .-widget-icon,
.-widget .-widget-item .-widget-icon,
.-widget .-widget-nest .-widget-icon {
	color: var(--widget-icon-color);
	--icon-color: var(--widget-icon-color);
}

.-widget.---open > .-widget-head .-widget-label {
	color: var(--app-accent);
}

.-widget.---open > .-widget-head .-widget-icon {
	color: var(--widget-icon-color);
	--icon-color: var(--widget-icon-color);
}

.-widget.---open .-widget-icon {
	color: var(--widget-icon-color);
	--icon-color: var(--widget-icon-color);
}

.-widget-icon .material-symbols-rounded {
	width: 100%;
	height: 100%;
	display: flex;
	font-size: 6.25vw;
	align-items: center;
	justify-content: center;
}

.-widget-label {
	flex: 1;
	min-width: 0;
	color: #4E3E38;
	font-size: 3.75vw;
	white-space: pre;
	overflow: hidden;
	align-items: center;
	line-height: 4.6875vw;
	text-overflow: ellipsis;
}

.-widget-count {
	display: flex;
	height: 9.375vw;
	position: relative;
	width: fit-content;
	min-width: 9.375vw;
	align-items: center;
	font-size: 3.4375vw;
	padding: 0 3.125vw;
	justify-content: center;
	color: var(--widget-count-color);
	clip-path: var(--squircle);
	background: var(--dimmer);
}

.-widget-chevron {
	display: flex;
	width: 9.375vw;
	height: 9.375vw;
	position: relative;
	align-items: center;
	margin: 0 3.125vw 0 0;
	justify-content: center;
	clip-path: var(--squircle);
}

.-widget-chevron .material-symbols-rounded {
	font-size: 6.25vw;
	transform: rotate(0deg);
	transition: transform 0.3s ease;
}

.-widget.---open .-widget-chevron .material-symbols-rounded {
	transform: rotate(180deg);
}

.-widget-body-divider {
	position: relative;
	flex: 0 0 auto;
	width: -webkit-fill-available;
	margin: 0 4.6875vw;
	min-height: 0.625vw;
}

.-widget-body > .-horizontal-divider {
	position: relative;
	flex: 0 0 auto;
	width: -webkit-fill-available;
	margin: 0 4.6875vw;
	min-height: 0.625vw;
}

.-widget-body {
	height: 0;
	opacity: 0;
	padding: 0;
	display: flex;
	min-height: 0;
	gap: 3.125vw;
	overflow: hidden;
	position: relative;
	flex-flow: column;
	max-height: fit-content;
	transition: height 0.32s cubic-bezier(.4,0,.2,1), opacity 0.22s, margin 0.32s, padding 0.28s cubic-bezier(.4,0,.2,1);
}

.-widget-items {
	opacity: 0;
	min-height: 0;
	gap: 3.125vw;
	display: flex;
	position: relative;
	flex-flow: column;
	margin: 0 3.125vw;
	overflow: hidden auto;
	background: var(--field-surface);
	transition: opacity 0.4s;
	clip-path: var(--squircle);
}

.-widget-items >:first-child {
	margin-top: 3.125vw;
}

.-widget-items >:last-child {
	margin-bottom: 3.125vw;
}

.-widget-item {
	gap: 3.125vw;
	display: flex;
	position: relative;
	margin: 0 3.125vw;
	align-items: center;
	min-height: 14.0625vw;
	clip-path: var(--squircle);
	background: var(--widget-item-background);
	transition: transform 0.14s cubic-bezier(.2,.8,.2,1);
}

.-widget-explainer {
	text-align: left;
	color: var(--app-muted);
	font-size: 3.75vw;
	padding: 4.6875vw;
	margin: 0 3.125vw;
	line-height: 5.625vw;
	clip-path: var(--squircle);
	background: var(--explainer-surface);
}

.-widget-explainer.-no-margin {
	margin: 0;
}

.-widget-chevron-point {
	display: flex;
	width: 9.375vw;
	height: 9.375vw;
	min-width: 9.375vw;
	align-items: center;
	margin-right: 3.125vw;
	justify-content: center;
	clip-path: var(--squircle);
	background: var(--dimmer);
}

.-widget-chevron-point .material-symbols-rounded {
	font-size: 6.25vw;
}

.-widget-item.---active .-widget-label,
.-widget-item.---active .-widget-icon,
.-widget-item.---active .-widget-chevron-point {
	font-weight: 900;
	color: var(--app-accent);
}

.-widget-item.---active .-widget-chevron-point .material-symbols-rounded {
	font-variation-settings: "FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24;
}

.-widget-item.---pressed {
	transform: scale(0.965);
}

.-widget-nest {
	z-index: 1;
	display: flex;
	flex: 0 0 auto;
	color: #b0a890;
	position: relative;
	isolation: isolate;
	flex-flow: column;
	margin: 0 3.125vw;
	clip-path: var(--squircle);
	width: -webkit-fill-available;
}

.-widget-nest > .-widget-item .-widget-chevron-point .material-symbols-rounded {
	transition: transform 0.3s ease;
}

.-widget-nest.---open > .-widget-item .-widget-chevron-point .material-symbols-rounded {
	transform: rotate(90deg);
}

.-widget-nest > .-widget-item {
	margin: 0;
}

.-widget-nest .-widget-items {
	background: color-mix(in srgb,var(--app-theme) 38%,#fff);
}

.-widget-nest > .-widget-body {
	margin: 0;
}

.-widget-nest.---open > .-widget-body {
	opacity: 1;
}

.-widget-nest.---open > .-widget-body > .-widget-items {
	opacity: 1;
	min-height: var(--scroll-height);
}

.-widget.---open .-widget-body {
	opacity: 1;
}

.-widget.---open .-widget-items {
	opacity: 1;
	min-height: var(--scroll-height);
}

.-widget.---open > .-widget-body {
	margin-bottom: 3.125vw;
}

.-widget-divider.---show-divider-toast::before {
	background: var(--special-toast-color);
}

.-hero-applet-explainer {
	width: 100%;
	display: flex;
	gap: 3.125vw;
	min-height: 100%;
	position: relative;
	flex-flow: column;
	font-family: "Nunito";
	overflow: hidden auto;
	justify-content: center;
	padding: 10.9375vw 6.25vw 18.75vw;
	background: radial-gradient(circle at 82% 12%,rgb(255 218 102 / 10%),transparent 42%),var(--app-theme);
}

.-hero-explainer-applet {
	height: 12.5vw;
	display: flex;
	color: #121212;
	width: fit-content;
	align-items: center;
	padding: 0 4.6875vw;
	font-size: 3.75vw;
	font-family: inherit;
	font-weight: 800;
	clip-path: var(--squircle-small);
	background: #ffda66;
}

.-hero-explainer-widget {
	color: #ffffffa8;
	font-size: 3.75vw;
	font-family: inherit;
	font-weight: 700;
}

.-theme-widget-item {
	--icon-color: var(--app-accent);
}

.-widget-head .-widget-icon {
	background: var(--field-surface);
}

.-create-type-widget {
	--widget-color: var(--app-accent);
}
\n.-widget-divider.---surface-one::before { border-color: #fff; }\n