/* 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 Trophy colors
			----------------------------- */
			--tipino-trophy-tone-normal: var(--tipino-primary);
			--tipino-trophy-tone-bronce: #cd7f32;
			--tipino-trophy-tone-silver: #a8a9ad;
			--tipino-trophy-tone-gold: #ffd700;
			/* -----------------------------
				End Trophy colors
			----------------------------- */

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

			/* -----------------------------
				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-text-dark:  color-mix(in srgb, var(--tipino-black) 80%, var(--tipino-white));
			--tipino-text-white: var(--tipino-white);
			--tipino-text-black: var(--tipino-black);
			--tipino-text-gray:  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-text-dark);
			--tipino-white-card: var(--tipino-white);
			--tipino-black-card: var(--tipino-black);
			--tipino-gray-card:  var(--tipino-text-gray);


			/* -----------------------------
				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%
				);
				
			--tipino-gradient-secondary-dark:
				linear-gradient(159deg,
				rgb(from var(--tipino-secondary)       r g b / 0.7) 0%,
				rgb(from var(--tipino-secondary) 		r g b / 0.9) 50%,
				rgb(from var(--tipino-secondary)       r g b / 0.4) 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-border-radius-pill: 999px;
            --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: var(--tipino-transform);
		}

		.tipino-theme-card.active {
			border-color: var(--tipino-primary);
		}

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

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

		.tipino-theme-preview-original {
			background: linear-gradient(159deg, var(--tipino-secondary) 0%, var(--tipino-secondary) 50%, var(--tipino-primary) 100%);
		}

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

		.tipino-theme-preview-terminal::before {
			content: '> _';
			color: #00FF00;
			font-size: var(--tipino-font-size-normal);
			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: var(--tipino-border-radius-50);
			border: 1px solid color-mix(in srgb, var(--tipino-white) 30%, transparent);
		}

		.tipino-theme-name {
			font-weight: 500;
			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                  */
		/* ***************************** */
		
        *,
        ::before,
        ::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
		
		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;
        }
        
		h2, h3, h4, h5, h6 {
			color: var(--tipino-accent);
		}

		h1 {
			color: var(--tipino-primary-light);
			font-weight: 500;
			margin: 0 0 5px;
			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;
			align-items: center;
			display: flex;
			gap: 5px;
			font-size: var(--tipino-font-size-big);
		}
		
		h2 {
			font-weight: 500;
			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: 5px;
			align-items: center;
			display:flex;
			gap:5px;
			font-size: var(--tipino-font-size-extra-large);
		}
		
		h2.tipino-track-details-name {
			background: var(--tipino-gradient-secondary-dark);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		
		h3 {
			font-weight: 500;
			margin: 0;
			font-family: var(--tipino-heading-font-family), Sans-serif;
			color: var(--tipino-accent);
			margin-bottom: 5px;
			align-items: center;
			display:flex;
			gap:5px;
			font-size: var(--tipino-font-size-medium);
		}
		
		h4 {
			font-weight: 500;
			margin: 0;
			font-family: var(--tipino-heading-font-family), Sans-serif;
			color: var(--tipino-accent);
			margin-bottom: 5px;
			align-items: center;
			display:flex;
			gap:5px;
			font-size: var(--tipino-font-size-normal);
		}
		
		h5, h6 {
			font-weight: 500;
			margin: 0;
			font-family: var(--tipino-heading-font-family), Sans-serif;
			color: var(--tipino-accent);
			margin-bottom: 5px;
			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: var(--tipino-transform); 
		}

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

		/* Header */
		.site-header {
			padding: 20px 0;
			position: relative;
			z-index: 100;
		}

		.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: 500;
			align-items: flex-end;
		}

		.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;
		}

		.main-navigation .tpn-menu-icon-item > a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			vertical-align: middle;
		}

		.main-navigation .tpn-menu-icon-item > a:hover {
			transform: var(--tipino-transform);
		}

		.main-navigation .tpn-menu-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 27px;
			height: 27px;
			color: inherit;
		}

		.main-navigation .tpn-menu-icon svg {
			display: block;
			width: 27px;
			height: 27px;
			color: inherit;
			flex-shrink: 0;
		}

		.main-navigation .tpn-menu-icon-item > a,
		.main-navigation a[href="#tipino-share-modal"],
		.main-navigation .tipino-notif-bell {
			position: relative;
			overflow: visible;
		}

		.main-navigation .tpn-menu-icon-item > a[data-tooltip]::before,
		.main-navigation a[href="#tipino-share-modal"][data-tooltip]::before,
		.main-navigation .tipino-notif-bell[data-tooltip]::before {
			content: attr(data-tooltip);
			position: absolute;
			bottom: calc(100% + 6px);
			left: 50%;
			transform: translate(-50%, 4px);
			background: var(--tipino-secondary);
			border: 1px solid rgb(from var(--tipino-white) r g b / 0.15);
			color: var(--tipino-text-white);
			font-size: var(--tipino-font-size-small);
			font-weight: 500;
			line-height: 1.2;
			padding: 3px 8px;
			border-radius: var(--tipino-border-radius);
			white-space: nowrap;
			max-width: min(240px, calc(100vw - 48px));
			overflow: hidden;
			text-overflow: ellipsis;
			box-sizing: border-box;
			pointer-events: none;
			opacity: 0;
			visibility: hidden;
			transition: var(--tipino-transition);
			z-index: 10000;
		}

		.main-navigation .tpn-menu-icon-item > a[data-tooltip]:hover::before,
		.main-navigation .tpn-menu-icon-item > a[data-tooltip]:focus-visible::before,
		.main-navigation a[href="#tipino-share-modal"][data-tooltip]:hover::before,
		.main-navigation a[href="#tipino-share-modal"][data-tooltip]:focus-visible::before,
		.main-navigation .tipino-notif-bell[data-tooltip]:hover::before,
		.main-navigation .tipino-notif-bell[data-tooltip]:focus-visible::before {
			opacity: 1;
			visibility: visible;
			transform: translate(-50%, 0);
		}

		/* User avatar menu item */
		.logged-in .main-navigation .tpn-user-avatar > a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 50px;
			height: 50px;
			padding: 0;
		}

		.logged-in .main-navigation .tpn-menu-avatar {
			width: 50px;
			height: 50px;
			border-radius: var(--tipino-border-radius-50);
			overflow: hidden;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: var(--tipino-gradient-accent-light);
			border: 1px solid color-mix(in srgb, var(--tipino-accent) 45%, transparent);
		}

		.logged-in .main-navigation .tpn-menu-avatar img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.logged-in .main-navigation .tpn-menu-avatar--fallback {
			color: var(--tipino-secondary);
			font-weight: 500;
		}

		.logged-in .main-navigation .tpn-menu-avatar--placeholder {
			background: color-mix(in srgb, var(--tipino-white) 75%, var(--tipino-black));
		}

		.logged-in .main-navigation .tpn-menu-avatar--placeholder svg {
			width: 60%;
			height: 60%;
			fill: color-mix(in srgb, var(--tipino-black) 45%, var(--tipino-white));
		}

		.logged-in .main-navigation .tpn-user-avatar > a:hover .tpn-menu-avatar {
			transform: var(--tipino-transform);
		}

		.logged-in .main-navigation .tpn-user-avatar .sub-menu {
			left: auto;
			right: 0;
		}

		/* 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,
		.main-navigation li.tpn-submenu-open > .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-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: var(--tipino-border-radius);
			color: var(--tipino-text);
		}

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

		.search-form .search-submit:hover {
			transform: var(--tipino-transform);
		}

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

		.skip-link:focus {
			transform: var(--tipino-transform);
		}

		/* 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(--tipino-accent);
			position: relative;
			transition: var(--tipino-transition);
		}

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

		.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(--tipino-primary);
			clip: auto !important;
			clip-path: none;
			color: var(--tipino-text-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(--tipino-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;
				align-items: flex-start;
			}
			
			.main-navigation li {
				margin: 10px 0;
			}

			.logged-in .main-navigation .tpn-user-avatar > a {
				width: 44px;
				height: 44px;
			}

			.logged-in .main-navigation .tpn-menu-avatar {
				width: 44px;
				height: 44px;
			}
			
			.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: var(--tipino-font-size-large);
			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: var(--tipino-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: var(--tipino-font-size-medium);
			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;
			}
		}

		/* ***************************** */
		/* //TIPINO THEME                */
		/* ***************************** */

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

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

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

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

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

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

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

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

		.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: var(--tipino-font-size-big);
			font-weight: 500;
			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                */
		/* ***************************** */
		
		/* ***************************** */
		/* TRACK LINKS                   */
		/* ***************************** */
		.tipino-track-detail-link {
			color: var(--tipino-secondary);
		}
		/* ***************************** */
		/* //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;
		}

		.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: 500;
			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.2) 100%);
			display: flex;
			flex-direction: column;
			gap: 10px;
            margin-bottom: 30px;
			backdrop-filter: blur(12px);
			position: relative;
		}
		
		.tipino-card-outer--accent {
			background: linear-gradient(180deg, rgb(from var(--tipino-accent-light) r g b / 0.9) 0%, rgb(from var(--tipino-secondary) r g b / 0.5) 50%, rgb(from var(--tipino-secondary-light) r g b / 0.5) 100%);
		}

		.tipino-card-outer::before {
			content: "";
			position: absolute;
			z-index: -1;
			inset: 0;
			border-radius: var(--tipino-border-radius);
			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 {
			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: var(--tipino-border-radius);
			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: var(--tipino-transition);
		}
		
		.tipino-toggle-slider:before {
			position: absolute;
			content: "";
			height: 20px;
			width: 20px;
			left: 1px;
			bottom: 0px;
			background-color: var(--tipino-white-card);
			transition: var(--tipino-transition);
		}
		
		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: var(--tipino-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;
	}
	/* ========================================
	   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: var(--tipino-border-radius) !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: var(--tipino-border-radius-50) !important;
		
		/* Styling */
		background: var(--tipino-slider-active) !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: var(--tipino-transition);
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	input[type="range"]::-webkit-slider-thumb:hover {
		background: var(--tipino-primary-light) !important;
		transform: var(--tipino-transform) !important;
	}

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

	input[type="range"]::-moz-range-track {
		height: var(--tipino-slider-track-height) !important;
		background: var(--tipino-slider-inactive) !important;
		border-radius: var(--tipino-border-radius) !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: var(--tipino-border-radius-50) !important;
		
		/* Styling */
		background: var(--tipino-slider-active) !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: var(--tipino-transition);
	}

	input[type="range"]::-moz-range-thumb:hover {
		background: var(--tipino-primary-light) !important;
		transform: var(--tipino-transform) !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: var(--tipino-border-radius);
		transform: var(--tipino-transform);
		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: var(--tipino-border-radius);
		transform: var(--tipino-transform);
		z-index: 1;
		/* Position wird via JavaScript gesetzt */
		left: var(--dual-fill-left, 10px);
		width: var(--dual-fill-width, 0px);
		transition: var(--tipino-transition);
	}

	.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;
	}

	.tipino-dual-slider-wrapper input[type="range"]::-webkit-slider-thumb:hover {
		background: var(--tipino-primary-light) !important;
		transform: var(--tipino-transform) !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;
	}

	.tipino-dual-slider-wrapper input[type="range"]::-moz-range-thumb:hover {
		background: var(--tipino-primary-light) !important;
		transform: var(--tipino-transform) !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-text-gray) !important;
		cursor: not-allowed !important;
	}

	input[type="range"]:disabled::-moz-range-thumb {
		background: var(--tipino-gray-card) !important;
		border-color: var(--tipino-text-gray) !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: 500;
        }
        
        .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);
            }

            .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: var(--tipino-transition);
            }

            .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: 500;
                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: 500;
				padding: 0 8px;
				flex-shrink: 0;
				font-size: var(--tipino-font-size-medium);
			}

			.tipino-range-separator {
				color: var(--tipino-accent);
				font-weight: 500;
				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: var(--tipino-transition);
			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-text-white);
		}

		.tipino-subscription-card::before {
			content: "";
			position: absolute;
			z-index: -1;
			inset: 0;
			border-radius: var(--tipino-border-radius);
			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-text-white);
			padding: 5px 30px;
			border-radius: var(--tipino-border-radius);
			font-size: var(--tipino-font-size-normal);
			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-card-icon {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10px 0;
		}

		.tipino-subscription-card-icon svg {
			width: 60px;
			height: 60px;
		}

		.tipino-subscription-card .tipino-subscription-title {
			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: var(--tipino-font-size-big);
			font-weight: bold;
			color: var(--tipino-primary);
		}
		
		.tipino-subscription-price .tipino-period {
			font-size: var(--tipino-font-size-large);
			color: var(--tipino-text-white);
		}
		
		.tipino-subscription-price .tipino-savings {
			display: block;
			font-size: var(--tipino-font-size-normal);
			color: var(--tipino-primary);
			font-weight: bold;
		}
		
		.tipino-subscription-description {
			margin-bottom: var(--tipino-font-size-large);
			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: var(--tipino-border-radius-50);
			background-color: var(--tipino-card);
			margin: 0 6px;
			cursor: pointer;
			transition: var(--tipino-transition);
		}
		
		.tipino-carousel-dot.active {
			background-color: var(--tipino-primary);
			transform: var(--tipino-transform);
		}
		/* ***************************** */
		/* //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: var(--tipino-border-radius);
			font-size: var(--tipino-font-size-small);
			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);
			color: var(--tipino-text);
		}
		
		.tipino-playlist-name {
			flex: 1 1 0%; 
			font-weight: 500;
		}
		
		.tipino-playlist-meta {
			font-size: var(--tipino-font-size-normal);
			color: var(--tipino-text);
		}
		
		.tipino-playlist-row {
			display: flex; 
			flex-direction: column; 
			align-items: stretch; 
			gap: 8px; 
			border: 1px solid var(--tipino-white-card); 
			border-radius: var(--tipino-border-radius); 
			padding: 10px 12px;
		}
		
		.tipino-playlist-label {
			display: flex; 
			align-items: center; 
			gap: 6px; 
			font-weight: 500; 
			cursor: pointer;
		}
		
		.tipino-playlist-countWrap {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-left: 28px;
		}
		
		.tipino-playlist-barOuter {
			flex: 1;
			height: 6px;
			background: var(--tipino-card);
			border-radius: var(--tipino-border-radius);
		}
		
		.tipino-playlist-barInner {
			height: 100%;
			background: var(--tipino-accent);
			border-radius: var(--tipino-border-radius);
		}
		
		.tipino-playlist-countLabel {
			font-size: var(--tipino-font-size-normal);
			color: var(--tipino-accent);
		}
		
		/* ***************************** */
		/* //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: 500;
		}

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

		.tipino-artist-payout-table-percentage {
			font-size: var(--tipino-font-size-small);
		}
		/* ***************************** */
		/* //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-text-white);
		}

		.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				 */
		/* ***************************** */		
/* Genres overview: 2/3 main + 1/3 sidebar */
.tipino-genres-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 20px;
    align-items: start;
}

.tipino-genres-main-column {
    min-width: 0;
}

.tipino-genres-side-column {
    display: grid;
    gap: 16px;
}

/* 3-column grid override for genres sitemap */
.tipino-genres-sitemap-columns[data-columns="3"] {
    grid-template-columns: 1fr 1fr 1fr;
}

/* CSS-columns layout for letter groups (enables natural reflow on JS filter) */
.tipino-genres-letter-groups {
    columns: 3;
    column-gap: 15px;
    margin-top: 14px;
}

.tipino-genres-letter-groups .tipino-genres-letter-card {
    break-inside: avoid;
    margin-bottom: 15px;
}

/* Letter filter button strip */
.tipino-genres-letter-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    background: var(--tipino-gradient-secondary);
    border-radius: var(--tipino-border-radius);
    margin-top: 14px;
}

.tipino-genre-letter-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.18);
    border-radius: var(--tipino-border-radius-50);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    line-height: 1;
    transition: var(--tipino-transition);
	display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tipino-genre-letter-btn:hover {
    border-color: rgb(from var(--tipino-white) r g b / 0.4);
    background: rgb(from var(--tipino-white) r g b / 0.08);
}

.tipino-genre-letter-btn.is-active {
    background: var(--tipino-accent);
    border-color: var(--tipino-accent);
    color: var(--tipino-black);
}

.tipino-genres-letter-filter-hint {
    margin-top: 8px;
    font-size: var(--tipino-font-size-small);
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tipino-genres-letter-filter-hint[hidden] {
    display: none !important;
}

/* Genre placeholder thumbnail in sidebar (letter-based) */
.tipino-sidebar-genre-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--tipino-border-radius);
    overflow: hidden;
    text-decoration: none;
}

.tipino-sidebar-genre-placeholder .tipino-track-placeholder {
    width: 100%;
    height: 100%;
    border-radius: var(--tipino-border-radius);
}

@media (max-width: 980px) {
    .tipino-genres-overview-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .tipino-genres-side-column {
        order: 2;
    }
    .tipino-genres-letter-groups {
        columns: 2;
    }
}

@media (max-width: 520px) {
    .tipino-genres-letter-groups {
        columns: 1;
    }
}

/* ***************************** */
/* //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: var(--tipino-font-size-normal);
			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: 500;
			font-size: var(--tipino-font-size-medium);
		}

		.tipino-user-top-artist-minutes-label {
			opacity: 0.8;
			font-size: var(--tipino-font-size-normal);
		}

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

		.tipino-user-top-artist-amount-value {
			font-size: var(--tipino-font-size-large);
			font-weight: 500;
			display: block;
		}

		.tipino-user-top-artist-amount-percentage {
			font-size: var(--tipino-font-size-normal);
			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: var(--tipino-border-radius);
			overflow: hidden;
		}

		.tipino-user-top-artist-bar {
			height: 100%;
			background-color: var(--tipino-secondary);
			border-radius: var(--tipino-border-radius);
		}
		
		.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: var(--tipino-font-size-normal);
			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: var(--tipino-font-size-normal);
			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: var(--tipino-font-size-normal);
			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: var(--tipino-font-size-large);
			font-weight: 500;
			color: var(--tipino-accent);
			display: block;
		}

		.tipino-user-payout-amount-percentage {
			font-size: var(--tipino-font-size-small);
			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: var(--tipino-border-radius);
			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: var(--tipino-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: var(--tipino-font-size-medium);
			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: var(--tipino-transform);
			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;
        }
        
        .tipino-receipt-info-item .tipino-value {
            font-size: var(--tipino-font-size-medium);
            color: var(--tipino-text);
            font-weight: 500;
        }
        
        .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: 500;
            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: 500;
            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: 500;
            border-top: 2px solid var(--tipino-accent);
        }
        
        .tipino-breakdown-item.tipino-total .tipino-item-label {
            color: var(--tipino-secondary);
            font-weight: 500;
        }
        
        .tipino-breakdown-item.tipino-total .tipino-item-value {
            color: var(--tipino-secondary);
            font-weight: 500;
            font-size: var(--tipino-font-size-large);
        }
        
        .tipino-breakdown-item.tipino-total .tipino-item-percentage {
            color: var(--tipino-secondary);
            font-weight: 500;
        }
        
        .tipino-item-label {
            color: var(--tipino-text);
            font-weight: 500;
        }
        
        .tipino-item-value {
            text-align: right;
            font-weight: 500;
            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 		 */
		/* ***************************** */		
		
		/* ***************************** */
		/* USER DETAIL PUBLIC   		 */
		/* ***************************** */	
		/* Header layout */
		.tipino-user-public-detail-header{
		  display:flex;
		  align-items:flex-start;
		  gap: 14px; /* replaces margin-right on avatar */
		  color: var(--tipino-text);
		}

		/* LEFT COLUMN (avatar + achievements under it) */
		.tipino-user-public-left{
		  display:flex;
		  flex-direction:column;
		  gap: 10px;
		  flex-shrink:0;
		  width: 160px; /* matches tipino-user-public-thumbnail-large */
		}

		/* Avatar */
		.tipino-user-public-thumbnail{
		  width:80px;
		  height:80px;
		  border-radius: var(--tipino-border-radius);
		  overflow:hidden;
		  flex-shrink:0;
		}

		.tipino-user-public-thumbnail-large{
		  width:160px;
		  height:160px;
		}

		/* no right margin inside left column */
		.tipino-user-public-left .tipino-user-public-thumbnail{
		  margin-right: 0;
		}

		.tipino-user-public-thumbnail img{
		  width:100%;
		  height:100%;
		  object-fit:cover;
		  display:block;
		}

		/* RIGHT COLUMN */
		.tipino-user-public-meta{
		  display:flex;
		  flex-direction:column;
		  gap:10px;
		  min-width:0;
		  width:100%;
		}

		.tipino-user-public-header-top{
		  display:flex;
		  flex-direction:column;
		  gap:4px;
		  min-width:0;
		}

		.tipino-user-public-details-name{
		  margin:0;
		  color: var(--tipino-secondary);
		  white-space:nowrap;
		  overflow:hidden;
		  text-overflow:ellipsis;
		}

		.tipino-user-public-member-since{
		  font-size:12px;
		  opacity:0.8;
		}

		.tipino-user-public-bio{
		  color: var(--tipino-text);
		  opacity:0.9;
		  line-height:1.35;
		  max-width:600px;
		}

		/* Social icons */
		.tipino-user-public-socials{
		  display:flex;
		  gap:7px;
		  flex-wrap:wrap;
		  align-items:center;
		}

		.tipino-user-public-social{
		  width:34px;
		  height:34px;
		  border-radius: var(--tipino-border-radius-pill);
		  display:inline-flex;
		  align-items:center;
		  justify-content:center;
		  background: var(--tipino-secondary);
		  color: var(--tipino-text-white);
		  text-decoration:none;
		}

		.tipino-user-public-social svg,
		.tipino-user-public-social img{
		  width:18px;
		  height:18px;
		  display:block;
		  fill: currentColor;
		}

		.tipino-user-public-social:hover{
		  filter: brightness(1.1);
		}

		/* Recommended artist */
		.tipino-user-public-reco{
		  display:flex;
		  flex-direction:column;
		  gap:6px;
		  width:100%;
		}

		.tipino-user-public-reco-label{
		  font-size:12px;
		  opacity:0.8;
		}

		.tipino-user-public-reco-card{
		  width:100%;
		  display:flex;
		  align-items:center;
		  gap:10px;
		  padding:10px;
		  border-radius: var(--tipino-border-radius);
		  background: rgb(from var(--tipino-white-card) r g b / 0.08);
		  color: var(--tipino-text);
		}

		.tipino-user-public-reco-name{
		  font-weight:600;
		  white-space:nowrap;
		  overflow:hidden;
		  text-overflow:ellipsis;
		  flex:1;
		  min-width:0;
		}

		/* Achievements block (under avatar) */
		.tipino-user-public-achievements{
		  display:flex;
		  flex-direction:column;
		  gap:6px;
		}

		.tipino-user-public-achievements-label{
		  font-size:12px;
		  opacity:0.8;
		}

		.tipino-user-public-achievements-list{
		  display:flex;
		  align-items:center;
		  gap:8px;
		}

		/* Prevent double spacing from existing wrapper margins */
		.tipino-user-public-achievements-list .tipino-sidebar-achievement-image-wrapper{
		  margin-right: 0;
		}


