/* Bento Dashboard — desktop-first tile UI */

:root {
	--bento-bg: #c8cdd3;
	--bento-bg-shine: linear-gradient(
		145deg,
		#d5dae0 0%,
		#c4c9cf 40%,
		#b8bec6 70%,
		#c9ced4 100%
	);
	--bento-tile: #1a1f2e;
	--bento-tile-soft: #222838;
	--bento-text: #f4f6fa;
	--bento-muted: rgba(244, 246, 250, 0.62);
	--bento-accent: #4a90e8;
	--bento-sun: #f5c542;
	--bento-radius: 2.15rem;
	--bento-radius-sm: 1.35rem;
	--bento-shadow: 0 18px 40px rgba(20, 24, 36, 0.22),
		0 2px 0 rgba(255, 255, 255, 0.12) inset;
	--bento-font: "Outfit", "Segoe UI", sans-serif;
	--bento-gap: clamp(0.85rem, 1.4vw, 1.35rem);
	--bento-stage-max: 1180px;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--bento-font);
	color: var(--bento-text);
	background: var(--bento-bg);
	background-image: var(--bento-bg-shine);
	background-attachment: fixed;
}

body.custom-background {
	background-image: none;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* Shell */

.bento-shell {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 3vw, 2.5rem);
}

.bento-shell--content {
	align-items: start;
}

.bento-stage {
	width: min(100%, var(--bento-stage-max));
}

.bento-stage--narrow {
	width: min(100%, 720px);
}

/* Desktop grid — mirrors the mockup proportions */

.bento-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr 1.15fr;
	grid-template-rows: auto minmax(260px, 1fr) auto auto;
	gap: var(--bento-gap);
	min-height: min(86vh, 820px);
}

.bento-tile--greeting {
	grid-column: 3;
	grid-row: 1;
	min-height: 168px;
}

.bento-tile--weather {
	grid-column: 1;
	grid-row: 2;
}

.bento-tile--battery {
	grid-column: 2 / 4;
	grid-row: 2;
}

.bento-tile--media {
	grid-column: 1 / 3;
	grid-row: 3;
	justify-self: start;
	width: min(100%, 280px);
}

.bento-dock {
	grid-column: 1 / -1;
	grid-row: 4;
	justify-self: center;
	margin-top: 0.35rem;
}

/* Shared tile */

.bento-tile {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--bento-tile-soft) 0%, var(--bento-tile) 100%);
	border-radius: var(--bento-radius);
	box-shadow: var(--bento-shadow);
	color: var(--bento-text);
}

.bento-tile--greeting,
.bento-tile--weather,
.bento-tile--battery,
.bento-tile--media {
	animation: bento-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bento-tile--greeting { animation-delay: 0.05s; }
.bento-tile--weather { animation-delay: 0.12s; }
.bento-tile--battery { animation-delay: 0.18s; }
.bento-tile--media { animation-delay: 0.24s; }
.bento-dock { animation: bento-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both; }

@keyframes bento-rise {
	from {
		opacity: 0;
		transform: translateY(18px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Greeting */

.bento-tile--greeting {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.35rem 1.5rem 1.15rem;
}

.bento-time {
	margin: 0;
	font-size: clamp(2.4rem, 4.2vw, 3.35rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
}

.bento-greeting {
	margin: 0.45rem 0 0;
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	font-weight: 500;
	letter-spacing: -0.02em;
}

.bento-mic {
	align-self: center;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	color: var(--bento-muted);
	transition: color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.bento-mic:hover,
.bento-mic:focus-visible {
	color: var(--bento-text);
	background: rgba(255, 255, 255, 0.06);
	outline: none;
}

.bento-mic.is-listening {
	color: #ff6b6b;
	animation: bento-pulse 1.2s ease-in-out infinite;
}

@keyframes bento-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}

/* Weather */

.bento-tile--weather {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.5rem 1.45rem 1.35rem;
}

.bento-weather__icon {
	margin-bottom: 0.5rem;
}

.bento-weather__temp {
	margin: 0;
	font-size: clamp(3.6rem, 7vw, 5.2rem);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 0.92;
}

.bento-weather__meta {
	margin-top: auto;
	padding-top: 1.25rem;
}

.bento-weather__condition,
.bento-weather__place,
.bento-weather__wind {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--bento-muted);
}

.bento-weather__condition {
	color: rgba(244, 246, 250, 0.78);
}

/* Battery */

.bento-tile--battery {
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: 260px;
}

.bento-battery__content {
	padding: 1.6rem 1.7rem 1rem;
}

.bento-battery__level {
	margin: 0;
	font-size: clamp(3.8rem, 7.5vw, 5.6rem);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 0.92;
}

.bento-battery__label {
	margin: 0.85rem 0 0;
	max-width: 12ch;
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--bento-muted);
}

.bento-battery__wave {
	height: 72px;
	padding: 0 0.5rem 0.65rem;
	opacity: 0.95;
}

.bento-battery__wave-path {
	animation: bento-wave 3.6s ease-in-out infinite;
}

.bento-battery__wave-path--offset {
	animation-duration: 4.8s;
	animation-direction: reverse;
}

@keyframes bento-wave {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(-8px); }
}

.bento-tile--battery.is-charging .bento-battery__wave-path {
	stroke: #5dce8a;
}

/* Media */

.bento-tile--media {
	padding: 0.85rem 0.85rem 1rem;
}

.bento-media__art {
	margin: 0;
	border-radius: calc(var(--bento-radius) - 0.55rem);
	overflow: hidden;
	aspect-ratio: 1;
	background: #101522;
}

.bento-media__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bento-media__meta {
	padding: 0.75rem 0.35rem 0.15rem;
}

.bento-media__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
}

.bento-media__artist {
	margin: 0.15rem 0 0;
	font-size: 0.82rem;
	color: var(--bento-muted);
}

.bento-media__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.1rem;
	padding: 0.55rem 0 0.15rem;
}

