/* Styles */
		@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
		
		/*Adding a new theme, also edit
		Update these arrays in all locations where $allowed_themes appears:
		function render_general_changes_form()
		--> Add thumbnail
		
		function tipino_general_changes()
		$allowed_themes = array('original', 'terminal', 'paper')
		
		*/
		
		:root {
		/* -----------------------------
			Start Manual change of colors
		----------------------------- */
			/* -----------------------------
				Start Main Colors (nur HEX pflegen!)
			----------------------------- */
			--tipino-primary:   #EE1954;
			--tipino-secondary: #371852;
			--tipino-accent:    #F19805;
			--tipino-text:      #C8C5C5;
			/* -----------------------------
				End Main Colors
			----------------------------- */

			/* -----------------------------
				Start "Black" and "White"
			----------------------------- */
			--tipino-black: #000000;
			--tipino-white: #FFFFFF;
			/* -----------------------------
				End "Black" and "White"
			----------------------------- */

			/* -----------------------------
				Start Semantic colors
			----------------------------- */
			--tipino-error:   #ff0000;
			--tipino-warning: #E49807;
			--tipino-info:    #067099;
			--tipino-success: #00cc33;
			/* -----------------------------
				End Semantic colors
			----------------------------- */

			/* -----------------------------
				Start Platform Colors (fix, dont' change!)
			----------------------------- */
			--tipino-spotify: #1ED760;
			--tipino-lastfm:  #B90000;
			--tipino-deezer:  #A238FF;
			--tipino-amazonmusic:  #25d1db;
			--tipino-applemusic:  #FA586A;
			--tipino-qobuz:  #000000;
			--tipino-tidal:  #000000;
			--tipino-soundcloud:  #FF5500;
			--tipino-youtubemusic:  #FE0032;
			--tipino-facebook:  #1877F2;
			--tipino-instagram:  #FF0069;
			--tipino-x:  #14171A;
			--tipino-twitch:  #9147FF;
			--tipino-tiktok:  #000000;

			/* -----------------------------
				End Semantic colors
			----------------------------- */

		/* -----------------------------
			End Manual change of colors
		----------------------------- */

			/* -----------------------------
				Abgeleitete Nuancen (keine HEX/RGB-Duplikate mehr)
				(Prozentwerte kannst du je Theme/Look fein-tunen)
			----------------------------- */
			--tipino-primary-dark:        color-mix(in srgb, var(--tipino-primary)   85%, var(--tipino-black));
			--tipino-primary-light:       color-mix(in srgb, var(--tipino-primary)   75%, var(--tipino-white));
			--tipino-primary-extra-light: color-mix(in srgb, var(--tipino-primary)   45%, var(--tipino-white));

			--tipino-secondary-dark:        color-mix(in srgb, var(--tipino-secondary) 85%, var(--tipino-black));
			--tipino-secondary-light:       color-mix(in srgb, var(--tipino-secondary) 75%, var(--tipino-white));
			--tipino-secondary-extra-light: color-mix(in srgb, var(--tipino-secondary) 45%, var(--tipino-white));

			--tipino-accent-dark:        color-mix(in srgb, var(--tipino-accent)    85%, var(--tipino-black));
			--tipino-accent-light:       color-mix(in srgb, var(--tipino-accent)    75%, var(--tipino-white));
			--tipino-accent-extra-light: color-mix(in srgb, var(--tipino-accent)    45%, var(--tipino-white));

			/* Synonyme / Convenience */
			--tipino-collab: var(--tipino-accent);
			--tipino-border-light: var(--tipino-accent-light);


			

			/* -----------------------------
				Text / neutrals (fix)
			----------------------------- */
			--tipino-dark-text:  color-mix(in srgb, var(--tipino-black) 80%, var(--tipino-white));
			--tipino-white-text: var(--tipino-white);
			--tipino-black-text: var(--tipino-black);
			--tipino-gray-text:  color-mix(in srgb, var(--tipino-black) 40%, var(--tipino-white));


			/* -----------------------------
				Semantic colors (fix) + abgeleitete lights
				(du kannst die Base-Farben als fixe Palette lassen,
				und die Light-Varianten automatisch daraus erzeugen)
			----------------------------- */
			

			--tipino-error-light:   color-mix(in srgb, var(--tipino-error)   60%, var(--tipino-white));
			--tipino-warning-light: color-mix(in srgb, var(--tipino-warning) 85%, var(--tipino-white));
			--tipino-info-light:    color-mix(in srgb, var(--tipino-info)    70%, var(--tipino-white));
			--tipino-success-light: color-mix(in srgb, var(--tipino-success) 70%, var(--tipino-white));


			/* -----------------------------
				Cards (teilweise aus Main Text abgeleitet)
			----------------------------- */
			--tipino-card:       var(--tipino-text);
			--tipino-dark-card:  var(--tipino-dark-text);
			--tipino-white-card: var(--tipino-white);
			--tipino-black-card: var(--tipino-black);
			--tipino-gray-card:  var(--tipino-gray-text);


			/* -----------------------------
				Gradients (ohne RGB-Variablen!)
			----------------------------- */

			/* Semantic Gradients */
			--tipino-gradient-warning:
				linear-gradient(to right,
				rgb(from var(--tipino-warning) r g b / 0.4),
				rgb(from var(--tipino-warning-light) r g b / 0.1)
				);

			--tipino-gradient-info:
				linear-gradient(to right,
				rgb(from var(--tipino-info) r g b / 0.4),
				rgb(from var(--tipino-info-light) r g b / 0.1)
				);

			--tipino-gradient-error:
				linear-gradient(to right,
				rgb(from var(--tipino-error) r g b / 0.4),
				rgb(from var(--tipino-error-light) r g b / 0.3)
				);

			--tipino-gradient-success:
				linear-gradient(to right,
				rgb(from var(--tipino-success) r g b / 0.5),
				rgb(from var(--tipino-success-light) r g b / 0.1)
				);

			--tipino-gradient-warning-light:
				linear-gradient(to right,
				rgb(from var(--tipino-warning) r g b / 0.1),
				rgb(from var(--tipino-warning-light) r g b / 0.1)
				);

			--tipino-gradient-info-light:
				linear-gradient(to right,
				rgb(from var(--tipino-info) r g b / 0.1),
				rgb(from var(--tipino-info-light) r g b / 0.1)
				);

			--tipino-gradient-error-light:
				linear-gradient(to right,
				rgb(from var(--tipino-error) r g b / 0.1),
				rgb(from var(--tipino-error-light) r g b / 0.1)
				);

			--tipino-gradient-success-light:
				linear-gradient(to right,
				rgb(from var(--tipino-success) r g b / 0.1),
				rgb(from var(--tipino-success-light) r g b / 0.1)
				);


			/* Accent Gradients */
			--tipino-gradient-accent:
				linear-gradient(to right,
				rgb(from var(--tipino-accent) r g b / 1),
				rgb(from var(--tipino-accent-light) r g b / 1)
				);

			--tipino-gradient-accent-light:
				linear-gradient(to right,
				rgb(from var(--tipino-accent-extra-light) r g b / 1),
				rgb(from var(--tipino-accent-light) r g b / 0.80)
				);


			/* Primary / Secondary Gradients */
			--tipino-gradient-primary:
				linear-gradient(159deg,
				rgb(from var(--tipino-primary-dark) r g b / 0.4) 0%,
				rgb(from var(--tipino-primary)      r g b / 0.8) 50%,
				rgb(from var(--tipino-primary-dark) r g b / 0.2) 100%
				);

			--tipino-gradient-primary-light:
				linear-gradient(159deg,
				rgb(from var(--tipino-primary)       r g b / 0.4) 0%,
				rgb(from var(--tipino-primary-light) r g b / 0.8) 50%,
				rgb(from var(--tipino-primary)       r g b / 0.2) 100%
				);

			--tipino-gradient-secondary:
				linear-gradient(159deg,
				rgb(from var(--tipino-secondary-dark) r g b / 0.2) 0%,
				rgb(from var(--tipino-secondary)      r g b / 0.4) 50%,
				rgb(from var(--tipino-secondary-dark) r g b / 0.1) 100%
				);

			--tipino-gradient-secondary-light:
				linear-gradient(159deg,
				rgb(from var(--tipino-secondary)       r g b / 0.2) 0%,
				rgb(from var(--tipino-secondary-light) r g b / 0.4) 50%,
				rgb(from var(--tipino-secondary)       r g b / 0.1) 100%
				);


			/* Card Gradients */
			--tipino-gradient-card:
				linear-gradient(159deg,
				rgb(from var(--tipino-white-card) r g b / 0.8) 0%,
				rgb(from var(--tipino-white-card) r g b / 1.0) 50%,
				rgb(from var(--tipino-card)       r g b / 0.9) 100%
				);

			--tipino-gradient-card-light:
				linear-gradient(45deg,
				rgb(from var(--tipino-card) r g b / 0.08) 0%,
				rgb(from var(--tipino-card) r g b / 0.09) 50%,
				rgb(from var(--tipino-card) r g b / 0.04) 100%
				);

			--tipino-gradient-gray:
				linear-gradient(159deg,
				rgb(from var(--tipino-gray-card) r g b / 0.8) 0%,
				rgb(from var(--tipino-gray-card) r g b / 1.0) 50%,
				rgb(from var(--tipino-card)      r g b / 0.9) 100%
				);

			--tipino-gradient-dark:
				linear-gradient(159deg,
				rgb(from var(--tipino-dark-card) r g b / 0.8) 0%,
				rgb(from var(--tipino-dark-card) r g b / 1.0) 50%,
				rgb(from var(--tipino-card)      r g b / 0.9) 100%
				);
            --tipino-border-radius: 0.8em;
            --tipino-border-radius-hover: 0.5em;
            --tipino-border-radius-50: 50%;
            --tipino-transition: all 0.3s ease;
            --tipino-transform: translateY(-2px);

            --tipino-font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
            --tipino-heading-font-family: 'Varela Round', sans-serif;
            
			--tipino-font-size-extra-small: 10px;
			--tipino-font-size-small: 12px;
			--tipino-font-size-normal: 14px;
			--tipino-font-size-medium: 16px;
			--tipino-font-size-large: 18px;
			--tipino-font-size-extra-large: 28px;
			--tipino-font-size-big: 36px;

            --max-width: 980px;
        }

		/* Theme Preview Cards */
		.tipino-theme-selector {
			display: flex;
			gap: 20px;
			margin-bottom: 20px;
			overflow-x: auto;
			padding: 10px 0;
		}

		.tipino-theme-card {
			flex: 0 0 200px;
			border: 3px solid transparent;
			border-radius: var(--tipino-border-radius);
			padding: 15px;
			cursor: pointer;
			transition: var(--tipino-transition);
			position: relative;
			background: var(--tipino-gradient-card-light);
		}

		.tipino-theme-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 5px 15px color-mix(in srgb, var(--tipino-black) 30%, transparent);
		}

		.tipino-theme-card.active {
			border-color: var(--tipino-primary);
			box-shadow: 0 0 20px rgb(from var(--tipino-primary) r g b / 0.4);
		}

		.tipino-theme-card.active::after {
			content: '✓';
			position: absolute;
			top: 10px;
			right: 10px;
			background: var(--tipino-primary);
			color: var(--tipino-white-text);
			width: 24px;
			height: 24px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
		}

		.tipino-theme-preview {
			height: 100px;
			border-radius: 6px;
			margin-bottom: 10px;
			display: flex;
			flex-direction: column;
			padding: 8px;
			position: relative;
			overflow: hidden;
		}

		.tipino-theme-preview-original {
			background: linear-gradient(159deg, #371852 0%, #371852 50%, #EE1954 100%);
		}

		.tipino-theme-preview-terminal {
			background: #000000;
			border: 1px solid #00FF00;
			font-family: 'Courier New', monospace;
		}

		.tipino-theme-preview-terminal::before {
			content: '> _';
			color: #00FF00;
			font-size: 12px;
			animation: blink 1s infinite;
		}

		@keyframes blink {
			0%, 50% { opacity: 1; }
			51%, 100% { opacity: 0; }
		}

		.tipino-theme-colors {
			display: flex;
			gap: 4px;
			margin-top: auto;
		}

		.tipino-theme-color-dot {
			width: 16px;
			height: 16px;
			border-radius: 50%;
			border: 1px solid color-mix(in srgb, var(--tipino-white) 30%, transparent);
		}

		.tipino-theme-name {
			font-weight: 600;
			text-align: center;
			margin-bottom: 5px;
			color: var(--tipino-accent);
		}

		.tipino-theme-description {
			font-size: var(--tipino-font-size-small);
			text-align: center;
			color: var(--tipino-text);
			opacity: 0.8;
		}



		/* ***************************** */
		/* TIPINO THEME                  */
		/* ***************************** */
		
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

		*,
		::before,
		::after {
		box-sizing: border-box;
		}
		 
		html, body {
			margin: 0;
			padding: 0;
		}
		
		body {
            font-family: var(--tipino-font-family);
			background: linear-gradient(
				159deg,
				var(--tipino-secondary) 0%,
				var(--tipino-secondary) 50%,
				var(--tipino-primary)   100%
				);
			color: var(--tipino-text);
            line-height: 1.4;
			overflow-x: hidden;
			position: relative; 
    		min-height: 100vh;
			font-size: var(--tipino-font-size-normal);
        }

		#page {
			position: relative;
			min-height: 100vh;
		}

        div, span, p {
            font-family: var(--tipino-font-family);
			text-decoration: none;
        }
		
		a {
            font-family: var(--tipino-font-family);
			color: var(--tipino-accent);
			text-decoration: none;
        }
		
		a:hover {
			text-decoration: underline;
		}

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--tipino-heading-font-family);
			text-transform: capitalize;
        }
        
		h1 {
			color: var(--tipino-primary-light);
		}
		
		h2, h3, h4, h5, h6 {
			color: var(--tipino-accent);
		}
		
		h1 {
			font-weight: 600;
			margin: 0;
			font-family: var(--tipino-heading-font-family), Sans-serif;
			background: var(--tipino-gradient-primary-light);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			margin-bottom: 5pxW;
			align-items: center;
			display:flex;
			gap:5px;
			font-size: var(--tipino-font-size-big);
		}
		
		h2 {
			font-weight: 600;
			margin: 0;
			font-family: var(--tipino-heading-font-family), Sans-serif;
			background: var(--tipino-gradient-accent);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			margin-bottom: 5pxW;
			align-items: center;
			display:flex;
			gap:5px;
			font-size: var(--tipino-font-size-extra-large);
		}
		
		h3 {
			font-weight: 600;
			margin: 0;
			font-family: var(--tipino-heading-font-family), Sans-serif;
			color: var(--tipino-accent);
			margin-bottom: 5pxW;
			align-items: center;
			display:flex;
			gap:5px;
			font-size: var(--tipino-font-size-medium);
		}
		
		h4 {
			font-weight: 600;
			margin: 0;
			font-family: var(--tipino-heading-font-family), Sans-serif;
			color: var(--tipino-accent);
			margin-bottom: 5pxW;
			align-items: center;
			display:flex;
			gap:5px;
			font-size: var(--tipino-font-size-normal);
		}
		
		h5, h6 {
			font-weight: 600;
			margin: 0;
			font-family: var(--tipino-heading-font-family), Sans-serif;
			color: var(--tipino-accent);
			margin-bottom: 5pxW;
			align-items: center;
			display:flex;
			gap:5px;
			font-size: var(--tipino-font-size-small);
		}
		
		ul.tipino {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		li.tipino {
			position: relative;
			padding-left: 20px;
			margin-bottom: 5px;
		}
 
		li.tipino::before {
			content: "▶";
			position: absolute;
			left: 0;
			color: var(--tipino-text);
			transition: var(--tipino-transition);
		}
		
		li.tipino:hover::before {
			color: var(--tipino-accent);
			transform: translateX(2px); 
		}

		.container {
			max-width: var(--max-width);
			margin: 0 auto;
			padding: 0 20px;
		}

		/* Header */
		.site-header {
			padding: 20px 0;
		}

		.header-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.site-logo img {
			height: 55px;
			width: 175px;
		}

		/* Navigation */
		.main-navigation ul {
			display: flex;
			list-style: none;
			margin: 0;
			padding: 0;
			font-weight: 600;
		}

		.main-navigation li {
			position: relative;
			margin-left: 20px;
		}

		.main-navigation a {
			color: var(--tipino-accent);
			padding: 10px;
		}

		.main-navigation a:hover {
			color: var(--tipino-primary);
			text-decoration: none;
		}

		/* Sub Navigation */
		.main-navigation .sub-menu {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			background: var(--tipino-gradient-accent-light);
			padding: 5px;
			min-width: 200px;
			z-index: 999;
			border-radius: var(--tipino-border-radius);
			font-size: var(--tipino-font-size-small);
		}
		
		.main-navigation .sub-menu a {
			color: var(--tipino-secondary);
		}
		
		.main-navigation .sub-menu a:hover {
			color: var(--tipino-primary);
			text-decoration: underline;
		}

		.main-navigation li:hover > .sub-menu {
			display: block;
		}

		.main-navigation .sub-menu li {
			margin: 10px 0;
		}

		/* Content Area */
		.site-content {
			padding: 40px 0;
		}

		/* Footer */
		.site-footer {
			padding: 40px 0;
			margin-bottom: 0;
			border-bottom: 1px solid color-mix(in srgb, var(--tipino-white) 10%, transparent);
		}

		.footer-container {
			display: flex;
			justify-content: space-between;
		}

		.footer-left {
			max-width: 40%;
		}

		.footer-logo img {
			height: 19px;
			width: 60px;
			margin-bottom: 10px;
		}


		.social-icons {
			display: flex;
			margin-top: 20px;
		}

		.social-icons a {
			margin-right: 15px;
			color: var(--tipino-accent);
			font-size: var(--tipino-font-size-large);
		}

		.social-icons a:hover {
			color: var(--tipino-text);
		}

		.footer-menus {
			display: flex;
			gap: 40px;
		}

		.footer-menu h3 {
			color: var(--tipino-accent);
			margin-bottom: 15px;
		}

		.footer-menu ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		
		.footer-menu a {
			color: var(--tipino-text);
		}
		
		.footer-menu a:hover {
			color: var(--tipino-text-var(--tipino-white));
			text-decoration: underline;
		}

		.footer-menu li {
			margin-bottom: 10px;
		}
		
		.project-title {
			font-size: var(--tipino-font-size-small);
		}

		/* Copyright Bar */
		.copyright-bar {
			background: linear-gradient(to right, 
				rgb(from var(--tipino-secondary) r g b / 1),
				rgb(from var(--tipino-secondary) r g b / 0.95)
			);
			padding: 0px 0px;
			text-align: center;
			margin-bottom: -1px;
		}
		
		.copyright-bar p {
			color: var(--tipino-text);
			font-size: var(--tipino-font-size-normal);
			margin: 0;
			display: inline-block;
		}

		.copyright-bar a {
			color: var(--tipino-accent);
			margin-left: 15px;
			font-size: var(--tipino-font-size-normal);
			text-decoration: none;
		}

		.copyright-bar a:hover {
			text-decoration: underline;
		}

		.search-form {
			display: flex;
			margin-bottom: 20px;
		}

		.search-form label {
			flex-grow: 1;
			margin-right: 10px;
		}

		.search-form .search-field {
			width: 100%;
			padding: 10px;
			background-color: color-mix(in srgb, var(--tipino-white) 10%, transparent);
			border: none;
			border-radius: 4px;
			color: var(--text);
		}

		.search-form .search-submit {
			background-color: var(--primary);
			color: var(--var(--tipino-white));
			border: none;
			padding: 10px 20px;
			border-radius: 4px;
			cursor: pointer;
			transition: transform 0.3s ease;
		}

		.search-form .search-submit:hover {
			transform: translateY(-5px);
		}

		/* Skip link styling */
		.skip-link {
			background-color: var(--primary);
			color: var(--var(--tipino-white));
			font-weight: 700;
			left: 50%;
			padding: 10px;
			position: absolute;
			transform: translateY(-100%);
			transition: transform 0.3s;
		}

		.skip-link:focus {
			transform: translateY(0%);
		}

		/* Mobile menu icon */
		.menu-toggle {
			display: none;
			background: none;
			border: none;
			padding: 10px;
			cursor: pointer;
		}

		.menu-icon {
			display: block;
			width: 25px;
			height: 3px;
			background-color: var(--text);
			position: relative;
			transition: background-color 0.3s;
		}

		.menu-icon:before,
		.menu-icon:after {
			content: '';
			width: 25px;
			height: 3px;
			background-color: var(--text);
			position: absolute;
			left: 0;
			transition: transform 0.3s;
		}

		.menu-icon:before {
			top: -8px;
		}

		.menu-icon:after {
			bottom: -8px;
		}

		.main-navigation.toggled .menu-icon {
			background-color: transparent;
		}

		.main-navigation.toggled .menu-icon:before {
			transform: rotate(45deg);
			top: 0;
		}

		.main-navigation.toggled .menu-icon:after {
			transform: rotate(-45deg);
			bottom: 0;
		}

		/* Screen reader text for accessibility */
		.screen-reader-text {
			border: 0;
			clip: rect(1px, 1px, 1px, 1px);
			clip-path: inset(50%);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 1px;
			word-wrap: normal !important;
		}

		.screen-reader-text:focus {
			background-color: var(--primary);
			clip: auto !important;
			clip-path: none;
			color: var(--var(--tipino-white));
			display: block;
			font-size: var(--tipino-font-size-normal);
			height: auto;
			left: 5px;
			line-height: normal;
			padding: 15px 23px 14px;
			text-decoration: none;
			top: 5px;
			width: auto;
			z-index: 100000;
		}

		/* Responsive */
		@media (max-width: 768px) {
			.menu-toggle {
				display: block;
			}
			
			.main-navigation ul {
				display: none;
			}
			
			.main-navigation.toggled ul {
				display: block;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				background-color: var(--secondary);
				padding: 20px;
				z-index: 999;
			}
			
			.site-content-wrap {
				grid-template-columns: 1fr;
			}
			
			.error-suggestions {
				flex-direction: column;
			}
			
			.header-container, .footer-container {
				flex-direction: column;
			}
			
			.main-navigation ul {
				flex-direction: column;
				margin-top: 20px;
			}
			
			.main-navigation li {
				margin: 10px 0;
			}
			
			.main-navigation .sub-menu {
				position: static;
				display: block;
				padding-left: 20px;
			}
			
			.footer-menus {
				flex-direction: column;
				margin-top: 30px;
			}
			
			.footer-left {
				max-width: 100%;
			}
		}

		/* MORPHING BACKGROUND           */
		.morphing-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			min-height: 100%; /* Changed from fixed height */
			height: auto;
			z-index: -1;
			filter: blur(100px) contrast(1.3);
			opacity: 0.7;
			pointer-events: none;
		}

        /* Base blob styling */
        .blob {
            position: absolute;
            border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
            filter: blur(50px);
        }

        /* TOP BLOBS - Träge und elegant */
        .blob-top-1 {
            width: 600px;
            height: 200px;
            background: rgb(from var(--tipino-primary-light) r g b / 0.7);
            top: -150px;
            left: 10%;
            animation: blob-top-morph-1 30s ease-in-out infinite;
        }

        .blob-top-2 {
            width: 900px;
            height: 300px;
            background: rgb(from var(--tipino-primary-extra-light) r g b / 0.3);
            top: -200px;
            right: 15%;
            animation: blob-top-morph-2 10s ease-in-out infinite reverse;
        }


        /* BOTTOM BLOBS - Lebendiger und schneller, am echten Seitenende */
        .blob-bottom-1,
		.blob-bottom-2 {
			position: absolute !important;
			bottom: 0; /* Stick to bottom of the positioned parent */
			filter: blur(50px);
			z-index: -1;
		}

		.blob-bottom-1 {
			width: 450px;
			height: 350px;
			background: rgb(from var(--tipino-accent-light) r g b / 0.4);
			left: -25%;
			animation: blob-bottom-morph-1 30s ease-in-out infinite;
			margin-bottom: -50px; 
		}

		.blob-bottom-2 {
			width: 600px;
			height: 250px;
			background: rgb(from var(--tipino-accent-extra-light) r g b / 0.5);
			right: -50%;
			animation: blob-bottom-morph-2 10s ease-in-out infinite reverse;
			margin-bottom: -0px; 
		}

		.bottom-blobs-container {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 500px; /* Adjust based on blob sizes */
			overflow: hidden;
			pointer-events: none;
			z-index: -1;
		}

		.bottom-blobs-container .blob-bottom-1,
		.bottom-blobs-container .blob-bottom-2 {
			position: absolute !important;
			bottom: -50%; /* Position half outside the container */
		}
		
        /* TOP BLOB ANIMATIONS - Träge und elegant */
        @keyframes blob-top-morph-1 {



            0%, 100% {
                border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
                transform: translate(0, 0) rotate(0deg) scale(1);
            }
            25% {
                border-radius: 60% 40% 50% 50% / 60% 30% 70% 40%;
                transform: translate(15px, 10px) rotate(15deg) scale(1.05);
            }
            50% {
                border-radius: 50% 50% 40% 60% / 50% 60% 40% 50%;
                transform: translate(-10px, 20px) rotate(30deg) scale(0.95);
            }
            75% {
                border-radius: 30% 70% 60% 40% / 70% 50% 50% 30%;
                transform: translate(20px, -5px) rotate(45deg) scale(1.08);
            }
        }

        @keyframes blob-top-morph-2 {
            0%, 100% {
                border-radius: 70% 30% 40% 60% / 30% 70% 60% 40%;
                transform: translate(0, 0) rotate(0deg) scale(1);
            }
            33% {
                border-radius: 50% 50% 70% 30% / 60% 40% 50% 50%;
                transform: translate(-12px, 15px) rotate(20deg) scale(1.06);
            }
            66% {
                border-radius: 30% 70% 50% 50% / 40% 60% 30% 70%;
                transform: translate(18px, -8px) rotate(40deg) scale(0.94);
            }
        }

        /* BOTTOM BLOB ANIMATIONS - Lebendiger und schneller */
        @keyframes blob-bottom-pulse-1 {
			0%, 100% {
				border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
				transform: translate(0, 0) scale(1);
			}
			25% {
				border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%;
				transform: translate(15px, -10px) scale(1.08);
			}
			50% {
				border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%;
				transform: translate(-10px, 5px) scale(0.95);
			}
			75% {
				border-radius: 45% 55% 55% 45% / 50% 50% 50% 50%;
				transform: translate(10px, -5px) scale(1.05);
			}
		}

		@keyframes blob-bottom-pulse-2 {
			0%, 100% {
				border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
				transform: translate(0, 0) scale(1);
			}
			30% {
				border-radius: 55% 45% 50% 50% / 45% 55% 50% 50%;
				transform: translate(-20px, 10px) scale(1.1);
			}
			60% {
				border-radius: 45% 55% 50% 50% / 55% 45% 50% 50%;
				transform: translate(15px, -15px) scale(0.9);
			}
			85% {
				border-radius: 50% 50% 45% 55% / 50% 50% 55% 45%;
				transform: translate(-10px, 5px) scale(1.05);
			}
		}

		/* /MORPHING BACKGROUND           */

		.home-content section {
			margin-bottom: 60px;
		}

		.hero-section h1 {
			font-size: 2.5rem;
			margin-bottom: 20px;
		}

		.features-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 30px;
			margin-top: 30px;
		}

		.testimonials-slider {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 30px;
			margin-top: 30px;
		}

		.testimonial {
			display: flex;
			flex-direction: column;
		}

		.testimonial-image {
			margin-bottom: 15px;
		}

		.testimonial-image img {
			border-radius: 50%;
			width: 80px;
			height: 80px;
			object-fit: cover;
		}

		.testimonial-content p {
			font-style: italic;
			margin-bottom: 10px;
		}

		.testimonial-content cite {
			font-weight: bold;
			display: block;
		}

		.call-to-action {
			text-align: center;
		}

		.call-to-action h2 {
			font-size: 2rem;
			margin-bottom: 20px;
		}

		.call-to-action p {
			margin-bottom: 30px;
			max-width: 700px;
			margin-left: auto;
			margin-right: auto;
		}

		.cta-buttons {
			display: flex;
			gap: 20px;
			justify-content: center;
			margin-top: 30px;
		}

		@media (max-width: 768px) {
			.features-grid,
			.testimonials-slider {
				grid-template-columns: 1fr;
			}
			
			.cta-buttons {
				flex-direction: column;
				align-items: center;
			}
			
			.cta-buttons .button {
				width: 100%;
				text-align: center;
			}
		}

		/* Overwrite wordpress classes */
		.wp-block-list,
		ol.wp-block-list,
		ul.wp-block-list {
			list-style: none !important;
			margin: 0 !important;
			padding: 0 !important;
		}

		.wp-block-list li,
		ol.wp-block-list li,
		ul.wp-block-list li {
			position: relative;
			padding-left: 20px !important;
			margin-bottom: 5px !important;
		}

		.wp-block-list li::before,
		ul.wp-block-list li::before {
			content: "▶";
			position: absolute;
			left: 0;
			transition: var(--tipino-transition);
		}

		.wp-block-list li:hover::before,
		ul.wp-block-list li:hover::before {
			color: var(--tipino-accent);
			transform: var(--tipino-transform);
		}

		/* Für nummerierte Listen */
		ol.wp-block-list {
			counter-reset: tipino-counter;
		}

		ol.wp-block-list li::before {
			counter-increment: tipino-counter;
			content: counter(tipino-counter) ".";
			font-weight: 600;
		}
		/* ***************************** */
		/* //TIPINO THEME                */
		/* ***************************** */

 
		/* ***************************** */
		/* GENERAL STYLING               */
		/* ***************************** */
		.tipino-width-100 {
			width: 100%;
		}

		.tipino-width-66 {
			width: 66%;
		}

		.tipino-width-50 {
			width: 50%;
		}

		.tipino-width-33 {
			width: 33%;
		}

		.tipino-element-align-left {
			margin: 0 auto 0 0;
		}

		.tipino-element-align-right {
			margin: 0 0 0 auto;
		}

		.tipino-element-align-center {
			margin: 0 auto;
		}
		
		.tipino-margin-top {
			margin-top:10px;
		}
		
		.tipino-margin-bottom {
			margin-bottom:10px;
		}
		
		.tipino-margin-left {
			margin-left:10px;
		}
		
		.tipino-margin-right {
			margin-right:10px;
		}
		
		.tipino-margin {
			margin:10px;
		}
		/* ***************************** */
		/* //GENERAL STYLING             */
		/* ***************************** */
		
		
		/* ***************************** */
		/* PAGE TITLE                    */
		/* ***************************** */
		.tipino-page-title {
			font-size: 40px;
			font-weight: 600;
			font-family: var(--tipino-heading-font-family), Sans-serif;
			color: var(--tipino-primary);
		}
		/* ***************************** */
		/* //PAGE TITLE                  */
		/* ***************************** */

		/* ***************************** */
		/* ARTIST LINKS                  */
		/* ***************************** */
		/* on light color */
		.tipino-artist-link {
			color: var(--tipino-accent);
			font-family: var(--tipino-heading-font-family), Sans-serif;
			text-decoration: none;
			text-overflow: ellipsis;
		}

		.tipino-artist-link:hover {
			text-decoration: underline;
		}
		
		.tipino-text-accent-small {
			font-size: var(--tipino-font-size-small);
		}
		/* on dark color */
		/* ***************************** */
		/* //ARTIST LINKS                */
		/* ***************************** */
		
		/* ***************************** */
		/* ALBUM LINKS                   */
		/* ***************************** */
		/* on light color */
		/* on dark color */
		/* ***************************** */
		/* //ALBUM LINKS                 */
		/* ***************************** */
		
		/* ***************************** */
		/* TRACK LINKS                   */
		/* ***************************** */
		/* on light color */
		/* on dark color */
		/* ***************************** */
		/* //TRACK LINKS                 */
		/* ***************************** */
		
		/* ***************************** */
		/* GENRE LINKS                   */
		/* ***************************** */
		/* on light color */
		.tipino-genre-list-link {
			color: var(--tipino-primary);
			font-size: var(--tipino-font-size-small);
			font-family: var(--tipino-heading-font-family);
			text-decoration: none;
			text-transform: capitalize;
			text-overflow: ellipsis;
			text-transform: capitalize;
		}

		.tipino-genre-list-link:hover {
			text-decoration: underline;
			color: var(--tipino-primary-dark);
		}		

		.tipino-genre-name {
			font-size: var(--tipino-font-size-medium);
			font-weight: 600;
			margin-bottom: 4px;
			color: var(--tipino-primary);
			text-decoration: none;
			text-transform: capitalize;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: block;
		}
		
		.tipino-genre-name:hover {
			text-decoration:underline;
			color: var(--tipino-primary-extra-light);
		}
		/* //Genre Name                    */
		/* ***************************** */
		/* //GENRE LINKS                 */
		/* ***************************** */
		

        /* ***************************** */
		/* CARD 					     */
		/* ***************************** */
		.tipino-card-outer {
			padding: 30px 20px 20px 20px;
			border-radius: var(--tipino-border-radius);
			background: linear-gradient(159deg, rgb(from var(--tipino-card) r g b / 0.05) 0%, rgb(from var(--tipino-card) r g b / 0.1) 50%, rgb(from var(--tipino-card) r g b / 0.20) 100%);
			display: flex;
			flex-direction: column;
			gap: 10px;
            margin-bottom: 30px;
			backdrop-filter: blur(12px);
			position: relative;
		}

		.tipino-card-outer::before {
			content: "";
			position: absolute;
			z-index: -1;
			inset: 0;
			border-radius: inherit;
			border: 1px solid transparent;
			background: linear-gradient(rgb(from var(--tipino-secondary-extra-light) r g b / 0.25), rgb(from var(--tipino-secondary-light) r g b / 0.5)) border-box;
			mask: linear-gradient(var(--tipino-black), var(--tipino-black)) border-box,
				linear-gradient(var(--tipino-black), var(--tipino-black)) padding-box;
			mask-composite: subtract;
			opacity: 0.4;
			}
			
		.tipino-card-outer-modal {
			padding: 30px 20px 20px 20px;
			border-radius: var(--tipino-border-radius);
			background: linear-gradient(159deg, rgb(from var(--tipino-secondary) r g b / 0.8) 0%, rgb(from var(--tipino-secondary) r g b / 0.6) 50%, rgb(from var(--tipino-secondary) r g b / 0.4) 100%);
			display: flex;
			flex-direction: column;
			gap: 10px;
            margin-bottom: 30px;
			backdrop-filter: blur(12px);
			position: relative;
		}
		
		.tipino-card-outer-lighter::before {
			content: "";
			position: absolute;
			z-index: -1;
			inset: 0;
			border-radius: inherit;
			border: 1px solid transparent;
			background: linear-gradient(rgb(from var(--tipino-card) r g b / 0.5), rgb(from var(--tipino-card) r g b / 0.5)) border-box;
			mask: linear-gradient(var(--tipino-black), var(--tipino-black)) border-box,
				linear-gradient(var(--tipino-black), var(--tipino-black)) padding-box;
			mask-composite: subtract;
			opacity: 0.9;
		}
		
		.tipino-card-outer-lighter {
			padding: 30px 20px 20px 20px;
			border-radius: var(--tipino-border-radius);
			background: linear-gradient(159deg, rgb(from var(--tipino-card) r g b / 0.1) 0%, rgb(from var(--tipino-card) r g b / 0.1) 50%, rgb(from var(--tipino-card) r g b / 0.6) 100%);
			display: flex;
			flex-direction: column;
			gap: 10px;
            margin-bottom: 30px;
			backdrop-filter: blur(12px);
			position: relative;
		}

		.tipino-card-outer-lighter::before {
			content: "";
			position: absolute;
			z-index: -1;
			inset: 0;
			border-radius: inherit;
			border: 1px solid transparent;
			background: linear-gradient(rgb(from var(--tipino-secondary-extra-light) r g b / 1), rgb(from var(--tipino-secondary-light) r g b / 1)) border-box;
			mask: linear-gradient(var(--tipino-black), var(--tipino-black)) border-box,
				linear-gradient(var(--tipino-black), var(--tipino-black)) padding-box;
			mask-composite: subtract;
			opacity: 0.4;
		}

		.tipino-card-header-accent {
			background: linear-gradient(to right, rgb(from var(--tipino-accent) r g b / 1), rgb(from var(--tipino-accent-light) r g b / 1));
			padding: 14px 20px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid var(--tipino-white);
			font-size: var(--tipino-font-size-large);
			font-weight: 500;
			color: var(--tipino-white)
		}

		.tipino-card-header-accent svg {
			margin-right: 10px;
			color: var(--tipino-secondary);
		}
		
		
        /* ***************************** */
		/* //CARD 					     */
		/* ***************************** */

		