.tipino-public-users-list {
                display: flex;
                flex-direction: column;
                gap: 14px;
                margin-top: 12px;
            }
            .tipino-public-user-row {
                display: grid;
                grid-template-columns: 90px 1fr;
                align-items: start;
                gap: 14px;
                padding: 12px 14px;
                border-radius: var(--tipino-border-radius);
                background: var(--tipino-gradient-secondary);
                border: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
            }
			
            .tipino-public-user-row:hover {
                border-color: rgb(from var(--tipino-white) r g b / 0.16);
                transform: var(--tipino-transform);
                transition: var(--tipino-transition);
            }
            .tipino-user-public-thumbnail.tipino-user-public-thumbnail-small {
                width: 64px;
                height: 64px;
                border-radius: var(--tipino-border-radius);
                overflow: hidden;
                background: rgb(from var(--tipino-white) r g b / 0.05);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .tipino-public-user-meta {
                display: flex;
                flex-direction: column;
                gap: 4px;
                min-width: 0;
            }
            .tipino-public-user-meta .tipino-artist-link {
                font-weight: 500;
                font-size: var(--tipino-font-size-normal);
                display: inline-block;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .tipino-public-user-meta .tipino-color-muted {
                font-size: var(--tipino-font-size-small);
                opacity: 0.8;
            }
            .tipino-public-user-intro {
                font-size: var(--tipino-font-size-small);
                color: var(--tipino-card);
                opacity: 0.9;
                max-height: 38px;
                overflow: hidden;
            }
            .tipino-public-user-actions .tipino-button {
                padding: 8px 14px;
                font-size: var(--tipino-font-size-small);
                border-radius: var(--tipino-border-radius);
                white-space: nowrap;
            }

			.tipino-public-users-grid {
			  display: grid;
			  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
			  gap: 16px;
			}
			
			.tipino-public-user-left {
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  gap: 8px;
			}

			.tipino-public-user-actions .tipino-button { width: 100%; text-align: center; }
		/* ***************************** */
		/* /USER DETAIL PUBLIC   		 */
		/* ***************************** */	
/* Users overview: 2/3 search + 1/3 sidebar */
.tipino-users-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 20px;
    align-items: start;
}

.tipino-users-main-column {
    min-width: 0;
}

.tipino-users-side-column {
    display: grid;
    gap: 16px;
}

.tipino-public-user-intro {
    margin-top: 4px;
    opacity: 0.8;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sidebar: current logged-in user card */
.tipino-sidebar-current-user-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tipino-sidebar-current-user-avatar {
    flex-shrink: 0;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: var(--tipino-border-radius-50);
    overflow: hidden;
    border: 2px solid rgb(from var(--tipino-white) r g b / 0.18);
    transition: var(--tipino-transition);
}

.tipino-sidebar-current-user-avatar:hover {
    border-color: rgb(from var(--tipino-accent) r g b / 0.6);
}

.tipino-sidebar-current-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tipino-sidebar-current-user-avatar .tipino-track-placeholder {
    width: 100%;
    height: 100%;
}

.tipino-sidebar-current-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tipino-sidebar-current-user-intro {
    margin-top: 2px;
    opacity: 0.75;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 980px) {
    .tipino-users-overview-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .tipino-users-side-column {
        order: 2;
    }
}

		
		/* ***************************** */
		/* 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: center;
			gap: 12px;
			margin-bottom: 15px;
		}

		.tipino-artist-header-actions {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: flex-start;
			gap: 12px;
			margin-left: auto;
			flex-shrink: 0;
		}
		
		.tipino-artist-details-name {
			margin: 0;
			color: var(--tipino-accent);
			text-overflow: ellipsis;
			flex: 1 1 auto;
		}
		
		.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: var(--tipino-border-radius);
		}
		
		.tipino-artist-details-popularity-value {
			font-size: var(--tipino-font-size-small);
			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: var(--tipino-border-radius);
			overflow: hidden;
		}
		/* ***************************** */
		/* //ARTIST DETAIL 				 */
		/* ***************************** */		
/* Artists overview: 2/3 search + 1/3 sidebar */
.tipino-artists-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 20px;
    align-items: start;
}

.tipino-artists-main-column {
    min-width: 0;
}

.tipino-artists-side-column {
    display: grid;
    gap: 16px;
}

.tipino-artists-search-form {
    padding: 16px;
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.14);
    background: var(--tipino-gradient-secondary);
    margin-bottom: 12px;
}

.tipino-artists-search-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.tipino-artists-search-hint {
    margin-top: 6px;
    font-size: var(--tipino-font-size-small);
    opacity: 0.8;
}

.tipino-artists-selected-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
    margin-bottom: 8px;
}

.tipino-artists-chip-placeholder {
    font-size: var(--tipino-font-size-small);
    opacity: 0.75;
}


.tipino-artists-genre-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
	border-radius: var(--tipino-border-radius);
    padding: 4px 8px;
    font-size: var(--tipino-font-size-small);
    line-height: 1;
	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-artists-genre-chip-remove {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: var(--tipino-font-size-small);
    line-height: 1;
    padding: 0;
}

.tipino-artists-genre-picker {
    position: relative;
}

.tipino-artists-genre-dropdown {
    z-index: 1001;
}

.tipino-artists-genre-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.tipino-artists-genre-option[hidden] {
    display: none !important;
}

.tipino-artists-genre-option-count {
    margin-left: auto;
}

.tipino-artists-genre-empty {
    font-size: var(--tipino-font-size-small);
    opacity: 0.75;
}
.tipino-artists-search-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.tipino-artists-reset-link {
    margin-left: auto;
}

.tipino-artists-results-summary {
    font-size: var(--tipino-font-size-small);
    opacity: 0.88;
    margin: 8px 0 10px;
}

.tipino-artists-result-row {
    transition: var(--tipino-transition);
}

.tipino-artists-result-row:focus-within,
.tipino-artists-result-row:hover {
    border-color: rgb(from var(--tipino-white) r g b / 0.2);
}

.tipino-artists-result-row .tipino-artist-link {
    text-decoration: none;
}

.tipino-artists-result-meta-row {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tipino-artists-result-genres {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.tipino-artists-result-genre {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

.tipino-artists-result-genre-separator {
    line-height: 1;
    opacity: 0.8;
}

.tipino-artists-result-play-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--tipino-font-size-small);
    line-height: 1.2;
    opacity: 1;
}

.tipino-artists-result-play-stat span {
    white-space: nowrap;
}

@media (max-width: 980px) {
    .tipino-artists-overview-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .tipino-artists-side-column {
        order: 2;
    }
}

/* -------------------------------------------------------
   Artist Claim Form
   ------------------------------------------------------- */
.tipino-claim-shell {
	max-width: 760px;
	margin: 0 auto 30px auto;
	gap: 18px;
}

.tipino-claim-shell__intro {
	gap: 12px;
	padding: 16px 18px;
	align-items: flex-start;
}

.tipino-claim-shell__intro .tipino-card-text-text {
	font-size: var(--tipino-font-size-large);
	margin: 0;
}

.tipino-claim-shell__intro .tipino-text {
	margin: 0;
	max-width: 62ch;
	line-height: 1.55;
}

.tipino-claim-banner,
.tipino-claim-scorebox {
	padding: 12px 14px;
	border-radius: var(--tipino-border-radius);
	border: 1px solid rgb(from var(--tipino-card) r g b / 0.18);
	background: rgb(from var(--tipino-card) r g b / 0.08);
}

.tipino-claim-scorebox {
	margin-top: 12px;
	padding: 10px 12px;
}

.tipino-claim-scorebox.is-high {
	background: rgb(from var(--tipino-error) r g b / 0.18);
	border-color: rgb(from var(--tipino-error) r g b / 0.35);
}

.tipino-claim-scorebox.is-medium {
	background: rgb(from var(--tipino-warning) r g b / 0.18);
	border-color: rgb(from var(--tipino-warning) r g b / 0.35);
}

.tipino-claim-scorebox.is-none {
	background: rgb(from var(--tipino-success) r g b / 0.18);
	border-color: rgb(from var(--tipino-success) r g b / 0.35);
}

.tipino-claim-traffic {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tipino-claim-traffic-dots {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.tipino-claim-dot {
	width: 12px;
	height: 12px;
	border-radius: var(--tipino-border-radius-pill);
	opacity: 0.28;
}

.tipino-claim-dot.is-red {
	background: #ff4d5e;
}

.tipino-claim-dot.is-yellow {
	background: #f5b63f;
}

.tipino-claim-dot.is-green {
	background: #37c978;
}

.tipino-claim-dot.is-active {
	opacity: 1;
}

.tipino-claim-traffic-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.tipino-claim-traffic-text strong {
	font-size: var(--tipino-font-size-medium);
	line-height: 1.1;
}

.tipino-claim-traffic-text small {
	font-size: var(--tipino-font-size-small);
	line-height: 1.35;
	opacity: 0.88;
}

.tipino-claim-banner.is-success {
	background: rgb(from var(--tipino-success) r g b / 0.12);
	border-color: rgb(from var(--tipino-success) r g b / 0.3);
	color: var(--tipino-text-white);
}

.tipino-claim-banner.is-error {
	background: rgb(from var(--tipino-error) r g b / 0.14);
	border-color: rgb(from var(--tipino-error) r g b / 0.32);
	color: var(--tipino-text-white);
}

.tipino-claim-form {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.tipino-claim-form .tipino-claim-form-group {
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tipino-claim-form .tipino-claim-form-group > label {
	display: block;
	margin: 0;
	padding-top: 4px;
}

.tipino-claim-form .tipino-claim-form-group input[type="text"],
.tipino-claim-form .tipino-claim-form-group select,
.tipino-claim-form .tipino-claim-form-group textarea {
	margin: 0;
}

.tipino-claim-form .tipino-claim-form-group input[hidden] {
	display: none !important;
}

/* display:flex above overrides UA [hidden]{display:none} — restore it */
.tipino-claim-form .tipino-claim-form-group[hidden],
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group[hidden] {
	display: none !important;
}

.tipino-claim-stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tipino-claim-form .tipino-claim-form-group select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	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");
	padding-right: 40px;
}

.tipino-claim-form .tipino-claim-form-group select:focus {
	background-color: rgb(from var(--tipino-accent) r g b / 0.08);
	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;
	border-color: var(--tipino-accent-light);
}

.tipino-claim-helptext {
	display: block;
	margin-top: 6px;
	opacity: 0.82;
}

.tipino-button-link {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var(--tipino-accent);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tipino-claim-suggestions {
	margin-top: 8px;
	padding: 8px;
	border-radius: var(--tipino-border-radius);
	background: rgb(from var(--tipino-card) r g b / 0.08);
	border: 1px solid rgb(from var(--tipino-card) r g b / 0.18);
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 220px;
	overflow: auto;
}

.tipino-claim-suggestion-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgb(from var(--tipino-card) r g b / 0.14);
	border-radius: var(--tipino-border-radius);
	background: rgb(from var(--tipino-card) r g b / 0.06);
	color: var(--tipino-text);
	text-align: left;
	cursor: pointer;
	transition: var(--tipino-transition);
}

.tipino-claim-suggestion-name {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tipino-claim-suggestion-item:hover {
	background: rgb(from var(--tipino-accent) r g b / 0.12);
	border-color: rgb(from var(--tipino-accent) r g b / 0.36);
	transform: var(--tipino-transform);
}

.tipino-claim-suggestion-meta {
	font-size: var(--tipino-font-size-small);
	opacity: 0.72;
	white-space: nowrap;
}

.tipino-claim-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}

.tipino-claim-section-head > label {
	margin: 0;
}

.tipino-claim-form .tipino-button.tipino-claim-add-proof {
	display: inline-flex;
	width: auto !important;
	min-width: 0;
	padding: 8px 16px;
	align-self: auto;
	flex: 0 0 auto;
}

.tipino-claim-proofs {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 4px;
}

.tipino-claim-proof-row {
	padding: 18px 18px 16px 18px;
	border-radius: var(--tipino-border-radius);
	border: 1px solid rgb(from var(--tipino-white) r g b / 0.14);
	background:
		linear-gradient(180deg, rgb(from var(--tipino-white) r g b / 0.07), rgb(from var(--tipino-card) r g b / 0.16));
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tipino-claim-proof-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
}

.tipino-claim-form .tipino-claim-proof-toolbar .tipino-claim-proof-type {
	flex: 1 1 260px;
	min-width: 0;
	width: auto !important;
	max-width: none !important;
	margin: 0;
}

.tipino-claim-form .tipino-button.tipino-claim-proof-remove {
	flex: 0 0 auto;
	display: inline-flex;
	width: auto !important;
	min-width: 0;
	align-self: center;
	padding: 8px 14px;
	margin: 0;
}

.tipino-claim-form .tipino-claim-proof-row select,
.tipino-claim-form .tipino-claim-proof-row input,
.tipino-claim-form .tipino-claim-proof-row textarea {
	width: 100%;
	box-sizing: border-box;
	max-width: none;
	padding: 10px 12px;
	background: rgb(from var(--tipino-card) r g b / 0.08);
	border-radius: var(--tipino-border-radius);
	border: 1px solid rgb(from var(--tipino-accent) r g b / 0.72);
	color: var(--tipino-text);
	font-size: var(--tipino-font-size-normal);
}

.tipino-claim-form .tipino-claim-proof-row select {
	min-height: 46px;
	-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-claim-form .tipino-claim-proof-row input {
	min-height: 46px;
}

.tipino-claim-form .tipino-claim-proof-row textarea {
	min-height: 88px;
	resize: vertical;
	font-family: var(--tipino-font-family);
}

.tipino-claim-form .tipino-claim-proof-row select:focus,
.tipino-claim-form .tipino-claim-proof-row input:focus,
.tipino-claim-form .tipino-claim-proof-row textarea:focus {
	outline: none;
	border-color: var(--tipino-accent-light);
	background: rgb(from var(--tipino-accent) r g b / 0.08);
}

.tipino-claim-form .tipino-claim-proof-row input::placeholder,
.tipino-claim-form .tipino-claim-proof-row textarea::placeholder {
	color: rgb(from var(--tipino-text) r g b / 0.72);
}

.tipino-claim-proof-help {
	font-size: var(--tipino-font-size-small);
	opacity: 0.88;
	line-height: 1.6;
	margin: 0;
}

.tipino-claim-proof-code {
	padding: 10px 12px;
	border-radius: var(--tipino-border-radius);
	background: rgb(from var(--tipino-black) r g b / 0.18);
	border: 1px solid rgb(from var(--tipino-accent) r g b / 0.2);
	font-family: monospace;
	word-break: break-word;
	white-space: pre-wrap;
}

.tipino-claim-proof-note {
	padding: 16px;
	border-radius: var(--tipino-border-radius);
	background: rgb(from var(--tipino-card) r g b / 0.1);
	border: 1px solid rgb(from var(--tipino-card) r g b / 0.14);
	line-height: 1.6;
	margin-top: 6px;
}

.tipino-claim-submit {
	display: flex;
	width: 100% !important;
	min-height: 48px;
	margin-top: 10px;
	justify-content: center;
}

@media (max-width: 768px) {
	.tipino-claim-shell {
		padding: 22px 16px 18px 16px;
	}

	.tipino-claim-shell__intro {
		padding: 14px;
	}

	.tipino-claim-proof-toolbar {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.tipino-claim-section-head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.tipino-claim-add-proof,
	.tipino-claim-proof-toolbar .tipino-claim-proof-remove,
	.tipino-claim-proof-toolbar .tipino-claim-proof-type {
		width: 100% !important;
	}

	.tipino-claim-suggestion-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.tipino-claim-proof-row .tipino-claim-proof-remove,
	.tipino-claim-add-proof {
		width: 100%;
	}
}

/* ============================================================
   artist-posts.css
   ============================================================ */

.tipino-artist-post-detail .tipino-artist-post-detail-content {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: flex-start;
}

.tipino-artist-post-detail .tipino-artist-post-meta {
  font-size: 0.85em;
  opacity: 0.75;
  margin-bottom: 0.75em;
  display: block;
  clear: both;
}

.tipino-artist-post-detail .tipino-artist-post-body {
  display: block;
  clear: both;
  margin-top: 0.5em;
  width: 100%;
}

.tipino-artist-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.tipino-artist-post-card {
  border: 1px solid rgb(from var(--tipino-black) r g b / 0.08);
  border-radius: var(--tipino-border-radius);
  overflow: hidden;
  background: var(--tipino-white);
  display: flex;
  flex-direction: column;
}

.tipino-artist-post-thumb img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.tipino-artist-post-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tipino-artist-post-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
  color: var(--tipino-text-gray);
}

.tipino-artist-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--tipino-border-radius-pill);
  overflow: hidden;
  flex: 0 0 24px;
  background: var(--tipino-card);
}

.tipino-artist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tipino-artist-name {
  font-weight: 500;
  color: var(--tipino-card);
}

.tipino-artist-post-date {
  margin-left: auto;
  color: var(--tipino-text-gray);
}

.tipino-artist-post-title {
  margin: 0;
  font-size: 1.05em;
  line-height: 1.3;
}

.tipino-artist-post-title a {
  color: inherit;
  text-decoration: none;
}

.tipino-artist-post-title a:hover {
  text-decoration: underline;
}

.tipino-artist-post-excerpt {
  margin: 0;
  color: var(--tipino-text-dark);
}

.tipino-artist-post-readmore {
  font-size: 0.9em;
  font-weight: 500;
  color: var(--tipino-accent);
  text-decoration: none;
  align-self: flex-start;
}

.tipino-artist-post-readmore:hover {
  text-decoration: underline;
}

.tipino-artist-post-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tipino-artist-post-edit {
  font-size: 0.9em;
  font-weight: 500;
  color: var(--tipino-text-gray);
  text-decoration: none;
  border-bottom: 1px dashed rgb(from var(--tipino-black) r g b / 0.25);
}

.tipino-artist-post-edit:hover {
  color: var(--tipino-text-black);
  border-bottom-color: rgb(from var(--tipino-black) r g b / 0.5);
}

.tipino-artist-post-composer {
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 0;
}

.tipino-artist-post-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tipino-artist-post-field label {
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
  color: var(--tipino-text-black);
}

.tipino-artist-post-field input[type="text"],
.tipino-artist-post-field input[type="file"],
.tipino-artist-post-field select,
.tipino-artist-post-field textarea {
  width: 100%;
  border: 1px solid var(--tipino-card);
  border-radius: var(--tipino-border-radius);
  padding: 12px 14px;
  font-size: var(--tipino-font-size-medium);
  background: var(--tipino-white);
  color: var(--tipino-text-black);
}

.tipino-artist-post-field textarea {
  min-height: 280px;
  resize: vertical;
  line-height: 1.6;
}

.tipino-artist-post-field input[type="text"]::placeholder,
.tipino-artist-post-field textarea::placeholder {
  color: var(--tipino-text-gray);
}

.tipino-artist-post-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
}

.tipino-artist-post-actions {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: 20px;
}

.tipino-artist-action-button {
  flex: 1;
  text-align: center;
  background: var(--tipino-accent);
  color: var(--tipino-text-black);
  border-radius: var(--tipino-border-radius);
  padding: 14px 18px;
  font-weight: 500;
  font-size: var(--tipino-font-size-medium);
  text-decoration: none;
  transition: var(--tipino-transition);
}

.tipino-artist-action-button:hover {
  transform: var(--tipino-transform);
}

.tipino-artist-action-button:active {
  transform: var(--tipino-transform);
}

.tipino-artist-post-publish {
  background: var(--tipino-accent);
  color: var(--tipino-text-black);
  border: none;
  border-radius: var(--tipino-border-radius-pill);
  padding: 14px 28px;
  font-size: var(--tipino-font-size-medium);
  font-weight: 500;
  cursor: pointer;
  transition: var(--tipino-transition);
}

.tipino-artist-post-publish:hover {
  transform: var(--tipino-transform);
}

.tipino-artist-post-publish:active {
  transform: var(--tipino-transform);
}

   
		/* ***************************** */
		/* 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-header-top {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 1px;
		}
		
		.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-text-dark);
			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-details-name {
			margin: 0;
			color: var(--tipino-secondary);
			text-overflow: ellipsis;
		}
		
		.tipino-track-thumbnail-large {
			width: 160px;
			height: 160px;
			margin-right: 10px;
		}
		
		.tipino-track-thumbnail-small {
			width: 40px;
			height: 40px;
			margin-right: 10px;
		}

		.tipino-discogs-thumbnail-small {
			width: 40px;
			height: 40px;
		}
		
		.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-text-white);
			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: var(--tipino-font-size-small);
			font-weight: 500;
			position: relative;
			z-index: 1;
			color: var(--tipino-text-white);
		}
		
		.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(var(--tipino-white) / 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-text-white);
			font-size: 60px;
			font-weight: 500;
		}

		.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: var(--tipino-font-size-small);
		}
		
		.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: 500;
			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-text-dark);
			align-items: center;
		}

        .tipino-collab-badge {
            color: var(--tipino-accent-light);
        }
        
        .tipino-booster-badge {
            color: var(--tipino-accent);
        }

        /* Track stat alignment modifiers */
        .tipino-track-stat--left   { justify-self: left; }
        .tipino-track-stat--center { justify-self: center; }
        .tipino-track-stat--end    { justify-self: end; }

        .tipino-duration-verified {
            margin-left: 6px;
            display: inline-flex;
            align-items: center;
        }

		/* ***************************** */
		/* //TRACK CARD                  */
		/* ***************************** */
		
		
		/* ***************************** */
		/* USER CARD                     */
		/* ***************************** */
		.tipino-track-detail-link {
			color: var(--tipino-secondary);
		}
		
		.tipino-user-thumbnail {
			width: 80px;
			height: 80px;
			border-radius: var(--tipino-border-radius);
			overflow: hidden;
			margin-right: 20px;
			flex-shrink: 0;
		}
		
		.tipino-user-details-name {
			margin: 0;
			color: var(--tipino-secondary);
			text-overflow: ellipsis;
		}
		
		.tipino-user-thumbnail-large {
			width: 160px;
			height: 160px;
			margin-right: 10px;
		}
		
		.tipino-user-thumbnail-small {
			width: 40px;
			height: 40px;
			margin-right: 10px;
		}
		
		.tipino-sidebar-user-stat {
			display: flex;
			align-items: center;
			gap: 4px;
		}

		.tipino-sidebar-user-stat span {
			display: flex;
			align-items: center;
			gap: 4px;
			white-space: nowrap;
		}
		
		.tipino-sidebar-user-stats {
		  display: grid;
		  grid-template-columns: auto auto;
		  gap: 2px 8px;
		  align-items: center;
		}
		.tipino-sidebar-user-stats > .tipino-sidebar-user-stat:first-child {
		  grid-column: 1 / -1; /* Datum bleibt allein in Zeile 1 */
		}
		/* ***************************** */
		/* //USER 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; 
		}
		
		
		/* ***************************** */
		/* //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: 500;
					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-text-dark);
					text-overflow: ellipsis;
				}

				.tipino-genre-play-count {
					font-size: var(--tipino-font-size-small);
					color: var(--tipino-text-dark);
				}
		/* ***************************** */
		/* //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-text-white);
			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: 500;
			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: 500;
			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: 500;
			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: var(--tipino-border-radius);
			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: 500;
			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-text-white);
		}
		
		.tipino-color-circle-primary {
			background: linear-gradient(to right, var(--tipino-primary), var(--tipino-primary-light));
			color: var(--tipino-text-white);
		}
		
		.tipino-color-circle-secondary {
			background: linear-gradient(to right, var(--tipino-secondary), var(--tipino-secondary-light));
			color: var(--tipino-text-white);
		}
		
		.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-text-dark);
			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: 500;
			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-text-dark);
			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: var(--tipino-transform);
		}

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

		.tipino-sidebar-achievement-small-title {
			font-size: var(--tipino-font-size-normal);
			font-weight: 500;
			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: var(--tipino-font-size-small);
			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-text-white);
        }
		
        .tipino-achievement-card.unearned {
            opacity: 0.5;
        }
		
		.tipino-achievement-card.unearned h4.tipino-achievement-title {
			color: var(--tipino-text-gray);
		}

        .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-text-gray);
        }
		
		.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: 500;
            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: var(--tipino-border-radius);
            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: var(--tipino-border-radius);
            transition: var(--tipino-transition);
            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: 500;
            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        */
		/* ***************************** */
.tipino-user-trophies-card {
    margin-top: -6px;
}

.tipino-artist-trophies-card {
    margin-top: -6px;
}

.tipino-artist-trophies-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tipino-artist-trophies-head h2 {
    margin: 0;
}

.tipino-artist-give-trophy-btn {
    white-space: nowrap;
}

.tipino-user-trophies-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.tipino-user-trophy {
    --tipino-trophy-tone: var(--tipino-primary);
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 82px;
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-trophy-tone) r g b / 0.45);
    background: linear-gradient(
        145deg,
        rgb(from var(--tipino-secondary-light) r g b / 0.75),
        rgb(from var(--tipino-secondary) r g b / 0.5)
    );
    color: var(--tipino-trophy-tone);
    text-decoration: none;
    cursor: pointer;
    transition: var(--tipino-transition);
    isolation: isolate;
}

