/* ============================================================================
 * Centova Cast UI refresh - public stream start page (startpage.tpl) override.
 * Loads AFTER theme/startpage.css. The {box} widgets here render as .block /
 * .block .content with <h3> titles (not the panel's .box). Additive.
 *
 * Public page: stays light by default. The #header keeps a dark brand surface
 * so its white logo text (h1/h2) remains visible.
 * ========================================================================== */

:root {
	--cc-page:   linear-gradient(145deg, #eef3f9 0%, #e9eef5 35%, #f5f3f0 60%, #eef2f7 100%);
	--cc-glass:  rgba(255, 255, 255, 0.82);
	--cc-solid:  #ffffff;
	--cc-bd:     rgba(190, 205, 225, 0.55);
	--cc-text:   #1e293b;
	--cc-mut:    #64748b;
	--cc-rim:    rgba(255, 255, 255, 0.9);
	--cc-accent: #3b5bdb;
	--cc-brand:  linear-gradient(135deg, #3b82f6 0%, #6366f1 55%, #8b5cf6 100%);
	--cc-shadow: 0 6px 18px rgba(50, 70, 100, 0.12);
}
html[data-cc-theme="dark"] {
	--cc-page:   linear-gradient(145deg, #0f1419 0%, #161b26 35%, #1a1f2e 60%, #0d1117 100%);
	--cc-glass:  rgba(24, 29, 43, 0.82);
	--cc-solid:  #1a2030;
	--cc-bd:     rgba(255, 255, 255, 0.09);
	--cc-text:   #f1f5f9;
	--cc-mut:    #94a3b8;
	--cc-rim:    rgba(255, 255, 255, 0.07);
	--cc-accent: #818cf8;
	--cc-brand:  linear-gradient(135deg, #2a3d8f 0%, #3b3a8f 55%, #4a2f7a 100%);
	--cc-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

body {
	background-image: none;
	background: var(--cc-page) fixed;
	background-color: transparent;
	color: var(--cc-text);
}
body, input, select, textarea, td, th, optgroup {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Arial, sans-serif;
}
a:link, a:visited, a:active, a:hover { color: var(--cc-accent); font-weight: 500; }

/* branded header (was headerbg.png) - dark so white logo text stays visible */
#header {
	background-image: none;
	background: var(--cc-brand);
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}
#header #logo h1, #header #logo h2 { color: #ffffff; }

/* now-playing bar (was topbar.png) */
#topbar {
	background-image: none;
	background: var(--cc-glass);
	-webkit-backdrop-filter: blur(20px) saturate(170%);
	backdrop-filter: blur(20px) saturate(170%);
	border: 1px solid var(--cc-bd);
	border-radius: 12px;
	box-shadow: var(--cc-shadow);
	height: auto;
	min-height: 32px;
	color: var(--cc-text);
}

h3 { color: var(--cc-text); font-weight: 500; }

/* start-page boxes (was blockbg.png) */
.block {
	background-image: none;
	background: var(--cc-glass);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid var(--cc-bd);
	border-radius: 14px;
	box-shadow: var(--cc-shadow), inset 0 1px 0 var(--cc-rim);
	padding: 3px;
}
.block .content {
	background-image: none;
	background: var(--cc-solid);
	border-radius: 11px;
	color: var(--cc-text);
}

#footer {
	background-image: none;
	background: var(--cc-glass);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
	border-top: 1px solid var(--cc-bd);
	border-bottom: none;
	height: auto;
	min-height: 28px;
	color: var(--cc-mut);
}
a.mccredit, a.mccredit:link, a.mccredit:active, a.mccredit:visited, a.mccredit:hover { color: var(--cc-mut); }