/* ***************************** */
/* 1/1 STYLES                    */
/* ***************************** */	
		/* ***************************** */
		/* SUBSCRIPTIONS         		 */
		/* ***************************** */		
		.tipino-subscription-container {
			color: var(--tipino-text);
			max-width: 100%;
			margin: 0 auto;
			overflow: visible;
		}
		
		.tipino-toggle {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 10px;
		}
		
		.tipino-toggle-option {
			color: var(--tipino-text);
			margin: 0 10px;
			cursor: pointer;
		}
		
		.tipino-toggle-option.active {
			color: var(--tipino-accent);
			font-weight: bold;
		}
		
		/* Toggle switch styling */
		.tipino-toggle-switch {
			position: relative;
			display: inline-block;
			width: 45px;
			height: 20px;
		}
		
		.tipino-toggle-switch input {
			opacity: 0;
			width: 0;
			height: 0;
		}
		
		.tipino-toggle-slider {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: var(--tipino-gray-card);
			transition: .4s;
		}
		
		.tipino-toggle-slider:before {
			position: absolute;
			content: "";
			height: 20px;
			width: 20px;
			left: 1px;
			bottom: 0px;
			background-color: var(--tipino-white-card);
			transition: .4s;
		}
		
		input:checked + .tipino-toggle-slider {
			background-color: var(--tipino-primary);
		}
		
		input:checked + .tipino-toggle-slider:before {
			transform: translateX(24px);
		}
		
		.tipino-toggle-slider.round {
			border-radius: var(--tipino-border-radius);
		}
		
		.tipino-toggle-slider.round:before {
			border-radius: 50%;
		}
		
		.tipino-carousel-container {
			position: relative;
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			padding-top: 10px;
		}
		
		/* Policy acceptance validation styling */
		.tipino-toggle.error {
			border: 2px solid var(--tipino-error);
			border-radius: var(--tipino-border-radius);
			padding: 8px;
			animation: shake 0.3s;
			background: var(--tipino-gradient-error-light);
		}
		
		@keyframes shake {
			0%, 100% { transform: translateX(0); }
			25% { transform: translateX(-5px); }
			75% { transform: translateX(5px); }
		}
		
		.tipino-policy-error-message {
			color: var(--tipino-error);
			font-size: var(--tipino-font-size-small);
			margin-top: 5px;
			margin-left: 52px;
			font-weight: 500;
			display: none;
		}
		
		.tipino-toggle.error + .tipino-policy-error-message {
			display: block;
		}
		
		
	/* ========================================
	   FIXED RANGE SLIDER SYSTEM
	   ======================================== */

	/* Base Range Input Styling */
	input[type="range"] {
		/* CSS Custom Properties für Design */
		--tipino-slider-active: var(--tipino-primary);
		--tipino-slider-inactive: rgb(from var(--tipino-text) r g b / 0.2);
		--tipino-slider-thumb-size: 20px;
		--tipino-slider-track-height: 8px;
		--tipino-slider-gap: 5px;
		
		/* Berechnete Werte für border-image */
		--_active-color: color-mix(in srgb, var(--tipino-slider-active), var(--tipino-black) var(--p, 0%));
		
		width: 100% !important;
		height: var(--tipino-slider-thumb-size) !important;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: none;
		outline: none;
		cursor: pointer;
		margin: 0;
		padding: 0;
		position: relative;
		z-index: 2;
		overflow: hidden; /* Wichtig für border-image */
	}

	/* Hover und Focus States */
	input[type="range"]:hover {
		--p: 15%;
	}

	input[type="range"]:focus,
	input[type="range"]:focus-visible {
		--p: 25%;
		outline: none;
	}
	/* ========================================
	   FIXED RANGE SLIDER SYSTEM
	   ======================================== */

	/* Base Range Input Styling */
	input[type="range"] {
		/* CSS Custom Properties für Design */
		--tipino-slider-active: var(--tipino-primary);
		--tipino-slider-inactive: rgb(from var(--tipino-text) r g b / 0.2);
		--tipino-slider-thumb-size: 20px;
		--tipino-slider-track-height: 8px;
		--tipino-slider-gap: 5px;
		
		/* Berechnete Werte für border-image */
		--_active-color: color-mix(in srgb, var(--tipino-slider-active), var(--tipino-black) var(--p, 0%));
		
		width: 100% !important;
		height: var(--tipino-slider-thumb-size) !important;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: none;
		outline: none;
		cursor: pointer;
		margin: 0;
		padding: 0;
		position: relative;
		z-index: 2;
		overflow: hidden; /* Wichtig für border-image */
	}

	/* Hover und Focus States */
	input[type="range"]:hover {
		--p: 15%;
	}

	input[type="range"]:focus,
	input[type="range"]:focus-visible {
		--p: 25%;
		outline: none;
	}

	/* ========================================
	   WEBKIT (Chrome, Safari, Edge)
	   ======================================== */

	input[type="range"]::-webkit-slider-track {
		-webkit-appearance: none !important;
		height: var(--tipino-slider-track-height) !important;
		background: var(--tipino-slider-inactive) !important;
		border-radius: 4px !important;
		border: none !important;
	}

	input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none !important;
		appearance: none !important;
		
		/* Größe und Form */
		height: var(--tipino-slider-thumb-size) !important;
		width: var(--tipino-slider-thumb-size) !important;
		aspect-ratio: 1;
		border-radius: 50% !important;
		
		/* Styling */
		background: var(--tipino-slider-active) !important;
		box-shadow: 0 2px 6px color-mix(in srgb, var(--tipino-primary) 30%, transparent) !important;
		cursor: pointer !important;
		
		/* Border-image für die Füllung - DAS IST DER TRICK! */
		border-image: linear-gradient(90deg, 
			var(--tipino-slider-active) 50%, 
			var(--tipino-slider-inactive) 0
		) 0 1 / calc(50% - var(--tipino-slider-track-height)/2) 100vw / 0 calc(100vw + var(--tipino-slider-gap)) !important;
		
		/* Transitions */
		transition: all 0.2s ease !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	input[type="range"]::-webkit-slider-thumb:hover {
		background: var(--tipino-primary-light) !important;
		box-shadow: 0 4px 12px color-mix(in srgb, var(--tipino-primary) 40%, transparent) !important;
		transform: scale(1.05) !important;
	}

	/* ========================================
	   FIREFOX
	   ======================================== */

	input[type="range"]::-moz-range-track {
		height: var(--tipino-slider-track-height) !important;
		background: var(--tipino-slider-inactive) !important;
		border-radius: 4px !important;
		border: none !important;
	}

	input[type="range"]::-moz-range-thumb {
		-moz-appearance: none !important;
		appearance: none !important;
		
		/* Größe und Form */
		height: var(--tipino-slider-thumb-size) !important;
		width: var(--tipino-slider-thumb-size) !important;
		border-radius: 50% !important;
		
		/* Styling */
		background: var(--tipino-slider-active) !important;
		box-shadow: 0 2px 6px color-mix(in srgb, var(--tipino-primary) 30%, transparent) !important;
		cursor: pointer !important;
		
		/* Border-image für Firefox */
		border-image: linear-gradient(90deg, 
			var(--tipino-slider-active) 50%, 
			var(--tipino-slider-inactive) 0
		) 0 1 / calc(50% - var(--tipino-slider-track-height)/2) 100vw / 0 calc(100vw + var(--tipino-slider-gap)) !important;
		
		/* Transitions */
		transition: all 0.2s ease !important;
	}

	input[type="range"]::-moz-range-thumb:hover {
		background: var(--tipino-primary-light) !important;
		box-shadow: 0 4px 12px color-mix(in srgb, var(--tipino-primary) 40%, transparent) !important;
		transform: scale(1.05) !important;
	}

	/* ========================================
	   CONTAINER ANPASSUNGEN
	   ======================================== */

	/* Container bleibt unverändert */
	.tipino-slider-container {
		position: relative;
		padding: 0 10px;
		margin-bottom: 35px;
	}

	/* ========================================
	   SPEZIELLE STYLING FÜR DUAL RANGE
	   ======================================== */

	.tipino-dual-slider-wrapper {
		position: relative;
		padding: 0 10px;
		margin: 15px 0 35px 0;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		height: 20px; 
	}

	/* Track Hintergrund für Dual Slider */
	.tipino-dual-slider-wrapper::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 10px;
		right: 10px;
		height: 8px;
		background: rgb(from var(--tipino-text) r g b / 0.2);
		border-radius: 4px;
		transform: translateY(-50%);
		z-index: 1;
	}

	/* Visual Fill zwischen Min und Max */
	.tipino-dual-slider-wrapper::after {
		content: '';
		position: absolute;
		top: 50%;
		height: 8px;
		background: var(--tipino-primary);
		border-radius: 4px;
		transform: translateY(-50%);
		z-index: 1;
		/* Position wird via JavaScript gesetzt */
		left: var(--dual-fill-left, 10px);
		width: var(--dual-fill-width, 0px);
		transition: all 0.1s ease;
	}

	.tipino-dual-slider-wrapper input[type="range"] {
		position: absolute;
		top: 0;
		left: 10px;
		right: 10px;
		width: calc(100% - 20px) !important;
		height: 20px !important;
		margin: 0;
		padding: 0;
		background: transparent !important;
		pointer-events: none;
	}

	/* NUR für Dual Slider: Deaktiviere border-image aber behalte Thumb-Styling */
	.tipino-dual-slider-wrapper input[type="range"]::-webkit-slider-thumb {
		pointer-events: auto !important;
		position: relative;
		z-index: 4;
		border-image: none !important;
		/* Behalte das normale Thumb-Styling */
		background: var(--tipino-slider-active) !important;
		box-shadow: 0 2px 6px color-mix(in srgb, var(--tipino-primary) 30%, transparent) !important;
	}

	.tipino-dual-slider-wrapper input[type="range"]::-webkit-slider-thumb:hover {
		background: var(--tipino-primary-light) !important;
		box-shadow: 0 4px 12px color-mix(in srgb, var(--tipino-primary) 40%, transparent) !important;
		transform: scale(1.05) !important;
	}

	.tipino-dual-slider-wrapper input[type="range"]::-moz-range-thumb {
		pointer-events: auto !important;
		position: relative;
		z-index: 4;
		border-image: none !important;
		/* Behalte das normale Thumb-Styling */
		background: var(--tipino-slider-active) !important;
		box-shadow: 0 2px 6px color-mix(in srgb, var(--tipino-primary) 30%, transparent) !important;
	}

	.tipino-dual-slider-wrapper input[type="range"]::-moz-range-thumb:hover {
		background: var(--tipino-primary-light) !important;
		box-shadow: 0 4px 12px color-mix(in srgb, var(--tipino-primary) 40%, transparent) !important;
		transform: scale(1.05) !important;
	}

	/* Track unsichtbar machen für Dual Slider */
	.tipino-dual-slider-wrapper input[type="range"]::-webkit-slider-track {
		background: transparent !important;
	}

	.tipino-dual-slider-wrapper input[type="range"]::-moz-range-track {
		background: transparent !important;
	}

	.tipino-dual-min {
		z-index: 3;
	}

	.tipino-dual-max {
		z-index: 2;
	}

	.tipino-dual-slider-wrapper[data-priority="min"] .tipino-dual-min {
		z-index: 4;
	}

	.tipino-dual-slider-wrapper[data-priority="max"] .tipino-dual-max {
		z-index: 4;
	}

	/* ========================================
	   FALLBACK FÜR ÄLTERE BROWSER
	   ======================================== */

	/* Fallback falls color-mix nicht unterstützt wird */
	@supports not (color: color-mix(in srgb, red, red)) {
		input[type="range"] {
			--_active-color: var(--tipino-slider-active);
		}
	}

	/* ========================================
	   DISABLED STATE
	   ======================================== */

	input[type="range"]:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		--tipino-slider-active: var(--tipino-gray-card);
	}

	input[type="range"]:disabled::-webkit-slider-thumb {
		background: var(--tipino-gray-card) !important;
		border-color: var(--tipino-gray-text) !important;
		cursor: not-allowed !important;
	}

	input[type="range"]:disabled::-moz-range-thumb {
		background: var(--tipino-gray-card) !important;
		border-color: var(--tipino-gray-text) !important;
		cursor: not-allowed !important;
	}

	/* ========================================
	   RESPONSIVITÄT
	   ======================================== */

	@media (max-width: 768px) {
		.tipino-dual-slider-wrapper {
			padding: 0 5px;
		}
		
		.tipino-dual-slider-wrapper::before {
			left: 5px;
			right: 5px;
		}
		
		.tipino-dual-slider-wrapper input[type="range"] {
			left: 5px;
			right: 5px;
			width: calc(100% - 10px) !important;
		}
	}
		
		
		
		/* Carousel navigation arrows */
		.tipino-carousel-arrow {
			background-color: var(--tipino-primary);
			color: var(--tipino--white-text);
			border: none;
			border-radius: var(--tipino-border-radius);
			width: 40px;
			height: 40px;
			font-size: var(--tipino-font-size-extra-large);
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: var(--tipino-transition);
			z-index: 10;
			margin: 0 10px;
		}
		
		.tipino-carousel-arrow:hover {
			background-color: var(--tipino-accent);
			transform: var(--tipino-transform);
		}
		
		.tipino-carousel-arrow:disabled {
			opacity: 1;
			cursor: pointer;
		}
		
		/* Subscription slider */
		.tipino-subscription-slider-wrapper {
			flex: 1;
			overflow: hidden;
		}
		
		.tipino-subscription-slider {
			display: flex;
			transition: var(--tipino-transition);
		}
		
		/* Page styling - holds multiple cards */
		.tipino-slider-page {
			display: flex;
			flex: 0 0 100%;
			gap: 20px;
			padding: 10px 10px 0 10px;
		}
		
		.tipino-subscription-header {
            background-color: rgb(from var(--tipino-primary) r g b / 0.1);
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            border-bottom: 1px solid rgb(from var(--tipino-accent) r g b / 0.2);
			border-radius: var(--tipino-border-radius);
        }
        
        .tipino-subscription-icon {
            background-color: rgb(from var(--tipino-accent) r g b / 0.2);
            border-radius: var(--tipino-border-radius-50);
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .tipino-subscription-icon svg {
            color: var(--tipino-accent);
        }
        
        .tipino-subscription-header-content {
            flex: 1;
        }
        
        .tipino-subscription-title {
            margin: 0 0 5px 0;
            color: var(--tipino-primary);
            font-size: var(--tipino-font-size-large);
            font-weight: 600;
        }
        
        .tipino-subscription-cycle {
            display: flex;
            align-items: center;
            gap: 10px;
        }

		.tipino-distribution-method-selector {
                display: flex;
                flex-wrap: wrap;
                gap: 15px;
                margin-bottom: 20px;
            }

            .tipino-radio-card {
				flex: 1 1 calc(33.333% - 10px);
				min-width: 200px; 
				border: 2px solid rgb(from var(--tipino-white-card) r g b / 0.1);
				border-radius: var(--tipino-border-radius);
				overflow: hidden;
				transition: var(--tipino-transition);
				position: relative;
			}

            .tipino-radio-card.active {
                border-color: var(--tipino-primary);
                box-shadow: 0 0 10px rgb(from var(--tipino-primary) r g b / 0.3);
            }

            .tipino-radio-card input[type="radio"] {
                position: absolute;
                opacity: 0;
                width: 0;
                height: 0;
            }

            .tipino-radio-card-label {
                padding: 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                cursor: pointer;
                height: 100%;
                background-color: rgb(from var(--tipino-secondary) r g b / 0.2);
                transition: background-color 0.3s ease;
            }

            .tipino-radio-card-label:hover {
                background-color: rgb(from var(--tipino-secondary) r g b / 0.4);
            }

            .tipino-radio-card.active .tipino-radio-card-label {
                background-color: rgb(from var(--tipino-primary) r g b / 0.1);
            }

            .tipino-radio-card-label svg {
                margin-bottom: 10px;
                color: var(--tipino-accent);
            }

            .tipino-radio-card-label span {
                font-weight: 600;
                font-size: var(--tipino-font-size-medium);
                margin-bottom: 5px;
                color: var(--tipino-primary);
            }

            .tipino-radio-card-description {
                font-size: var(--tipino-font-size-normal);
                margin: 5px 0 0;
                color: rgb(from var(--tipino-gray-card) r g b / 0.7);
            }

            .tipino-distribution-display {
				display: flex;
				align-items: center;
				margin: 15px 0;
			}

            .tipino-distribution-side {
				flex: 0 0 120px;
				text-align: center;
			}


            .tipino-distribution-label {
				display: block;
				margin-bottom: 5px;
				font-weight: 500;
				color: var(--tipino-text);
				font-size: var(--tipino-font-size-small);
			}
			
			.tipino-range-input-no-submit {
				/* Marker-Klasse für JavaScript */
			}

			.tipino-distribution-value {
				font-size: var(--tipino-font-size-large);
				font-weight: bold;
				color: var(--tipino-primary);
			}
			
			.tipino-dual-range-container {
				width: 100%;
				overflow: hidden;
			}
			
			.tipino-dual-range-container .tipino-range-input-group {
				display: flex !important;
				align-items: center;
				justify-content: center;
				gap: 15px;
				margin-bottom: 15px;
				flex-wrap: nowrap;
				width: 100%;
				max-width: 100%; 
				box-sizing: border-box;
			}
			

			
			.tipino-slider-track-fill {
				display: none;
			}


			
			.tipino-range-separator {
				color: var(--tipino-accent);
				font-weight: 600;
				padding: 0 8px;
				flex-shrink: 0;
				font-size: var(--tipino-font-size-medium);
			}

			.tipino-range-separator {
				color: var(--tipino-accent);
				font-weight: 600;
				padding: 0 4px; 
				flex-shrink: 0;
				font-size: var(--tipino-font-size-medium);
				white-space: nowrap; 
			}
			

			.tipino-dual-min {
				z-index: 2;
			}

			.tipino-dual-max {
				z-index: 1;
			}
			
			
			.tipino-slider-container.tipino-distribution-slider-container {
				flex: 1;
				margin: 0 15px;
			}

		

			.tipino-radio-icon-text-center {
				display: flex !important;
				align-items: center !important;
				justify-content: center !important;
				gap: 8px !important;
				margin-bottom: 8px !important;
			}

			.tipino-radio-icon-text-center svg {
				margin-bottom: 0 !important; 
			}

			.tipino-radio-icon-text-center span {
				margin-bottom: 0 !important; 
			}

		/* Card styling */
		.tipino-subscription-card {
			position: relative;
			transition: all 0.3s ease;
			flex: 1; 
			min-width: 0; 
			display: flex;
			flex-direction: column;
			background: var(--tipino-gradient-secondary);
			border-radius: var(--tipino-border-radius);
			padding: 20px;
			margin-bottom: 20px;
			color: var(--tipino-white-text);
		}

		.tipino-subscription-card::before {
			content: "";
			position: absolute;
			z-index: -1;
			inset: 0;
			border-radius: inherit;
			border: 1px solid transparent;
			background: linear-gradient(rgb(from var(--tipino-card) r g b / 0.25), rgb(from var(--tipino-card) r g b / 0.5)) border-box;
			mask: linear-gradient(var(--tipino-black), var(--tipino-black)) border-box,
				linear-gradient(var(--tipino-black), var(--tipino-black)) padding-box;
			mask-composite: subtract;
			opacity: 0.4;
		}

		.tipino-subscription-actions {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 20px;
			gap: 10px;
		}
		
		.tipino-subscription-card:hover {
			transform: var(--tipino-transform);
			background: var(--tipino-gradient-secondary-light);
			
		}
		
		.tipino-subscription-card.most-wanted {
			border: 2px solid var(--tipino-accent);
		}
		
		.tipino-most-popular-badge {
			background-color: var(--tipino-accent);
			color: var(--tipino-white-text);
			padding: 5px 30px;
			border-radius: var(--tipino-border-radius);
			font-size: 14px;
			font-weight: bold;
			display: inline-block;
			margin: -30px auto 0px auto; 
			text-align: center;
			width: fit-content;
		}
		
		
		/* Card content */
		.tipino-card-content {
			display: flex;
			flex-direction: column;
			height: 100%;
		}
		
		.tipino-subscription-icon {
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
		}
		
		.tipino-subscription-icon svg {
			width: 60px;
			height: 60px;
		}
		
		.tipino-subscription-title {
			color: var(--tipino-primary);
			font-size: 24px;
			margin-top: 0;
			margin-bottom: 15px;
			text-align: center;
		}
		
		.tipino-subscription-price-container {
			margin-bottom: 15px;
			text-align: center;
		}
		
		.tipino-subscription-price {
			display: none;
		}
		
		.tipino-subscription-price.active {
			display: block;
		}
		
		.tipino-subscription-price .tipino-price {
			font-size: 36px;
			font-weight: bold;
			color: var(--tipino-primary);
		}
		
		.tipino-subscription-price .tipino-period {
			font-size: 16px;
			color: var(--tipino-white-text);
		}
		
		.tipino-subscription-price .tipino-savings {
			display: block;
			font-size: 14px;
			color: var(--tipino-primary);
			font-weight: bold;
		}
		
		.tipino-subscription-description {
			margin-bottom: 20px;
			flex: 1; 
			display: flex;
			align-items: flex-start;
		}
		
		.tipino-subscription-features-container {
			flex: 1;
			margin-bottom: 20px;
		}
		
		.tipino-subscription-features {
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
		
		.tipino-subscription-features li {
			padding: 5px 0;
			position: relative;
			padding-left: 25px;
			margin-bottom: 8px;
		}
		
		.tipino-subscription-features li:before {
			content: "✓";
			position: absolute;
			left: 0;
			color: var(--tipino-primary);
			font-weight: bold;
		}
		
		/* Dots navigation */
		.tipino-carousel-dots {
			display: flex;
			justify-content: center;
			margin-top: 20px;
		}
		
		.tipino-carousel-dot {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background-color: var(--tipino-card);
			margin: 0 6px;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		
		.tipino-carousel-dot.active {
			background-color: var(--tipino-primary);
			transform: scale(1.2);
		}
		/* ***************************** */
		/* //SUBSCRIPTIONS         		 */
		/* ***************************** */		
		
		
		/* ***************************** */
		/* USER CONFIG           		 */
		/* ***************************** */
		.tipino-address-value {
			line-height: 1.4;
		}

		.tipino-settings-badges {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
		}

		.tipino-settings-badge {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			padding: 4px 8px;
			border-radius: 16px;
			font-size: 12px;
			font-weight: 500;
		}
		
		.tipino-setting-item {
			display: flex;
			align-items: center;
		}

		.tipino-setting-icon {
			width: 40px;
			height: 40px;
			background-color: var(--tipino-secondary);
			border-radius: var(--tipino-border-radius);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12px;
			color: var(--tipino-accent);
			flex-shrink: 0;
		}

		.tipino-setting-info {
			flex: 1;
		}

		.tipino-setting-label {
			font-size: var(--tipino-font-size-normal);
			color: var(--tipino-text);
		}

		.tipino-setting-value {
			font-size: var(--tipino-font-size-normal);
			font-weight: 500;
			color: var(--tipino-text);
		}
		/* ***************************** */
		/* //USER CONFIG           		 */
		/* ***************************** */

		/* ***************************** */
		/* ARTIST PAYOUT TABLE   		 */
		/* ***************************** */
		.tipino-table-container {
			overflow-x: auto;
			margin-top: 10px;
		}

		.tipino-artist-payout-table {
			width: 100%;
			border-collapse: collapse;
		}

		.tipino-artist-payout-table thead {
			background: var(--tipino-gradient-card);
			color: var(--tipino-secondary);
			font-size: var(--tipino-font-size-medium);
		}

		.tipino-artist-payout-table th:first-child {
			border-top-left-radius: var(--tipino-border-radius);
		}

		.tipino-artist-payout-table th:last-child {
			border-top-right-radius: var(--tipino-border-radius);
		}

		.tipino-artist-payout-table th {
			padding: 15px;
			text-align: left;
			position: sticky;
			top: 0;
		}

		.tipino-artist-payout-table-row-even {
			background: var(--tipino-gradient-card-light);
			color: var(--tipino-text);
		}

		.tipino-artist-payout-table-row-even:hover {
			background: var(--tipino-gradient-primary-light);
		}

		.tipino-artist-payout-table-row-odd {
			background: var(--tipino-gradient-secondary);
			color: var(--tipino-text);
		}

		.tipino-artist-payout-table-row-odd:hover {
			background: var(--tipino-gradient-primary-light);
		}

		.tipino-artist-payout-table td {
			padding: 12px 15px;
			border-bottom: 1px solid var(--tipino-secondary-dark);
		}

		.tipino-artist-payout-table tr:last-child td {
			border-bottom: 1px solid var(--tipino-card);
		}

		.tipino-artist-payout-table-month-cell {
			font-weight: 600;
		}

		.tipino-artist-payout-table-amount {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 4px;
			font-weight: 600;
		}

		.tipino-artist-payout-table-percentage {
			font-size: 0.8rem;
		}
		/* ***************************** */
		/* //ARTIST PAYOUT TABLE   		 */
		/* ***************************** */
		
		/* ***************************** */
		/* GENRE SITEMAP				 */
		/* ***************************** */
		.tipino-genres-alphabet-card {
			display: flex;
			flex-wrap: wrap;
			gap: 5px;
			margin-bottom: 30px;
			padding: 10px;
			background: var(--tipino-gradient-card-light);
			border-radius: var(--tipino-border-radius);
			justify-content: center;
		}

		.tipino-genre-alphabet-link {
			color: var(--tipino-white-text);
		}

		.tipino-genre-alphabet-link:hover {
			color: var(--tipino-text);
			text-decoration: underline;
		}

		.tipino-genre-sitemap-columns {
			grid-template-columns: 1fr 1fr 1fr 1fr;
		}

		.tipino-genres-sitemap-columns {
			display: grid;
			gap: 15px;
		}

		.tipino-genres-sitemap-column {
			display: flex;
			flex-direction: column;
			gap: 15px;
		}

		.tipino-genres-letter-card {
			background: var(--tipino-gradient-card-light);
			border-radius: var(--tipino-border-radius);
			padding: 20px;
		}

		.tipino-genres-letter-heading {
			margin: 0 0 15px 0;
			border-bottom: 2px solid var(--tipino-accent);
			padding-bottom: 8px;
			color: var(--tipino-text);
		}

		.tipino-genre-list-item {
			padding: 10px 0;
			border-bottom: 1px solid rgb(from var(--tipino-accent) r g b / 0.5);
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.tipino-genre-list-item:last-child {
			border-bottom: none;
		}



		.tipino-genre-list-counts {
			display: flex;
			gap: 10px;
		}

		.tipino-genre-list-artist-count, .tipino-genre-list-track-count {
			display: flex;
			align-items: center;
			gap: 4px;
			color: var(--tipino-text);
			font-size: var(--tipino-font-size-normal);
		}

		/* ***************************** */
		/* //GENRE SITEMAP				 */
		/* ***************************** */		
/* ***************************** */
/* //1/1 STYLES                  */
/* ***************************** */
			
/* ***************************** */
/* 2/3 STYLES                    */
/* ***************************** */
		/* ***************************** */
		/* USER PAYMENT DETAIL 			 */
		/* ***************************** */	
				/* Visualization section layout */
		.tipino-user-payout-visualization {
			display: grid;
			grid-template-columns: 1fr 2fr;
			gap: 20px;
			margin-bottom: 30px;
		}

		/* Chart card styling */
		.tipino-user-payout-chart-card {
			background: var(--tipino-gradient-card-light);
			border-radius: var(--tipino-border-radius);
			padding: 20px;
			color: var(--tipino-card-text);
			display: flex;
			flex-direction: column;
		}


		.tipino-user-payout-chart-container {
			height: 300px;
			position: relative;
			margin-bottom: 20px;
		}

		/* Top Artist Styling */
		.tipino-user-top-artist {
			margin-top: 10px;
		}

		.tipino-user-top-artist-listeners {
			font-size: 14px;
			opacity: 0.9;
			margin-bottom: 8px;
			color: var(--tipino-secondary);
		}


		.tipino-user-top-artist-minutes {
			display: flex;
			gap: 5px;
			align-items: baseline;
			color: var(--tipino-secondary);
		}


		.tipino-user-top-artist-minutes-value {
			font-weight: 600;
			font-size: 16px;
		}

		.tipino-user-top-artist-minutes-label {
			opacity: 0.8;
			font-size: 14px;
		}

		.tipino-user-top-artist-amount {
			text-align: right;
			color: var(--tipino-secondary);
		}

		.tipino-user-top-artist-amount-value {
			font-size: 18px;
			font-weight: 600;
			display: block;
		}

		.tipino-user-top-artist-amount-percentage {
			font-size: 14px;
			opacity: 0.8;
		}

		.tipino-user-top-artist-bar-container {
			height: 8px;
			background-color: rgb(from var(--tipino-secondary) r g b / 0.1);
			border-radius: 4px;
			overflow: hidden;
		}

		.tipino-user-top-artist-bar {
			height: 100%;
			background-color: var(--tipino-secondary);
			border-radius: 4px;
		}
		
		.tipino-user-top-artist-card {
			background: var(--tipino-gradient-accent-light);
			border-radius: var(--tipino-border-radius);
			padding: 15px;
			color: var(--tipino-card-bg);
			position: relative;
		}

		/* List card styling */
		.tipino-user-payout-list-card {
			background: var(--tipino-gradient-secondary);
			border-radius: var(--tipino-border-radius);
			padding: 20px;
			color: var(--tipino-card-text);
		}

		.tipino-user-payout-list-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			flex-wrap: wrap;
			gap: 15px;
		}

		.tipino-user-payout-search-container {
			max-width: 300px;
			width: 100%;
		}

		.tipino-user-payout-search-input {
			width: 100%;
			padding: 10px 15px;
			border: 1px solid var(--tipino-card-bg);
			border-radius: var(--tipino-border-radius);
			font-size: 14px;
			transition: var(--tipino-transition);
		}

		.tipino-user-payout-search-input:focus {
			outline: none;
			border-color: var(--tipino-accent);
		}

		/* Payout list styles */
		.tipino-user-payout-list {
			margin-bottom: 20px;
			max-height: 500px;
			overflow-y: auto;
			padding-right: 5px;
		}

		.tipino-user-payout-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 15px;
		}

		.tipino-user-payout-card {
			background: var(--tipino-gradient-card-light);
			border-radius: var(--tipino-border-radius);
			padding: 15px;
			transition: var(--tipino-transition);
			color: var(--tipino-card-text);
			position: relative;
		}

		.tipino-user-payout-card:hover {
			transform: var(--tipino-transform);
		}

		.tipino-user-payout-artist {
			display: flex;
			align-items: center;
			margin-bottom: 15px;
		}


		.tipino-user-payout-artist-info {
			flex: 1;
			min-width: 0;
		}

		.tipino-user-payout-artist-listeners {
			font-size: 13px;
			color: var(--tipino-text);
		}

		.tipino-user-payout-stats {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: 10px;
		}

		.tipino-user-payout-minutes {
			font-size: 14px;
			display: flex;
			gap: 5px;
			color: var(--tipino-text);
		}

		.tipino-user-payout-stat-label {
			color: var(--tipino-text);
		}

		.tipino-user-payout-stat-value {
			font-weight: 500;
			color: var(--tipino-text);
		}

		.tipino-user-payout-amount {
			text-align: right;
			color: var(--tipino-text);
		}

		.tipino-user-payout-amount-value {
			font-size: 18px;
			font-weight: 600;
			color: var(--tipino-accent);
			display: block;
		}

		.tipino-user-payout-amount-percentage {
			font-size: 12px;
			color: var(--tipino-text);
		}

		.tipino-user-payout-bar-container {
			height: 6px;
			background: rgb(from var(--tipino-white-card) r g b / 0.1);
			border-radius: 3px;
			overflow: hidden;
		}

		.tipino-user-payout-bar {
			height: 100%;
			background: var(--tipino-gradient, linear-gradient(to right, var(--tipino-accent), var(--tipino-accent-light)));
		}

		
		.tipino-sortable-column {
			cursor: pointer;
			user-select: none;
		}
		
		/* Loader Container */
		
		/* Loader Container */
		.tipino-loading {
			flex: 0;
			position: relative;
			background-color: rgb(from var(--tipino-secondary) r g b / 0.9);
			display: none;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			z-index: 1000;
			border-radius: var(--tipino-border-radius);
		}

		.tipino-loading.show {
			display: flex !important;
		}

		/* Spinner */
		.tipino-loader {
			border: 5px solid rgb(from var(--tipino-primary) r g b / 0.3);
			border-radius: 50%;
			border-top: 5px solid var(--tipino-card);
			width: 100px;
			height: 100px;
			animation: spin 1s linear infinite;
		}

		/* Loading Text */
		.tipino-loading p {
			color: var(--tipino-text-card);
			font-size: 16px;
			font-weight: 500;
			margin: 0;
			text-align: center;
		}

		/* Spin Animation */
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
		
		.tipino-sort-icon {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			opacity: 0.3;
		}
		
		.tipino-sort-icon:before,
		.tipino-sort-icon:after {
			content: '';
			position: absolute;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
		}
		
		.tipino-sort-icon:before {
			border-bottom: 5px solid var(--tipino-accent);
			top: -6px;
		}
		
		.tipino-sort-icon:after {
			border-top: 5px solid var(--tipino-accent);
			bottom: -6px;
		}
		
		.tipino-sort-icon.asc:before {
			opacity: 1;
		}
		
		.tipino-sort-icon.desc:after {
			opacity: 1;
		}

		.tipino-payments-table {
			width: 100%;
			border-collapse: collapse;
			margin-bottom: 20px;
			overflow: hidden;
			table-layout: fixed;
		}
		
		.tipino-payments-table th,
		.tipino-payments-table td {
			padding: 15px;
			text-align: left;
			border-bottom: 1px solid rgb(from var(--tipino-card) r g b / 0.1);
		}
		
		.tipino-payments-table tbody tr:last-child td {
			border-bottom: none !important;
		}
		
		.tipino-payments-table .tipino-text-align-left {
			text-align: left !important;
		}

		.tipino-payments-table .tipino-text-align-center {
			text-align: center !important;
		}

		.tipino-payments-table .tipino-text-align-right {
			text-align: right !important;
		}
		
		.tipino-payments-table th {
			background-color: color-mix(in srgb, var(--tipino-primary-light) 20%, transparent);
			color: var(--tipino-accent); 
			font-weight: bold;
			position: relative;
		}
		
		.tipino-payments-table tbody tr:hover {
			background-color: color-mix(in srgb, var(--tipino-card) 10%, transparent);
		}
		
		.tipino-payments-table .no-payments {
			text-align: center;
			padding: 30px;
			font-style: italic;
		}
		
		.tipino-button-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .tipino-receipt-header {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
            padding: 20px;
            background: var(--tipino-gradient-card-light);
            border-radius: var(--tipino-border-radius);
			color: var(--tipino-text);
        }
        
        .tipino-receipt-info-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .tipino-receipt-info-item .tipino-label {
            font-size: var(--tipino-font-size-small);
            color: var(--tipino-accent);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .tipino-receipt-info-item .tipino-value {
            font-size: var(--tipino-font-size-medium);
            color: var(--tipino-text);
            font-weight: 600;
        }
        
        .tipino-receipt-type-subscription {
            color: var(--tipino-text);
            background: var(--tipino-gradient-primary);
            padding: 4px 8px;
            border-radius: var(--tipino-border-radius);
            font-size: var(--tipino-font-size-small);
            font-weight: 600;
            display: inline-block;
        }
        
        .tipino-receipt-type-referral {
            color: var(--tipino-secondary);
            background: var(--tipino-gradient-accent);
            padding: 4px 8px;
            border-radius: var(--tipino-border-radius);
            font-size: var(--tipino-font-size-small);
            font-weight: 600;
            display: inline-block;
        }
        
        .tipino-payment-breakdown {
            margin-bottom: 20px;
        }
        
        .tipino-breakdown-table {
            width: 100%;
            border-radius: var(--tipino-border-radius);
            overflow: hidden;
            background: var(--tipino-gradient-card-light);
        }
        
        .tipino-breakdown-item {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 15px;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid rgb(from var(--tipino-secondary) r g b / 0.1);
            transition: var(--tipino-transition);
        }
        
        .tipino-breakdown-item:last-of-type {
            border-bottom: none;
        }
        
        .tipino-breakdown-item.tipino-total {
            background: var(--tipino-gradient-accent-light);
            font-weight: 600;
            border-top: 2px solid var(--tipino-accent);
        }
        
        .tipino-breakdown-item.tipino-total .tipino-item-label {
            color: var(--tipino-secondary);
            font-weight: 700;
        }
        
        .tipino-breakdown-item.tipino-total .tipino-item-value {
            color: var(--tipino-secondary);
            font-weight: 700;
            font-size: var(--tipino-font-size-large);
        }
        
        .tipino-breakdown-item.tipino-total .tipino-item-percentage {
            color: var(--tipino-secondary);
            font-weight: 700;
        }
        
        .tipino-item-label {
            color: var(--tipino-text);
            font-weight: 500;
        }
        
        .tipino-item-value {
            text-align: right;
            font-weight: 600;
            color: var(--tipino-text);
            font-size: var(--tipino-font-size-medium);
        }
        
        .tipino-item-percentage {
            text-align: right;
            font-size: var(--tipino-font-size-small);
            color: var(--tipino-text);
            opacity: 0.8;
        }
        
        .tipino-pdf-button svg {
            width: 18px;
            height: 18px;
        }		
		/* ***************************** */
		/* /USER PAYMENT DETAIL 		 */
		/* ***************************** */		
		
		/* ***************************** */
		/* ARTIST DETAIL 				 */
		/* ***************************** */	
		.tipino-artist-detail-header {
			display: flex;
			align-items: center;
			color: var(--tipino-text);
		}	
		
		.tipino-artist-detail-details {
			flex: 1;
		}
		
		.tipino-artist-header-top {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 15px;
		}
		
		.tipino-artist-details-name {
			margin: 0;
			color: var(--tipino-accent);
			text-overflow: ellipsis;
		}
		
		.tipino-artist-details-genres {
			display: flex;
			flex-wrap: wrap;
			gap: 5px;
			margin-bottom: 20px;
		}
		
		.tipino-artist-details-popularity-meter {
			display: flex;
			align-items: center;
			gap: 12px;
		}
		
		.tipino-artist-details-popularity-label {
			font-size: var(--tipino-font-size-medium);
			color: var(--tipino-text);
			min-width: 70px;
		}
		
		.tipino-progress-bar-fill {
			height: 100%;
			background: var(--tipino-gradient-accent);
			border-radius: 4px;
		}
		
		.tipino-artist-details-popularity-value {
			font-size: 0.9rem;
			color: var(--tipino-text);
			font-weight: 500;
			min-width: 45px;
			text-align: right;
		}

		.tipino-progress-bar {
			height: 8px;
			flex: 1;
			background: var(--tipino-gradient-card);
			border-radius: 4px;
			overflow: hidden;
		}
		/* ***************************** */
		/* //ARTIST DETAIL 				 */
		/* ***************************** */		
		
		
		
		/* ***************************** */
		/* TRACK CARD 					 */
		/* ***************************** */
		.tipino-track-card-header {
			background: linear-gradient(to right, rgb(from var(--tipino-accent-dark) r g b / 1), rgb(from var(--tipino-accent) r g b / 1));
			padding: 14px 20px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid var(--tipino-accent-dark);
			font-size: var(--tipino-font-size-medium);
			font-weight: 500;
			color: var(--tipino-accent-extra-light);
		}

		.tipino-track-card-header svg {
			margin-right: 10px;
			color: var(--tipino-accent-extra-light);
		}
		
		.tipino-track-card-group {
			border-radius: var(--tipino-border-radius);
			overflow: hidden;
		}
		
		.tipino-track-card {
			background: var(--tipino-gradient-accent-light);
			overflow: hidden;
			color: var(--tipino-dark-text);
			transition: var(--tipino-transition);
			border-bottom: 1px solid var(--tipino-secondary);
		}
		
		.tipino-track-card:hover {
			background-color: rgb(from var(--tipino-white-card) r g b / 0.8);	
			
		}

		.tipino-track-card-inner {
			display: flex;
			padding: 10px;
			min-height: 87px;
		}
		
		.tipino-track-thumbnail {
			width: 80px;
			height: 80px;
			border-radius: var(--tipino-border-radius);
			overflow: hidden;
			margin-right: 20px;
			flex-shrink: 0;
		}
		
		.tipino-track-thumbnail-small {
			width: 40px;
			height: 40px;
			margin-right: 10px;
		}
		
		.tipino-track-card:hover .tipino-track-thumbnail {
			border-radius: var(--tipino-border-radius-hover);
		 }
		
		.tipino-track-thumbnail img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.tipino-track-card:hover .tipino-track-thumbnail img {
			transform: var(--tipino-transform);
		 }
		
		.tipino-artist-thumbnail {
			width: 80px;
			height: 80px;
			border-radius: var(--tipino-border-radius-50);
			overflow: hidden;
			margin-right: 20px;
			flex-shrink: 0;
		}

		
		.tipino-artist-thumbnail-small {
			width: 40px;
			height: 40px;
			margin-right: 10px;
		}
		
		.tipino-artist-thumbnail-large {
			width: 160px;
			height: 160px;
			margin-right: 10px;
		}
		
		.tipino-artist-thumbnail-100 {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		.tipino-track-card:hover .tipino-artist-thumbnail {
			border-radius: var(--tipino-border-radius-hover);
		 }
		
		.tipino-artist-thumbnail img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		.tipino-track-placeholder {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--tipino-white-text);
			border-radius: var(--tipino-border-radius);
			position: relative;
			overflow: hidden;
			background-color: var(--tipino-placeholder-bg, rgb(from var(--tipino-secondary) r g b / 0.25));
		}
		
		.tipino-track-placeholder--initials {
			font-size: 1rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			position: relative;
			z-index: 1;
			color: var(--tipino-white-text);
		}
		
		.tipino-track-placeholder--type-track,
		.tipino-track-placeholder--type-album {
			border-radius: var(--tipino-border-radius);
			--tipino-placeholder-bg: rgb(from var(--tipino-secondary) r g b / 0.28);
			--tipino-placeholder-logo: rgb(from var(--tipino-secondary-dark) r g b / 0.6);
		}
		
		.tipino-track-placeholder--type-artist {
			border-radius: var(--tipino-border-radius-50);
			--tipino-placeholder-bg: rgb(from var(--tipino-accent) r g b / 0.26);
			--tipino-placeholder-logo: rgb(from var(--tipino-accent-dark) r g b / 0.6);
		}
		
		.tipino-track-placeholder::before {
			content: '';
			position: absolute;
			inset: 0;
			background: var(--tipino-placeholder-logo, rgb(255 255 255 / 0.5));
			mask: url("./assets/images/tipino-logo-bw.svg") center/85% no-repeat;
			-webkit-mask: url("./assets/images/tipino-logo-bw.svg") center/85% no-repeat;
			opacity: 0.2;
		}

		.tipino-avatar-placeholder {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;
			border-radius: var(--tipino-border-radius-50);
			background-color: rgb(from var(--tipino-accent) r g b / 0.26);
			color: var(--tipino-white-text);
			font-size: 60px;
			font-weight: 600;
			text-transform: uppercase;
		}

		.tipino-avatar-placeholder::before {
			content: '';
			position: absolute;
			inset: 0;
			background: rgb(from var(--tipino-accent-dark) r g b / 0.6);
			mask: url("./assets/images/tipino-logo-bw.svg") center/85% no-repeat;
			-webkit-mask: url("./assets/images/tipino-logo-bw.svg") center/85% no-repeat;
			opacity: 0.2;
		}

		.tipino-avatar-placeholder span {
			position: relative;
			z-index: 1;
		}
		
		.tipino-track-placeholder--spotify,
		.tipino-track-placeholder--lastfm,
		.tipino-track-placeholder--default,
		.tipino-track-placeholder--amazonmusic,
		.tipino-track-placeholder--soundcloud,
		.tipino-track-placeholder--applemusic,
		.tipino-track-placeholder--deezer,
		.tipino-track-placeholder--tidal,
		.tipino-track-placeholder--youtubemusic,
		.tipino-track-placeholder--qobuz {
			background-color: inherit;
			color: inherit;
		}

		.tipino-user-song-image .tipino-track-placeholder {
			position: absolute;
			inset: 0;
		}
		
		.tipino-user-track-small-image-placeholder {
			width: 40px;
			height: 40px;
			font-size: 0.75rem;
		}
		
		.tipino-track-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			min-width: 0;
		}
		
		.tipino-track-header {
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			margin-bottom: 2px;
			gap: 10px;
		}

		.tipino-track-header:not(:first-child) {
			margin-top: 10px;
		}
			
		.tipino-track-title {
			font-weight: 600;
			margin-bottom: -10px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: var(--tipino-secondary);
			text-overflow: ellipsis;
		}
		
		.tipino-track-artist {
			margin: 0 0 3px 0;
			text-overflow: ellipsis;
		}

		.tipino-track-genres {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-bottom: 2px;
		}
		
		.tipino-track-stats {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10px;
			margin-top: 0;
		}
		
		.tipino-track-stat {
			font-size: var(--tipino-font-size-small);
			display: flex;
			gap: 4px;
			color: var(--tipino-dark-text);
			align-items: center;
		}

        .tipino-collab-badge {
            color: var(--tipino-accent-light);
        }
        
        .tipino-booster-badge {
            color: var(--tipino-accent);
        }
		/* ***************************** */
		/* //TRACK CARD                  */
		/* ***************************** */
		
		/* ***************************** */
		/* TEXT CARD                     */
		/* ***************************** */
		.tipino-card-text {
			display: flex;
			align-items: center;
			padding: 10px 15px;
			background: var(--tipino-gradient-secondary);
			border-radius: var(--tipino-border-radius);
			transition: var(--tipino-transition);
			margin-bottom: 10px;
			color: var(--tipino-text);
		}
		
		.tipino-card-text-vertical {
			flex-direction: column;
			align-items: flex-start !important; 
		}
		
		.tipino-vertical {
			flex-direction: column;
			align-items: flex-start !important; 
		}
		
		.tipino-sidebar-card-text {
			display: flex;
			align-items: center;
			padding: 10px 15px;
			background: var(--tipino-gradient-secondary);
			border-radius: var(--tipino-border-radius);
			transition: var(--tipino-transition);
		}
		


		/* ***************************** */
		/* //TEXT CARD                   */
		/* ***************************** */

		
		/* ***************************** */
		/* MOST LISTENED GENRES CARD     */
		/* ***************************** */
		.tipino-genres-grid {
					display: grid !important;
					grid-template-columns: repeat(4, 1fr) !important;
					gap: 25px !important;
					position: relative;
					}

				.tipino-inner-card {
					border-radius: var(--tipino-border-radius);
					padding: 10px;
					transition: var(--tipino-transition);
					position: relative;
					overflow: hidden;
					background: var(--tipino-gradient-card-light);
					color: var(--tipino-text);
				}

				.tipino-inner-card:hover {
					transform: var(--tipino-transform);
				}

				.tipino-genre-header {
					display: flex;
					align-items: center;
					margin-bottom: 10px;
				}

				.tipino-genre-plays {
					font-size: var(--tipino-font-size-small);
				}

				.tipino-genre-content {
					display: grid !important;
					grid-template-columns: repeat(1, 1fr) !important;
					gap: 15px;
				}

				.tipino-genre-highlight {
					background: var(--tipino-gradient-accent-light);
					border-radius: var(--tipino-border-radius);
					padding: 10px;
					display: flex;
					flex-direction: column;
					min-height: 100px;
				}

				.tipino-highlight-label {
					font-size: var(--tipino-font-size-normal);
					font-weight: 600;
					color: var(--tipino-secondary);
					flex-shrink: 0;
				}

				.tipino-highlight-content {
					display: flex;
					align-items: center;
					flex: 1;
				}

				.tipino-genre-artist-info,
				.tipino-genre-track-info {
					min-width: 0; 

					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 1;
				}

				.tipino-genre-track-artist {
					font-size: var(--tipino-font-size-small);
					color: var(--tipino-dark-text);
					text-overflow: ellipsis;
				}

				.tipino-genre-play-count {
					font-size: var(--tipino-font-size-small);
					color: var(--tipino-dark-text);
				}
		/* ***************************** */
		/* //MOST LISTENED GENRES CARD   */
		/* ***************************** */	
		
/* ***************************** */
/* //2/3 STYLES                  */
/* ***************************** */

/* ***************************** */
/* 1/3 STYLES                    */
/* ***************************** */
		.tipino-sidebar-section {
			
		}

		.tipino-sidebar-section:last-of-type {
			
		}

		/* ***************************** */
		/* SIDEBAR RANK                  */
		/* ***************************** */
		
		/* Artist Payouts */
		.tipino-sidebar-payouts-month {
			font-size: var(--tipino-font-size-normal);
			color: var(--tipino-white-text);
			opacity: 0.8;
		}
		
		.tipino-sidebar-payouts-summary {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20px;
			padding-bottom: 15px;
		}
		
		.tipino-sidebar-total-payout, .tipino-sidebar-artists-count {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
		
		.tipino-sidebar-total-payout, .tipino-sidebar-artists-count {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
		
		.tipino-sidebar-total-label, .tipino-sidebar-artists-label {
			font-size: var(--tipino-font-size-small);
			color: var(--tipino-text);
			opacity: 0.7;
			margin-bottom: 5px;
		}
		
		.tipino-sidebar-total-value {
			font-size: var(--tipino-font-size-large);
			font-weight: 600;
			color: var(--tipino-accent);
		}
		
		.tipino-sidebar-total-label, .tipino-sidebar-artists-label {
			font-size: var(--tipino-font-size-small);
			color: var(--tipino-text);
			opacity: 0.7;
			margin-bottom: 5px;
		}
		
		.tipino-sidebar-artists-value {
			font-size: var(--tipino-font-size-large);
			font-weight: 600;
			color: var(--tipino-primary);
		}
		
		.tipino-sidebar-legend-container {
			margin-bottom: 20px;
		}
		
		.tipino-sidebar-legend-item,
		.tipino-sidebar-legend-others {
			display: flex;
			align-items: center;
			padding: 6px 8px;
			border-radius: var(--tipino-border-radius);
			transition: var(--tipino-transition);
			text-decoration: none;
			color: var(--tipino-accent);
		}

		.tipino-sidebar-legend-item:hover {
			background-color: rgb(from var(--tipino-card) r g b / 0.1);
			transform: var(--tipino-transform);
		}

		.tipino-sidebar-legend-color {
			width: 12px;
			height: 12px;
			border-radius: var(--tipino-border-radius-50);
			margin-right: 8px;
			flex-shrink: 0;
		}

		.tipino-sidebar-legend {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}
		
		.tipino-sidebar-legend-label {
			flex: 1;
			font-size: var(--tipino-font-size-normal);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.tipino-sidebar-legend-percentage {
			font-size: var(--tipino-font-size-normal);
			font-weight: 600;
			color: var(--tipino-accent);
			margin-left: 5px;
		}
		/* //Artist Payouts */
		
		/* Recent Artists                */
		.tipino-sidebar-artist-stats {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: var(--tipino-font-size-small);
			color: var(--tipino-text);
		}
		
		.tipino-sidebar-artist-stat {
			display: flex;
			align-items: center;
			gap: 4px;
		}
		
		.tipino-sidebar-artist-date {
			display: flex;
			align-items: center;
			font-style: italic;
		}
		
		.tipino-sidebar-artist-image-container {
			width: 40px;
			height: 40px;
			border-radius: var(--tipino-border-radius-50);
			overflow: hidden;
			margin-right: 12px;
			flex-shrink: 0;
			position: relative;
			transition: var(--tipino-transition);
		}
		
		.tipino-sidebar-artist-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: var(--tipino-transition);
		}

		.tipino-sidebar-list {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}
		
		.tipino-sidebar-card {
			display: flex;
			align-items: center;
			padding: 10px 5px;
			background: var(--tipino-gradient-card-light);
			border-radius: var(--tipino-border-radius);
			transition: var(--tipino-transition);
			position: relative;
			padding-left:10px;
			padding-right:10px;
		}
		
		.tipino-sidebar-card-margin-bottom {
			margin-bottom: 10px;
		}

		.tipino-sidebar-card::before {
			content: "";
			position: absolute;
			z-index: -1;
			inset: 0;
			border-radius: inherit;
			border: 1px solid transparent;
			background: linear-gradient(rgb(from var(--tipino-secondary-dark) r g b / 0.25), rgb(from var(--tipino-secondary) r g b / 0.25)) border-box;
			mask: linear-gradient(var(--tipino-black), var(--tipino-black)) border-box, linear-gradient(var(--tipino-black), var(--tipino-black)) padding-box;
			mask-composite: subtract;
		}
		/* //Recent Artists                */
		
		/* Genre Name                    */
		.tipino-sidebar-genre-name {
			font-size: var(--tipino-font-size-normal);
			font-weight: 600;
			margin-bottom: 4px;
			color: var(--tipino-text);
			text-decoration: none;
			text-transform: capitalize;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: block;
		}
		
		.tipino-sidebar-genre-name:hover {
			text-decoration:underline;
			color: var(--tipino-secondary-extra-light);
		}
		/* //Genre Name                    */
				
		.tipino-color-circle {
			width: 40px;
			height: 40px;
			border-radius: var(--tipino-border-radius-50);
			background: var(--tipino-gradient-accent);
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			margin-right: 10px;
			flex-shrink: 0;
			font-size: var(--tipino-font-size-medium);
		}
		
		.tipino-sidebar-content {
			flex: 1;
			min-width: 0;
			font-size: var(--tipino-font-size-normal);
		}
		
		.tipino-sidebar-genre-plays {
			font-size: var(--tipino-font-size-small);
			color: var(--tipino-accent);
			align-items: center;
			gap: 4px;
			white-space: nowrap;
			display: flex;
		}
		
		.tipino-color-circle-accent {
			background: var(--tipino-gradient-accent);
			color: var(--tipino-white-text);
		}
		
		.tipino-color-circle-primary {
			background: linear-gradient(to right, var(--tipino-primary), var(--tipino-primary-light));
			color: var(--tipino-white-text);
		}
		
		.tipino-color-circle-secondary {
			background: linear-gradient(to right, var(--tipino-secondary), var(--tipino-secondary-light));
			color: var(--tipino-white-text);
		}
		
		.tipino-view-all-link {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: var(--tipino-font-size-normal);
			color: var(--tipino-accent);
			text-decoration: none;
			padding: 5px 0;
			border-top: 1px solid rgb(from var(--tipino-accent) r g b / 0.5);
			transition: var(--tipino-transition);
		}
		
		.tipino-view-all-link:hover {
			text-decoration: underline;
		}
		/* ***************************** */
		/* //SIDEBAR RANK                */
		/* ***************************** */
		
		/* ***************************** */
		/* SIDEBAR TOP TRACKS            */
		/* ***************************** */
		.tipino-sidebar-card-track {
			display: flex;
			align-items: flex-start;
			padding: 10px 5px;
			background: var(--tipino-gradient-card-light);
			border-radius: var(--tipino-border-radius);
			transition: var(--tipino-transition);
			position: relative;
			flex-wrap: wrap;
		}

		.tipino-sidebar-content-track {
			flex: 1;
			min-width: 0;
			font-size: var(--tipino-font-size-normal);
			display: flex;
			flex-direction: column;
		}
		
		.tipino-sidebar-content-track > .tipino-text-primary {
			line-height: 1.2; 
		}
		
		.tipino-sidebar-content-track .tipino-sidebar-track-stat.tipino-text-extra-small {
			margin-bottom: 0;
		}

		.tipino-sidebar-track-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 8px;
		}
		
		.tipino-sidebar-track-header h4 {
			margin: 0;
			margin-bottom: 0;
		}
		
		.tipino-sidebar-song-plays {
			display: flex;
			align-items: center;
			font-style: italic;
			color: var(--tipino-dark-text);
			font-size: var(--tipino-font-size-small);
		}

		.tipino-sidebar-song-plays span {
			display: flex;
			align-items: center;
			gap: 4px;
		}

		.tipino-artist-plays-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 10px;
		}

		.tipino-artist-plays-row .tipino-user-song-small-artist {
			flex: 1;
			min-width: 0; 
			}

		.tipino-artist-plays-row .tipino-sidebar-song-plays {
			flex-shrink: 0; 
			white-space: nowrap;
		}
		/* Track title link */
		.tipino-track-link {
			color: var(--tipino-secondary);
			text-decoration: none;
			font-weight: 600;
			flex: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			min-width: 0;
		}

		.tipino-track-link:hover {
			text-decoration: underline;
		}

		.tipino-sidebar-track-stats {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: var(--tipino-font-size-small);
			color: var(--tipino-dark-text);
			gap: 15px;
			margin-left: -55px;
			margin-top: 8px;
		}

		.tipino-sidebar-track-stat {
			display: flex;
			align-items: center;
			gap: 4px;
		}

		.tipino-sidebar-track-stat span {
			display: flex;
			align-items: center;
			gap: 4px;
			white-space: nowrap;
		}
		/* ***************************** */
		/* //SIDEBAR TOP TRACKS          */
		/* ***************************** */
		
		/* ***************************** */
		/* ACHIEVEMENTS          */
		/* ***************************** */
		.tipino-sidebar-achievement-image-wrapper {
			flex-shrink: 0;
			width: 40px;
			height: 40px;
			margin-right: 10px;
		}

		.tipino-sidebar-achievement-image-container {
			width: 40px;
			height: 40px;
			border-radius: var(--tipino-border-radius-50);
			overflow: hidden; /* This is important to hide the parts of the image that extend beyond the container */
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* Add this new rule for the images inside the container */
		.tipino-sidebar-achievement-image-container img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			/* Scale up the image to crop out transparent borders */
			transform: scale(1.4); /* Adjust this value - higher = more cropping */
		}

		.tipino-sidebar-achievement-small-content {
			flex-grow: 1;
			min-width: 0;
		}

		.tipino-sidebar-achievement-small-title {
			font-size: 14px;
			font-weight: 600;
			margin: 0 0 5px;
			color: var(--tipino-accent);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.tipino-sidebar-achievement-small-date {
			display: flex;
			align-items: center;
			gap: 5px;
			font-size: 12px;
			color: var(--tipino-text);
		}
		
		/* New Achievement Card Styles */
        .tipino-achievements-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            align-items: stretch;
        }

        .tipino-achievement-card {
            background: var(--tipino-gradient-card-light);
            border-radius: var(--tipino-border-radius);
            padding: 20px;
            transition: var(--tipino-transition);
            position: relative;
            overflow: hidden;
        }
		
		.tipino-achievement-card.tipino-hidden-achievements-card {
			background: rgb(from var(--tipino-accent-light) r g b / 0.3);
		}

        .tipino-achievement-card:hover {
            transform: var(--tipino-transform);
        }

        .tipino-achievement-card-content {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 20px;
        }

        .tipino-achievement-icon-container {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            border-radius: var(--tipino-border-radius-50);
            background: linear-gradient(135deg, var(--tipino-secondary-light), var(--tipino-primary-light));
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--tipino-white-text);
        }
		
        .tipino-achievement-card.unearned {
            opacity: 0.5;
        }
		
		.tipino-achievement-card.unearned h4.tipino-achievement-title {
			color: var(--tipino-gray-text);
		}

        .tipino-achievement-card.unearned .tipino-achievement-icon-container {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            border-radius: var(--tipino-border-radius-50);
            background: linear-gradient(135deg, var(--tipino-gray-card), var(--tipino-card));
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--tipino-gray-text);
        }
		
		.tipino-achievement-card.unearned .tipino-achievement-icon-container img {
			filter: grayscale(100%);
		}
		
		.tipino-achievement-card.hidden {
            background: rgb(from var(--tipino-accent-light) r g b / 0.3);
            border-radius: var(--tipino-border-radius);
            padding: 20px;
            transition: var(--tipino-transition);
            position: relative;
            overflow: hidden;
        }		
		
		.tipino-achievement-card.hidden .tipino-achievement-icon-container {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            border-radius: var(--tipino-border-radius-50);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--tipino-accent);
        }

        .tipino-achievement-text-content {
            flex: 1;
            min-width: 0;
        }

        .tipino-achievement-title {
            font-size: var(--tipino-font-size-medium);
            font-weight: 600;
            color: var(--tipino-accent);
            margin: 0 0 8px 0;
            font-family: var(--tipino-heading-font-family);
        }

        .tipino-achievement-description {
            font-size: var(--tipino-font-size-normal);
            color: var(--tipino-text);
            line-height: 1.5;
            margin: 0;
        }

        /* Progress Section */
        .tipino-achievement-stats {
            border-top: 1px solid rgb(from var(--tipino-accent) r g b / 0.2);
            padding-top: 15px;
            margin-top: auto;
        }

        .tipino-achievement-rate-text {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: var(--tipino-font-size-small);
            color: var(--tipino-text);
            margin-bottom: 10px;
        }

        .tipino-achievement-rate-text svg {
            color: var(--tipino-accent);
            flex-shrink: 0;
        }

        .tipino-achievement-progress-container {
            position: relative;
        }

        .tipino-achievement-progress-bar {
            width: 100%;
            height: 8px;
            background: rgb(from var(--tipino-card) r g b / 0.3);
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }

        .tipino-achievement-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--tipino-accent), rgb(from var(--tipino-accent) r g b / 0.8));
            border-radius: 4px;
            transition: width 0.8s ease-out;
            position: relative;
        }

        .tipino-achievement-progress-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tipino-white) 30%, transparent), transparent);
        }


        .tipino-achievement-percentage {
            font-size: var(--tipino-font-size-small);
            font-weight: 600;
            color: var(--tipino-accent);
            background: rgb(from var(--tipino-secondary) r g b / 0.9);
            padding: 2px 8px;
            border-radius: var(--tipino-border-radius);
            border: 1px solid var(--tipino-accent);
        }
		/* ***************************** */
		/* // ACHIEVEMENTS        */
		/* ***************************** */
		
		/* ***************************** */
		/* SIDEBAR PAYOUTS / TIPS        */
		/* ***************************** */
		.tipino-user-payout-summary-row {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 20px;
			gap: 15px;
		}
		
		.tipino-user-payout-summary-row .tipino-user-payout-small-total,
		.tipino-user-payout-summary-row .tipino-user-payout-small-artists {
			flex: 1;
			min-width: 0;
		}

		.tipino-user-payout-small-total,
		.tipino-user-payout-small-artists {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			flex: 1;
		}	
		
		
		.tipino-user-payout-small-container {
			margin-bottom: 0px;
		}
		
		.tipino-user-payout-small-total,
		.tipino-user-payout-small-artists {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
		
		.tipino-user-payout-small-total-label,
		.tipino-user-payout-small-artists-label {
			font-size: 12px;
			color: var(--tipino-text);
			margin-bottom: 3px;
		}
		
		.tipino-user-payout-small-total-value {
			font-size: 16px;
			font-weight: 600;
			color: var(--tipino-white-text);
		}
		
		.tipino-user-payout-small-artists-value {
			font-size: 16px;
			font-weight: 600;
		}
		
		.tipino-user-payout-small-chart-container {
			margin-bottom: 15px;
			position: relative;
			width: 100% !important;
			max-width: 100% !important;
			overflow: hidden;
		}
		
		.tipino-user-payout-small-chart {
			height: 150px;
			margin-bottom: 5px;
			position: relative;
			width: 100% !important;
			max-width: 100% !important;
		}
		
		canvas[id^="tipino-user-payout-small-chart"] {
			min-height: 245px !important;
			max-height: 245px !important;
			height: 245px !important;
			max-width: 245px !important;
			width: 245px !important;
			margin: 0 auto;
		}
		
		.tipino-user-payout-small-chart {
			height: 245px;
			margin-bottom: 5px;
			position: relative;
			width: 100% !important;
			max-width: 100% !important;
		}
		
		.tipino-chart-legend-container {
			margin-top: 5px;
			margin-bottom: 10px;
			padding-top: 5px;
		}
		
		.tipino-chart-legend {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 6px;
			font-size: 10px;
		}
		
		.tipino-chart-legend-item {
			display: flex;
			align-items: center;
			cursor: pointer;
			padding: 2px 5px;
			border-radius: 3px;
			transition: var(--tipino-transition);
		}

		.tipino-chart-legend-item:hover {
			background-color: rgb(from var(--tipino-card) r g b / 0.1);
		}

		.tipino-chart-legend-item-hidden {
			opacity: 0.5;
		}
		
		.tipino-chart-legend-color {
			display: block;
			width: 10px;
			height: 10px;
			border-radius: var(--tipino-border-radius-50);
			margin-right: 4px;
			flex-shrink: 0;
		}
		
		.tipino-chart-legend-label {
			margin-right: 4px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.tipino-chart-legend-percentage {
			font-weight: 600;
			color: var(--tipino-accent);
		}
		
		.tipino-user-top-artist-small {
			margin-top: 10px;
			padding-top: 10px;
			border-top: 1px solid rgb(from var(--tipino-secondary) r g b / 0.1);
		}

		.tipino-user-top-artist-small-label {
			font-size: 14px;
			font-weight: 600;
			color: var(--tipino-accent);
			margin-bottom: 10px;
		}

		.tipino-user-top-artist-small-bar-container {
			width: 100%;
			height: 6px;
			background-color: rgb(from var(--tipino-card) r g b / 0.5);
			border-radius: 3px;
			overflow: hidden;margin-top: 5px;
		}

		.tipino-user-top-artist-small-bar {
			height: 100%;
			background-color: var(--tipino-primary);
			border-radius: 3px;
		}
		/* ***************************** */
		/* //SIDEBAR PAYOUTS / TIPS      */
		/* ***************************** */
		
		/* ***************************** */
		/* USER INVITATION        	     */
		/* ***************************** */
		.tipino-invitation-link-container {
			width: 100%;
			display: flex;
			margin-bottom: 10px;
			margin-top: 10px;
		}

		.tipino-invitation-link {
			flex: 1;
			padding: 8px 12px;
			background: none;
			border-top-left-radius: var(--tipino-border-radius);
			border-bottom-left-radius: var(--tipino-border-radius);
			color: var(--tipino-text);
			font-size: var(--tipino-font-size-normal);
			border-width: 1px;
			border-color: var(--tipino-accent);
		}
		
		.tipino-invitation-link input:focus {
            border-color: var(--tipino-primary);
            outline: none;
			background: var(--tipino-gradient-primary-light);
        }

		.tipino-copy-link-button {
			align-items: center;
			padding: 5px 5px;
			border: none;
			border-top-right-radius: var(--tipino-border-radius);
			border-bottom-right-radius: var(--tipino-border-radius);
			background: var(--tipino-gradient-accent);
			color: var(--tipino-secondary);
			cursor: pointer;
			transition: var(--tipino-transition);
		}

		.tipino-copy-link-button:hover {
			background: var(--tipino-gradient-accent-light);
		}

		.tipino-invitation-success {
			display: flex;
			align-items: center;
			gap: 6px;
			font-size: 14px;
			color: var(--tipino-success);
			margin-top: 8px;
		}

		.tipino-invitation-stats-item {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.tipino-invitation-stats-value {
			font-size: 24px;
			font-weight: 700;
			color: var(--tipino-accent);
		}

		.tipino-invitation-stats-label {
			font-size: 12px;
			color: var(--tipino-text);
		}
		
		/* ***************************** */
		/* //USER INVITATION             */
		/* ***************************** */
/* ***************************** */
/* //1/3 STYLES                    */
/* ***************************** */
		

		/* ***************************** */
		/* PLATFORM TRACK LINKS          */
		/* ***************************** */
		.tipino-track-button {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			background-color: var(--tipino-white-card);
			color: var(--tipino-black-text);
			border-radius: var(--tipino-border-radius);
			padding: 3px 5px;
			font-size: var(--tipino-font-size-extra-small);
			font-weight: 500;
			text-decoration: none;
			transition: var(--tipino-transition);
			white-space: nowrap;
			justify-self: end;
			border: var(--tipino-white-card) 1px solid;
			min-width: 120px;
		}
		
		.tipino-track-button svg,
		.tipino-track-button img {
			flex-shrink: 0;
		}

		.tipino-track-button img {
			width: 20px;
			height: 20px;
		}
		
		.tipino-track-button:hover {
			transform: var(--tipino-transform);
		}
		
		.tipino-track-button--spotify {
			border-color: var(--tipino-spotify);
		}
		
		.tipino-track-button--lastfm {
			border-color: var(--tipino-lastfm);
		}

		.tipino-track-button--tidal {
			border-color: var(--tipino-tidal);
		}

		.tipino-track-button--qobuz {
			border-color: var(--tipino-qobuz);
		}

		.tipino-track-button--amazonmusic {
			border-color: var(--tipino-amazonmusic);
		}

		.tipino-track-button--soundcloud {
			border-color: var(--tipino-soundcloud);
		}

		.tipino-track-button--applemusic {
			border-color: var(--tipino-applemusic);
		}

		.tipino-track-button--deezer {
			border-color: var(--tipino-deezer);
		}

		.tipino-track-button--youtubemusic {
			border-color: var(--tipino-youtubemusic);
		}

		.tipino-track-button--default {
			border-color: rgb(from var(--tipino-card) r g b / .8);
		}
		
		.tipino-spotify-button {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			background-color: var(--tipino-spotify);
			color: var(--tipino-white-text);
			border-radius: var(--tipino-border-radius);
			padding: 3px 5px;
			font-size: var(--tipino-font-size-extra-small);
			font-weight: 500;
			text-decoration: none;
			transition: var(--tipino-transition);
			white-space: nowrap;
			justify-self: end;
			border:rgb(from var(--tipino-card) r g b / 1) 1px solid;
		}
		
		.tipino-spotify-button:hover {
			background-color: var(--tipino-spotify);
			transform: var(--tipino-transform);
		}
		
		.tipino-connect-spotify-button {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: var(--tipino-spotify);
			color: var(--tipino-white-text);
			border-radius: var(--tipino-border-radius);
			padding: 10px;
			font-size: var(--tipino-font-size-medium);
			font-weight: 500;
			text-decoration: none;
			transition: var(--tipino-transition);
			white-space: nowrap;
			border: rgb(from var(--tipino-card) r g b / 1) 1px solid;
		}
		
		.tipino-connect-spotify-button:hover {
			background-color: var(--tipino-spotify);
			transform: var(--tipino-transform);
		}
		
		/* PLATFORM BUTTON MINIMIZED FOR SIDEBAR USE  */
		.tipino-sidebar-button {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			background-color: var(--tipino-white-card);
			color: var(--tipino-black-text);
			border-radius: var(--tipino-border-radius);
			padding: 3px 5px;
			font-size: var(--tipino-font-size-extra-small);
			font-weight: 500;
			text-decoration: none;
			transition: var(--tipino-transition);
			white-space: nowrap;
			justify-self: end;
			border: var(--tipino-white-card) 1px solid;
		}

		.tipino-sidebar-button img {
			width: 15px;
			height: 15px;
			flex-shrink: 0;
		}

		.tipino-sidebar-button:hover {
			background-color: var(--tipino-card);
			transform: var(--tipino-transform);
		}
		/* ***************************** */
		/* //SPOTIFY BUTTON              */
		/* ***************************** */
	
		/* ***************************** */
		/* BUTTONs                       */
		/* ***************************** */
		.tipino-button {
			display: flex;
			justify-content: center;
			align-items: center;
			background: var(--tipino-gradient-accent);
			color: var(--tipino-white-text);
			border-radius: var(--tipino-border-radius);
			padding: 10px;
			font-size: var(--tipino-font-size-medium);
			font-weight: 500;
			text-decoration: none;
			transition: var(--tipino-transition);
			white-space: nowrap;
			border: rgb(from var(--tipino-card) r g b / 1) 1px solid;
			white-space: normal;
			text-align: center;
		}
		
		.tipino-button:hover {
			background-color: rgb(from var(--tipino-white-card) r g b / 0.5);	
			transform: var(--tipino-transform);
		}
		
		.tipino-button-group-column {
			display: flex;
			flex-direction: column;
			gap: 10px;
			align-items: center;
		}
		
		.tipino-button-group-line {
			display: flex;
			gap: 10px;
		}
		/* ***************************** */
		/* //BUTTONs                     */
		/* ***************************** */
		
		
        /* ***************************** */
		/* ACHIEVEMENTS BADGE            */
		/* ***************************** */
        /* Base Badge Styles */
        .achievement-badge {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: var(--tipino-transition);
            cursor: pointer;
        }

        .achievement-badge:hover {
            transform: var(--tipino-transform);
        }

        .achievement-badge::before {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            padding: 4px;
            mask: linear-gradient(var(--tipino-black-card), var(--tipino-black-card)) content-box, linear-gradient(var(--tipino-black-card), var(--tipino-black-card));
            mask-composite: exclude;
        }

        .hidden-badge {
            background: linear-gradient(135deg, var(--tipino-accent), var(--tipino-primary));
        }

        .hidden-badge::before {
            content: '';
            background: linear-gradient(135deg, var(--tipino-primary), var(--tipino-accent));
        }

        .public-badge {
            background: linear-gradient(135deg, var(--tipino-secondary), var(--tipino-primary));
        }

        .public-badge::before {
            content: '';
            background: linear-gradient(135deg, var(--tipino-primary), var(--tipino-secondary));
        }

        .inactive-badge {
            background: linear-gradient(135deg, var(--tipino-gray-card), var(--tipino-dark-card));
        }

        .inactive-badge::before {
            content: '';
            background: linear-gradient(135deg, var(--tipino-dark-card), var(--tipino-gray-card));
        }

        /* Icon Styles */
        .badge-icon {
            color: var(--tipino-white);
            font-size: 3rem;
            text-shadow: 0 2px 8px rgb(from var(--tipino-black-card) r g b / 0.3);
        }
        /* ***************************** */

		/* //ACHIEVEMENTS BADGE          */
		/* ***************************** */
		
		/* ***************************** */
		/* STATS CARD                    */
		/* ***************************** */
		.tipino-stats-grid-2 {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 15px;
			width: 100%;
		}
		
		.tipino-stats-grid-3 {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15px;
			width: 100%;
		}
		
		.tipino-stats-grid-4 {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 15px;
			width: 100%;
		}
		
		.tipino-stats-grid-5 {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 15px;
			width: 100%;
		}
		
		.tipino-stats-grid-67 {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
			gap: 15px;
		}	
		
		.tipino-stats-grid-100 {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
			gap: 15px;
		}

		.tipino-stat-card {
			display: flex;
			align-items: center;
			padding: 5px;
			background: var(--tipino-gradient-card);
			border-radius: var(--tipino-border-radius);
			transition: var(--tipino-transition);
		}	

		.tipino-stat-icon {
			width: 40px;
			height: 40px;
			border-radius: var(--tipino-border-radius);
			background: var(--tipino-gradient-accent);
			color: var(--tipino-white-text);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10px;
			flex-shrink: 0;
		}	

		.tipino-stat-content {
			flex: 1;
		}	

		.tipino-stat-value {
			font-size: 1.1rem;
			font-weight: 600;
			color: var(--tipino-accent);
			margin-bottom: 2px;
		}	

		.tipino-stat-label {
			font-size: 0.9rem;
			font-weight: 600;
			color: var(--tipino-secondary);
			margin-bottom: 3px;
		}	

		.tipino-last-updated {
			text-align: right;
			font-size: var(--tipino-font-size-extra-small);
			color: var(--tipino-text);
			opacity: 0.7;
			font-style: italic;
		}
		
		.tipino-new-artists-grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 15px;
		}

		.tipino-new-artists-card {
			width: 100%;
			background: var(--tipino-gradient-card);
			border-radius: var(--tipino-border-radius);
			overflow: hidden;
			transition: var(--tipino-transition);
			margin-bottom: 0;
		}

		.tipino-new-artist-image-wrapper {
			width: 100%;
			padding-top: 100%;
			position: relative;
			margin-bottom: 0;
		}

		.tipino-new-artist-image-container {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: var(--tipino-border-radius-50);
			overflow: hidden;
			flex-shrink: 0;
		}

		.tipino-new-artist-image-wrapper .tipino-new-artist-image-container {
			position: absolute;
			top: 10%;
			left: 10%;
			width: 80%;
			height: 80%;
		}

		.tipino-new-artist-content {
			padding: 0px 12px 12px;
			text-align: left;
		}


		.tipino-new-artist-stats {				
			display: flex;
			justify-content: space-between;
			gap: 12px;
		}

		.tipino-new-artist-stat {
			display: flex;
			align-items: center;
			gap: 6px;
			font-size: var(--tipino-font-size-small);
			color: var(--tipino-dark-text);
		}

		.tipino-new-artist-popularity-stat {
			margin-left: auto;
		}
		/* ***************************** */
		/* //STATS CARD                  */
		/* ***************************** */
		
		/* ***************************** */
		/* FORM ELEMENTS                 */
		/* ***************************** */
		#tipino-login-form {
			width: 100% !important;
			max-width: none !important;
			display: block;
		}
		
		/* FIRST SETUP CARD */
		.tipino-setup-card {
			background: var(--tipino-gradient-card-light);
			border-radius: var(--tipino-border-radius);
			margin-bottom: 10px;
			overflow: visible;
			position: relative;
		}
		
		h3.tipino-setup-card-title {
			color: var(--tipino-accent-light);
		}
		
		.tipino-setup-card-header {
			padding-left: 20px;
			padding-top: 20px;
			padding-bottom: 10px;
			display: flex;
			align-items: center;
		}
		
		.tipino-setup-card-header svg {
			margin-right: 0.75rem;
			color: var(--tipino-accent-light);
		}
		
		.tipino-setup-card-header-stacked {
			padding-left: 20px;
			padding-top: 20px;
			padding-bottom: 10px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}

		.tipino-setup-card-header-stacked svg {
			margin-right: 0.75rem;
			color: var(--tipino-accent-light);
		}

		.tipino-setup-card-header-stacked h3 {
			margin: 0;
			color: var(--tipino-accent-light);
		}

		.tipino-setup-card-header-stacked p {
			width: 100%;
			margin-top: 10px;
			margin-bottom: 0;
			margin-left: 0;
			color: var(--tipino-text);
		}	

		.tipino-header-top {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
		}
		
		.tipino-setup-card-content {
			position: relative;
			padding-left: 20px;
			padding-right: 20px;
			overflow: visible;
			padding-bottom: 1px; /* To future me: Prevents margin collapsing for child elements. Do not remove. Ever. In any case. Ever. */
		}
		
		.tipino-help-text {
			margin-top: 4px;
			font-size: 12px;
			color: var(--tipino-text);
			font-style: italic;
		}
		
		.tipino-tooltip {
			position: relative;
			display: inline-flex;
			margin-left: 6px;
			color: var(--tipino-accent-light);
			cursor: help;
		}

		.tipino-tooltip-text {
			visibility: hidden;
			width: 250px;
			background: var(--tipino-gradient-accent-light);
			color: var(--tipino-secondary);
			text-align: center;
			border-radius: var(--tipino-border-radius);
			padding: 8px;
			position: absolute;
			z-index: 1;
			bottom: 125%;
			left: 50%;
			transform: var(--tipino-transform);
			opacity: 0;
			transition: var(--tipino-transition);
			font-size: var(--tipino-font-size-small);
			font-weight: normal;
		}

		.tipino-tooltip:hover .tipino-tooltip-text {
			visibility: visible;
			opacity: 1;
		}

		.tipino-tooltip-text::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: var(--tipino-dark-text) transparent transparent transparent;
		}
		
		.tipino-spotify-connection-options {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1rem;
		}
		
		.tipino-spotify-connect-button {
			background-color: var(--tipino-spotify);
			color: var(--tipino-white);
			border: none;
			border-radius: 30px;
			padding: 10px 20px;
			font-size: 1rem;
			font-weight: 600;
			cursor: pointer;
			display: flex;
			align-items: center;
			transition: background-color 0.3s;
		}
		
		.tipino-spotify-connect-button svg {
			margin-right: 8px;
		}
		
		.tipino-spotify-connect-button:hover {
			background-color: #1ed760;
		}
		
		/* FIRST SETUP CARD */

		/* ARTIST SELECT /*
		
		/* Container for the Artist Select */
		.tipino-artist-select-container {
			position: relative;
			width: 100%;
		}
		
		.tipino-artist-select-container .tipino-input,
		.tipino-artist-select-container .artist-search-input {
			padding-right: 45px; /* Make space for the clear button */
		}

		/* Input Field */
		.tipino-copy-main-artist-btn {
			background-color: transparent;
			border: none;
			color: var(--tipino-accent);
			font-size: 12px;
			display: inline-flex;
			align-items: center;
			padding: 2px 5px;
			border-radius: var(--tipino-border-radius);
			margin-left: 8px;
			cursor: pointer;
			transition: all 0.2s;
		}
		
		.artist-clear-btn {
			position: absolute;
			right: 8px;
			top: 50%;
			transform: translateY(-50%);
			background: none;
			border: none;
			padding: 6px;
			cursor: pointer;
			border-radius: var(--tipino-border-radius);
			color: var(--tipino-text);
			transition: var(--tipino-transition);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 28px;
			height: 28px;
			z-index: 5; /* Ensure it's above the input but below dropdown */
		}

		.artist-clear-btn:hover {
			background-color: rgb(from var(--tipino-primary) r g b / 0.1);
			color: var(--tipino-primary);
			transform: translateY(-50%) scale(1.1);
		}

		.artist-clear-btn:active {
			transform: translateY(-50%) scale(0.95);
		}

		.artist-clear-btn svg {
			width: 16px;
			height: 16px;
			pointer-events: none; /* Prevent SVG from interfering with click events */
		}

		.tipino-copy-main-artist-btn:hover {
			background-color: var(--tipino-accent);
		}

		.tipino-copy-main-artist-btn svg {
			margin-right: 4px;
		}
		
		.artist-dropdown,
		.tipino-artist-dropdown {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background: var(--tipino-white-card);
			border: 1px solid var(--tipino-text);
			border-top: none;
			border-radius: 0 0 8px 8px;
			max-height: 300px;
			overflow-y: auto;
			z-index: 1000; 
			display: none;
		}
			
		.artist-dropdown.active,
		.tipino-artist-dropdown.active {
			display: block;
			animation: slideDown 0.2s ease-out;
		}
		
		@keyframes slideDown {
			from {
				opacity: 0;
				transform: translateY(-10px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
		
		/* Artist Item Styles */
		.artist-item,
		.tipino-artist-item {
			display: flex;
			align-items: center;
			padding: 10px 15px;
			cursor: pointer;
			transition: background-color 0.2s;
			border-bottom: 1px solid color-mix(in srgb, var(--tipino-text) 20%, transparent);
		}

		.artist-item:hover,
		.tipino-artist-item:hover {
			background-color: color-mix(in srgb, var(--tipino-accent) 10%, transparent);
		}
		

		.artist-item.artist-loading {
			justify-content: center;
			color: var(--tipino-text);
			font-style: italic;
			cursor: default;
		}

		.artist-item.no-results {
			justify-content: center;
			color: var(--tipino-text);
			cursor: default;
		}

		.artist-item.no-results:hover {
			background-color: transparent;
		}

		/* Artist Item None (Clear) */
		.artist-item-none {
			background-color: color-mix(in srgb, var(--tipino-primary) 5%, transparent);
			border-bottom: 2px solid var(--tipino-primary);
		}

		.artist-item-none:hover {
			background-color: color-mix(in srgb, var(--tipino-primary) 10%, transparent);
		}

		.artist-item-clear-icon {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: var(--tipino-primary);
			border-radius: 50%;
			margin-right: 12px;
			color: var(--tipino-white);
		}

		.artist-item-divider {
			height: 1px;
			background: var(--tipino-text);
			opacity: 0.3;
		}

		/* Artist Item Image */
		.tipino-artist-item-image {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background-size: cover;
			background-position: center;
			margin-right: 12px;
			flex-shrink: 0;
			border: 2px solid color-mix(in srgb, var(--tipino-accent) 30%, transparent);
		}

		/* Artist Item Details */
		.artist-item-details,
		.tipino-artist-item-details {
			flex: 1;
			overflow: hidden;
		}

		.artist-item-name,
		.tipino-artist-item-name {
			font-weight: 600;
			color: var(--tipino-secondary);
			margin-bottom: 4px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.artist-item-meta,
		.tipino-artist-item-meta {
			font-size: 12px;
			color: var(--tipino-text);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.artist-item-meta .monthly-listeners {
			color: var(--tipino-accent);
			font-weight: 500;
		}

		.artist-item-meta .release-date {
			color:var(--tipino-primary);
		}

		/* Scrollbar Styling */
		.artist-dropdown::-webkit-scrollbar,
		.tipino-artist-dropdown::-webkit-scrollbar {
			width: 6px;
		}

		.artist-dropdown::-webkit-scrollbar-track,
		.tipino-artist-dropdown::-webkit-scrollbar-track {
			background: color-mix(in srgb, var(--tipino-text) 10%, transparent);
		}

		.artist-dropdown::-webkit-scrollbar-thumb,
		.tipino-artist-dropdown::-webkit-scrollbar-thumb {
			background: var(--tipino-text);
			border-radius: 3px;
		}

		.artist-dropdown::-webkit-scrollbar-thumb:hover,
		.tipino-artist-dropdown::-webkit-scrollbar-thumb:hover {
			background: var(--tipino-primary);
		}

		/* Field States */
		.tipino-artist-select-container.has-value .tipino-input {
			border-color: var(--tipino-accent);
		}

		.tipino-artist-select-container.searching .tipino-input {
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="%23C8C5C5"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/><path d="M12 6v6l4 2" stroke="%23F19805" stroke-width="2" stroke-linecap="round"/></svg>');
			background-repeat: no-repeat;
			background-position: right 40px center;
			animation: pulse 1.5s infinite;
		}

		@keyframes pulse {
			0%, 100% { opacity: 1; }
			50% { opacity: 0.6; }
		}
		
		/* /ARTIST SELECT */

		.tipino-form-row {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 20px;
		}
		
		.tipino-form-row:last-child {
			margin-bottom: 20px;
		}
			
		.tipino-form-group {
			width: 100%;
			display: block;
		}
		
		.tipino-form-row .tipino-form-group {
			margin-bottom: 10px;
		}
			
		.tipino-form-group label {
			display: block;
			color: var(--tipino-accent);
			font-weight: 500;
			font-size: var(--tipino-font-size-medium);
		}	
        
        .tipino-form-group input[type="text"],
        .tipino-form-group input[type="password"],
        .tipino-form-group input[type="email"],
		.tipino-form-group input[type="number"]		{
            width: 100% !important;
    		box-sizing: border-box !important;
    		max-width: none !important; 
			padding: 8px 12px;
			background: transparent;
			border-radius: var(--tipino-border-radius);
			color: var(--tipino-text);
			font-size: var(--tipino-font-size-normal);
			border-width: 1px;
			border-color: var(--tipino-accent);
			height: var(--tipino-font-size-big);
        }
        
        .tipino-form-group input:focus {
            border-color: var(--tipino-primary);
            outline: none;
			border-width: 2px; 
			color: var(--tipino-text);
        }
		
		.tipino-form-group input::placeholder {
			color: var(--tipino-text); 
			font-style: italic;
			opacity: 0.8;
		}

		.tipino-form-group textarea::placeholder {
			color: var(--tipino-text);
			font-family: inherit;
		}
			
		img.tipino-eye-icon {
			display: inline !important;
			border: none !important;
			box-shadow: none !important;
			height: 1em !important;
			width: 1em !important;
			margin: 0 0.07em !important;
			vertical-align: -0.1em !important;
			background: none !important;
			padding: 0 !important;
		}
			
		.tipino-password-container {
			display: flex;
			align-items: center;
			position: relative;
		}

		.tipino-password-container input {
			flex: 1; 
			padding-right: 40px; 
		}

		.tipino-toggle-password {
			position: absolute;
			right: 8px;
			background: none;
			border: none;
			cursor: pointer;
			padding: 4px;
		}
		
		/* SELECT Styling */
		.tipino-form-group select {
			width: 100% !important;
			box-sizing: border-box !important;
			max-width: none !important; 
			padding: 8px 12px;
			background: transparent;
			border-radius: var(--tipino-border-radius);
			color: var(--tipino-text);
			font-size: var(--tipino-font-size-normal);
			border-width: 1px;
			border-color: var(--tipino-accent);
			height: var(--tipino-font-size-big);
			cursor: pointer;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F19805' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
			background-repeat: no-repeat;
			background-position: right 12px center;
			background-size: 16px;
			padding-right: 40px;
		}

		.tipino-form-group select:focus {
			border-color: var(--tipino-primary);
			outline: none;
			background: var(--tipino-gradient-primary);
			border-width: 2px; 
			color: var(--tipino-text);
			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EE1954' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
		}

		.tipino-form-group select option {
			background: var(--tipino-secondary);
			color: var(--tipino-text);
			padding: 8px 12px;
		}

		/* TEXTAREA Styling */
		.tipino-form-group textarea {
			width: 100% !important;
			box-sizing: border-box !important;
			max-width: none !important; 
			padding: 8px 12px;
			background: transparent;
			border-radius: var(--tipino-border-radius);
			color: var(--tipino-text);
			font-size: var(--tipino-font-size-normal);
			border-width: 1px;
			border-color: var(--tipino-accent);
			min-height: 80px;
			resize: vertical;
			font-family: var(--tipino-font-family);
			line-height: 1.4;
		}

		.tipino-form-group textarea:focus {
			border-color: var(--tipino-primary);
			outline: none;
			background: var(--tipino-gradient-primary);
			border-width: 2px; 
			color: var(--tipino-text);
		}

		.tipino-form-group textarea::placeholder {
			color: var(--tipino-text);
			font-style: italic;
			opacity: 0.8;
			font-family: var(--tipino-font-family);
		}
		
		.tipino-code-expiry {
			background: var(--tipino-gradient-accent-light);
			color: var(--tipino-secondary);
			padding: 12px 15px;
			border-radius: var(--tipino-border-radius);
			text-align: center;
			margin-bottom: 20px;
			font-size: var(--tipino-font-size-normal);
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		.tipino-code-group {
            margin-bottom: 30px;
        }
		
		.tipino-code-inputs-container {
            max-width: 400px;
            margin: 0 auto;
        }
		
		.tipino-code-inputs {
            display: flex;
            justify-content: space-between;
            gap: 8px;
        }
        
        .tipino-code-inputs input[type="text"] {
            width: 50px;
            height: 60px;
            text-align: center;
            font-size: var(--tipino-font-size-big);
            font-weight: bold;
            padding: 0;
    		box-sizing: border-box !important;
			padding: 8px 12px;
			background: transparent;
			border-radius: var(--tipino-border-radius-50);
			color: var(--tipino-primary);
			border-width: 1px;
			border-color: var(--tipino-accent);
        }
        
        .tipino-code-inputs input:focus {
            border-color: var(--tipino-primary);
            outline: none;
        }
		
		.tipino-ajax-message {
			padding: 10px 15px;
			margin-bottom: 15px;
			border-radius: var(--tipino-border-radius);
			font-weight: 500;
			display: none;
			animation: fadeIn 0.3s ease-in-out;
		}

		.tipino-ajax-message.tipino-success-card {
			background-color:  var(--tipino-success);
			color: var(--tipino-text);
			display: block;
		}

		.tipino-ajax-message.tipino-error-card {
			background-color: var(--tipino-error);
			color: var(--tipino-text);
			display: block;
		}
		
		.tipino-2fa-info {
            text-align: center;
            margin-bottom: 24px;
            color: var(--tipino-secondary);
        }
        
        .tipino-2fa-slider {
            margin-top: 24px;
        }
        
        .tipino-2fa-slider label {
            display: block;
            margin-bottom: 12px;
            text-align: center;
        }
        
        .tipino-slider-labels {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-top: 8px;
        }
        
        .tipino-slider-label {
            text-align: center;
            font-size: var(--tipino-font-size-medium);
            cursor: pointer;
            padding: 5px 0;
            position: relative;
            opacity: 0.6;
            transition: var(--tipino-transition);
			color: var(--tipino-text);
        }
        
        .tipino-slider-label.active {
            opacity: 1;
            font-weight: bold;
            color: var(--tipino-primary);
        }
        
		.tipino-slider-container {
			position: relative;
			padding: 0 10px;
			margin-bottom: 35px;
		}
		
		.tipino-distribution-row {
			display: flex;
			gap: 20px;
			align-items: center;
			margin-bottom: 15px;
			padding: 15px;
			background: var(--tipino-gradient-card-light);
			border-radius: var(--tipino-border-radius);
		}
		
	.tipino-artist-row-hidden {
		display: none !important;
		opacity: 0;
		transform: var(--tipino-transform);
		transition: var(--tipino-transition);
	}

	.tipino-artist-row-showing {
		display: block !important;
		opacity: 1;
		transform: var(--tipino-transform);
		animation: slideInArtistRow 0.3s ease-out;
	}

	@keyframes slideInArtistRow {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.tipino-distribution-column-artist {
		flex: 2;
		min-width: 250px;
	}

	.tipino-distribution-column-slider {
		flex: 1;
		min-width: 200px;
	}

	/* Percentage Slider Container */
	.tipino-percentage-slider-container {
		position: relative;
	}

	.tipino-percentage-slider-container.tipino-distribution-inactive {
		opacity: 0.5;
	}

	/* Percentage Display über dem Slider */
	.tipino-percentage-display {
		position: absolute;
		top: -25px;
		right: 0;
		font-size: var(--tipino-font-size-small);
		font-weight: 600;
		color: var(--tipino-accent);
		background: var(--tipino-secondary);
		padding: 2px 8px;
		border-radius: var(--tipino-border-radius);
		border: 1px solid var(--tipino-accent);
		z-index: 10;
	}

	/* Percentage Slider nutzt einheitliches Fill-System */
	.tipino-percentage-slider-container::before {
		background: var(--tipino-accent) !important; /* Orange Fill für Percentage */
	}

	/* Disabled Percentage Slider */
	.tipino-percentage-slider-container.tipino-distribution-inactive::before {
		background: var(--tipino-gray-card) !important;
	}

	.tipino-percentage-slider-container.tipino-distribution-inactive .tipino-percentage-display {
		color: var(--tipino-gray-text);
		border-color: var(--tipino-gray-text);
	}
		
		/* Radio Labels für Mode Selection */
		.tipino-radio-label {
			display: flex !important;
			align-items: center;
			margin-top: 10px;
			cursor: pointer;
			color: var(--tipino-text);
		}

		.tipino-radio-label input[type="radio"] {
			width: 18px !important;
			height: 18px !important;
			margin-right: 8px;
			accent-color: var(--tipino-primary);
		}

		.tipino-radio-text {
			font-size: var(--tipino-font-size-normal);
			font-weight: 500;
		}

		

		.tipino-separator {
            margin: 0 8px;
            color: var(--tipino-text);
        }
		
		
		.tipino-select-container {
            position: relative;
            width: 100%;
            margin-bottom: 15px;
        }

        .tipino-country-search-input {
            
        }

        .tipino-country-search-input:focus {
            
        }

        .tipino-country-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            max-height: 250px;
            overflow-y: auto;
            background-color: var(--tipino-card);
            border: 1px solid var(--tipino-text);
            border-radius: 4px;
            box-shadow: 0 4px 8px color-mix(in srgb, var(--tipino-black) 10%, transparent);
            z-index: 1000;
            display: none;
        }

        .tipino-country-dropdown.active {
            display: block;
        }

        .tipino-country-item {
            padding: 10px 15px;
			z-index: 1000;
            cursor: pointer;
            transition: background-color 0.2s ease;
            color: var(--tipino-secondary);
        }

        .tipino-country-item:hover {
            background-color: var(--tipino-accent-light);
            color: var(--tipino-primary);
        }

        .tipino-country-item.no-results {
            color: var(--tpn-dark-text);
            font-style: italic;
            cursor: default;
        }
		/* /Country Slector */
		
		/* ***************************** */
		/* //FORM ELEMENTS               */
		/* ***************************** */
		
		/* ***************************** */
		/* MODAL                         */
		/* ***************************** */
		.tipino-modal {
			display: flex !important; 
			align-items: center;
			justify-content: center;
			position: fixed !important;
			z-index: 999999 !important;
			left: 0 !important;
			top: 0 !important;
			width: 100vw !important;
			height: 100vh !important;
			margin: 0 !important;
			padding: 0 !important;
			background-color: rgb(from var(--tipino-black-card) r g b / 0.5);
			transform: none !important;
			clip: auto !important;
			clip-path: none !important;
			visibility: hidden;
			opacity: 0;
			transition: opacity 0.3s ease, visibility 0.3s ease;
		}

		.tipino-modal.active,
		.tipino-modal[style*="display: block"],
		.tipino-modal[style*="display: flex"] {
			visibility: visible !important;
			opacity: 1 !important;
		}

        .tipino-account-item {
            margin: 10px 0;
            padding: 10px;
            background: var(--tipino-white-card);
            border-radius: var(--tipino-border-radius);
        }

        .tipino-account-item strong {
            display: block;
            color: var(--tipino-secondary);
            margin-bottom: 5px;
        }

        #spotify-modal-details {
            margin-top: 10px;
            padding: 10px;
            background: var(--tipino-card);
            border-left: 3px solid var(--tipino-accent);
            font-size: var(--tipino-font-size-normal);
        }

		#page, .container, .site-content-wrap, .site-content, .entry-content {
			overflow: visible !important;
			transform: none !important;
		}
		
		/* Globales Lock, wenn irgendein Force-Modal offen ist */
		.tipino-modal--open { overflow: hidden; }

		/* Optional: Cursor auf Backdrop deutlich machen */
		#tipino-policy-update-modal { cursor: default; }
		#tipino-policy-update-modal .tipino-modal-content { cursor: auto; }
		
		/* TEMPORARY DEBUG STYLES */
		#tipino-news-modal {
			visibility: visible !important;
			opacity: 1 !important;
		}
	

		#tipino-news-modal .tipino-news-content {
			padding: 0;
		}

		#tipino-news-modal .tipino-news-content > *:first-child {
			margin-top: 0;
		}

		#tipino-news-modal .tipino-news-content > *:last-child {
			margin-bottom: 0;
		}
		
		/* Modal Backdrop Click Prevention */
		.tipino-modal.no-backdrop-close {
			cursor: default;
		}

		.tipino-modal.no-backdrop-close .tipino-modal-content {
			cursor: auto;
		}

		/* Shake animation for all modals */
		.tipino-modal-content.shake {
			animation: modalShake 0.5s;
		}

		@keyframes modalShake {
			0%, 100% { transform: translateX(0); }
			10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
			20%, 40%, 60%, 80% { transform: translateX(10px); }
		}
        
        .tipino-modal-content {
			position: relative;
			margin: 0; /* Statt "10% auto" oder "auto" */
			padding: 0;
			animation: slideIn 0.3s;
			border-radius: var(--tipino-border-radius);
			background: rgb(from var(--tipino-secondary-light) r g b / 0.97);
			color: var(--tipino-text);
			border: 1px solid rgb(from var(--tipino-card) r g b / 0.5);
			display: flex;
			flex-direction: column;
			width: 50%;
			max-width: 600px;
			min-width: 400px;
			max-height: min(600px, calc(100vh - 64px));
			overflow: hidden;
			overflow-y: hidden;
		}
		
		.tipino-modal-header,
		.tipino-modal-footer {
		  flex: 0 0 auto;
		}
		
		.tipino-modal-content.tipino-width-50 {
			width: 50%;
			max-width: 600px;
			min-width: 400px;
		}
		
		.tipino-modal-footer {
			margin-bottom: 20px;
			display: flex;
			gap: 10px;
			justify-content: center;
			align-items: center;
		}

		.tipino-modal-footer .tipino-button {
			flex: 0 1 auto;
			min-width: 150px;
		}
		
		.tipino-modal-header {
			padding: 20px;
			background-color: var(--tipino-secondary);
			position: relative;
			border-radius: var(--tipino-border-radius) var(--tipino-border-radius) 0px 0px;
		}
        
        .tipino-modal-body {
			flex: 1 1 auto;
			overflow: auto; 
			-webkit-overflow-scrolling: touch; 
			padding: 20px;   
			margin: 0; 
			color: var(--tipino-white-text);
        }
        
        .tipino-modal-close {
            color: var(--tipino-accent);
            float: right;
            font-size: var(--tipino-font-size-extra-large);
            font-weight: bold;
            position: absolute;
            right: 10px;
            top: 0px;
			background: transparent;
			border: 0px;
        }
        
        .tipino-modal-close:hover,
        .tipino-modal-close:focus {
            color: var(--tipino-primary);
            text-decoration: none;
            cursor: pointer;
        }
	
		.tipino-success-icon {
			display: inline-block;
			width: 70px;
			height: 70px;
			line-height: 70px;
			text-align: center;
			border-radius: 50%;
			background-color: var(--tipino-success);
			color: var(--tipino-white);
			font-size: 36px;
			margin-bottom: 20px;
		}
	
        #tpn-recovery-message {
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 15px;
            display: none;
        }
		/* ***************************** */
		/* //MODAL                       */
		/* ***************************** */
		
		/* ***************************** */
		/* PAGE LAYOUT                   */
		/* ***************************** */
		.container {
            width: var(--max-width);
            margin: 0 auto;
            padding: 20px 0;
        }
        
        .layout-title {
            text-align: center;
            margin: 30px 0 20px;
            color: var(--tipino-dark-text);
        }
        
        /* Full Screen Layout */
        .full-screen {
            width: 100%;
            min-height: 300px;
            padding: 0px;
            margin-bottom: 40px;
        }
        
        /* 2/3 - 1/3 Layout */
        .split-layout {
            display: flex;
            width: 100%;
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .column-2-3 {
            width: calc(2/3 * var(--max-width) - 10px);
            min-height: 300px;
            padding: 0px;
        }
        
        .column-1-3 {
            width: calc(1/3 * var(--max-width) - 10px);
            min-height: 300px;
            padding: 0px;
        }
		
		.column-1-2 {
            width: calc(1/2 * var(--max-width) - 10px);
            min-height: 300px;
            padding: 0px;
        }
        
        /* Helper styles for visualization */
        .layout-info {
            text-align: center;
            color: var(--tipino-dark-text);
            margin-bottom: 10px;
        }
        
        .dimensions {
            font-style: italic;
            font-size: 0.8em;
        }
		/* ***************************** */
		/* //PAGE LAYOUT	             */
		/* ***************************** */


		/* ***************************** */
		/* GRADIENTS	                 */
		/* ***************************** */

		/* backgrounds	                 */
		.tipino-gradient-card {
			background: var(--tipino-gradient-card);
		}	

		.tipino-gradient-card-light {
			background: var(--tipino-gradient-card-light);
		}

		/* headers	                 */
		.tipino-gradient-accent {
			background: var(--tipino-gradient-accent);
		}	

		.tipino-gradient-accent-light {
			background: var(--tipino-gradient-accent-light);
		}	

		.tipino-gradient-primary {
			background: var(--tipino-gradient-primary);
		}	

		.tipino-gradient-secondary {
			background: var(--tipino-gradient-secondary);
		}	
		
		.tipino-gradient-primary-light {
			background: var(--tipino-gradient-primary-light);
		}	

		.tipino-gradient-secondary-light {
			background: var(--tipino-gradient-secondary-light);
		}
		
		
		.tipino-gradient-warning {
			background: var(--tipino-gradient-warning);
		}
		
		.tipino-gradient-warning-light {
			background: var(--tipino-gradient-warning-light);
		}
		
		.tipino-gradient-info {
			background: var(--tipino-gradient-info);
		}
		
		.tipino-gradient-info-light {
			background: var(--tipino-gradient-info-light);
		}
		
		.tipino-gradient-error {
			background: var(--tipino-gradient-error);
		}
		
		.tipino-gradient-error-light {
			background: var(--tipino-gradient-error-light);
		}
		
		.tipino-gradient-success {
			background: var(--tipino-gradient-success);
		}
		
		.tipino-gradient-success-light {
			background: var(--tipino-gradient-success-light);
		}
		/* ***************************** */
		/* //GRADIENTS	                 */
		/* ***************************** */

		/* ***************************** */
		/* TEXTS                         */
		/* ***************************** */
		.tipino-nothing-found {
			font-size: var(--tipino-font-size-small);
			color: var(--tipino-dark-text);
			font-style: italic;
		}
		
		.tipino-card-text-text {
			font-size: var(--tipino-font-size-normal);
			color: var(--tipino-text);
		}
		
		.tipino-text {
			color: var(--tipino-text);
		}
		
		.tipino-dark-text {
			color: var(--tipino-dark-text);
		}
		
		.tipino-white-text {
			color: var(--tipino-white-text);
		}
		
		.tipino-black-text {
			color: var(--tipino-black-text);
		}
		
		.tipino-gray-text {
			color: var(--tipino-gray-text);
		}

		.tipino-text-accent {
			color: var(--tipino-accent);
		}
		
		.tipino-text-accent-dark {
			color: var(--tipino-accent-dark);
		}

		.tipino-text-accent-light {
			color: var(--tipino-accent-light);
		}

		.tipino-text-accent-extra-light {
			color: var(--tipino-accent-extra-light);
		}

		.tipino-text-secondary {
			color: var(--tipino-secondary);
		}

		.tipino-text-secondary-dark {
			color: var(--tipino-secondary-dark);
		}

		.tipino-text-secondary-light {
			color: var(--tipino-secondary-light);
		}

		.tipino-text-secondary-extra-light {
			color: var(--tipino-secondary-extra-light);
		}

		.tipino-text-primary {
			color: var(--tipino-primary);
		}

		.tipino-text-primary-dark {
			color: var(--tipino-primary-dark);
		}

		.tipino-text-primary-light {
			color: var(--tipino-primary-light);
		}

		.tipino-text-primary-extra-light {
			color: var(--tipino-primary-extra-light);
		}
		
		.tipino-text-info {
			color: var(--tipino-info);
		}
		
		.tipino-text-info-light {
			color: var(--tipino-info-light);
		}
		
		.tipino-text-warning {
			color: var(--tipino-warning);
		}
		
		.tipino-text-warning-light {
			color: var(--tipino-warning-light);
		}
		
		.tipino-text-error {
			color: var(--tipino-error);
		}
		
		.tipino-text-error-light {
			color: var(--tipino-error-light);
		}
		
		.tipino-text-success {
			color: var(--tipino-success);
		}
		
		.tipino-text-success-light {
			color: var(--tipino-success-light);
		}
		

		.tipino-text-extra-small {
			font-size: var(--tipino-font-size-extra-small);
		}

		.tipino-text-small {
			font-size: var(--tipino-font-size-small);
		}

		.tipino-text-normal {
			font-size: var(--tipino-font-size-normal);
		}

		.tipino-text-medium {
			font-size: var(--tipino-font-size-medium);
		}

		.tipino-text-large {
			font-size: var(--tipino-font-size-large);
		}

		.tipino-text-extra-large {
			font-size: var(--tipino-font-size-extra-large);
		}

		.tipino-text-big {
			font-size: var(--tipino-font-size-big);
		}
		
		.tipino-text-normal
		{
			font-weight: normal;
		}
		
		.tipino-text-bold
		{
			font-weight: bold;
		}
		
		.tipino-text-italic
		{
			font-style: italic;
		}
			
		.tipino-text-align-left {
			text-align: left;
		}

		.tipino-text-align-right {
			text-align: right;
		}

		.tipino-text-align-center {
			text-align: center;
		}
		
		.tipino-color-primary{
			color: var(--tipino-primary) !important;
		}
		
		.tipino-color-secondary{
			color: var(--tipino-secondary) !important;
		}
		
		.tipino-color-accent{
			color: var(--tipino-accent) !important;
		}
		/* ***************************** */
		/* //TEXTS                       */
		/* ***************************** */

		/* ***************************** */
		/* BADGES                        */
		/* ***************************** */
		.tipino-badge-primary {
			background-color: rgb(from var(--tipino-primary) r g b / 0.2);
			color: var(--tipino-primary-light);
			border: 1px solid rgb(from var(--tipino-primary-light) r g b / 0.3);
		}

		.tipino-badge-secondary {
			background-color: rgb(from var(--tipino-secondary) r g b / 0.2);
			color: var(--tipino-secondary-light);
			border: 1px solid rgb(from var(--tipino-secondary-light) r g b / 0.3);
		}

		.tipino-badge-accent {
			background-color: rgb(from var(--tipino-accent) r g b / 0.2);
			color: var(--tipino-accent-light);
			border: 1px solid rgb(from var(--tipino-accent-light) r g b / 0.3);
		}

		.tipino-badge-inactive {
			background-color: rgb(from var(--tipino-gray-text) r g b / 0.1);
			color: var(--tipino-text);
			border: 1px solid rgb(from var(--tipino-gray-text) r g b / 0.3);
		}
		/* ***************************** */
		/* //BADGES                      */
		/* ***************************** */
		
		/* ***************************** */
		/* MESSAGES                      */
		/* ***************************** */
		.tipino-error-card {
			margin: 25px 0;
			padding: 15px;
			background: var(--tipino-gradient-error);
			border-radius: var(--tipino-border-radius);
			color: var(--tipino-text);
			font-weight: 500;
			align-items: center;
			transition: var(--tipino-transition);
			position: relative;
			font-size: var(--tipino-font-size-normal);
		}
		
		.tipino-warning-card {
			background: var(--tipino-gradient-warning);
			padding: 15px;
			margin-bottom: 20px;
			border-radius: var(--tipino-border-radius);
			color: var(--tipino-text);
			font-weight: 500;
			align-items: center;
			transition: var(--tipino-transition);
			position: relative;
			font-size: var(--tipino-font-size-normal);
		}
		
		.tipino-info-card {
			background: var(--tipino-gradient-info);
			padding: 15px;
			margin-bottom: 20px;
			border-radius: var(--tipino-border-radius);
			color: var(--tipino-text);
			font-weight: 500;
			align-items: center;
			transition: var(--tipino-transition);
			position: relative;
			font-size: var(--tipino-font-size-normal);
		}
		
		.tipino-success-card {
			background: var(--tipino-gradient-success);
			padding: 15px;
			margin-bottom: 20px;
			border-radius: var(--tipino-border-radius);
			color: var(--tipino-text);
			font-weight: 500;
			align-items: center;
			transition: var(--tipino-transition);
			position: relative;
			font-size: var(--tipino-font-size-normal);
		}
		
		
		
		/* ***************************** */
		/* //MESSAGES                    */
		/* ***************************** */
		
		
		
		
		
		/* ***************************** */
		/* CHARTS & STATS                */
		/* ***************************** */
		.tipino-widget-chart-container {
			height: 180px;
			position: relative;
			margin-bottom: 15px;
		}

		.tipino-widget-stats {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
			border-top: 1px solid rgb(from var(--tipino-accent) r g b / 0.5);
			padding-top: 10px;
		}

		.tipino-widget-stat-item {
			flex: 1;
			text-align: center;
			padding: 8px 4px;
			border-right: 1px solid var(--tipino-white-card);
		}

		.tipino-widget-stat-item:last-child {
			border-right: none;
		}

		.tipino-widget-stat-value {
			display: block;
			font-weight: bold;
			font-size: var(--tipino-font-size-normal);
			color: var(--tipino-primary);
		}

		.tipino-widget-stat-label {
			display: block;
			font-size: var(--tipino-font-size-small);
			color: var(--tipino-text);
			margin-top: 3px;
		}
		
		.tipino-listening-activity-container {
			margin-bottom: 30px;
			background: linear-gradient(159deg, rgb(from var(--tipino-secondary) r g b / 0.05) 0%, rgb(from var(--tipino-secondary) r g b / 0.1) 50%, rgb(from var(--tipino-secondary) r g b / 0.15) 100%);
			border-radius: var(--tipino-border-radius);
			padding: 25px;
			backdrop-filter: blur(12px);
			position: relative;
		}

		.tipino-listening-activity-container::before {
			content: "";
			position: absolute;
			z-index: -1;
			inset: 0;
			border-radius: inherit;
			border: 1px solid transparent;
			background: linear-gradient(rgb(from var(--tipino-accent-light) r g b / 0.3), rgb(from var(--tipino-primary-light) r g b / 0.3)) border-box;
			mask: linear-gradient(var(--tipino-black), var(--tipino-black)) border-box, linear-gradient(var(--tipino-black), var(--tipino-black)) padding-box;
			mask-composite: subtract;
			opacity: 0.4;
		}

		/* Modern Period Selection Buttons */
		.tipino-listening-tipino-period-buttons {
			display: flex;
			gap: 8px;
			margin-bottom: 25px;
			padding: 6px;
			background: rgb(from var(--tipino-secondary) r g b / 0.2);
			border-radius: calc(var(--tipino-border-radius) * 0.75);
		}

		.tipino-period-button {
			flex: 1 1 calc(33.333% - 10px);
			padding: 12px 20px;
			background: transparent;
			border: 2px solid rgb(from var(--tipino-white-card) r g b / 0.1);
			border-radius: var(--tipino-border-radius);
			color: var(--tipino-text);
			font-weight: 500;
			font-size: var(--tipino-font-size-normal);
			cursor: pointer;
			transition: var(--tipino-transition);
			position: relative;
			overflow: hidden;
		}

		.tipino-period-button:hover {
			color: var(--tipino-text);
			transform: translateY(-2px);
		}

		.tipino-period-button:hover::before {
			opacity: 0.1;
		}

		.tipino-period-button.active {
			font-weight: 500;
			color: var(--tipino-primary);
			border-color: var(--tipino-primary);
			box-shadow: 0 0 10px rgb(from var(--tipino-primary) r g b / 0.3);
			background: rgb(from var(--tipino-primary) r g b / 0.05);
		}

		.tipino-period-button.active::before {
			opacity: 0;
		}

		/* Period Title Styling */
		.tipino-period-title {
			margin-bottom: 20px;
			font-size: var(--tipino-font-size-large);
			color: var(--tipino-accent);
			font-weight: 600;
			text-align: center;
			background: linear-gradient(135deg, var(--tipino-accent), var(--tipino-accent-light));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			font-family: var(--tipino-heading-font-family);
		}

		/* Chart Container Improvements */
		.tipino-chart-container {
			position: relative;
			height: 400px;
			margin-bottom: 25px;
			background: rgb(from var(--tipino-secondary) r g b / 0.05);
			border-radius: var(--tipino-border-radius);
			padding: 15px;
			border: 1px solid rgb(from var(--tipino-accent) r g b / 0.1);
		}

		.tipino-chart-container.loading {
			pointer-events: none;
		}

		.tipino-chart-container.loading canvas {
			opacity: 0.3;
			filter: blur(2px);
			transition: var(--tipino-transition);
		}

		/* Enhanced Loading Animation */
		.tipino-chart-loading {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: linear-gradient(135deg, rgb(from var(--tipino-secondary) r g b / 0.9), rgb(from var(--tipino-secondary) r g b / 0.7));
			backdrop-filter: blur(8px);
			border-radius: var(--tipino-border-radius);
			z-index: 10;
			opacity: 0;
			visibility: hidden;
			transition: var(--tipino-transition);
		}

		.tipino-chart-container.loading .tipino-chart-loading {
			opacity: 1;
			visibility: visible;
		}

		.tipino-loading-spinner {
			width: 40px;
			height: 40px;
			border: 4px solid rgb(from var(--tipino-accent) r g b / 0.2);
			border-left: 4px solid var(--tipino-accent);
			border-radius: 50%;
			animation: tipinoSpin 1s linear infinite;
			margin-bottom: 15px;
		}

		@keyframes tipinoSpin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}

		.tipino-chart-loading p {
			color: var(--tipino-text);
			font-size: var(--tipino-font-size-normal);
			margin: 0;
			font-weight: 500;
			font-family: var(--tipino-font-family);
		}

		/* Modern Stats Cards */
		.tipino-listening-stats {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 15px;
			margin-top: 25px;
		}


		/* Debug Container Styling */
		.tipino-debug-container {
			margin-top: 20px;
			padding: 15px;
			background: rgb(from var(--tipino-secondary) r g b / 0.1);
			border-radius: var(--tipino-border-radius);
			border-left: 4px solid var(--tipino-accent);
		}

		.tipino-debug-content h4 {
			color: var(--tipino-accent);
			margin-bottom: 10px;
			font-family: var(--tipino-heading-font-family);
		}

		.tipino-debug-content p {
			color: var(--tipino-text);
			font-size: var(--tipino-font-size-small);
			margin: 5px 0;
			font-family: var(--tipino-font-family);
		}

		/* Message styling for error states */
		.tipino-listening-activity-container .tipino-message {
			padding: 15px;
			border-radius: var(--tipino-border-radius);
			margin-bottom: 20px;
			font-weight: 500;
			text-align: center;
		}

		.tipino-listening-activity-container .tipino-message.tipino-warning {
			background: var(--tipino-gradient-warning-light);
			color: var(--tipino-secondary);
			border: 1px solid rgb(from var(--tipino-warning) r g b / 0.3);
		}

		.tipino-listening-activity-container .tipino-message.tipino-info {
			background: var(--tipino-gradient-info-light);
			color: var(--tipino-secondary);
			border: 1px solid rgb(from var(--tipino-info) r g b / 0.3);
		}

		.tipino-listening-activity-container .tipino-message.tipino-error {
			background: var(--tipino-gradient-error-light);
			color: var(--tipino-secondary);
			border: 1px solid rgb(from var(--tipino-error) r g b / 0.3);
		}
		
		
		/* ***************************** */
		/* CHARTS & STATS                */
		/* ***************************** */
		



/* /////////////////////////////////////////// */