.tipino-user-trophy--assigned {
    --tipino-trophy-tone: var(--tipino-accent);
}

.tipino-user-trophy--available {
    --tipino-trophy-tone: var(--tipino-primary);
}

.tipino-user-trophy:hover,
.tipino-user-trophy:focus,
.tipino-user-trophy:focus-visible {
    transform: var(--tipino-transform);
    border-color: rgb(from var(--tipino-trophy-tone) r g b / 0.75);
    outline: none;
}

.tipino-user-trophy-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tipino-border-radius-pill);
    background: rgb(from var(--tipino-trophy-tone) r g b / 0.2);
}

.tipino-user-trophy-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: currentColor;
}

.tipino-user-trophy-state {
    font-size: var(--tipino-font-size-extra-small);
    font-weight: 500;
    color: var(--tipino-text);
    opacity: 0.92;
}

.tipino-user-trophy-popover {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: var(--tipino-transform);
    min-width: 230px;
    max-width: min(320px, calc(100vw - 36px));
    padding: 12px 14px;
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-trophy-tone) r g b / 0.4);
    background: linear-gradient(
        150deg,
        rgb(from var(--tipino-secondary-light) r g b / 0.99),
        rgb(from var(--tipino-secondary) r g b / 0.99)
    );
    color: var(--tipino-text);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--tipino-transition);
}


.tipino-user-trophy:hover .tipino-user-trophy-popover,
.tipino-user-trophy:focus .tipino-user-trophy-popover,
.tipino-user-trophy:focus-visible .tipino-user-trophy-popover,
.tipino-user-trophy:active .tipino-user-trophy-popover {
    opacity: 1;
    visibility: visible;
    transform: var(--tipino-transform);
}

.tipino-user-trophy-popover-title {
    margin-bottom: 8px;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    color: var(--tipino-trophy-tone);
}

.tipino-user-trophy-popover-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--tipino-font-size-small);
    line-height: 1.35;
}

.tipino-user-trophy-popover-row + .tipino-user-trophy-popover-row {
    margin-top: 5px;
}

.tipino-user-trophy-popover-row span {
    color: rgb(from var(--tipino-text) r g b / 0.8);
}

.tipino-user-trophy-popover-row strong {
    text-align: right;
    color: var(--tipino-text-white);
    font-weight: 500;
}

.tipino-artist-award-modal-content {
    min-width: min(660px, calc(100vw - 32px));
}

.tipino-artist-award-list {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

.tipino-artist-award-option {
    --tipino-trophy-tone: var(--tipino-primary);
    border: 1px solid rgb(from var(--tipino-trophy-tone) r g b / 0.35);
    background: linear-gradient(
        145deg,
        rgb(from var(--tipino-secondary-light) r g b / 0.78),
        rgb(from var(--tipino-secondary) r g b / 0.55)
    );
    color: var(--tipino-text-white);
    border-radius: var(--tipino-border-radius);
    min-height: 94px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--tipino-transition);
}

.tipino-artist-award-option:hover,
.tipino-artist-award-option:focus {
    transform: var(--tipino-transform);
    border-color: rgb(from var(--tipino-primary) r g b / 0.6);
    outline: none;
}

.tipino-artist-award-option.is-selected {
    border-color: rgb(from var(--tipino-accent) r g b / 0.85);
}

.tipino-artist-award-option .tipino-user-trophy-icon {
    color: var(--tipino-accent);
}

.tipino-artist-award-amount {
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    color: var(--tipino-text-white);
}

.tipino-artist-award-error {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-primary) r g b / 0.45);
    background: rgb(from var(--tipino-primary) r g b / 0.15);
    color: var(--tipino-text-white);
    font-size: var(--tipino-font-size-small);
}

@media (max-width: 1080px) {
    .tipino-user-trophies-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .tipino-user-trophies-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tipino-user-trophy-popover {
        min-width: 210px;
    }

    .tipino-artist-trophies-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .tipino-artist-give-trophy-btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .tipino-user-trophies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

		
/* =============================================================
   PAID TROPHIES - Trophy type color overrides
   Loaded after style.css via <head> enqueue; same specificity
   class + class wins over single class from style.css.
   ============================================================= */

/* Subscription trophies: primary pink/magenta */
.tipino-user-trophy.tipino-user-trophy--type-subscription {
    --tipino-trophy-tone: var(--tipino-trophy-tone-normal);
}

/* Bronze: warm bronze/orange */
.tipino-user-trophy.tipino-user-trophy--type-bronze {
    --tipino-trophy-tone: var(--tipino-trophy-tone-bronze);
}

/* Silver: silver/gray */
.tipino-user-trophy.tipino-user-trophy--type-silver {
    --tipino-trophy-tone: var(--tipino-trophy-tone-silver);
}

/* Gold: gold/yellow */
.tipino-user-trophy.tipino-user-trophy--type-gold {
    --tipino-trophy-tone: var(--tipino-trophy-tone-gold);
}

/* =============================================================
   TROPHY TYPE BADGE
   Used in gifting modal and popover to identify trophy type
   ============================================================= */

.tipino-trophy-type-badge {
    display: inline-block;
    font-size: var(--tipino-font-size-small);
    padding: 2px 7px;
    border-radius: var(--tipino-border-radius);
    font-weight: 500;
    vertical-align: middle;
    background: rgb(from var(--tipino-white) r g b / 0.08);
    color: var(--tipino-text);
    line-height: 1.5;
}

.tipino-trophy-type-badge--subscription {
    color: var(--tipino-trophy-tone-normal);
}

.tipino-trophy-type-badge--bronze {
    color: var(--tipino-trophy-tone-bronce);
}

.tipino-trophy-type-badge--silver {
    color: var(--tipino-trophy-tone-silver);
}

.tipino-trophy-type-badge--gold {
    color: var(--tipino-trophy-tone-gold);
}

/* =============================================================
   AWARD OPTION - type color applied via type class
   The award option button inherits --tipino-trophy-tone from
   the type class applied in functions-layout-artist.php
   ============================================================= */

.tipino-artist-award-option.tipino-user-trophy--type-subscription {
    --tipino-trophy-tone: var(--tipino-trophy-tone-normal);
}

.tipino-artist-award-option.tipino-user-trophy--type-bronze {
    --tipino-trophy-tone: var(--tipino-trophy-tone-bronze);
}

.tipino-artist-award-option.tipino-user-trophy--type-silver {
    --tipino-trophy-tone: var(--tipino-trophy-tone-silver);
}

.tipino-artist-award-option.tipino-user-trophy--type-gold {
    --tipino-trophy-tone: var(--tipino-trophy-tone-gold);
}

/* Badge inside award option */
.tipino-artist-award-option .tipino-trophy-type-badge {
    display: block;
    margin-top: 4px;
    font-size: var(--tipino-font-size-extra-small);
}

/* =============================================================
   TROPHY PACKAGE PURCHASE CARDS
   ============================================================= */

.tipino-trophy-packages-card {
    margin-top: 24px;
}

.tipino-trophy-package-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.tipino-trophy-package {
    flex: 1 1 140px;
    max-width: 200px;
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    border-radius: var(--tipino-border-radius);
    padding: 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: var(--tipino-transition);
}

.tipino-trophy-package:hover {
    border-color: rgb(from var(--tipino-white) r g b / 0.25);
}

/* Package color variables */
.tipino-trophy-package--bronze {
    --pkg-color: var(--tipino-trophy-tone-bronce);
}

.tipino-trophy-package--silver {
    --pkg-color: var(--tipino-trophy-tone-silver);
}

.tipino-trophy-package--gold {
    --pkg-color: var(--tipino-trophy-tone-gold);
}

/* Trophy icon inside package card inherits pkg-color */
.tipino-trophy-package .tipino-user-trophy-icon {
    --tipino-trophy-tone: var(--pkg-color, var(--tipino-accent));
    background: rgb(from var(--pkg-color, var(--tipino-accent)) r g b / 0.20);
    border-radius: var(--tipino-border-radius-pill);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pkg-color, var(--tipino-accent));
    flex-shrink: 0;
}

.tipino-trophy-package .tipino-user-trophy-icon svg {
    width: 22px;
    height: 22px;
}

.tipino-trophy-package-name {
    font-weight: 500;
    color: var(--tipino-text-white);
    font-size: var(--tipino-font-size-small);
}

.tipino-trophy-package-count {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
}

.tipino-trophy-package-price {
    font-size: var(--tipino-font-size-normal);
    font-weight: 500;
    color: var(--pkg-color, var(--tipino-accent));
}

.tipino-trophy-package-buy-btn {
    margin-top: 4px;
    width: 100%;
}

.tipino-trophy-packages-disabled-notice {
    margin-top: 4px;
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    opacity: 0.7;
}

/* =============================================================
   TROPHY CARD HEADER - flex row with "Get more trophies" button
   ============================================================= */

.tipino-trophies-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.tipino-trophies-card-header h2 {
    margin: 0;
}

.tipino-trophy-packages-open-btn {
    flex-shrink: 0;
    font-size: var(--tipino-font-size-small);
    padding: 6px 14px;
}

/* =============================================================
   TROPHY PACKAGE MODAL - content box sizing override
   ============================================================= */

.tipino-trophy-package-modal-content {
    width: auto;
    min-width: 340px;
    max-width: 680px;
}

.tipino-trophy-package-modal-content .tipino-modal-body {
    overflow-y: auto;
}

.tipino-trophy-package-modal-content .tipino-trophy-package-grid {
    margin-top: 20px;
    justify-content: center;
}

		/* ***************************** */
		/* 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-label,
		.tipino-user-payout-small-artists-label {
			font-size: var(--tipino-font-size-small);
			color: var(--tipino-text);
			margin-bottom: 3px;
		}
		
		.tipino-user-payout-small-total-value {
			font-size: var(--tipino-font-size-medium);
			font-weight: 500;
			color: var(--tipino-text-white);
		}
		
		.tipino-user-payout-small-artists-value {
			font-size: var(--tipino-font-size-medium);
			font-weight: 500;
		}
		
		.tipino-user-payout-small-chart-container {
			margin-bottom: 15px;
			position: relative;
			width: 100% !important;
			max-width: 100% !important;
			overflow: hidden;
		}
		
		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: var(--tipino-font-size-extra-small);
		}
		
		.tipino-chart-legend-item {
			display: flex;
			align-items: center;
			cursor: pointer;
			padding: 2px 5px;
			border-radius: var(--tipino-border-radius);
			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: 500;
			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: var(--tipino-font-size-normal);
			font-weight: 500;
			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: var(--tipino-border-radius-pill);
			overflow: hidden;
			margin-top: 5px;
		}

		.tipino-user-top-artist-small-bar {
			height: 100%;
			background-color: var(--tipino-primary);
			border-radius: var(--tipino-border-radius);
		}
		/* ***************************** */
		/* //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: var(--tipino-font-size-normal);
			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: var(--tipino-font-size-extra-large);
			font-weight: 500;
			color: var(--tipino-accent);
		}

		.tipino-invitation-stats-label {
			font-size: var(--tipino-font-size-small);
			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-text-black);
			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-text-white);
			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-text-white);
			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-text-black);
			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-text-white);
			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;
		}

		.tipino-button-small {
			padding: 6px 10px;
			font-size: var(--tipino-font-size-small);
		}

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

		.tipino-follow-button {
			min-width: 120px;
			padding: 7px 14px;
			background: var(--tipino-gradient-primary);
			border: 1px solid rgb(from var(--tipino-primary) r g b / 0.55);
			color: var(--tipino-text-white);
			white-space: nowrap;
		}

		.tipino-follow-button:hover {
			background: rgb(from var(--tipino-white-card) r g b / 0.16);
		}

		.tipino-follow-button.is-following {
			background: var(--tipino-gradient-accent);
			color: var(--tipino-text-white);
			border-color: rgb(from var(--tipino-accent-light) r g b / 0.95);
		}

		.tipino-follow-button.is-loading {
			opacity: 0.7;
			cursor: wait;
		}

		.tipino-follow-button--login {
			text-decoration: none;
		}

		/* ***************************** */
		/* //BUTTONs                     */
		/* ***************************** */
		
		
        /* ***************************** */
		/* ACHIEVEMENTS BADGE            */
		/* ***************************** */
        /* Base Badge Styles */
        .achievement-badge {
            width: 120px;
            height: 120px;
            border-radius: var(--tipino-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: var(--tipino-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: var(--tipino-font-size-medium);
        }
        /* ***************************** */

		/* //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-text-white);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10px;
			flex-shrink: 0;
		}	
		
		.tipino-stat-icon.primary {
			background: var(--tipino-gradient-primary);
			color: var(--tipino-text-white);
		}	
		
		.tipino-stat-icon.secondary {
			background: var(--tipino-gradient-secondary);
			color: var(--tipino-text-white);
		}	
		
		.tipino-stat-content {
			flex: 1;
		}	

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

		.tipino-stat-label {
			font-size: var(--tipino-font-size-small);
			font-weight: 500;
			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-text-dark);
		}

		.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: var(--tipino-font-size-small);
			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: var(--tipino-font-size-small);
			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: var(--tipino-font-size-small);
			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-text-dark) transparent transparent transparent;
		}
		
		.tipino-spotify-connection-options {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--tipino-font-size-small);
		}
		
		.tipino-spotify-connect-button {
			background-color: var(--tipino-spotify);
			color: var(--tipino-white);
			border: none;
			border-radius: var(--tipino-border-radius);
			padding: 10px 20px;
			font-size: var(--tipino-font-size-small);
			font-weight: 500;
			cursor: pointer;
			display: flex;
			align-items: center;
			transition: var(--tipino-transition);
		}
		
		.tipino-spotify-connect-button svg {
			margin-right: 8px;
		}
		
		.tipino-spotify-connect-button:hover {
			background-color: var(--tipino-spotify);
		}
		
		/* FIRST SETUP CARD */

		/* ARTIST SELECT /*
		
		/* Container for the Artist Select */
		.tipino-artist-select-container-wrapper {
			display: flex; 
			align-items: center; 
			gap: 12px; 
			flex-wrap: nowrap; 
			min-width: 0;
		}
		
		.tipino-artist-select-container {
			position: relative;
			width: 100%;
		}
		
		.tipino-artist-select-container-config {
			flex: 1 1 260px; 
			min-width: 0;
		}
		
		.tipino-artist-select-container .tipino-input,
		.tipino-artist-select-container .artist-search-input {
			padding-right: 45px; /* Make space for the clear button */
		}

		.tipino-birthdate-input {
			letter-spacing: 0.03em;
		}

		.tipino-birthdate-input.tipino-invalid {
			border-color: var(--tipino-error);
		}

		.tipino-birthdate-hint {
			font-size: var(--tipino-font-size-small);
			color: var(--tipino-text);
			opacity: 0.8;
			margin-top: 6px;
		}

		.tipino-login-check-group {
			display: flex;
			gap: 8px;
			align-items: center;
		}

		.tipino-login-check-group input[type="text"] {
			flex: 1 1 auto;
			min-width: 0;
		}

		.tipino-login-check-button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 44px;
			height: var(--tipino-font-size-big);
			border-radius: var(--tipino-border-radius);
			border: 1px solid var(--tipino-accent);
			background: transparent;
			color: var(--tipino-text);
			transition: var(--tipino-transition);
			padding: 0 12px;
		}

		.tipino-login-check-button svg {
			display: block;
		}

		.tipino-login-check-button.is-loading {
			cursor: wait;
			opacity: 0.8;
		}

		.tipino-login-check-button.is-available {
			background: var(--tipino-success);
			border-color: var(--tipino-success);
			color: var(--tipino-text-white);
		}

		.tipino-login-check-button.is-taken,
		.tipino-login-check-button.is-error {
			background: var(--tipino-error);
			border-color: var(--tipino-error);
			color: var(--tipino-text-white);
		}

		.tipino-login-suggestions {
			margin-top: 6px;
			border: 1px solid var(--tipino-accent);
			border-radius: var(--tipino-border-radius);
			background: var(--tipino-white-card);
			overflow: hidden;
		}

		.tipino-login-suggestion {
			display: block;
			width: 100%;
			text-align: left;
			padding: 8px 12px;
			background: transparent;
			border: 0;
			color: var(--tipino-secondary);
			font-size: var(--tipino-font-size-normal);
			cursor: pointer;
		}

		.tipino-login-suggestion:hover,
		.tipino-login-suggestion:focus {
			background: var(--tipino-gradient-accent-light);
			color: var(--tipino-secondary);
		}


		/* Input Field */
		.tipino-copy-main-artist-btn {
			background-color: transparent;
			border: none;
			color: var(--tipino-accent);
			font-size: var(--tipino-font-size-small);
			display: inline-flex;
			align-items: center;
			padding: 2px 5px;
			border-radius: var(--tipino-border-radius);
			margin-left: 8px;
			cursor: pointer;
			transition: var(--tipino-transition);
		}
		
		.artist-clear-btn {
			position: absolute;
			right: 8px;
			top: 50%;
			transform: translateY(-50%);
			background: none;
			border: none;
			margin: 0;
			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%);
		}

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

		.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-gradient-secondary-dark);
			border: 1px solid var(--tipino-accent);
			border-top: none;
			border-radius: 0 0 var(--tipino-border-radius-hover) var(--tipino-border-radius-hover);
			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;
			background: var(--tipino-gradient-secondary-dark);
		}
		
		@keyframes slideDown {
			from {
				opacity: 0;
				transform: var(--tipino-transform);
			}
			to {
				opacity: 1;
				transform: var(--tipino-transform);
			}
		}
		
		/* Artist Item Styles */
		.artist-item,
		.tipino-artist-item {
			display: flex;
			align-items: center;
			padding: 10px 15px;
			cursor: pointer;
			transition: var(--tipino-transition);
			background-color: var(--tipino-secondary);
		}

		.artist-item:hover,
		.tipino-artist-item:hover {
			transition: var(--tipino-transition);
			transform: var(--tipino-transform);
		}
		

		.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: var(--tipino-secondary);
			border-bottom: 2px solid var(--tipino-primary);
		}

		.tipino-artist-item-additional {
			border-radius: var(--tipino-border-radius);
			background: none;;
		}

		.artist-item-clear-icon {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: var(--tipino-primary);
			border-radius: var(--tipino-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: var(--tipino-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: 500;
			color: var(--tipino-accent-light);
			margin-bottom: 4px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.artist-item-meta,
		.tipino-artist-item-meta {
			font-size: var(--tipino-font-size-small);
			color: var(--tipino-text-card);
			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: var(--tipino-border-radius);
		}

		.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-config {
			display: flex; 
			align-items: center; 
			flex-wrap: wrap; 
			gap: 12px;
		}
		
		.tipino-form-row-config-buttons {
			display: flex; 
			align-items: center; 
			gap: 8px; 
			margin-left: auto;
		}
		
		.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="url"],
		.tipino-form-group input[type="file"],
        .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;
			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");
			background-repeat: no-repeat;
			background-position: right 12px center;
			background-size: 16px;
		}

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

		.tipino-timezone-dropdown optgroup,
		.tipino-timezone-region {
			background: var(--tipino-secondary-dark);
			color: var(--tipino-accent);
			font-style: normal;
			font-weight: 600;
		}

		.tipino-timezone-dropdown option,
		.tipino-timezone-option {
			background: var(--tipino-secondary);
			color: var(--tipino-text);
			font-style: normal;
			font-weight: 400;
			padding: 8px 12px;
		}

		.tipino-timezone-dropdown option.timezone-in-country,
		.tipino-timezone-dropdown option.tipino-timezone-option--in-country {
			color: var(--tipino-text-white);
		}

		/* 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: var(--tipino-transform);
		}
		to {
			opacity: 1;
			transform: var(--tipino-transform);
		}
	}

	.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: 500;
		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-text-gray);
		border-color: var(--tipino-text-gray);
	}
		
		/* 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: var(--tipino-border-radius);
            z-index: 1000;
            display: none;
        }

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

        .tipino-country-item {
            padding: 10px 15px;
			z-index: 1000;
            cursor: pointer;
            transition: var(--tipino-transition);
            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(--tipino-text-dark);
            font-style: italic;
            cursor: default;
        }
		/* /Country Slector */
		
        /* Form label with top spacing (use on secondary labels in a group) */
        .tipino-form-label--spaced {
            margin-top: 14px;
        }

        /* Flex row inside tipino-form-group: label left, control right */
        .tipino-form-group--flex-between {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        /* Scrollable playlist / search-results container */
        .tipino-playlist-results {
            max-height: 360px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

		/* ***************************** */
		/* //FORM ELEMENTS               */
		/* ***************************** */
/* =========================================================
   TIPINO WIZARD
   Chef-driven styling + only required structural base styles
========================================================= */

/* =========================
   WIZARD LAYOUT
========================= */
.tipino-wizard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.tipino-wizard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}


.tipino-wizard-message {
    margin: 15px 0;
    padding: 10px 14px;
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-success) r g b / 0.4);
    background: rgb(from var(--tipino-success) r g b / 0.1);
    color: var(--tipino-text-white);
    font-size: var(--tipino-font-size-small);
}

