/* Mizushi OLED Theme */
:root {
	--mizushi-accent: #88c8ff;
	--mizushi-accent-strong: #5fb4ff;
	--mizushi-accent-soft: #a7d7ff;
	--mizushi-oled-bg: #000000;
	--mizushi-bg-image: url("/images/bg.png");
	--mizushi-oled-card: #0b1220;
	--mizushi-oled-border: rgba(136, 200, 255, 0.2);
	--mizushi-success: #34d399;
	--mizushi-warn: #facc15;
	--mizushi-danger: #fb7185;
}

html,
body {
	background: var(--mizushi-oled-bg) !important;
	position: relative;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: var(--mizushi-bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

#__next,
#__next > div,
.min-h-screen,
main {
	background: transparent !important;
	position: relative;
	z-index: 1;
}

.service,
.service-card,
.information-widget-resources,
.bookmark-group,
.information-widget-openmeteo,
.information-widget-search {
	background: linear-gradient(180deg, rgba(13, 20, 34, 0.9), rgba(9, 14, 24, 0.92)) !important;
	border: 1px solid var(--mizushi-oled-border) !important;
	box-shadow:
		0 0 0 1px rgba(136, 200, 255, 0.06) inset,
		0 10px 30px rgba(2, 8, 20, 0.45) !important;
	backdrop-filter: blur(8px);
}

.service:hover,
.service-card:hover {
	border-color: rgba(136, 200, 255, 0.35) !important;
	box-shadow:
		0 0 0 1px rgba(136, 200, 255, 0.14) inset,
		0 0 18px rgba(95, 180, 255, 0.18),
		0 14px 36px rgba(2, 8, 20, 0.55) !important;
}

.information-widget-icon,
.service svg,
.service-card svg {
	color: var(--mizushi-accent-soft) !important;
}

/* Remove default internal tint blocks inside service cards */
.service-card .service-block,
.service-card .service-missing {
	background: transparent !important;
	box-shadow: none !important;
	border: 1px solid rgba(136, 200, 255, 0.12) !important;
}

/* Keep iframe/widget body surfaces consistent to avoid "extra color" sections */
.service-card .service-widget,
.service-card iframe {
	background-color: #000 !important;
}

/* Strip utility background layers inside cards/widgets (tailwind bg-theme/bg-white tints) */
.service-card [class*="bg-theme-"],
.service-card [class*="dark:bg-theme-"],
.service-card [class*="bg-white/"],
.service-card [class*="dark:bg-white/"],
.information-widget-resources [class*="bg-theme-"],
.information-widget-resources [class*="dark:bg-theme-"],
.information-widget-openmeteo [class*="bg-theme-"],
.information-widget-openmeteo [class*="dark:bg-theme-"] {
	background: transparent !important;
	background-color: transparent !important;
}

/* Keep only card shell styling; inner regions stay clean */
.service-card .service-title,
.service-card .service-title-text,
.service-card .service-name,
.service-card .service-description,
.service-card .service-tags,
.service-card .service-widget,
.service-card .service-container {
	background: transparent !important;
}

/* Ensure top info widgets don't carry alternate tinted sub-layers */
.information-widget-resources .information-widget-resource,
.information-widget-openmeteo,
.information-widget-search,
.information-widget-search input,
.information-widget-search button {
	background-color: transparent !important;
}

.information-widget-resource .resource-usage {
	background: rgba(120, 150, 190, 0.22) !important;
	height: 0.34rem !important;
}

.information-widget-resource .resource-usage > div {
	transition: width 0.6s ease, background 0.3s ease, box-shadow 0.3s ease !important;
}

.information-widget-resource.usage-low .resource-usage > div {
	background: linear-gradient(90deg, #10b981, #34d399) !important;
	box-shadow: 0 0 8px rgba(52, 211, 153, 0.55);
}

.information-widget-resource.usage-mid .resource-usage > div {
	background: linear-gradient(90deg, #f59e0b, #facc15) !important;
	box-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
}

.information-widget-resource.usage-high .resource-usage > div {
	background: linear-gradient(90deg, #fb7185, #ef4444) !important;
	box-shadow: 0 0 9px rgba(251, 113, 133, 0.55);
}

/* ============================================
   Rose Noir Accent Layer (non-resource UI only)
   Leaves background image + resource monitors untouched
   ============================================ */

.service,
.service-card,
.bookmark-group,
.information-widget-openmeteo,
.information-widget-search {
	background: linear-gradient(180deg, rgba(18, 12, 22, 0.82), rgba(10, 8, 14, 0.9)) !important;
	border-color: rgba(244, 163, 211, 0.25) !important;
	box-shadow:
		0 0 0 1px rgba(244, 163, 211, 0.08) inset,
		0 12px 28px rgba(0, 0, 0, 0.55),
		0 0 14px rgba(244, 163, 211, 0.12) !important;
}

.service:hover,
.service-card:hover,
.bookmark-group:hover {
	border-color: rgba(248, 187, 217, 0.45) !important;
	box-shadow:
		0 0 0 1px rgba(248, 187, 217, 0.18) inset,
		0 0 18px rgba(248, 187, 217, 0.16),
		0 16px 34px rgba(0, 0, 0, 0.62) !important;
}

.service-group-name,
.service-name,
.service-title-text,
.bookmark-group h2,
.bookmark-text {
	color: #f8d7ea !important;
}

.service-description,
.bookmark-description,
.bookmark-url,
.information-widget-openmeteo .text-theme-500,
.information-widget-search .text-theme-500 {
	color: rgba(239, 211, 231, 0.78) !important;
}

.service svg,
.service-card svg,
.service-group-icon svg,
.bookmark-icon svg {
	color: #f3a7cd !important;
}

.information-widget-search input,
.information-widget-search button {
	border-color: rgba(244, 163, 211, 0.32) !important;
	color: #f8d7ea !important;
}

.information-widget-search input::placeholder {
	color: rgba(239, 211, 231, 0.6) !important;
}

/* Top strip cleanup: remove gray backdrops and oversized outer outlines */
.information-widget-resources,
.information-widget-search,
.information-widget-datetime,
.information-widget-openmeteo,
.information-widget-weather {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	backdrop-filter: none !important;
}

/* Nuclear transparency override for all information widgets */
.information-widget,
[class*="information-widget-"] {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	backdrop-filter: none !important;
}

.information-widget::before,
.information-widget::after,
[class*="information-widget-"]::before,
[class*="information-widget-"]::after {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: none !important;
}

.information-widget [class*="bg-theme-"],
.information-widget [class*="dark:bg-theme-"],
.information-widget [class*="bg-white/"],
.information-widget [class*="dark:bg-white/"] {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

.information-widget-search,
.information-widget-openmeteo,
.information-widget-datetime,
.information-widget-weather {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.information-widget-search input,
.information-widget-search button {
	box-shadow: none !important;
	outline: none !important;
}

/* Add breathing room between search and datetime */
.information-widget-datetime {
	margin-left: 0.9rem !important;
}

/* Datetime: two-line format (time on top, larger) */
.information-widget-datetime .mizushi-datetime-2line {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	line-height: 1.05 !important;
	gap: 0.12rem !important;
}

.information-widget-datetime .mizushi-datetime-time {
	font-size: 2rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	color: #f8d7ea !important;
}

.information-widget-datetime .mizushi-datetime-date {
	font-size: 1.35rem !important;
	font-weight: 500 !important;
	opacity: 0.85;
	color: rgba(239, 211, 231, 0.9) !important;
}