.bento-media__btn {
	width: 2.4rem;
	height: 2.4rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	color: var(--bento-text);
	opacity: 0.9;
	transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.bento-media__btn:hover,
.bento-media__btn:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.08);
	outline: none;
}

.bento-media__btn--play {
	width: 3rem;
	height: 3rem;
	background: #f4f6fa;
	color: #151a28;
	opacity: 1;
}

.bento-media__btn--play:hover,
.bento-media__btn--play:focus-visible {
	background: #ffffff;
	transform: scale(1.04);
}

.bento-media__btn.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* Dock */

.bento-dock__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 1.8vw, 1.35rem);
}

.bento-dock__link {
	width: 3.35rem;
	height: 3.35rem;
	display: grid;
	place-items: center;
	border-radius: 1.15rem;
	background: linear-gradient(160deg, #2a3144 0%, #171c2a 100%);
	box-shadow: 0 10px 22px rgba(20, 24, 36, 0.28),
		0 1px 0 rgba(255, 255, 255, 0.08) inset;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bento-dock__link:hover,
.bento-dock__link:focus-visible {
	transform: translateY(-4px) scale(1.04);
	box-shadow: 0 16px 28px rgba(20, 24, 36, 0.34);
	outline: none;
}

.bento-dock__icon {
	width: 1.45rem;
	height: 1.45rem;
	display: block;
	background: currentColor;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.bento-dock__link--phone { color: #34c759; }
.bento-dock__link--whatsapp { color: #25d366; }
.bento-dock__link--telegram { color: #2aabee; }
.bento-dock__link--instagram { color: #e1306c; }
.bento-dock__link--x,
.bento-dock__link--twitter { color: #f4f6fa; }
.bento-dock__link--link { color: #9db0d0; }

.bento-dock__link--phone .bento-dock__icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E");
}

.bento-dock__link--whatsapp .bento-dock__icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 0 0-8.7 14.9L2 22l5.3-1.4A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3.1.8.8-3-.2-.3A8 8 0 1 1 12 20zm4.6-5.8c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1-.2.2-.6.8-.7.9-.1.2-.3.2-.5.1-1.4-.7-2.3-1.2-3.2-2.8-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.9c-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 1.9s.8 2.2.9 2.3c.1.2 1.6 2.5 3.9 3.4 2.3.9 2.3.6 2.7.6.4 0 1.3-.5 1.5-1 .2-.5.2-.9.1-1-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 0 0-8.7 14.9L2 22l5.3-1.4A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3.1.8.8-3-.2-.3A8 8 0 1 1 12 20zm4.6-5.8c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1-.2.2-.6.8-.7.9-.1.2-.3.2-.5.1-1.4-.7-2.3-1.2-3.2-2.8-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.9c-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 1.9s.8 2.2.9 2.3c.1.2 1.6 2.5 3.9 3.4 2.3.9 2.3.6 2.7.6.4 0 1.3-.5 1.5-1 .2-.5.2-.9.1-1-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E");
}

.bento-dock__link--telegram .bento-dock__icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.9 4.3 2.8 11.6c-1.3.5-1.3 1.2-.2 1.5l4.9 1.5 1.9 5.8c.2.7.4.9 1 .9.6 0 .9-.3 1.2-.6l2.9-2.8 4.8 3.5c.9.5 1.5.2 1.7-.8l3.1-14.6c.3-1.2-.5-1.8-1.4-1.4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.9 4.3 2.8 11.6c-1.3.5-1.3 1.2-.2 1.5l4.9 1.5 1.9 5.8c.2.7.4.9 1 .9.6 0 .9-.3 1.2-.6l2.9-2.8 4.8 3.5c.9.5 1.5.2 1.7-.8l3.1-14.6c.3-1.2-.5-1.8-1.4-1.4z'/%3E%3C/svg%3E");
}

.bento-dock__link--instagram .bento-dock__icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm11.2 1.3a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm11.2 1.3a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
}

.bento-dock__link--x .bento-dock__icon,
.bento-dock__link--twitter .bento-dock__icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.2 2H21l-6.6 7.5L22 22h-6.2l-4.9-6.4L5.3 22H2.5l7-8L2 2h6.3l4.4 5.8L18.2 2zm-1.1 18h1.7L7 3.9H5.2L17.1 20z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.2 2H21l-6.6 7.5L22 22h-6.2l-4.9-6.4L5.3 22H2.5l7-8L2 2h6.3l4.4 5.8L18.2 2zm-1.1 18h1.7L7 3.9H5.2L17.1 20z'/%3E%3C/svg%3E");
}

.bento-dock__link--link .bento-dock__icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10.6 13.4a4 4 0 0 1 0-5.7l2.1-2.1a4 4 0 0 1 5.7 5.7l-1.1 1.1-1.4-1.4 1.1-1.1a2 2 0 1 0-2.8-2.8l-2.1 2.1a2 2 0 0 0 0 2.8l-1.5 1.4zm2.8-2.8a4 4 0 0 1 0 5.7l-2.1 2.1a4 4 0 1 1-5.7-5.7l1.1-1.1 1.4 1.4-1.1 1.1a2 2 0 1 0 2.8 2.8l2.1-2.1a2 2 0 0 0 0-2.8l1.5-1.4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10.6 13.4a4 4 0 0 1 0-5.7l2.1-2.1a4 4 0 0 1 5.7 5.7l-1.1 1.1-1.4-1.4 1.1-1.1a2 2 0 1 0-2.8-2.8l-2.1 2.1a2 2 0 0 0 0 2.8l-1.5 1.4zm2.8-2.8a4 4 0 0 1 0 5.7l-2.1 2.1a4 4 0 1 1-5.7-5.7l1.1-1.1 1.4 1.4-1.1 1.1a2 2 0 1 0 2.8 2.8l2.1-2.1a2 2 0 0 0 0-2.8l1.5-1.4z'/%3E%3C/svg%3E");
}

/* Content fallback pages */

.bento-tile--content {
	padding: 2rem;
	border-radius: var(--bento-radius-sm);
}

.bento-content__title {
	margin: 0 0 1rem;
	font-size: 1.75rem;
}

.bento-content__body {
	color: var(--bento-muted);
	line-height: 1.6;
}

.bento-content__body a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Tablet */

@media (max-width: 980px) {
	.bento-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto auto auto;
		min-height: 0;
	}

	.bento-tile--greeting {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.bento-tile--weather {
		grid-column: 1;
		grid-row: 2;
		min-height: 280px;
	}

	.bento-tile--battery {
		grid-column: 2;
		grid-row: 2;
	}

	.bento-tile--media {
		grid-column: 1 / -1;
		grid-row: 3;
		width: min(100%, 320px);
		justify-self: center;
	}

	.bento-dock {
		grid-row: 4;
	}
}

/* Phone */

@media (max-width: 640px) {
	.bento-shell {
		padding: 0.85rem;
		align-items: start;
	}

	.bento-grid {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}

	.bento-tile--greeting,
	.bento-tile--weather,
	.bento-tile--battery,
	.bento-tile--media,
	.bento-dock {
		grid-column: 1;
	}

	.bento-tile--greeting { grid-row: 1; }
	.bento-tile--weather { grid-row: 2; min-height: 260px; }
	.bento-tile--battery { grid-row: 3; }
	.bento-tile--media { grid-row: 4; width: 100%; }
	.bento-dock { grid-row: 5; }

	.bento-tile {
		border-radius: 1.65rem;
	}

	.bento-dock__link {
		width: 3rem;
		height: 3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bento-tile--greeting,
	.bento-tile--weather,
	.bento-tile--battery,
	.bento-tile--media,
	.bento-dock,
	.bento-battery__wave-path,
	.bento-mic.is-listening {
		animation: none !important;
	}
}