.tipino-wizard-form {
    padding: 20px;
    background: linear-gradient(
        160deg,
        rgb(from var(--tipino-secondary-light) r g b / 0.97),
        rgb(from var(--tipino-secondary) r g b / 0.97)
    );
    border: 1px solid rgb(from var(--tipino-secondary-light) r g b / 0.5);
    border-radius: var(--tipino-border-radius);
}

.tipino-wizard-step {
    display: none;
}

.tipino-wizard-step.active {
    display: block;
}

.tipino-wizard-step.hidden {
    display: none;
}

.tipino-wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

/* =========================
   STEPPER
========================= */
.tipino-stepper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 20px 0;
}

.tipino-wizard .tipino-stepper-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.14);
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-white) r g b / 0.04);
    cursor: pointer;
}

.tipino-wizard .tipino-stepper-item.active {
    border-color: rgb(from var(--tipino-accent) r g b / 0.5);
    background: rgb(from var(--tipino-accent) r g b / 0.08);
}

.tipino-wizard .tipino-stepper-item.done {
    border-color: rgb(from var(--tipino-success) r g b / 0.5);
    background: rgb(from var(--tipino-success) r g b / 0.08);
}

.tipino-wizard .tipino-stepper-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--tipino-border-radius-50);
    background: rgb(from var(--tipino-white) r g b / 0.28);
}

.tipino-wizard .tipino-stepper-item.active .tipino-stepper-dot {
    background: var(--tipino-accent);
}

.tipino-wizard .tipino-stepper-item.done .tipino-stepper-dot {
    background: var(--tipino-success);
}

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

.tipino-wizard .tipino-stepper-item.active .tipino-stepper-label {
    color: var(--tipino-accent);
    font-weight: 500;
}

.tipino-wizard .tipino-stepper-item.done .tipino-stepper-label {
    color: var(--tipino-success);
}

/* =========================
   GRID & CARDS
========================= */
.tipino-wizard-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.tipino-wizard .tipino-wizard-card {
    padding: 16px;
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    border-radius: var(--tipino-border-radius);
}

.tipino-wizard .tipino-wizard-card h3 {
    margin: 0 0 14px;
    font-size: var(--tipino-font-size-normal);
    font-weight: 500;
    color: var(--tipino-accent);
}

/* =========================
   SUBSCRIPTION
========================= */
.tipino-wizard .tipino-subscription-card {
    position: relative;
    padding: 16px;
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-text);
}

.tipino-wizard .tipino-subscription-card.most-wanted {
    border-color: rgb(from var(--tipino-accent) r g b / 0.5);
}

.tipino-most-popular-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--tipino-accent);
    color: var(--tipino-text-white);
    padding: 4px 8px;
    border-radius: var(--tipino-border-radius);
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.tipino-subscription-price-container {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.tipino-subscription-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.tipino-wizard .tipino-subscription-title,
.tipino-wizard .tipino-subscription-price .tipino-price {
    color: var(--tipino-text-white);
}

.tipino-subscription-price .tipino-price {
    font-weight: 500;
    font-size: var(--tipino-font-size-medium);
}

.tipino-wizard .tipino-subscription-description {
    margin-top: 8px;
    color: var(--tipino-text);
}

/* =========================
   SUBSCRIPTION SUMMARY
========================= */
.tipino-wizard .tipino-subscription-summary {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    border-radius: var(--tipino-border-radius);
}

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

.tipino-wizard .tipino-summary-label {
    font-weight: 500;
    color: var(--tipino-text);
}

.tipino-wizard .tipino-summary-value {
    color: var(--tipino-text-white);
}

/* =========================
   AVATAR CROPPER
========================= */
.tipino-wizard .tipino-avatar-cropper {
    position: relative;
    width: 240px;
    height: 240px;
    overflow: hidden;
    border: 1px dashed rgb(from var(--tipino-white) r g b / 0.25);
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-white) r g b / 0.05);
}

.tipino-avatar-cropper img {
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    cursor: grab;
}

.tipino-avatar-cropper img.dragging {
    cursor: grabbing;
}

.tipino-wizard .tipino-avatar-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgb(from var(--tipino-text) r g b / 0.5);
}

/* =========================
   PATH OPTIONS
========================= */
.tipino-path-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.tipino-wizard .tipino-path-card {
    display: block;
    padding: 12px;
    cursor: pointer;
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.14);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-text);
    transition: var(--tipino-transition);
}

.tipino-path-card input {
    display: none;
}

.tipino-wizard .tipino-path-card.active {
    border-color: rgb(from var(--tipino-accent) r g b / 0.55);
    background: rgb(from var(--tipino-accent) r g b / 0.08);
}

.tipino-wizard .tipino-path-title {
    font-weight: 500;
    color: var(--tipino-text-white);
}

.tipino-wizard .tipino-path-copy {
    font-size: var(--tipino-font-size-normal);
    color: var(--tipino-text);
}

/* =========================
   SPOTIFY
========================= */
.tipino-spotify-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tipino-spotify-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tipino-wizard .tipino-spotify-copy {
    color: var(--tipino-text);
}

/* =========================
   FORM
========================= */
.tipino-form-group {
    margin-bottom: 12px;
}

.tipino-wizard .tipino-form-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--tipino-text-white);
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
}

.tipino-wizard .tipino-form-group input[type="text"],
.tipino-wizard .tipino-form-group input[type="url"],
.tipino-wizard .tipino-form-group input[type="file"],
.tipino-wizard .tipino-form-group select,
.tipino-wizard .tipino-form-group textarea {
    width: 100%;
    padding: 10px;
    background: rgb(from var(--tipino-white) r g b / 0.06);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.18);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-text-white);
    font-size: var(--tipino-font-size-small);
}

.tipino-wizard .tipino-form-group input[type="text"]::placeholder,
.tipino-wizard .tipino-form-group input[type="url"]::placeholder,
.tipino-wizard .tipino-form-group textarea::placeholder {
    color: rgb(from var(--tipino-text) r g b / 0.45);
}

.tipino-wizard .tipino-form-group input[type="text"]:focus,
.tipino-wizard .tipino-form-group input[type="url"]:focus,
.tipino-wizard .tipino-form-group select:focus,
.tipino-wizard .tipino-form-group textarea:focus {
    outline: none;
    border-color: rgb(from var(--tipino-accent) r g b / 0.6);
    background: rgb(from var(--tipino-white) r g b / 0.09);
}

.tipino-wizard .tipino-form-group select option {
    background: var(--tipino-secondary);
    color: var(--tipino-text-white);
}

/* =========================
   BUTTONS
========================= */
.tipino-wizard .tipino-button {
    padding: 10px 16px;
    border: 1px solid rgb(from var(--tipino-accent) r g b / 0.5);
    border-radius: 8px;
    background: var(--tipino-gradient-accent);
    color: var(--tipino-text-white);
    cursor: pointer;
    font-weight: 500;
}

.tipino-wizard .tipino-button:hover {
    opacity: 0.9;
    background: var(--tipino-gradient-accent);
}

.tipino-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tipino-wizard .tipino-button-ghost {
    background: transparent;
    color: var(--tipino-text);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.28);
}

.tipino-wizard .tipino-button-ghost:hover {
    background: rgb(from var(--tipino-white) r g b / 0.07);
    border-color: rgb(from var(--tipino-white) r g b / 0.45);
    opacity: 1;
}

.tipino-wizard .tipino-button-secondary {
    background: rgb(from var(--tipino-secondary-light) r g b / 0.45);
    color: var(--tipino-accent);
    border: 1px solid rgb(from var(--tipino-accent) r g b / 0.4);
}

.tipino-wizard .tipino-button-secondary:hover {
    background: rgb(from var(--tipino-accent) r g b / 0.12);
    opacity: 1;
}

/* =========================
   TEXT / HELPERS
========================= */
.tipino-wizard .tipino-inline-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tipino-font-size-normal);
    color: var(--tipino-text);
}

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

.tipino-wizard .tipino-help-text {
    margin-top: 4px;
    font-size: var(--tipino-font-size-small);
    color: rgb(from var(--tipino-text) r g b / 0.6);
}

/* =========================
   DISTRIBUTION / ADDITIONAL ARTISTS
========================= */
.tipino-wizard .tipino-distribution-row {
    padding: 6px 10px;
    margin-bottom: 4px;
    gap: 10px;
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
    border-radius: var(--tipino-border-radius);
}

.tipino-wizard .tipino-distribution-summary {
    padding: 10px 14px;
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-text);
}

.tipino-wizard .tipino-summary-badge {
    padding: 2px 8px;
    border-radius: var(--tipino-border-radius-pill);
    background: rgb(from var(--tipino-accent) r g b / 0.18);
    color: var(--tipino-accent);
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
}

.tipino-wizard .tipino-summary-warning {
    color: var(--tipino-accent);
    font-size: var(--tipino-font-size-small);
    opacity: 0.8;
}

/* Compact artist rows */
.tipino-wizard .tipino-distribution-column-artist .tipino-form-group.tipino-artist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.tipino-wizard .tipino-distribution-column-artist .tipino-label {
    flex-shrink: 0;
    min-width: 54px;
    margin-bottom: 0;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    color: var(--tipino-text);
}

.tipino-wizard .tipino-distribution-column-artist .tipino-artist-select-container-wrapper {
    flex: 1;
    min-width: 0;
}

/* =========================
   TOGGLES
========================= */
.tipino-wizard .tipino-wizard-toggles {
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.tipino-wizard .tipino-wizard-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tipino-wizard .tipino-wizard-toggle-label {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    cursor: pointer;
}

/* =========================
   INVITE WIDGET
========================= */
.tipino-wizard .tipino-invite-widget .tipino-card-outer {
    box-shadow: none;
}

		
		/* ***************************** */
		/* MODAL                         */
		/* ***************************** */
		.tipino-modal-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgb(from var(--tipino-secondary) r g b / 0.8);
			display: none; /* Start hidden */
			align-items: center;
			justify-content: center;
			z-index: 1000;
		}

		.tipino-modal-overlay.active {
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			z-index: 9999 !important;
		}

		.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: var(--tipino-transition);
		}

		.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; }
		
		#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-text-white);
        }
        
        .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: var(--tipino-border-radius-50);
			background-color: var(--tipino-success);
			color: var(--tipino-white);
			font-size: var(--tipino-font-size-big);
			margin-bottom: 20px;
		}
	
        #tipino-recovery-message {
            padding: 10px;
            border-radius: var(--tipino-border-radius);
            margin-bottom: 15px;
            display: none;
        }
		/* ***************************** */
		/* //MODAL                       */
		/* ***************************** */
/* ============================================================
   Profile-card edit button
   ============================================================ */
.tipino-profile-card-wrap {
    position: relative;
}

.tipino-profile-edit-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px 7px 10px;
    border-radius: var(--tipino-border-radius-pill);
    border: 1px solid rgb(from var(--tipino-accent) r g b / 0.5);
    background: rgb(from var(--tipino-secondary-light) r g b / 0.8);
    color: var(--tipino-accent);
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    cursor: pointer;
    transition: var(--tipino-transition);
    z-index: 5;
    line-height: 1;
}

.tipino-profile-edit-btn:hover,
.tipino-profile-edit-btn:focus-visible {
    background: rgb(from var(--tipino-accent) r g b / 0.15);
    border-color: rgb(from var(--tipino-accent) r g b / 0.8);
    outline: none;
}

.tipino-profile-edit-btn svg {
    flex-shrink: 0;
    fill: currentColor;
}

/* ============================================================
   Profile edit modal overlay + dialog
   ============================================================ */
.tipino-profile-edit-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgb(var(--tipino-black) / 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.tipino-profile-edit-modal {
    position: relative;
    width: min(1000px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-secondary-light) r g b / 0.5);
    background: linear-gradient(
        160deg,
        rgb(from var(--tipino-secondary-light) r g b / 0.97),
        rgb(from var(--tipino-secondary) r g b / 0.97)
    );
    color: var(--tipino-text);
    display: flex;
    flex-direction: column;
}

/* Header */
.tipino-profile-edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
    flex-shrink: 0;
}

.tipino-profile-edit-modal-header h3 {
    margin: 0;
    font-size: var(--tipino-font-size-large);
    font-weight: 500;
    color: var(--tipino-text-white);
}

.tipino-profile-edit-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--tipino-border-radius-50);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.2);
    background: transparent;
    color: var(--tipino-text);
    cursor: pointer;
    transition: var(--tipino-transition);
    flex-shrink: 0;
}

.tipino-profile-edit-close:hover {
    background: rgb(from var(--tipino-white) r g b / 0.1);
    border-color: rgb(from var(--tipino-white) r g b / 0.35);
}

/* Body */
.tipino-profile-edit-modal-body {
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1;
}

.tipino-profile-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

/* Cards inside modal */
.tipino-profile-edit-card {
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    background: rgb(from var(--tipino-white) r g b / 0.04);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tipino-profile-edit-card-title {
    margin: 0 0 12px;
    font-size: var(--tipino-font-size-normal);
    font-weight: 500;
    color: var(--tipino-accent);
}

/* Form elements */
.tipino-pe-form-group {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tipino-pe-form-group label {
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    color: var(--tipino-text-white);
}

.tipino-pe-form-group input[type="text"],
.tipino-pe-form-group input[type="url"],
.tipino-pe-form-group textarea {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.18);
    background: rgb(from var(--tipino-white) r g b / 0.06);
    color: var(--tipino-text-white);
    font-size: var(--tipino-font-size-small);
    transition: var(--tipino-transition);
    box-sizing: border-box;
}

.tipino-pe-form-group input[type="text"]::placeholder,
.tipino-pe-form-group input[type="url"]::placeholder,
.tipino-pe-form-group textarea::placeholder {
    color: rgb(from var(--tipino-text) r g b / 0.45);
}

.tipino-pe-form-group input[type="text"]:focus,
.tipino-pe-form-group input[type="url"]:focus,
.tipino-pe-form-group textarea:focus {
    border-color: rgb(from var(--tipino-accent) r g b / 0.6);
    background: rgb(from var(--tipino-white) r g b / 0.09);
    outline: none;
}

.tipino-pe-form-group textarea {
    resize: vertical;
    min-height: 72px;
}

.tipino-pe-form-group input[type="range"] {
    width: 100%;
    cursor: pointer;
    accent-color: var(--tipino-accent);
}

.tipino-pe-form-group input[type="file"] {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
}

.tipino-pe-inline-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    cursor: pointer;
}

.tipino-pe-help-text {
    font-size: var(--tipino-font-size-small);
    color: rgb(from var(--tipino-text) r g b / 0.6);
    margin: 0;
}

/* Avatar cropper box */
.tipino-pe-avatar-cropper {
    width: 200px;
    height: 200px;
    border-radius: var(--tipino-border-radius);
    border: 1px dashed rgb(from var(--tipino-white) r g b / 0.25);
    background: rgb(from var(--tipino-white) r g b / 0.06);
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.tipino-pe-avatar-cropper img {
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    cursor: grab;
    transform-origin: top left;
}

.tipino-pe-avatar-cropper img.dragging {
    cursor: grabbing;
}

.tipino-pe-avatar-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: var(--tipino-font-size-small);
    color: rgb(from var(--tipino-text) r g b / 0.5);
}

/* Footer */
.tipino-profile-edit-modal-footer {
    padding: 14px 22px 18px;
    border-top: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tipino-profile-edit-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Status message inside modal */
.tipino-pe-message {
    padding: 9px 14px;
    border-radius: var(--tipino-border-radius);
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
}

.tipino-pe-message--success {
    border: 1px solid rgb(var(--tipino-success) / 0.5);
    background: rgb(var(--tipino-success) / 0.12);
    color: var(--tipino-success)
}

.tipino-pe-message--error {
    border: 1px solid rgb(from var(--tipino-primary) r g b / 0.5);
    background: rgb(from var(--tipino-primary) r g b / 0.12);
    color: var(--tipino-primary);
}

@media (max-width: 600px) {
    .tipino-profile-edit-grid {
        grid-template-columns: 1fr;
    }

    .tipino-profile-edit-btn span {
        display: none;
    }

    .tipino-profile-edit-btn {
        padding: 8px;
    }
}

		
		/* ***************************** */
		/* Service Status Indicator      */
		/* ***************************** */
		.tipino-service-status {
		  background-color: var(--tipino-white);
		  border-radius: var(--tipino-border-radius);
		  padding: 5px 10px;
		  height: 32px;
		  width: 100%;

		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  gap: 10px;

		  color: var(--tipino-secondary);
		  font-size: var(--tipino-font-size-small);
		  transform: var(--tipino-transform);
		}

		.tipino-service-status.spotify {
		  border: 1px solid var(--tipino-spotify);
		}
		
		.tipino-service-status.applemusic {
		  border: 1px solid var(--tipino-applemusic);
		}
		
		.tipino-service-status.tidal {
		  border: 1px solid var(--tipino-tidal);
		}
		
		.tipino-service-status.deezer {
		  border: 1px solid var(--tipino-deezer);
		}
		
		.tipino-service-status.soundcloud {
		  border: 1px solid var(--tipino-soundcloud);
		}
		
		.tipino-service-status.youtubemusic {
		  border: 1px solid var(--tipino-youtubemusic);
		}
		
		.tipino-service-status.lastfm {
		  border: 1px solid var(--tipino-lastfm);
		}
		
		.tipino-service-status.qobuz {
		  border: 1px solid var(--tipino-qobuz);
		}

		.tipino-service-status.amazonmusic {
		  border: 1px solid var(--tipino-amazonmusic);
		}

		.tps-left {
		  display: flex;
		  align-items: center;
		  gap: 8px;
		  min-width: 0;
		}

		.tps-name {
		  white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
		}

		/* right side: actions then dot at far right */
		.tps-right {
		  display: flex;
		  align-items: center;
		  gap: 10px;
		}

		.tps-actions {
		  display: flex;
		  align-items: center;
		  gap: 8px;
		}

		/* dot always last -> aligns perfectly across rows */
		.tps-dot {
		  width: 14px;
		  height: 14px;
		  border-radius: var(--tipino-border-radius-pill);
		  display: inline-block;
		}

		/* status colors */
		.tipino-service-status.is-disconnected .tps-dot { 
			background: var(--tipino-info); 
		}
		.tipino-service-status.is-connected .tps-dot { 
			background: var(--tipino-success); 
		}
		.tipino-service-status.is-error .tps-dot { 
			background: var(--tipino-error); 
			border: 1px solid var(--tipino-white);
		}

		/* round buttons with white icons */
		.tps-btn {
		  width: 22px;
		  height: 22px;
		  border-radius: var(--tipino-border-radius-pill);
		  border: 0;
		  background: var(--tipino-secondary);
		  color: var(--tipino-text-white);
		  display: inline-flex;
		  align-items: center;
		  justify-content: center;
		  padding: 0;
		  cursor: pointer;
		}

		.tps-btn svg {
		  width: 13px;
		  height: 13px;
		}

		.tps-btn svg path {
		  stroke-width: 2.2;
		}

		.tps-btn:hover {
		  transform: var(--tipino-transform);
		}

		.tps-btn:focus-visible {
		  outline: 2px solid rgb(from var(--tipino-accent) r g b / 0.6);
		  outline-offset: 2px;
		}

		.tipino-service-status.is-connected .tps-disconnect,
		.tipino-service-status.is-error .tps-disconnect {
		  background: var(--tipino-primary);
		}
		
		.tipino-service-status.is-error{
			background: rgb(from var(--tipino-error) r g b / 0.4);
			color: var(--tipino-text-white);
		}

		/* ***************************** */
		/* //Service Status Indicator    */
		/* ***************************** */
		
		/* ***************************** */
		/* PAGE LAYOUT                   */
		/* ***************************** */
        .tipino-layout-title {
            text-align: center;
            margin: 30px 0 20px;
            color: var(--tipino-text-dark);
        }

        /* Full Screen Layout */
        .tipino-layout-full {
            width: 100%;
            min-height: 300px;
            padding: 0px;
            margin-bottom: 40px;
        }

        /* 2/3 - 1/3 Layout */
        .tipino-layout-split {
            display: flex;
            width: 100%;
            gap: 20px;
            margin-bottom: 40px;
        }

        .tipino-layout-col-2-3 {
            width: calc(2/3 * var(--max-width) - 10px);
            min-height: 300px;
            padding: 0px;
        }

        .tipino-layout-col-1-3 {
            width: calc(1/3 * var(--max-width) - 10px);
            min-height: 300px;
            padding: 0px;
        }

		.tipino-layout-col-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-text-dark);
            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-text-dark);
			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-text-dark {
			color: var(--tipino-text-dark);
		}
		
		.tipino-text-white {
			color: var(--tipino-text-white);
		}
		
		.tipino-text-black {
			color: var(--tipino-text-black);
		}
		
		.tipino-text-gray {
			color: var(--tipino-text-gray);
		}

		.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);
			font-weight: 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-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-display-inline-block {
			display: inline-block;
		}
		
		.tipino-display-block {
			display: block;
		}
		/* ***************************** */
		/* //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-text-gray) r g b / 0.1);
			color: var(--tipino-text);
			border: 1px solid rgb(from var(--tipino-text-gray) r g b / 0.3);
		}
        /* Structural base for claim/status pill badges (color applied inline) */
        .tipino-claim-status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: var(--tipino-border-radius-pill);
            font-size: var(--tipino-font-size-small);
        }

		/* ***************************** */
		/* //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: var(--tipino-border-radius);
			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: var(--tipino-border-radius);
		}

		.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: var(--tipino-transform);
		}

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

		.tipino-period-button.active {
			font-weight: 500;
			color: var(--tipino-primary);
			border-color: var(--tipino-primary);
			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: 500;
			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: var(--tipino-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                */
		/* ***************************** */
		

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


/* =============================================================
   RESPONSIVE STYLES
   Appended – no existing rules modified.
   Breakpoints: 1024 | 768 | 520 | 400
   ============================================================= */

/* -------------------------------------------------------
   Global: prevent horizontal overflow from decorative blobs
   Note: existing rule at line ~6439 sets overflow: visible !important
   on #page/.container, so we must target html/body which are not
   in that selector list.
   ------------------------------------------------------- */

html {
	overflow-x: hidden;
}

body {
	overflow-x: hidden;
	max-width: 100vw;
}

.morphing-background,
.bottom-blobs-container {
	overflow: hidden;
	max-width: 100%;
}

/* Blobs: constrain to viewport so they don't expand page width */
.blob {
	max-width: 100vw;
}

/* Extra mobile touch-target for hamburger */
@media (max-width: 768px) {
	button.menu-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 10px;
		background: none;
		border: none;
		cursor: pointer;
	}
}

/* -------------------------------------------------------
   1024px – Large Tablet / Landscape
   ------------------------------------------------------- */
@media (max-width: 1024px) {

	/* Stats grids: reduce fixed column counts */
	.tipino-stats-grid-5 {
		grid-template-columns: repeat(3, 1fr);
	}

	.tipino-stats-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* New-artists: 5 → 4 columns */
	.tipino-new-artists-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Genres sitemap: 4 → 3 columns */
	.tipino-genres-sitemap-columns {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* -------------------------------------------------------
   768px – Tablet Portrait
   (Base nav/footer rules already exist at this breakpoint;
    these rules extend and fix them.)
   ------------------------------------------------------- */
@media (max-width: 768px) {

	/* --- Column helpers --- */
	.tipino-layout-col-2-3,
	.tipino-layout-col-1-3,
	.tipino-layout-col-1-2 {
		width: 100% !important;
		min-width: 0 !important;
	}

	/* --- Header: logo + hamburger stay on one horizontal row --- */
	.header-container {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.site-logo {
		flex: 1;
	}

	.main-navigation {
		flex: 0 0 auto;
	}

	/* Hamburger button: touch-friendly size */
	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 10px;
	}

	/* Dropdown spans full header width, drops below header row */
	.main-navigation.toggled ul {
		top: 100%;
		left: 0;
		right: 0;
		border-top: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
		border-radius: 0 0 var(--tipino-border-radius) var(--tipino-border-radius);
	}

	/* --- Footer: proper spacing when stacked --- */
	.footer-container {
		gap: 32px;
	}

	.footer-menus {
		gap: 24px;
		width: 100%;
	}

	.copyright-bar {
		padding: 16px 0;
	}

	/* --- Stats grids: 5/4/3 → 2 columns --- */
	.tipino-stats-grid-5,
	.tipino-stats-grid-4,
	.tipino-stats-grid-3 {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	/* --- Achievements: 3 → 2 columns --- */
	.tipino-achievements-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	/* --- New-artists: 4 → 3 columns --- */
	.tipino-new-artists-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	/* --- Genres sitemap: 3 → 2 columns --- */
	.tipino-genres-sitemap-columns {
		grid-template-columns: repeat(2, 1fr);
	}

	/* --- tipino-layout-split: stack vertically --- */
	.tipino-layout-split {
		flex-direction: column;
		gap: 16px;
	}

	.tipino-layout-col-2-3,
	.tipino-layout-col-1-3,
	.tipino-layout-col-1-2 {
		width: 100%;
	}

	/* --- User payout grid: 2 → 1 column --- */
	.tipino-user-payout-grid {
		grid-template-columns: 1fr;
	}

	/* --- Breakdown items: 3-col → 2-col --- */
	.tipino-breakdown-item {
		grid-template-columns: 1fr auto;
	}

	/* --- Distribution rows: stack artist + slider vertically --- */
	.tipino-distribution-row {
		flex-wrap: wrap;
		gap: 10px;
	}

	.tipino-distribution-column-artist {
		flex: 1 1 100%;
		min-width: 0;
	}

	.tipino-distribution-column-slider {
		flex: 1 1 100%;
		min-width: 0;
	}

	/* --- Distribution method cards: 2 per row --- */
	.tipino-radio-card {
		flex: 1 1 calc(50% - 10px);
		min-width: 0;
	}

	/* --- Modals: full width --- */
	.tipino-modal-content {
		width: calc(100vw - 32px) !important;
		min-width: 0 !important;
		max-width: 100%;
	}

	/* --- Page headings: scale down slightly --- */
	h1 {
		font-size: clamp(1.5rem, 5vw, 2rem);
	}

	h2 {
		font-size: clamp(1.2rem, 4vw, 1.6rem);
	}
}

/* -------------------------------------------------------
   520px – Mobile Landscape / Large Phone
   ------------------------------------------------------- */
@media (max-width: 520px) {

	/* Container: tighter horizontal padding */
	.container {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Logo: scale for narrow screens */
	.site-logo img {
		height: 40px;
		width: auto;
	}

	/* Page content: reduce vertical padding */
	.site-content {
		padding: 20px 0;
	}

	/* --- Stats grids: all → 1 column --- */
	.tipino-stats-grid-5,
	.tipino-stats-grid-4,
	.tipino-stats-grid-3,
	.tipino-stats-grid-2 {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	/* --- Achievements: keep 2 columns (compact items) --- */
	.tipino-achievements-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	/* --- New-artists: 3 → 2 columns --- */
	.tipino-new-artists-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	/* --- Genres sitemap: 2 → 1 column --- */
	.tipino-genres-sitemap-columns {
		grid-template-columns: 1fr;
	}

	/* --- Breakdown items: stack fully --- */
	.tipino-breakdown-item {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	/* --- Distribution method cards: full width --- */
	.tipino-radio-card {
		flex: 1 1 100%;
	}
}

/* -------------------------------------------------------
   400px – Small Phone (e.g. iPhone SE)
   ------------------------------------------------------- */
@media (max-width: 400px) {

	/* Minimal container padding */
	.container {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* --- Achievements: 2 → 1 column on very small screens --- */
	.tipino-achievements-grid {
		grid-template-columns: 1fr;
	}

	/* --- New-artists: 2 → 1 column --- */
	.tipino-new-artists-grid {
		grid-template-columns: 1fr;
	}

	/* Reduce grid gaps further */
	.tipino-stats-grid-5,
	.tipino-stats-grid-4,
	.tipino-stats-grid-3,
	.tipino-stats-grid-2 {
		gap: 6px;
	}
}
/* -------------------------------------------------------
   Mobile Navigation – Submenu fixes
   Appended; no existing rules modified.
   ------------------------------------------------------- */
@media (max-width: 768px) {

	/* Override line 980: sub-menu must be hidden by default, not block */
	.main-navigation .sub-menu {
		display: none !important;
		position: static !important;
		background: rgb(from var(--tipino-secondary) r g b / 0.95) !important;
		border-left: 2px solid rgb(from var(--tipino-accent) r g b / 0.5) !important;
		border-radius: 0 0 var(--tipino-border-radius) var(--tipino-border-radius) !important;
		margin: 4px 0 8px 16px !important;
		padding: 4px 0 !important;
		z-index: auto !important;
	}

	/* Show submenu when JS adds tpn-submenu-open to parent li */
	.main-navigation li.tpn-submenu-open > .sub-menu,
	.main-navigation li.tpn-mobile-open > .sub-menu {
		display: block !important;
	}

	/* Submenu link styling */
	.main-navigation .sub-menu a {
		padding: 4px 20px !important;
		color: var(--tipino-text) !important;
		display: block !important;
		font-size: 0.88em !important;
		border-bottom: none !important;
		opacity: 0.85;
	}

	.main-navigation .sub-menu a:hover {
		color: var(--tipino-accent) !important;
		opacity: 1;
	}

	/* Indicate expandable items with a chevron */
	.main-navigation li.menu-item-has-children > a::after {
		content: ' ▾';
		font-size: 0.8em;
		opacity: 0.7;
	}

	.main-navigation li.tpn-mobile-open > a::after {
		content: ' ▴';
	}
}


/* =============================================================
   ARTIST HEADER - always top-align name with thumbnail
   ============================================================= */

.tipino-card-outer .tipino-artist-detail-header {
    align-items: flex-start;
}

/* =============================================================
   ARTIST FOLLOWERS BAR - row above stats cards (right column)
   ============================================================= */

.tipino-artist-followers-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.tipino-artist-followers-bar-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.tipino-artist-followers-label {
    margin: 0;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    color: var(--tipino-text);
}

.tipino-artist-follower-avatars {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tipino-artist-followers-empty {
    display: inline-block;
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    font-style: italic;
    padding: 7px 14px;
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.12);
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-white) r g b / 0.03);
    line-height: 1.4;
}

/* placeholder initials inside sidebar avatar container */
.tipino-artist-follower-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--tipino-white) r g b / 0.08);
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-extra-small);
    font-weight: 500;
}

.tipino-artist-followers-bar-right {
    flex-shrink: 0;
}

/* =============================================================
   LISTEN BUTTON - Unified streaming dropdown (icon-only)
   ============================================================= */

.tipino-listen-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    vertical-align: middle;
}

.tipino-listen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: rgb(from var(--tipino-white) r g b / 0.06);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.18);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-text-white);
    cursor: pointer;
    transition: var(--tipino-transition);
    flex-shrink: 0;
}

.tipino-listen-btn:hover,
.tipino-listen-btn[aria-expanded="true"] {
    background: var(--tipino-accent);
    border-color: var(--tipino-accent);
    color: var(--tipino-white);
    transform: var(--tipino-transform);
}

.tipino-listen-btn svg {
    display: block;
    pointer-events: none;
}

.tipino-listen-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 9999;
    min-width: 170px;
    background: var(--tipino-secondary);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.14);
    border-radius: var(--tipino-border-radius);
    overflow: hidden;
}

.tipino-listen-dropdown.is-open {
    display: block;
}

.tipino-listen-dropdown--up {
    top: auto;
    bottom: calc(100% + 4px);
}

.tipino-listen-dropdown__header {
    padding: 7px 12px 5px;
    font-size: var(--tipino-font-size-extra-small);
    color: rgb(from var(--tipino-white) r g b / 0.45);
    font-weight: 500;
    border-bottom: 1px solid rgb(from var(--tipino-white) r g b / 0.07);
    pointer-events: none;
}

.tipino-listen-dropdown__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--tipino-text-white);
    text-decoration: none;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    transition: var(--tipino-transition);
}

.tipino-listen-dropdown__item:hover {
    background: rgb(from var(--tipino-white) r g b / 0.06);
    color: var(--tipino-text-white);
}

.tipino-listen-dropdown__item img {
    flex-shrink: 0;
    border-radius: var(--tipino-border-radius);
    display: block;
}

/* =============================================================
   FIX: Doppelter Scrollbar
   temp-css.css wird VOR style.css geladen. style.css setzt
   body { overflow-x: hidden } was body zu einem eigenen
   Scroll-Container macht (overflow-y wird implizit auto).
   Resultat: body-Scrollbar (innen) + html-Scrollbar (aussen).
   Fix: overflow-x: visible !important damit der Overflow an html
   propagiert und nur ein einziger Scroll-Container existiert.
   html { overflow-x: hidden } in style.css verhindert weiterhin
   horizontalen Überlauf auf Viewport-Ebene.
   ============================================================= */
body {
    overflow-x: visible !important;
}

/* =============================================================
   FOLLOWED ARTISTS ROW
   Horizontal avatar row with hover tooltip for artist name.
   ============================================================= */

.tipino-followed-artists-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.tipino-followed-artist-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tipino-followed-artist-item .tipino-artist-thumbnail {
    margin-right: 0;
}

.tipino-followed-artist-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: var(--tipino-transform);
    background: var(--tipino-secondary);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.15);
    color: var(--tipino-text-white);
    font-size: var(--tipino-font-size-small);
    padding: 3px 8px;
    border-radius: var(--tipino-border-radius);
    white-space: nowrap;
    max-width: min(240px, calc(100vw - 48px));
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    transition: var(--tipino-transition);
    z-index: 10;
}

.tipino-followed-artist-item:hover .tipino-followed-artist-tooltip,
.tipino-followed-artist-item:focus-within .tipino-followed-artist-tooltip {
    opacity: 1;
}

/* =============================================================
   FOLLOWED ARTISTS FULL-PAGE GRID
   Large-thumbnail grid, 5-6 per row. Artist names use the same
   hover tooltip pattern as the compact widget row.
   ============================================================= */

.tipino-followed-artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 16px;
}

.tipino-followed-artists-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.tipino-followed-artists-page-meta {
    min-width: 0;
}

.tipino-followed-artists-page-count {
    margin: 4px 0 0;
}

.tipino-followed-artists-back-link {
    width: auto;
    min-width: 180px;
    margin-left: auto;
    text-align: center;
    flex: 0 0 auto;
}

/* make large thumbnail fill its grid cell instead of staying fixed 160px */
.tipino-followed-artists-grid .tipino-followed-artist-thumbnail.tipino-artist-thumbnail-large {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-right: 0 !important;
}

.tipino-followed-artist-item--large {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* thumbnail acts as the hover/overlay container */
.tipino-followed-artist-thumbnail {
    position: relative;
    margin-right: 0 !important;
    cursor: pointer;
}

.tipino-followed-artist-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 540px) {
    .tipino-followed-artists-page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .tipino-followed-artists-back-link {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }
}

/* =============================================================
   SOCIAL POSTS - Composer: topic + reaction-set selectors
   ============================================================= */

.tipino-post-topic-select,
.tipino-post-set-select {
    width: 100%;
    background: rgb(from var(--tipino-white) r g b / 0.06);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.18);
    color: var(--tipino-text-white);
    border-radius: var(--tipino-border-radius);
    padding: 10px 14px;
    font-size: var(--tipino-font-size-normal);
    appearance: none;
    cursor: pointer;
}

.tipino-post-topic-select:focus,
.tipino-post-set-select:focus {
    outline: none;
    border-color: var(--tipino-accent);
}

.tipino-post-topic-select option,
.tipino-post-set-select option,
.tipino-post-topic-select optgroup {
    background: var(--tipino-secondary);
    color: var(--tipino-text-white);
}

.tipino-post-set-hint {
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    opacity: 0.55;
    margin-left: 6px;
}

/* =============================================================
   SOCIAL POSTS - Feed + Post Card
   ============================================================= */

.tipino-social-feed {
    display: flex;
    flex-direction: column;
    max-width: 680px;
}

.tipino-social-post {
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    border-radius: var(--tipino-border-radius);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Topic badge */
.tipino-post-topic-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tipino-post-topic-icon svg {
    width: 18px;
    height: 18px;
    color: var(--tipino-accent);
}

.tipino-post-topic-name {
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--tipino-accent);
    opacity: 0.85;
}

/* Post content */
.tipino-post-content {
    font-size: var(--tipino-font-size-normal);
    line-height: 1.65;
    color: var(--tipino-text);
}

.tipino-post-content p {
    margin: 0 0 10px;
}

.tipino-post-content p:last-child {
    margin-bottom: 0;
}

/* Post image */
.tipino-post-image img {
    width: 100%;
    border-radius: var(--tipino-border-radius);
    display: block;
}

/* Post header: topic badge + date on same row */
.tipino-post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tipino-post-date {
    font-size: var(--tipino-font-size-small);
    opacity: 0.45;
    white-space: nowrap;
    flex-shrink: 0;
}

/* =============================================================
   SOCIAL POSTS - Reaction picker
   ============================================================= */

/* Listener highlight (above action bar) */
.tipino-reaction-highlight {
    font-size: var(--tipino-font-size-small);
    font-style: italic;
    color: var(--tipino-accent);
    opacity: 0.8;
    margin-bottom: 4px;
}

/* =============================================================
   FACEBOOK-STYLE ACTION BAR
   ============================================================= */
.tipino-post-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
    gap: 8px;
}

/* Reaction summary (left side) */
.tipino-reaction-summary {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
}

.tipino-reaction-summary-icons {
    display: flex;
}

.tipino-reaction-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--tipino-border-radius-50);
    background: rgb(from var(--tipino-white) r g b / 0.06);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.12);
    margin-left: -4px;
    overflow: hidden;
}

.tipino-reaction-summary-icon:first-child {
    margin-left: 0;
}

.tipino-reaction-summary-icon svg,
.tipino-reaction-summary-icon .tipino-reaction-placeholder {
    width: 13px;
    height: 13px;
}

.tipino-reaction-total-count {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    opacity: 0.7;
}

/* Right: action buttons row */
.tipino-post-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Shared action button base */
.tipino-post-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: var(--tipino-border-radius);
    background: transparent;
    color: var(--tipino-text);
    cursor: pointer;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    transition: var(--tipino-transition);
    white-space: nowrap;
}

.tipino-post-action-btn:hover:not(:disabled) {
    background: rgb(from var(--tipino-white) r g b / 0.07);
}

.tipino-post-action-btn:disabled {
    cursor: default;
}

/* React button icon */
.tipino-react-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tipino-react-btn-icon svg,
.tipino-react-btn-icon .tipino-reaction-placeholder {
    width: 20px;
    height: 20px;
}

.tipino-react-btn--active {
    color: var(--tipino-accent);
}

/* Share button icon */
.tipino-share-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.tipino-share-btn-icon svg {
    width: 18px;
    height: 18px;
}

.tipino-share-action-btn--locked {
    opacity: 0.38;
    cursor: not-allowed;
}

/* =============================================================
   REACTION PICKER POPUP
   ============================================================= */
.tipino-react-wrap {
    position: relative;
}

.tipino-reaction-picker {
    position: absolute;
    bottom: calc(100% + 10px);
    left: -8px;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 10px;
    background: var(--tipino-secondary);
    border-radius: var(--tipino-border-radius);
    
    /* hidden by default */
    opacity: 0;
    pointer-events: none;
    transform: var(--tipino-transform);
    transform-origin: bottom left;
    transition: var(--tipino-transition);
}

.tipino-reaction-picker.tipino-picker--visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

/* When near top of viewport → show below the button */
.tipino-reaction-picker.tipino-picker--below {
    bottom: auto;
    top: calc(100% + 10px);
    transform-origin: top left;
}

.tipino-reaction-picker.tipino-picker--below.tipino-picker--visible {
    transform: scale(1) translateY(0);
}

/* Individual picker icon buttons */
.tipino-reaction-picker-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--tipino-border-radius-50);
    transition: var(--tipino-transition);
    transform-origin: bottom center;
    overflow: visible;
}

.tipino-reaction-picker-item:hover {
    transform: var(--tipino-transform);
    z-index: 1;
}

.tipino-reaction-picker-item svg,
.tipino-reaction-picker-item .tipino-reaction-placeholder {
    width: 38px;
    height: 38px;
    display: block;
    pointer-events: none;
}

.tipino-picker-item--active {
    
}

/* Tooltip via pseudo-element */
.tipino-reaction-picker-item::after {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: var(--tipino-transform);
    background: rgb(from var(--tipino-black) r g b / 0.85);
    color: var(--tipino-white);
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    padding: 3px 9px;
    border-radius: var(--tipino-border-radius);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: var(--tipino-transition);
}

.tipino-reaction-picker-item:hover::after {
    opacity: 1;
}

/* Tooltip below when picker is below */
.tipino-picker--below .tipino-reaction-picker-item::after {
    bottom: auto;
    top: calc(100% + 8px);
}

/* =============================================================
   GLOBAL FEED - artist header per item
   ============================================================= */

/* Compact global-feed list */
.tipino-global-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tipino-gf-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid rgb(from var(--tipino-white) r g b / 0.07);
    transition: var(--tipino-transition);
}

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


/* Body */
.tipino-gf-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Meta row: artist name + date */
.tipino-gf-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}


.tipino-gf-date {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    opacity: 0.6;
    margin-left: auto;
    white-space: nowrap;
}

/* Topic label */
.tipino-gf-topic {
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    color: var(--tipino-accent);
}

/* Truncated content */
.tipino-gf-excerpt {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* =============================================================
   NOTIFICATION BELL + DROPDOWN PANEL
   ============================================================= */

/* Wrap – anchor for the dropdown */
.tipino-notif-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Bell button */
.tipino-notif-bell {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--tipino-accent);
    padding: 0px;
    display: flex;
    align-items: center;
}

.tipino-notif-bell:hover {
    color: var(--tipino-primary-light);
}

.main-navigation .tipino-notif-menu-item {
    display: flex;
    align-items: flex-end;
}

.main-navigation .tipino-notif-wrap {
    align-items: flex-end;
}

.main-navigation .tipino-notif-bell {
    align-items: center;
    justify-content: center;
    padding: 10px;
    line-height: 1;
}

.main-navigation .tipino-notif-bell svg {
    display: block;
    width: 27px;
    height: 27px;
}

/* Unread badge on the bell */
.tipino-notif-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--tipino-primary);
    color: var(--tipino-white);
    font-size: var(--tipino-font-size-extra-small);
    font-weight: 500;
    min-width: 16px;
    height: 16px;
    border-radius: var(--tipino-border-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}

/* Dropdown panel */
.tipino-notif-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 16px);
    background: var(--tipino-secondary);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.12);
    border-radius: var(--tipino-border-radius);
    z-index: 9999;
    overflow: hidden;
}

.tipino-notif-panel[hidden] {
    display: none !important;
}

/* Panel header */
.tipino-notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
}

.tipino-notif-panel-title {
    font-size: var(--tipino-font-size-normal);
    font-weight: 500;
    color: var(--tipino-text-white);
}

.tipino-notif-mark-all {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--tipino-accent);
    font-size: var(--tipino-font-size-small);
    padding: 0;
    text-decoration: underline;
}

.tipino-notif-mark-all:hover {
    opacity: 0.75;
}

/* Tab bar */
.tipino-notif-tabs {
    display: flex;
    border-bottom: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
}

.tipino-notif-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 9px 0;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    color: var(--tipino-text);
    cursor: pointer;
    transition: var(--tipino-transition);
}

.tipino-notif-tab:hover {
    color: var(--tipino-text-white);
}

.tipino-notif-tab--active {
    color: var(--tipino-text-white);
    border-bottom-color: var(--tipino-accent);
}

/* Tab panes */
.tipino-notif-tab-pane {
    overflow-y: auto;
    max-height: 400px;
}

.tipino-notif-tab-pane[hidden] {
    display: none !important;
}

/* Notification list */
.tipino-notif-list {
    margin: 0;
    padding: 0;
}

/* Individual item */
.tipino-notif-item {
    border-bottom: 1px solid rgb(from var(--tipino-white) r g b / 0.06);
    transition: var(--tipino-transition);
}

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

.tipino-notif-item--unread {
    background: rgb(from var(--tipino-accent) r g b / 0.06);
}

.tipino-notif-item-link {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--tipino-text);
}

.tipino-notif-item-link:hover {
    background: rgb(from var(--tipino-white) r g b / 0.04);
    color: var(--tipino-text-white);
}

/* Artist avatar */
.tipino-notif-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--tipino-border-radius-50);
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.tipino-notif-avatar--empty {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: var(--tipino-border-radius-50);
    background: rgb(from var(--tipino-white) r g b / 0.08);
    flex-shrink: 0;
}

/* Item body */
.tipino-notif-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tipino-notif-item-artist {
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--tipino-text-white);
}

.tipino-notif-item-topic {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Time label */
.tipino-notif-item-time {
    font-size: var(--tipino-font-size-small);
    opacity: 0.45;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Empty / loading states */
.tipino-notif-empty {
    padding: 24px 16px;
    font-size: var(--tipino-font-size-small);
    opacity: 0.5;
    text-align: center;
    color: var(--tipino-text);
}

.tipino-notif-loading {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

/* =============================================================
   USER SHARES – share card (global-feed style + comment + delete)
   ============================================================= */

/* Comment + delete button on one row */
.tipino-share-card-comment-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.tipino-share-card-comment {
    flex: 1;
    margin: 0;
    padding-left: 10px;
    border-left: 3px solid var(--tipino-primary);
    font-style: italic;
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    line-height: 1.5;
}

/* Delete button (owner only) – icon only, inline after comment */
.tipino-share-card-delete {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--tipino-primary);
    padding: 2px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    opacity: 0.45;
    transition: var(--tipino-transition);
}

.tipino-share-card-delete:hover {
    opacity: 1;
}

/* Share comment popover */
.tipino-share-popover {
    position: absolute;
    z-index: 9999;
    background: var(--tipino-secondary);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.15);
    border-radius: var(--tipino-border-radius);
    padding: 12px;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tipino-share-popover-input {
    width: 100%;
    background: rgb(from var(--tipino-white) r g b / 0.06);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.18);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-text-white);
    font-size: var(--tipino-font-size-small);
    padding: 8px 10px;
    resize: none;
    font-family: inherit;
    line-height: 1.45;
    box-sizing: border-box;
}

.tipino-share-popover-input:focus {
    outline: none;
    border-color: var(--tipino-accent);
}

.tipino-share-popover-input::placeholder {
    color: var(--tipino-text);
    opacity: 0.5;
}

.tipino-share-popover-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.tipino-share-popover-submit {
    background: var(--tipino-gradient-accent);
    border: none;
    border-radius: var(--tipino-border-radius);
    cursor: pointer;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    color: var(--tipino-white);
    padding: 6px 18px;
}

.tipino-share-popover-submit:hover {
    opacity: 0.88;
}

.tipino-share-popover-cancel {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    padding: 0;
    opacity: 0.55;
}

.tipino-share-popover-cancel:hover {
    opacity: 1;
}

/* Delete confirmation popover */
.tipino-share-delete-popover {
    position: absolute;
    z-index: 9999;
    background: var(--tipino-secondary);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.15);
    border-radius: var(--tipino-border-radius);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.tipino-share-delete-popover-text {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
}

.tipino-share-delete-confirm-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    color: var(--tipino-primary);
    padding: 0;
}

.tipino-share-delete-confirm-btn:hover {
    text-decoration: underline;
}

.tipino-share-delete-cancel-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    padding: 0;
    opacity: 0.55;
}

.tipino-share-delete-cancel-btn:hover {
    
	opacity: 1;
}

/* Infinite scroll loading row */
.tipino-user-shares-loading {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.tipino-user-shares-sentinel {
    height: 1px;
}

/* =============================================================
   ARTIST SOCIAL STATS DASHBOARD
   ============================================================= */

.tipino-artist-stats-feed {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
}

.tipino-artist-stats-post {
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    border-radius: var(--tipino-border-radius);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tipino-artist-stats-post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tipino-artist-stats-date {
    font-size: var(--tipino-font-size-small);
    opacity: 0.45;
    white-space: nowrap;
}

.tipino-artist-stats-topic {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-accent);
    background: rgb(from var(--tipino-accent) r g b / 0.12);
    border-radius: var(--tipino-border-radius-pill);
    padding: 2px 8px;
    white-space: nowrap;
}

.tipino-artist-stats-excerpt {
    font-size: var(--tipino-font-size-small);
    opacity: 0.65;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Stats grid: reach / shares / total reactions */
.tipino-artist-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.tipino-stats-card {
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
    border-radius: var(--tipino-border-radius);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tipino-stats-card-label {
    font-size: var(--tipino-font-size-small);
    opacity: 0.5;
}

.tipino-stats-card-value {
    font-size: var(--tipino-font-size-large);
    font-weight: 500;
    color: var(--tipino-text-white);
    line-height: 1;
}

.tipino-stats-card-sub {
    font-size: var(--tipino-font-size-extra-small);
    opacity: 0.4;
}

/* Reaction breakdown */
.tipino-stats-section-title {
    font-size: var(--tipino-font-size-small);
    text-transform: uppercase;
    opacity: 0.45;
    margin-bottom: 6px;
}

.tipino-stats-reaction-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid rgb(from var(--tipino-white) r g b / 0.05);
    font-size: var(--tipino-font-size-small);
}

.tipino-stats-reaction-row:last-child {
    border-bottom: none;
}

.tipino-stats-reaction-label {
    flex: 1;
    color: var(--tipino-text);
}

.tipino-stats-reaction-total {
    font-weight: 500;
    color: var(--tipino-text-white);
    min-width: 28px;
    text-align: right;
}

.tipino-stats-reaction-listeners {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-accent);
    opacity: 0.8;
}

/* Share comments */
.tipino-stats-share-comment {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 5px 0;
    font-size: var(--tipino-font-size-small);
    border-bottom: 1px solid rgb(from var(--tipino-white) r g b / 0.05);
}

.tipino-stats-share-comment:last-child {
    border-bottom: none;
}

.tipino-stats-share-author {
    font-weight: 500;
    color: var(--tipino-text-white);
    white-space: nowrap;
    font-size: var(--tipino-font-size-small);
}

.tipino-stats-share-text {
    color: var(--tipino-text);
    font-style: italic;
}

/* =============================================================
   POST OVERVIEW PAGE (infinite scroll)
   ============================================================= */

.tipino-post-overview {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tipino-post-overview-feed {
    display: flex;
    flex-direction: column;
	gap: 10px;
}

.tipino-post-overview-sentinel {
    height: 1px;
}

.tipino-post-overview-loading {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

/* Anchor-target highlight when navigating from notifications */
.tipino-post-anchor-highlight {
    animation: tipino-anchor-flash 1.8s ease forwards;
}

@keyframes tipino-anchor-flash {
    0%   { box-shadow: 0 0 0 3px rgb(from var(--tipino-accent) r g b / 0.7); }
    60%  { box-shadow: 0 0 0 3px rgb(from var(--tipino-accent) r g b / 0.3); }
    100% { box-shadow: none; }
}

/* Spinner */
.tipino-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgb(from var(--tipino-white) r g b / 0.15);
    border-top-color: var(--tipino-accent);
    border-radius: var(--tipino-border-radius-50);
    animation: tipino-spin 0.7s linear infinite;
}

@keyframes tipino-spin {
    to { transform: rotate(360deg); }
}

/* =============================================================
   DISCOGS INTEGRATION — Collection UI
   ============================================================= */

/* ── Preview strip (last 5, on public profile) ── */
.tipino-discogs-preview-section {
    margin: 24px 0 8px;
}

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

.tipino-discogs-preview-more {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-accent);
    text-decoration: none;
}
.tipino-discogs-preview-more:hover {
    text-decoration: underline;
}

.tipino-discogs-preview-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tipino-discogs-preview-strip::-webkit-scrollbar { display: none; }

.tipino-discogs-preview-card {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--tipino-border-radius);
    overflow: hidden;
    display: block;
    background: rgb(from var(--tipino-white) r g b / 0.06);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.12);
    text-decoration: none;
    transition: var(--tipino-transition);
}
.tipino-discogs-preview-card:hover {
    transform: var(--tipino-transform);
    border-color: rgb(from var(--tipino-white) r g b / 0.28);
}

.tipino-discogs-preview-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tipino-discogs-preview-card__placeholder {
    width: 100%;
    height: 100%;
    background: rgb(from var(--tipino-white) r g b / 0.04);
}

/* ── Format badge ── */
.tipino-discogs-format-badge {
    position: absolute;
    bottom: 2px;
    left: 2px;
    padding: 1px 2px;
    border-radius: var(--tipino-border-radius);
    font-size: var(--tipino-font-size-extra-small);
    font-weight: 500;
    color: var(--tipino-secondary);
    background: var(--tipino-accent);
    pointer-events: none;
}

/* ── Connect banner ── */
.tipino-discogs-connect-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 24px;
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    text-align: center;
    color: var(--tipino-text);
    margin: 24px 0;
}

/* ── Full collection page ── */
.tipino-discogs-collection-wrap {
    width: 100%;
}

.tipino-discogs-collection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tipino-discogs-collection-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tipino-discogs-count {
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    color: var(--tipino-text-white);
}

.tipino-discogs-sync-time {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    opacity: 0.6;
}

.tipino-discogs-sync-btn {
    font-size: var(--tipino-font-size-small);
    padding: 6px 14px;
    cursor: pointer;
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.2);
    background: transparent;
    color: var(--tipino-text-white);
    transition: var(--tipino-transition);
}
.tipino-discogs-sync-btn:hover:not([disabled]) {
    border-color: var(--tipino-accent);
    color: var(--tipino-accent);
}
.tipino-discogs-sync-btn[disabled],
.tipino-discogs-sync-btn.tipino-button--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Filter bar ── */
.tipino-discogs-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.tipino-discogs-filter-chip {
    padding: 4px 12px;
    border-radius: var(--tipino-border-radius);
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    text-decoration: none;
    color: var(--tipino-text);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.15);
    background: transparent;
    transition: var(--tipino-transition);
}
.tipino-discogs-filter-chip:hover,
.tipino-discogs-filter-chip.active {
    color: var(--tipino-text-white);
    border-color: var(--tipino-accent);
    background: rgb(from var(--tipino-accent) r g b / 0.12);
}

/* ── Collection grid ── */
.tipino-discogs-collection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 900px) {
    .tipino-discogs-collection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .tipino-discogs-collection-grid {
        grid-template-columns: 1fr;
    }
}

.tipino-discogs-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    text-decoration: none;
    color: inherit;
    transition: var(--tipino-transition);
    overflow: hidden;
}
.tipino-discogs-card:hover {
    border-color: rgb(from var(--tipino-white) r g b / 0.22);
    background: rgb(from var(--tipino-white) r g b / 0.07);
}

.tipino-discogs-card__thumb {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: var(--tipino-border-radius);
    overflow: hidden;
    background: rgb(from var(--tipino-white) r g b / 0.06);
}

.tipino-discogs-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tipino-discogs-card__no-thumb {
    width: 100%;
    height: 100%;
    background: rgb(from var(--tipino-white) r g b / 0.04);
}

.tipino-discogs-card__thumb .tipino-discogs-format-badge {
    font-size: var(--tipino-font-size-extra-small);
    padding: 1px 4px;
}

.tipino-discogs-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    justify-content: center;
	vertical-align: top;
}

.tipino-discogs-card__artist {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-accent);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tipino-discogs-card__title {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text-white);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tipino-discogs-card__year {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    opacity: 0.6;
}

.tipino-discogs-card__comment {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    opacity: 0.75;
    font-style: italic;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tipino-discogs-empty {
    color: var(--tipino-text);
    opacity: 0.6;
    padding: 24px 0;
    text-align: center;
}

/* -----------------------------------------------------------------------
   Artist Posts Overview  [tipino_artist_posts_overview]
   ----------------------------------------------------------------------- */
.tipino-apo-wrap {
    max-width: 860px;
}

.tipino-apo-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 8px;
}

.tipino-apo-empty,
.tipino-apo-no-shares {
    color: var(--tipino-text);
    opacity: 0.6;
    padding: 16px;
    font-size: var(--tipino-font-size-small);
}

.tipino-apo-item {
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    border-radius: var(--tipino-border-radius);
    padding: 12px 14px;
    transition: var(--tipino-transition);
}

.tipino-apo-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.tipino-apo-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tipino-apo-date {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    opacity: 0.7;
}

.tipino-apo-topic {
    font-size: var(--tipino-font-size-small);
    background: rgb(from var(--tipino-primary) r g b / 0.15);
    color: var(--tipino-primary);
    border-radius: var(--tipino-border-radius);
    padding: 2px 8px;
    font-weight: 500;
}

.tipino-apo-has-image {
    font-size: var(--tipino-font-size-small);
    opacity: 0.6;
}

.tipino-apo-excerpt {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text-white);
    margin-bottom: 10px;
    line-height: 1.45;
}

.tipino-apo-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tipino-apo-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tipino-apo-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgb(from var(--tipino-white) r g b / 0.07);
    border-radius: var(--tipino-border-radius);
    padding: 3px 8px;
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text-white);
}

.tipino-apo-reaction-count {
    font-weight: 500;
    color: var(--tipino-accent);
}

.tipino-apo-shares-toggle {
    background: none;
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.2);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-text);
    cursor: pointer;
    font-size: var(--tipino-font-size-small);
    padding: 3px 10px;
    transition: var(--tipino-transition);
}

.tipino-apo-shares-toggle:hover {
    border-color: var(--tipino-accent);
    color: var(--tipino-accent);
}

.tipino-apo-shares-panel {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
}

.tipino-apo-shares-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tipino-apo-share-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--tipino-font-size-small);
}

.tipino-apo-share-user {
    color: var(--tipino-text-white);
    font-weight: 500;
}

.tipino-apo-share-date {
    color: var(--tipino-text);
    opacity: 0.6;
}

.tipino-apo-share-comment {
    font-style: italic;
    color: var(--tipino-text);
    opacity: 0.85;
}

.tipino-apo-share-comment::before { content: '"'; }
.tipino-apo-share-comment::after  { content: '"'; }

.tipino-apo-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid rgb(from var(--tipino-primary) r g b / 0.4);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-primary);
    cursor: pointer;
    font-size: var(--tipino-font-size-small);
    padding: 4px 8px;
    flex-shrink: 0;
    transition: var(--tipino-transition);
}

.tipino-apo-delete-btn:hover {
    background: rgb(from var(--tipino-primary) r g b / 0.12);
    border-color: var(--tipino-primary);
}

.tipino-apo-delete-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tipino-apo-err {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-primary);
    opacity: 0.85;
}

/* =============================================================
   POST COMPOSER - Reaction Set Cards
   ============================================================= */

.tipino-set-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.tipino-set-card {
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.12);
    border-radius: var(--tipino-border-radius);
    padding: 10px 12px;
    cursor: pointer;
    transition: var(--tipino-transition);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tipino-set-card:hover {
    background: rgb(from var(--tipino-white) r g b / 0.07);
    border-color: rgb(from var(--tipino-white) r g b / 0.25);
}

.tipino-set-card.is-active {
    border-color: var(--tipino-accent);
    background: rgb(from var(--tipino-accent) r g b / 0.08);
}

.tipino-set-card-title {
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    color: var(--tipino-text-white);
    line-height: 1.3;
}

.tipino-set-card.is-active .tipino-set-card-title {
    color: var(--tipino-accent);
}

.tipino-set-card-emojis {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tipino-set-card-emoji {
    display: inline-flex;
    opacity: 0.7;
    cursor: default;
}

.tipino-set-card-emoji svg {
    width: 26px;
    height: 26px;
    color: var(--tipino-text-white);
}

/* ── Artist suggestion: "Add [name]" dropdown option ── */
.tipino-artist-item--add-new {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-top: 1px solid rgb(from var(--tipino-white, var(--tipino-white)) r g b / 0.1);
    opacity: 1;
    transition: var(--tipino-transition);
	background-color: var(--tipino-secondary);
}


.tipino-artist-item-add-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tipino-border-radius-50);
    background: rgb(from var(--tipino-accent-light) r g b / 0.15);
    color: var(--tipino-accent-light);
}

.tipino-artist-item--add-new .tipino-artist-item-name {
    color: var(--tipino-accent-light);
    font-weight: 500;
}

.tipino-artist-item--add-new .tipino-artist-item-meta {
    font-size: var(--tipino-font-size-small);
    opacity: 1;
}

/* =============================================================
   PROVIDER SWITCH – Banner & Modal
   ============================================================= */

/* Banner */
.tipino-switch-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.14);
    border-radius: var(--tipino-border-radius);
    padding: 14px 16px;
    margin-top: 16px;
}

.tipino-switch-banner-icon {
    flex-shrink: 0;
    color: var(--tipino-accent);
    margin-top: 2px;
}

.tipino-switch-banner-icon--ok {
    color: var(--tipino-success);
}

.tipino-switch-banner-body {
    flex: 1;
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-small);
}

.tipino-switch-banner-body strong {
    color: var(--tipino-text-white);
    display: block;
    margin-bottom: 4px;
}

.tipino-switch-banner-body p,
.tipino-switch-banner-body small {
    margin: 0;
    line-height: 1.5;
    opacity: 0.85;
}

.tipino-switch-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

/* Switch modal */
.tipino-switch-modal {
    width: min(520px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
}

.tipino-switch-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px 0;
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    opacity: 0.6;
}

.tipino-switch-step.active {
    opacity: 1;
    color: var(--tipino-text-white);
    font-weight: 500;
}

.tipino-switch-step-sep {
    opacity: 0.4;
}

/* Provider cards in the modal */
.tipino-switch-provider-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.tipino-switch-provider-card {
    border: 2px solid rgb(from var(--tipino-white) r g b / 0.12);
    border-radius: var(--tipino-border-radius);
    padding: 16px;
    cursor: pointer;
    transition: var(--tipino-transition);
    background: rgb(from var(--tipino-white) r g b / 0.03);
}

.tipino-switch-provider-card:hover {
    border-color: rgb(from var(--tipino-white) r g b / 0.3);
    background: rgb(from var(--tipino-white) r g b / 0.06);
}

.tipino-switch-provider-card--active {
    opacity: 0.5;
    cursor: default;
}

.tipino-switch-provider-card--selected {
    border-color: var(--tipino-accent);
    background: rgb(from var(--tipino-accent) r g b / 0.08);
}

.tipino-switch-provider-card strong {
    display: block;
    color: var(--tipino-text-white);
    font-size: var(--tipino-font-size-small);
    margin-bottom: 4px;
}

.tipino-switch-provider-card small {
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-small);
    opacity: 0.8;
}

.tipino-switch-provider-current {
    display: inline-block;
    margin-top: 8px;
    font-size: var(--tipino-font-size-small);
    background: var(--tipino-primary);
    color: var(--tipino-white);
    border-radius: var(--tipino-border-radius);
    padding: 2px 6px;
}

/* Timeline in step 2 */
.tipino-switch-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 16px 0 8px;
}

.tipino-switch-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--tipino-border-radius-50);
    background: var(--tipino-accent);
    flex-shrink: 0;
}

.tipino-switch-timeline-line {
    flex: 1;
    height: 2px;
    background: rgb(from var(--tipino-white) r g b / 0.15);
}

.tipino-switch-timeline-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--tipino-font-size-small);
    gap: 4px;
}

.tipino-switch-timeline-labels > div {
    flex: 1;
    text-align: center;
}

.tipino-switch-timeline-labels strong {
    display: block;
    color: var(--tipino-text-white);
    font-size: var(--tipino-font-size-small);
}

.tipino-switch-timeline-labels small {
    color: var(--tipino-text);
    opacity: 0.75;
}

/* Button size variant */
.tipino-button-sm {
    padding: 6px 12px;
    font-size: var(--tipino-font-size-small);
}

.tipino-button-ghost {
    background: transparent;
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.2);
    color: var(--tipino-text);
}

.tipino-button-ghost:hover {
    background: rgb(from var(--tipino-white) r g b / 0.06);
    color: var(--tipino-text-white);
}

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

/* PayPal button variant */
.tipino-button-paypal {
    background: var(--tipino-paypal);
    color: var(--tipino-white);
    border: none;
}

.tipino-button-paypal:hover {
    background: var(--tipino-paypal);
    color: var(--tipino-white);
	transform: var(--tipino-transform);
}
  

/* ============================================================
   tipino-share.css
   ============================================================ */   


/* ============================================================
   Tipino Share & Invite – Frontend Styles
   Variables from the Tipino design system are assumed to be
   defined by the theme / style.css.
   ============================================================ */

/* ── NAV ICON BUTTON ─────────────────────────────────────────── */
/* Targets the menu item with URL "#tipino-share-modal" added via WP Admin > Menus */

a[href="#tipino-share-modal"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--tipino-accent) !important;
    background: transparent;
    border: none;
    text-decoration: none !important;
    transition: var(--tipino-transition);
    vertical-align: middle;
    /* Hide label text before JS replaces it with the SVG */
    font-size: 0;
    line-height: 0;
}

a[href="#tipino-share-modal"] svg {
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    color: inherit;
}

a[href="#tipino-share-modal"]:hover {
    transform: var(--tipino-transform);
    opacity: 0.75;
}

/* ── OVERLAY ─────────────────────────────────────────────────── */

.tipino-share-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgb(from var(--tipino-black-card) r g b / 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: var(--tipino-transition);
}

.tipino-share-overlay[hidden] {
    display: none !important;
}

.tipino-share-overlay.is-open {
    opacity: 1;
}

/* ── MODAL CONTAINER ─────────────────────────────────────────── */

.tipino-share-modal {
    background: var(--tipino-secondary);
    border: 1px solid rgb(from var(--tipino-accent) r g b / 0.25);
    border-radius: var(--tipino-border-radius);
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    transform: var(--tipino-transform);
    transition: var(--tipino-transition);
}

.tipino-share-overlay.is-open .tipino-share-modal {
    transform: var(--tipino-transform);
}

/* ── MODAL HEADER ────────────────────────────────────────────── */

.tipino-share-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
    background: var(--tipino-gradient-secondary-dark);
    border-radius: var(--tipino-border-radius) var(--tipino-border-radius) 0 0;
}

.tipino-share-modal__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--tipino-font-size-normal);
    font-weight: 500;
    color: var(--tipino-white);
}

.tipino-share-modal__close {
    width: 30px;
    height: 30px;
    border-radius: var(--tipino-border-radius-50);
    background: var(--tipino-secondary-light);
    border: none;
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-large);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tipino-transition);
}

.tipino-share-modal__close:hover {
    transform: var(--tipino-transform);
    background: rgb(from var(--tipino-primary-dark) r g b / 0.25);
    color: var(--tipino-white);
}

/* ── MODAL BODY ──────────────────────────────────────────────── */

.tipino-share-modal__body {
    padding: 18px 22px 22px;
	background: rgb(from var(--tipino-secondary-light) r g b / 0.97);
}

.tipino-share-modal__layout {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.tipino-share-modal__left {
    flex: 1;
    min-width: 0;
}

.tipino-share-modal__right {
    width: 120px;
    flex-shrink: 0;
}

/* ── COLUMN LABEL ────────────────────────────────────────────── */

.tipino-share-col-label {
    font-size: var(--tipino-font-size-normal);
    font-weight: 500;
    color: var(--tipino-accent);
    margin-bottom: 10px;
}

/* ── SPINNER ─────────────────────────────────────────────────── */

.tipino-share-modal__spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

.tipino-share-spinner-ring {
    display: block;
    width: 32px;
    height: 32px;
    border: 3px solid rgb(from var(--tipino-white) r g b / 0.15);
    border-top-color: var(--tipino-accent);
    border-radius: var(--tipino-border-radius-50);
    animation: tipino-spin 0.7s linear infinite;
}

/* ── BACKGROUND GRID ─────────────────────────────────────────── */

.tipino-share-bg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.tipino-share-bg-thumb {
    width: 60px;
    height: 80px;
    border-radius: var(--tipino-border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    transition: var(--tipino-transition);
    background: rgb(from var(--tipino-white) r g b / 0.06);
}

.tipino-share-bg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.tipino-share-bg-thumb:hover {
    transform: var(--tipino-transform);
}

.tipino-share-bg-thumb.is-selected {
    border-color: var(--tipino-accent);
}

/* ── TEXT OPTIONS ────────────────────────────────────────────── */

.tipino-share-text-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tipino-share-text-opt {
    background: var(--tipino-gradient-secondary-light);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.09);
    border-radius: var(--tipino-border-radius);
    padding: 9px 13px;
    font-size: 12.5px;
    color: var(--tipino-text);
    cursor: pointer;
    transition: var(--tipino-transition);
    text-align: left;
    width: 100%;
}

.tipino-share-text-opt:hover {
    transform: var(--tipino-transform);
}

.tipino-share-text-opt.is-selected {
    border-color: var(--tipino-accent-dark);
    background: var(--tipino-gradient-accent-light);
    color: var(--tipino-secondary);
}

/* ── COLOR SWATCHES ──────────────────────────────────────────── */

.tipino-share-color-list {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.tipino-share-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: var(--tipino-border-radius);
    border: 1px solid var(--tipino-text-gray);
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--tipino-transition);
    padding: 0;
}

.tipino-share-color-swatch:hover {
    transform: var(--tipino-transform);
}

.tipino-share-color-swatch.is-selected {
	border: 1px solid var(--tipino-text-white);
}

/* ── PREVIEW CANVAS ──────────────────────────────────────────── */

.tipino-share-preview {
    display: block;
    width: 120px;
    height: 160px;
    border-radius: var(--tipino-border-radius);
    border: 1px solid var(--tipino-card);
    object-fit: cover;
    background: rgb(from var(--tipino-white) r g b / 0.04);
}

/* ── DIVIDER ─────────────────────────────────────────────────── */

.tipino-share-modal__divider {
    border: none;
    border-top: 1px solid rgb(from var(--tipino-white) r g b / 0.07);
    margin: 16px 0;
}

/* ── INVITE LINK ─────────────────────────────────────────────── */

.tipino-share-invite {
    background: rgb(from var(--tipino-accent) r g b / 0.07);
    border: 1px solid rgb(from var(--tipino-accent) r g b / 0.2);
    border-radius: var(--tipino-border-radius);
    padding: 11px 14px;
    margin-bottom: 16px;
}

.tipino-share-invite__label {
    font-size: var(--tipino-font-size-normal);
    font-weight: 500;
    color: var(--tipino-accent);
    margin-bottom: 5px;
}

.tipino-share-invite__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tipino-share-invite__url {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-text);
    word-break: break-all;
    flex: 1;
    min-width: 0;
}

#tipino-share-copy-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: var(--tipino-font-size-small);
}

/* ── ACTION BUTTONS ──────────────────────────────────────────── */

.tipino-share-modal__actions {
    display: flex;
    gap: 8px;
}

.tipino-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    border-radius: 100px;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: var(--tipino-transition);
    line-height: 1;
}

.tipino-share-btn:hover:not(:disabled) {
    transform: var(--tipino-transform);
}

.tipino-share-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tipino-share-btn--primary {
    flex: 1;
    background: var(--tipino-primary);
    color: var(--tipino-white);
}

.tipino-share-btn--primary:hover:not(:disabled) {
    background: var(--tipino-primary);
}

.tipino-share-btn--secondary {
    background: transparent;
    color: var(--tipino-accent);
    border: 1px solid rgb(from var(--tipino-accent) r g b / 0.4);
    padding: 12px 16px;
}

.tipino-share-btn--secondary:hover:not(:disabled) {
    background: rgb(from var(--tipino-accent) r g b / 0.1);
}

.tipino-share-btn--copied {
    background: rgb(from var(--tipino-success) r g b / 0.2) !important;
    border-color: rgb(from var(--tipino-success) r g b / 0.5) !important;
    color: var(--tipino-success) !important;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 540px) {
    .tipino-share-modal__layout {
        flex-direction: column;
    }

    .tipino-share-modal__right {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tipino-share-preview {
        width: 90px;
        height: 120px;
    }

    .tipino-share-modal__actions {
        flex-direction: column;
    }
}


/* ============================================================
   tipino-spotlight.css
   ============================================================ */

  
   /**
 * Tipino Spotlight Help
 * Styles for: help icon button, SVG overlay, info card,
 * action buttons, footer navigation, video modal, mobile bottom sheet.
 */

/* ------------------------------------------------------------------
   Help Icon Button (.tipino-help-icon)
------------------------------------------------------------------ */

.tipino-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--tipino-border-radius-50);
    cursor: pointer;
    color: var(--tipino-accent);
    opacity: 0.65;
    vertical-align: middle;
    margin-left: 5px;
    transition: var(--tipino-transition);
    flex-shrink: 0;
}

.tipino-help-icon:hover,
.tipino-help-icon:focus-visible {
    opacity: 1;
    transform: var(--tipino-transform);
    outline: none;
}

/* ------------------------------------------------------------------
   SVG Overlay (#tipino-spotlight-svg)
------------------------------------------------------------------ */

#tipino-spotlight-svg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99997;
    pointer-events: none; /* only intercept clicks when open */
    opacity: 0;
    transition: var(--tipino-transition);
    cursor: pointer;
}

#tipino-spotlight-svg[hidden] {
    display: none !important; /* SVG elements may not respect [hidden] in UA stylesheet */
}

#tipino-spotlight-svg.is-open {
    opacity: 1;
    pointer-events: all;
}

/* ------------------------------------------------------------------
   Info Card (#tipino-spotlight-card)
------------------------------------------------------------------ */

#tipino-spotlight-card {
    position: fixed;
    z-index: 99999;
    max-width: 360px;
    min-width: 280px;
    padding: 20px 22px;
    background: var(--tipino-secondary);
    border: 1px solid rgb(from var(--tipino-white, var(--tipino-white)) r g b / 0.12);
    border-radius: var(--tipino-border-radius);
    opacity: 0;
    transform: var(--tipino-transform);
    transition: var(--tipino-transition);
    color: var(--tipino-text);
}

#tipino-spotlight-card.is-open {
    opacity: 1;
    transform: translateY(0);
}

#tipino-spotlight-card:focus {
    outline: none;
}

/* ------------------------------------------------------------------
   Close Button (#tipino-spotlight-close)
------------------------------------------------------------------ */

#tipino-spotlight-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--tipino-border-radius-50);
    cursor: pointer;
    color: var(--tipino-text);
    opacity: 0.6;
    transition: var(--tipino-transition);
}

#tipino-spotlight-close:hover,
#tipino-spotlight-close:focus-visible {
    opacity: 1;
    background: rgb(from var(--tipino-white, var(--tipino-white)) r g b / 0.08);
    outline: none;
}

/* ------------------------------------------------------------------
   Title (#tipino-spotlight-title)
------------------------------------------------------------------ */

#tipino-spotlight-title {
    margin: 0 30px 10px 0;
    font-size: var(--tipino-font-size-normal);
    font-weight: 500;
    line-height: 1.4;
    color: var(--tipino-text-white);
}

/* ------------------------------------------------------------------
   Body (#tipino-spotlight-body)
------------------------------------------------------------------ */

#tipino-spotlight-body {
    margin: 0 0 14px;
    font-size: var(--tipino-font-size-small);
    line-height: 1.6;
    color: var(--tipino-text);
}

/* ------------------------------------------------------------------
   Actions row (.tipino-spotlight-actions)
   Holds ext-link button and video button.
------------------------------------------------------------------ */

.tipino-spotlight-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.tipino-spotlight-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    line-height: 1.4;
    background: transparent;
    border: 1px solid var(--tipino-accent);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-accent);
    cursor: pointer;
    text-decoration: none;
    transition: var(--tipino-transition);
}

.tipino-spotlight-btn-action:hover,
.tipino-spotlight-btn-action:focus-visible {
    background: rgb(from var(--tipino-accent) r g b / 0.12);
    outline: none;
}

/* ------------------------------------------------------------------
   Footer (.tipino-spotlight-footer)
------------------------------------------------------------------ */

.tipino-spotlight-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* ------------------------------------------------------------------
   Back Button (.tipino-spotlight-btn-back)
------------------------------------------------------------------ */

.tipino-spotlight-btn-back {
    padding: 7px 16px;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    background: transparent;
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.22);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tipino-spotlight-btn-back:hover,
.tipino-spotlight-btn-back:focus-visible {
    background: rgb(from var(--tipino-white) r g b / 0.06);
    border-color: rgb(from var(--tipino-white) r g b / 0.38);
    outline: none;
}

/* ------------------------------------------------------------------
   CTA Button (.tipino-spotlight-btn-cta)
------------------------------------------------------------------ */

.tipino-spotlight-btn-cta {
    padding: 7px 18px;
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    background: var(--tipino-gradient-accent);
    border: none;
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-white);
    cursor: pointer;
    transition: var(--tipino-transition);
}

.tipino-spotlight-btn-cta:hover,
.tipino-spotlight-btn-cta:focus-visible {
    opacity: 0.88;
    outline: none;
}

.tipino-spotlight-btn-cta:active {
    transform: var(--tipino-transform);
}

/* ------------------------------------------------------------------
   Video Modal (#tipino-spotlight-video-modal)
------------------------------------------------------------------ */

/* Video Modal overlay */
#tipino-spotlight-video-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--tipino-black) r g b / 0.88);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* display:flex above overrides UA [hidden]{display:none} — restore it */
#tipino-spotlight-video-modal[hidden] {
    display: none !important;
}

#tipino-spotlight-video-modal.is-open {
    opacity: 1;
    pointer-events: all;
}

/* Card: tipino-modal-content with custom width for video */
.tipino-spotlight-video-card {
    width: min(92vw, 860px) !important;
    max-width: none !important;
}

/* Video wrap: fills modal body, 16:9 */
.tipino-spotlight-video-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--tipino-black);
}

.tipino-spotlight-video-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* No padding inside modal body for video */
.tipino-spotlight-video-card .tipino-modal-body {
    padding: 0;
}

/* ------------------------------------------------------------------
   Scroll lock (applied to <html> when overlay is open)
------------------------------------------------------------------ */

html.tipino-modal--open {
    overflow: hidden;
}

/* ------------------------------------------------------------------
   Mobile: Bottom Sheet
   Card pins to bottom of screen, full width, rounded top corners.
   Positioning JS is bypassed (style.cssText = '').
------------------------------------------------------------------ */

@media (max-width: 767px) {
    #tipino-spotlight-card {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100%;
        border-radius: 16px 16px 0 0;
        transform: var(--tipino-transform);
        padding: 20px 18px 28px;
    }

    #tipino-spotlight-card.is-open {
        transform: var(--tipino-transform);
    }

    .tipino-spotlight-video-card {
        width: 95vw !important;
    }
}


/* ============================================================
   Tipino Report Feature – Frontend Styles
   Variables from the Tipino design system are assumed to be
   defined by the theme / style.css.
   ============================================================ */

/* ── REPORT BUTTON (in profile headers) ─────────────────────── */

/* Center button below avatar on user & artist profile pages */
.tipino-user-public-thumbnail + .tipino-report-btn,
.tipino-artist-thumbnail-col .tipino-report-btn {
    display: flex;
    margin: 10px auto 0;
    width: fit-content;
}

/* Wrapper column for artist thumbnail + report button */
.tipino-artist-thumbnail-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.tipino-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--tipino-gradient-secondary);
    border: 1px solid rgb(from var(--tipino-card) r g b / 1);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-small);
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    line-height: 1;
    transition: var(--tipino-transition);
}

.tipino-report-btn svg {
    flex-shrink: 0;
    fill: currentColor;
    stroke: none;
    width: 14px;
    height: 14px;
}

.tipino-report-btn:hover {
	background-color: rgb(from var(--tipino-white-card) r g b / 0.5);	
	transform: var(--tipino-transform);

}

/* ── HIDDEN ATTRIBUTE ENFORCEMENT ───────────────────────────── */

/* Author-stylesheet display values (e.g. inline-flex on btn classes) override
   the browser UA rule [hidden]{display:none}. Restore expected behaviour. */
.tipino-report-modal [hidden] {
    display: none !important;
}

/* ── OVERLAY ─────────────────────────────────────────────────── */

.tipino-report-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgb(from var(--tipino-black) r g b / 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: var(--tipino-transition);
}

.tipino-report-overlay[hidden] {
    display: none !important;
}

.tipino-report-overlay.is-open {
    opacity: 1;
}

/* ── MODAL CONTAINER ─────────────────────────────────────────── */

.tipino-report-modal {
    background: var(--tipino-secondary);
    border: 1px solid rgb(from var(--tipino-primary) r g b / 0.2);
    border-radius: var(--tipino-border-radius);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    transform: var(--tipino-transform);
    transition: var(--tipino-transition);
}

.tipino-report-overlay.is-open .tipino-report-modal {
    transform: var(--tipino-transform);
}

/* ── MODAL HEADER ────────────────────────────────────────────── */

.tipino-report-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
    background: var(--tipino-gradient-primary);
    border-radius: var(--tipino-border-radius) var(--tipino-border-radius) 0 0;
}

.tipino-report-modal__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--tipino-font-size-normal);
    font-weight: 500;
    color: var(--tipino-text-white);
}

.tipino-report-modal__title svg {
    fill: var(--tipino-primary);
    width: 16px;
    height: 16px;
}

.tipino-report-modal__close {
    width: 30px;
    height: 30px;
    border-radius: var(--tipino-border-radius-50);
    background: rgb(from var(--tipino-white) r g b / 0.1);
    border: none;
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-large);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tipino-transition);
}

.tipino-report-modal__close:hover {
    transform: var(--tipino-transform);
    background: rgb(from var(--tipino-primary) r g b / 0.25);
    color: var(--tipino-text-white);
}

/* ── MODAL BODY ──────────────────────────────────────────────── */

.tipino-report-modal__body {
    padding: 20px 22px 24px;
}

/* ── SPINNER ─────────────────────────────────────────────────── */

.tipino-report-spinner-wrap {
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

.tipino-report-spinner-ring {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3px solid rgb(from var(--tipino-white) r g b / 0.15);
    border-top-color: var(--tipino-primary);
    border-radius: var(--tipino-border-radius-50);
    animation: tipino-report-spin 0.7s linear infinite;
}

@keyframes tipino-report-spin {
    to { transform: rotate(360deg); }
}

/* ── LIMIT MESSAGE ───────────────────────────────────────────── */

.tipino-report-limit-text {
    color: var(--tipino-text);
    line-height: 1.6;
    margin: 0 0 20px;
    font-size: var(--tipino-font-size-normal);
}

/* ── INTRO TEXT ──────────────────────────────────────────────── */

.tipino-report-intro {
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-normal);
    line-height: 1.5;
    margin: 0 0 16px;
}

/* ── REASON LIST ─────────────────────────────────────────────── */

.tipino-report-reason-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tipino-report-reason-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
    cursor: pointer;
    transition: var(--tipino-transition);
}

.tipino-report-reason-item:hover {
    background: rgb(from var(--tipino-white) r g b / 0.07);
    border-color: rgb(from var(--tipino-white) r g b / 0.15);
}

.tipino-report-reason-item.is-selected {
    border-color: var(--tipino-primary);
    background: rgb(from var(--tipino-primary) r g b / 0.08);
}

.tipino-report-reason-item input[type="radio"] {
    flex-shrink: 0;
    accent-color: var(--tipino-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.tipino-report-reason-label {
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-normal);
    cursor: pointer;
    flex: 1;
}

/* ── FREETEXT ────────────────────────────────────────────────── */

.tipino-report-text-wrap {
    margin-bottom: 16px;
}

.tipino-report-textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgb(from var(--tipino-white) r g b / 0.06);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.18);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-text-white);
    font-size: var(--tipino-font-size-small);
    padding: 10px 12px;
    resize: vertical;
    transition: var(--tipino-transition);
    font-family: inherit;
}

.tipino-report-textarea::placeholder {
    color: rgb(from var(--tipino-card) r g b / 0.5);
}

.tipino-report-textarea:focus {
    outline: none;
    border-color: var(--tipino-primary);
}

/* ── ERROR MESSAGE ───────────────────────────────────────────── */

.tipino-report-error {
    color: var(--tipino-primary);
    font-size: var(--tipino-font-size-small);
    margin-bottom: 12px;
}

/* ── SUCCESS STATE ───────────────────────────────────────────── */

.tipino-report-success-title {
    font-size: var(--tipino-font-size-medium);
    font-weight: 500;
    color: var(--tipino-text-white);
    margin: 0 0 10px;
}

.tipino-report-success-msg {
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-normal);
    line-height: 1.6;
    margin: 0 0 20px;
}

/* ── ACTION BUTTONS ──────────────────────────────────────────── */

.tipino-report-modal__actions {
    margin-top: 8px;
}

.tipino-report-modal__actions--row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tipino-report-btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--tipino-border-radius);
    font-size: var(--tipino-font-size-normal);
    font-weight: 500;
    padding: 10px 22px;
    cursor: pointer;
    transition: var(--tipino-transition);
    line-height: 1;
}

.tipino-report-btn-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tipino-report-btn-action:not(:disabled):hover {
    opacity: 0.87;
    transform: var(--tipino-transform);
}

.tipino-report-btn-action--primary {
    background: var(--tipino-primary);
    color: var(--tipino-text-white);
}

.tipino-report-btn-action--secondary {
    background: rgb(from var(--tipino-white) r g b / 0.1);
    color: var(--tipino-text);
}


.tipino-public-user-top-card .tipino-public-user-top-tabs {
    display: flex;
    gap: 0;
    margin: 0 0 18px;
    border-bottom: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
}

.tipino-public-user-top-card .tipino-public-user-top-pane[hidden] {
    display: none !important;
}

.tipino-public-user-top-card .tipino-sidebar-list {
    margin-top: 0;
}

/* Subscription card: stack Stripe + PayPal pay buttons */
.tipino-subscription-card .tipino-subscription-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tipino-subscription-card .tipino-subscription-buttons .tipino-subscribe-btn {
    margin: 0;
}

/* ============================================================
   BLOG SINGLE POST LAYOUT
   ============================================================ */

/* -- 1. Remove sidebar: force single-column layout -- */
body.single-post .tipino-single-wrap {
    display: block;
}

body.single-post .tipino-single-wrap .site-content {
    max-width: 980px;
    margin: 0 auto;
    padding: 40px 0;
}

/* -- 2. Article card container -- */
.tipino-single-article {
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    border-radius: var(--tipino-border-radius);
    padding: 0;
    overflow: hidden;
}

/* -- 3. Hero image -- */
.tipino-single-article .tipino-hero-image {
    width: 100%;
    margin: 0;
    line-height: 0;
}

.tipino-single-article .tipino-hero-image img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    display: block;
    border-radius: var(--tipino-border-radius) var(--tipino-border-radius) 0 0;
}

/* -- 4. Entry header (below hero) -- */
.tipino-single-article .entry-header {
    padding: 30px 30px 0;
}

/* -- 5. Fix heading display for blog content -- */
.tipino-single-article .entry-title {
    display: block;
    text-transform: none;
    line-height: 1.25;
    margin-bottom: 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tipino-single-article .entry-content h2,
.tipino-single-article .entry-content h3,
.tipino-single-article .entry-content h4,
.tipino-single-article .entry-content h5,
.tipino-single-article .entry-content h6 {
    display: block;
    text-transform: none;
    line-height: 1.3;
    margin-top: 1.5em;
    margin-bottom: 0.6em;
    -webkit-text-fill-color: unset;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--tipino-accent);
}

.tipino-single-article .entry-content h2 {
    font-size: var(--tipino-font-size-extra-large);
}

.tipino-single-article .entry-content h3 {
    font-size: var(--tipino-font-size-large);
}

.tipino-single-article .entry-content h4 {
    font-size: var(--tipino-font-size-medium);
}

/* -- 6. Entry meta (date, author) -- */
.tipino-single-article .entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: var(--tipino-font-size-small);
    color: rgb(from var(--tipino-text) r g b / 0.7);
    margin-bottom: 0;
}

.tipino-single-article .entry-meta a {
    color: rgb(from var(--tipino-text) r g b / 0.7);
    text-decoration: none;
}

.tipino-single-article .entry-meta a:hover {
    color: var(--tipino-accent);
}

/* -- 7. Fix date bug: hide .updated time -- */
.tipino-single-article time.updated {
    display: none;
}

time.updated:not(.published) {
    display: none;
}

/* -- 8. Entry content typography -- */
.tipino-single-article .entry-content {
    padding: 24px 30px 30px;
    font-size: var(--tipino-font-size-medium);
    line-height: 1.75;
    color: var(--tipino-text);
}

.tipino-single-article .entry-content p {
    margin: 0 0 1.2em;
}

.tipino-single-article .entry-content p:last-child {
    margin-bottom: 0;
}

.tipino-single-article .entry-content ul,
.tipino-single-article .entry-content ol {
    margin: 0 0 1.2em;
    padding-left: 1.5em;
}

.tipino-single-article .entry-content li {
    margin-bottom: 0.4em;
}

.tipino-single-article .entry-content blockquote {
    margin: 1.5em 0;
    padding: 16px 20px;
    border-left: 3px solid var(--tipino-accent);
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border-radius: 0 var(--tipino-border-radius) var(--tipino-border-radius) 0;
    font-style: italic;
    color: rgb(from var(--tipino-text) r g b / 0.9);
}

.tipino-single-article .entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.tipino-single-article .entry-content pre {
    margin: 1.5em 0;
    padding: 16px 20px;
    background: rgb(from var(--tipino-black) r g b / 0.3);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    border-radius: var(--tipino-border-radius);
    overflow-x: auto;
    font-size: var(--tipino-font-size-normal);
    line-height: 1.5;
}

.tipino-single-article .entry-content code {
    background: rgb(from var(--tipino-white) r g b / 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.tipino-single-article .entry-content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}

.tipino-single-article .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tipino-border-radius);
}

.tipino-single-article .entry-content a {
    color: var(--tipino-accent);
    text-decoration: underline;
    text-decoration-color: rgb(from var(--tipino-accent) r g b / 0.4);
    text-underline-offset: 2px;
    transition: var(--tipino-transition);
}

.tipino-single-article .entry-content a:hover {
    text-decoration-color: var(--tipino-accent);
}

.tipino-single-article .entry-content sub {
    font-size: var(--tipino-font-size-small);
    color: rgb(from var(--tipino-text) r g b / 0.5);
}

/* WP block spacing */
.tipino-single-article .entry-content .wp-block-image {
    margin: 1.5em 0;
}

.tipino-single-article .entry-content .wp-block-separator {
    border-color: rgb(from var(--tipino-white) r g b / 0.1);
    margin: 2em 0;
}

/* -- 9. Post navigation -- */
.tipino-post-navigation {
    display: flex;
    gap: 16px;
    margin-top: 30px;
}

.tipino-post-nav-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    border-radius: var(--tipino-border-radius);
    text-decoration: none;
    transition: var(--tipino-transition);
}

.tipino-post-nav-link:hover {
    background: rgb(from var(--tipino-white) r g b / 0.08);
    transform: var(--tipino-transform);
    text-decoration: none;
}

.tipino-post-nav-next {
    text-align: right;
}

.tipino-post-nav-label {
    font-size: var(--tipino-font-size-small);
    color: rgb(from var(--tipino-text) r g b / 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tipino-post-nav-title {
    font-size: var(--tipino-font-size-normal);
    color: var(--tipino-accent);
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- 10. Comments -- */
.tipino-comments-wrap {
    margin-top: 30px;
    padding: 30px;
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    border-radius: var(--tipino-border-radius);
}

.tipino-comments-wrap .comments-title {
    display: block;
    text-transform: none;
    font-size: var(--tipino-font-size-extra-large);
    margin-bottom: 20px;
}

.tipino-comments-wrap .comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.tipino-comments-wrap .comment-list .comment {
    padding: 16px 0;
    border-bottom: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
}

.tipino-comments-wrap .comment-list .comment:last-child {
    border-bottom: none;
}

.tipino-comments-wrap .comment-author {
    font-weight: 500;
    color: var(--tipino-accent);
    margin-bottom: 4px;
}

.tipino-comments-wrap .comment-author img {
    border-radius: var(--tipino-border-radius-50);
    margin-right: 8px;
    vertical-align: middle;
}

.tipino-comments-wrap .comment-metadata {
    font-size: var(--tipino-font-size-small);
    color: rgb(from var(--tipino-text) r g b / 0.5);
    margin-bottom: 8px;
}

.tipino-comments-wrap .comment-metadata a {
    color: rgb(from var(--tipino-text) r g b / 0.5);
}

.tipino-comments-wrap .comment-content {
    color: var(--tipino-text);
    line-height: 1.65;
}

.tipino-comments-wrap .reply a {
    font-size: var(--tipino-font-size-small);
    color: var(--tipino-accent);
}

/* Comment form */
.tipino-comments-wrap .comment-reply-title {
    display: block;
    text-transform: none;
    font-size: var(--tipino-font-size-large);
    margin-bottom: 16px;
}

.tipino-comments-wrap .logged-in-as {
    font-size: var(--tipino-font-size-small);
    color: rgb(from var(--tipino-text) r g b / 0.6);
    margin-bottom: 16px;
}

.tipino-comments-wrap .logged-in-as a {
    color: var(--tipino-accent);
}

.tipino-comments-wrap .comment-form label {
    display: block;
    color: var(--tipino-accent);
    font-weight: 500;
    font-size: var(--tipino-font-size-normal);
    margin-bottom: 4px;
}

.tipino-comments-wrap .comment-form input[type="text"],
.tipino-comments-wrap .comment-form input[type="email"],
.tipino-comments-wrap .comment-form input[type="url"],
.tipino-comments-wrap .comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background: rgb(from var(--tipino-white) r g b / 0.06);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.18);
    border-radius: var(--tipino-border-radius);
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-normal);
    font-family: var(--tipino-font-family);
    transition: var(--tipino-transition);
}

.tipino-comments-wrap .comment-form input[type="text"]:focus,
.tipino-comments-wrap .comment-form input[type="email"]:focus,
.tipino-comments-wrap .comment-form input[type="url"]:focus,
.tipino-comments-wrap .comment-form textarea:focus {
    border-color: var(--tipino-accent);
    outline: none;
    background: rgb(from var(--tipino-white) r g b / 0.09);
}

.tipino-comments-wrap .comment-form textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.tipino-comments-wrap .comment-form .comment-form-comment,
.tipino-comments-wrap .comment-form .comment-form-author,
.tipino-comments-wrap .comment-form .comment-form-email,
.tipino-comments-wrap .comment-form .comment-form-url {
    margin-bottom: 16px;
}

.tipino-comments-wrap .comment-form .form-submit input[type="submit"] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--tipino-gradient-accent);
    color: var(--tipino-text-white);
    border-radius: var(--tipino-border-radius);
    padding: 10px 24px;
    font-size: var(--tipino-font-size-medium);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: var(--tipino-transition);
}

.tipino-comments-wrap .comment-form .form-submit input[type="submit"]:hover {
    transform: var(--tipino-transform);
}

/* -- 11. Responsive -- */
@media (max-width: 768px) {
    body.single-post .tipino-single-wrap .site-content {
        max-width: 100%;
        padding: 20px 0;
    }

    .tipino-single-article .entry-header {
        padding: 20px 20px 0;
    }

    .tipino-single-article .entry-content {
        padding: 16px 20px 20px;
    }

    .tipino-single-article .tipino-hero-image img {
        max-height: 300px;
    }

    .tipino-post-navigation {
        flex-direction: column;
        gap: 12px;
    }

    .tipino-post-nav-next {
        text-align: left;
    }

    .tipino-comments-wrap {
        padding: 20px;
    }
}

@media (max-width: 520px) {
    .tipino-single-article .entry-header {
        padding: 16px 16px 0;
    }

    .tipino-single-article .entry-content {
        padding: 12px 16px 16px;
        font-size: var(--tipino-font-size-normal);
    }

    .tipino-single-article .tipino-hero-image img {
        max-height: 220px;
    }

    .tipino-single-article .entry-title {
        font-size: var(--tipino-font-size-extra-large);
    }

    .tipino-comments-wrap {
        padding: 16px;
    }
}

@media (max-width: 400px) {
    .tipino-single-article .entry-title {
        font-size: var(--tipino-font-size-large);
    }
}


/* -- Streaming Connections: Spacing -- */
/* Detail page: gap between service status rows */
.tipino-service-status-wrapper .tipino-service-status {
    margin-bottom: 6px;
}
.tipino-service-status-wrapper .tipino-service-status:last-child {
    margin-bottom: 0;
}

/* Detail page: spacing between description text and service rows */
.tipino-service-status-wrapper .tipino-sidebar-card {
    margin-bottom: 10px;
}

/* Config page: spacing inside pane */
.tipino-connections-config-pane .tipino-service-status {
    margin-bottom: 6px;
}
.tipino-connections-config-pane .tipino-service-status:last-child {
    margin-bottom: 0;
}

/* Config page: description text spacing */
.tipino-connections-config-pane .tipino-sidebar-card {
    margin-bottom: 10px;
}

/* -- Connections Collapse/Expand -- */
/* Header: title left, toggle button right */
.tipino-connections-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tipino-connections-header h3 {
    margin: 0;
}

/* Toggle button */
.tipino-connections-toggle {
    background: transparent;
    border: 0;
    color: var(--tipino-text);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--tipino-border-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--tipino-transition);
}

.tipino-connections-toggle:hover {
    color: var(--tipino-accent);
}

/* Rotate chevron when expanded */
.tipino-connections-toggle svg {
    transition: var(--tipino-transition);
}

.tipino-connections-collapsed .tipino-connections-toggle svg {
    transform: rotate(-90deg);
}

/* Collapsed state: hide body */
.tipino-connections-collapsed .tipino-connections-body {
    display: none;
}

/* -- Discogs Collection Overrides -- */

/* Top-align card content instead of center */
.tipino-discogs-card__info {
    justify-content: flex-start;
}

/* Card is now a div, not an anchor -- keep cursor default */
.tipino-discogs-card {
    cursor: default;
    align-items: flex-start;
}

/* Artist link inside card */
.tipino-discogs-card__artist a {
    color: var(--tipino-accent);
    text-decoration: none;
    transition: var(--tipino-transition);
}
.tipino-discogs-card__artist a:hover {
    color: var(--tipino-primary);
}

/* Listen/details button alignment inside discogs card */
.tipino-discogs-card .tipino-listen-wrap {
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Search input */
.tipino-discogs-search-wrap {
    margin-bottom: 12px;
}
.tipino-discogs-search-input {
    width: 100%;
    max-width: 360px;
    padding: 8px 12px;
    border-radius: var(--tipino-border-radius);
    border: 1px solid var(--tipino-accent);
    background: transparent;
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-normal);
    height: var(--tipino-font-size-big);
    box-sizing: border-box;
}
.tipino-discogs-search-input:focus {
    border-color: var(--tipino-primary);
    border-width: 2px;
    outline: none;
    color: var(--tipino-text);
}
.tipino-discogs-search-input::placeholder {
    color: var(--tipino-text);
    font-style: italic;
    opacity: 0.8;
}

/* ============================================
   Blog Listing / Overview Page
   ============================================ */

/* -- Blog Header -- */
.tipino-blog-header {
    margin-bottom: 10px;
}

.tipino-blog-header h1 {
    font-size: var(--tipino-font-size-extra-large);
}

.tipino-blog-description {
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-normal);
    margin: 4px 0 0;
}

/* -- Blog Grid -- */
.tipino-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
}

/* -- Blog Card -- */
.tipino-blog-card {
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    border-radius: var(--tipino-border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--tipino-transition);
}

.tipino-blog-card:hover {
    transform: var(--tipino-transform);
    border-color: rgb(from var(--tipino-accent) r g b / 0.3);
}

/* -- Card Image -- */
.tipino-blog-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.tipino-blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--tipino-transition);
}

.tipino-blog-card:hover .tipino-blog-card-image img {
    transform: scale(1.03);
}

/* -- Card Header -- */
.tipino-blog-card .entry-header {
    padding: 14px 16px 0;
}

.tipino-blog-card .entry-title {
    font-size: var(--tipino-font-size-large);
    margin: 0 0 6px;
    line-height: 1.3;
    display: block;
    text-transform: none;
}

.tipino-blog-card .entry-title a {
    color: var(--tipino-accent);
    text-decoration: none;
    transition: var(--tipino-transition);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

.tipino-blog-card .entry-title a:hover {
    color: var(--tipino-primary);
}

/* -- Card Meta -- */
.tipino-blog-card .entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--tipino-font-size-small);
    color: rgb(from var(--tipino-text) r g b / 0.6);
}

.tipino-blog-card .entry-meta a {
    color: rgb(from var(--tipino-text) r g b / 0.6);
    text-decoration: none;
}

.tipino-blog-card .entry-meta a:hover {
    color: var(--tipino-accent);
}

/* -- Card Content / Excerpt -- */
.tipino-blog-card .entry-content {
    padding: 10px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tipino-blog-card .entry-content p {
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-normal);
    line-height: 1.6;
    margin: 0 0 12px;
    flex: 1;
}

.tipino-blog-card .entry-content .tipino-button {
    align-self: flex-start;
}

/* -- Pagination -- */
.tipino-card-outer .pagination,
.tipino-card-outer .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.tipino-card-outer .nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 4px 10px;
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.1);
    color: var(--tipino-text);
    font-size: var(--tipino-font-size-normal);
    text-decoration: none;
    transition: var(--tipino-transition);
}

.tipino-card-outer .nav-links .page-numbers:hover {
    border-color: var(--tipino-accent);
    color: var(--tipino-accent);
}

.tipino-card-outer .nav-links .page-numbers.current {
    background: var(--tipino-gradient-accent);
    border-color: transparent;
    color: var(--tipino-text-white);
    font-weight: 600;
}

.tipino-card-outer .nav-links .page-numbers.dots {
    background: transparent;
    border: none;
    cursor: default;
}

.tipino-card-outer .nav-links .page-numbers.prev,
.tipino-card-outer .nav-links .page-numbers.next {
    font-size: var(--tipino-font-size-small);
    padding: 4px 14px;
}

/* -- No Posts Found -- */
.tipino-card-outer .no-results {
    text-align: center;
    padding: 40px 16px;
    color: var(--tipino-text);
}

/* -- Responsive: 768px -- */
@media (max-width: 768px) {
    .tipino-blog-grid {
        grid-template-columns: 1fr;
    }

    .tipino-blog-header h1 {
        font-size: var(--tipino-font-size-large);
    }
}

/* -- Responsive: 520px -- */
@media (max-width: 520px) {
    .tipino-blog-card .entry-header {
        padding: 10px 12px 0;
    }

    .tipino-blog-card .entry-content {
        padding: 8px 12px 12px;
    }

    .tipino-blog-card .entry-title {
        font-size: var(--tipino-font-size-medium);
    }
}

.tipino-claim-shell {
    max-width: 920px;
    margin: 0 auto 30px;
}

.tipino-claim-shell .tipino-claim-shell__intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    align-items: flex-start;
}

.tipino-claim-shell .tipino-claim-shell__intro .tipino-card-text-text {
    margin: 0;
}

.tipino-claim-shell .tipino-claim-shell__intro .tipino-text {
    margin: 0;
    max-width: 62ch;
    line-height: 1.55;
}

.tipino-claim-shell .tipino-claim-banner,
.tipino-claim-shell .tipino-claim-scorebox {
    padding: 12px 14px;
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-card) r g b / 0.18);
    background: rgb(from var(--tipino-card) r g b / 0.08);
}

.tipino-claim-shell .tipino-claim-banner.is-success {
    background: rgb(from var(--tipino-success) r g b / 0.12);
    border-color: rgb(from var(--tipino-success) r g b / 0.3);
    color: var(--tipino-text-white);
}

.tipino-claim-shell .tipino-claim-banner.is-error {
    background: rgb(from var(--tipino-error) r g b / 0.14);
    border-color: rgb(from var(--tipino-error) r g b / 0.32);
    color: var(--tipino-text-white);
}

.tipino-claim-shell .tipino-claim-scorebox {
    margin-top: 12px;
    padding: 10px 12px;
}

.tipino-claim-shell .tipino-claim-scorebox.is-high {
    background: rgb(from var(--tipino-error) r g b / 0.18);
    border-color: rgb(from var(--tipino-error) r g b / 0.35);
}

.tipino-claim-shell .tipino-claim-scorebox.is-medium {
    background: rgb(from var(--tipino-warning) r g b / 0.18);
    border-color: rgb(from var(--tipino-warning) r g b / 0.35);
}

.tipino-claim-shell .tipino-claim-scorebox.is-none {
    background: rgb(from var(--tipino-success) r g b / 0.18);
    border-color: rgb(from var(--tipino-success) r g b / 0.35);
}

.tipino-claim-shell .tipino-claim-traffic {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tipino-claim-shell .tipino-claim-traffic-dots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.tipino-claim-shell .tipino-claim-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--tipino-border-radius-pill);
    opacity: 0.28;
    box-shadow: inset 0 0 0 1px rgb(from var(--tipino-white) r g b / 0.18);
}

.tipino-claim-shell .tipino-claim-dot.is-red {
    background: var(--tipino-error);
}

.tipino-claim-shell .tipino-claim-dot.is-yellow {
    background: var(--tipino-warning);
}

.tipino-claim-shell .tipino-claim-dot.is-green {
    background: var(--tipino-success);
}

.tipino-claim-shell .tipino-claim-dot.is-active {
    opacity: 1;
    box-shadow: 0 0 0 3px rgb(from var(--tipino-white) r g b / 0.08);
}

.tipino-claim-shell .tipino-claim-traffic-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tipino-claim-shell .tipino-claim-traffic-text strong {
    font-size: var(--tipino-font-size-medium);
    line-height: 1.1;
}

.tipino-claim-shell .tipino-claim-traffic-text small {
    font-size: var(--tipino-font-size-small);
    line-height: 1.35;
    opacity: 0.88;
}

.tipino-claim-shell .tipino-claim-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group > label {
    display: block !important;
    margin: 0 !important;
    padding-top: 4px;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group input[type="text"],
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group input[type="url"],
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group select,
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group textarea {
    margin: 0 !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group input[type="text"],
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group input[type="url"],
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group select,
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: none !important;
    padding: 10px 12px !important;
    background: rgb(from var(--tipino-card) r g b / 0.08) !important;
    border-radius: var(--tipino-border-radius) !important;
    border: 1px solid rgb(from var(--tipino-accent) r g b / 0.72) !important;
    color: var(--tipino-text) !important;
    font-size: var(--tipino-font-size-normal) !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group input[type="text"],
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group input[type="url"],
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group select {
    min-height: 46px !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-url-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    background: rgb(from var(--tipino-card) r g b / 0.08);
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-accent) r g b / 0.72);
    min-height: 46px;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-url-prefix {
    flex: 0 0 auto;
    font-size: var(--tipino-font-size-normal);
    color: rgb(from var(--tipino-text) r g b / 0.78);
    white-space: nowrap;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-url-input-wrap input[type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    min-height: 44px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-url-input-wrap:focus-within {
    border-color: var(--tipino-accent-light) !important;
    background: rgb(from var(--tipino-accent) r g b / 0.08) !important;
    box-shadow: 0 0 0 2px rgb(from var(--tipino-accent) r g b / 0.12) !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group textarea {
    min-height: 88px !important;
    resize: vertical !important;
    font-family: var(--tipino-font-family) !important;
    line-height: 1.4 !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group input[type="text"]:focus,
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group input[type="url"]:focus,
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group select:focus,
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group textarea:focus {
    outline: none !important;
    border-color: var(--tipino-accent-light) !important;
    background: rgb(from var(--tipino-accent) r g b / 0.08) !important;
    box-shadow: 0 0 0 2px rgb(from var(--tipino-accent) r g b / 0.12) !important;
    color: var(--tipino-text) !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group input[type="text"]::placeholder,
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group input[type="url"]::placeholder,
.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group textarea::placeholder {
    color: rgb(from var(--tipino-text) r g b / 0.72) !important;
    font-style: italic;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group input[hidden] {
    display: none !important;
}

.tipino-claim-shell .tipino-claim-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-helptext {
    display: block;
    margin-top: 6px;
    opacity: 0.82;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group select,
.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-row select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    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") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-form-group select:focus,
.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-row select:focus {
    background-color: rgb(from var(--tipino-accent) r g b / 0.08) !important;
    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") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-suggestions {
    margin-top: 8px;
    padding: 8px;
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-card) r g b / 0.08);
    border: 1px solid rgb(from var(--tipino-card) r g b / 0.18);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-suggestions[hidden] {
    display: none !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-suggestion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgb(from var(--tipino-card) r g b / 0.14);
    border-radius: calc(var(--tipino-border-radius) - 2px);
    background: rgb(from var(--tipino-card) r g b / 0.06);
    color: var(--tipino-text);
    text-align: left;
    cursor: pointer;
    transition: var(--tipino-transition);
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-suggestion-item:hover {
    background: rgb(from var(--tipino-accent) r g b / 0.12);
    border-color: rgb(from var(--tipino-accent) r g b / 0.36);
    transform: translateY(-1px);
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-suggestion-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-suggestion-meta {
    font-size: var(--tipino-font-size-small);
    opacity: 0.72;
    white-space: nowrap;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 8px !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-section-head > label {
    margin: 0 !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-button.tipino-claim-add-proof {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    white-space: nowrap !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proofs {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin-top: 4px !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 18px 18px 16px 18px !important;
    margin: 0 !important;
    border-radius: calc(var(--tipino-border-radius) + 4px);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.14);
    background: linear-gradient(180deg, rgb(from var(--tipino-white) r g b / 0.07), rgb(from var(--tipino-card) r g b / 0.16));
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-toolbar .tipino-claim-proof-type {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-button.tipino-claim-proof-remove {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    white-space: nowrap !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-row select,
.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-row input,
.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-row textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: none !important;
    margin: 0 !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-value-wrap {
    display: block;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-value-wrap.is-email {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    background: rgb(from var(--tipino-card) r g b / 0.08);
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-accent) r g b / 0.72);
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-value-wrap.is-email .tipino-claim-proof-value {
    flex: 1 1 auto;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-value-wrap.is-email .tipino-claim-proof-email-domain {
    flex: 0 0 auto;
    font-size: var(--tipino-font-size-normal);
    color: rgb(from var(--tipino-text) r g b / 0.78);
    white-space: nowrap;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-help {
    margin: 0 !important;
    font-size: var(--tipino-font-size-small);
    opacity: 0.88;
    line-height: 1.6;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-row.is-invalid .tipino-claim-proof-value {
    border-color: rgb(from var(--tipino-error) r g b / 0.72) !important;
    box-shadow: 0 0 0 2px rgb(from var(--tipino-error) r g b / 0.12) !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-code {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-code[hidden] {
    display: none !important;
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-code-title {
    font-size: var(--tipino-font-size-small);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--tipino-text);
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-code-box {
    padding: 10px 12px;
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-black) r g b / 0.18);
    border: 1px solid rgb(from var(--tipino-accent) r g b / 0.2);
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-code-body {
    margin: 0;
    font-family: monospace;
    font-size: var(--tipino-font-size-normal);
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
    color: var(--tipino-text);
}

.tipino-claim-shell .tipino-claim-form .tipino-claim-proof-note {
    padding: 16px;
    margin-top: 6px !important;
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-card) r g b / 0.1);
    border: 1px solid rgb(from var(--tipino-card) r g b / 0.14);
    line-height: 1.6;
}

.tipino-claim-shell .tipino-claim-form .tipino-button.tipino-claim-submit {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 10px !important;
}

@media (max-width: 768px) {
    .tipino-claim-shell .tipino-claim-shell__intro {
        padding: 14px;
    }

    .tipino-claim-shell .tipino-claim-form .tipino-claim-section-head,
    .tipino-claim-shell .tipino-claim-form .tipino-claim-proof-toolbar {
        grid-template-columns: 1fr !important;
    }

    .tipino-claim-shell .tipino-claim-form .tipino-button.tipino-claim-add-proof,
    .tipino-claim-shell .tipino-claim-form .tipino-button.tipino-claim-proof-remove,
    .tipino-claim-shell .tipino-claim-form .tipino-claim-proof-toolbar .tipino-claim-proof-type {
        width: 100% !important;
    }

    .tipino-claim-shell .tipino-claim-form .tipino-claim-suggestion-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* -- Claim Review Component -- */
.tipino-claim-review-card {
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.2);
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-white) r g b / 0.05);
    backdrop-filter: blur(8px);
}
.tipino-claim-review-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tipino-claim-review-item {
    padding: 16px;
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.12);
    background: rgb(from var(--tipino-black) r g b / 0.18);
}
.tipino-claim-review-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.tipino-claim-review-meta {
    min-width: 240px;
    flex: 1 1 320px;
}
.tipino-claim-review-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.tipino-claim-status-badge--score {
    background: rgb(from var(--tipino-white) r g b / 0.1);
    color: var(--tipino-text-white);
}
.tipino-claim-review-warning {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-warning) r g b / 0.12);
    border: 1px solid rgb(from var(--tipino-warning) r g b / 0.22);
}
.tipino-claim-review-approved {
    margin-top: 14px;
    padding: 12px;
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-success) r g b / 0.08);
    border: 1px solid rgb(from var(--tipino-success) r g b / 0.18);
}
.tipino-claim-review-proofs {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tipino-claim-review-proof-row {
    padding: 12px;
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-white) r g b / 0.05);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
}
.tipino-claim-review-proof-header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.tipino-claim-review-next-steps {
    margin-top: 14px;
    padding: 12px;
    border-radius: var(--tipino-border-radius);
    background: rgb(from var(--tipino-white) r g b / 0.04);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.08);
}
.tipino-claim-edit-inner {
    margin-top: 14px;
    padding: 16px;
    border-radius: var(--tipino-border-radius);
    border: 1px solid rgb(from var(--tipino-white) r g b / 0.15);
    background: rgb(from var(--tipino-white) r g b / 0.03);
}