:root {
	--user-profile-background: #fff;
	--details-info-color: #666;
	
	--user-universe-sidebar-background: #ffffff;
	--user-universe-sidebar-actions-color: #5534bd;
	--user-universe-container-background: #8a36ea03;
	--user-universe-container-color: #323232;
	--user-universe-container-title-color: #7221d9;
}

[data-theme="dark"] {
	--user-profile-background: transparent;
	--details-info-color: #a5a5a5;
	
	--user-universe-sidebar-background: #1a1a1a;
	--user-universe-sidebar-actions-color: #aaa;
	--user-universe-container-background: #111;
	--user-universe-container-color: white;
	--user-universe-container-title-color: #246bf3;
}


main {
	position: relative;
	display: flex;
	flex-direction: column;
}

.user-profile {
    background: var(--user-profile-background);
    overflow: hidden;
    font-family: Arial, sans-serif;
	margin-bottom: 1rem;
}

.profile-header {
    display: flex;
	flex-wrap: wrap;
    align-items: center;
    padding: 20px;
	gap: 0.5rem;
	justify-content: space-between;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: white;
}

.profile-content {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.profile-picture img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
	box-shadow: 1px 1px 10px 4px rgba(0, 0, 0, 0.15);
}

.profile-picture[style*="cursor: pointer;"]:hover {
    opacity: 0.8;
    transition: opacity 0.2s;
}

.upload-message {
	position: relative;
	flex: 0 0 100%;
}

.upload-message p {
	position: absolute;
	margin: 0;
	left: 0;
	top: 1rem;
}

.placeholder-picture {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    color: white;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Meta/Universe Toggle Button */

.profil-buttons button {
	padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 2vw, 1.25rem);
    font-size: calc(clamp(0.75rem, 2vw, 0.9rem) + var(--font-size-larger));
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #9333ea);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
}

/* Hover: leichter Glow + Bewegung */
.profil-buttons button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(147, 51, 234, 0.5);
}

/* Klick-Effekt */
.profil-buttons button:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.profil-buttons button {
    background: linear-gradient(135deg, #0ea5e9, #22d3ee);
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
}

.meta-toggle.meta-active {
    background: linear-gradient(135deg, #9333ea, #f43f5e);
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.4);
}

/* PROFIL DETAILS */

#UserMeta {
}

.profile-tabs {
    display: flex;
	flex-wrap: wrap;
    margin-top: 1rem;
	padding-bottom: 1.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.tab-button {
    background: #eee;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
	margin-right: 0.5rem;
}

.tab-button.active {
    background: var(--accent-color, #3498db);
    color: white;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.badge-list .badge {
    background: #4c79ff;
    border-radius: 12px;
    padding: 0.3rem 0.7rem;
    margin-right: 0.3rem;
    font-size: 0.85rem;
	color: white;
}

.profile-info {
}

.profile-info h1 {
    margin: 0;
    font-size: 24px;
}

.profile-info .join-date {
    font-size: 14px;
    opacity: 0.8;
}

.profile-details {
    padding: 0 1.5rem;
}

.profile-details ul {
    list-style: none;
    padding: 0;
}

.profile-details li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.profile-details li:last-child {
    border-bottom: none;
}

.status {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.status.active {
    background: #d4f8d4;
    color: #2e7d32;
}

.status.away {
    background: #ffe4cc;
    color: #c95325;
}

.role-badge-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.role-badge { 
	display: inline-flex;
	padding: 6px 10px;
	gap: 5px;
	border-radius: 999px;
	font-size: 0.8rem;
	cursor: default;
}

.role-badge .role-icon {
	position: relative;
	display: block;
	width: 12px;
	height: 12px;
}

.role-badge .role-icon::before {
	position: absolute;
	top: -3px;
	left: -3px;
	font-size: 0.8rem;
	width: 12px;
	height: 12px;
}

/* BADGE TESTER */

.badge-Tester {
	font-family: 'Sora', sans-serif;
	color: white;
	background: linear-gradient(116deg, rgba(60, 241, 255, 0.75), rgba(46, 154, 233, 0.75));
	outline: 1px solid rgba(45, 161, 245, 0.25);
}

.badge-Tester .role-icon::before {
	content: "🧪";
}

/* BADGE CREATOR */

.badge-Creator {
	font-family: 'Sora', sans-serif;
	color: white;
	background: linear-gradient(188deg, rgba(61, 233, 137, 0.75), rgba(224, 138, 239, 0.75));
	outline: 1px solid rgba(11, 149, 56, 0.25);
}

.badge-Creator .role-icon::before {
	content: "✨";
}

/* BADGE ENTWICKLER */

.badge-Entwickler {
	font-family: 'Sora', sans-serif;
	color: white;
	background: linear-gradient(168deg, rgba(137, 255, 189, 0.75), rgba(58, 147, 223, 0.75));
	outline: 1px solid rgba(16, 93, 149, 0.25);
}

.badge-Entwickler .role-icon::before {
	content: "🌐";
}

/* SETTINGS */

.account-settings {
	margin: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.account-settings h1 {
	margin: 0;
}

.settings-input {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.settings-input h2 {
	margin-top: 0;
}

.form-group {
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
}

.input-form-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.input-form-group label {
    margin-bottom: 2px;
    font-weight: 500;
}

.input-form-group input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.input-form-group input:focus {
    border-color: #007BFF;
    outline: none;
}

/* SETTINGS PROFILPICTURE */

.profile-picture-upload {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
}

.profile-picture-upload p {
	margin: 0;
	align-self: center;
	text-align: center;
}

.profile-picture-upload form {
	display: flex;
	gap: clamp(0.5rem, 2vw, 0.75rem);
}

.profile-picture-upload input[type="file"] {
    display: none;
}

.custom-file-upload {
    display: inline-block;
	position: relative;
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: white;
    border-radius: 5px;
    font-size: 0.9rem;
	z-index: 0;
	overflow: hidden;
}

.btn.pri {
    background-color: #0cb3fe;
}

.btn.pri::before {
    background: linear-gradient(110deg, #62afff, #17a8ff);
}

.btn.pri:hover::before {
    left: 0;
}

.file-delete {
	all: unset;
	position: relative;
	display: inline-block;
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: white;
    border-radius: 5px;
    font-size: 0.9rem;
	z-index: 0;
	overflow: hidden;
}

/* Settings-Button */

.buttons-form-group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.settings-input .btn {
    position: relative;
	display: inline-flex;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
	align-items: center;
    cursor: pointer;
    color: #fff;
    background-color: #6c757d; /* default fallback */
    overflow: hidden;
    z-index: 0;
    transition: color 0.3s ease;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    z-index: -1;
    transition: all 0.4s ease;
}

.btn.primary {
    background-color: #0cb3fe;
}

.btn.primary::before {
    background: linear-gradient(110deg, #0c83fe, #0cdafe);
}

.btn.primary:hover::before {
    left: 0;
}

.btn.danger {
    background-color: #dc3545;
}

.btn.danger::before {
    background: linear-gradient(110deg, #f71e33, #fd6969);
}

.btn.danger:hover::before {
    left: 0;
}

/* Optional: Stronger hover feedback */
.settings-input .btn:hover {
    color: #fff;
}

/* NOTE */

.settings-input .note {
    display: block;
    margin-top: 15px;
    font-size: 12px;
    color: var(--details-info-color);
    line-height: 1.4;
}

/* Delete Account */

.delete-account-button {
  background: #f8e8e8;
  color: #a83232;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 500;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.delete-account-button:hover {
  background: #f3d3d3;
}

.delete-account-button:active {
  transform: scale(0.97);
}

/* === UNIVERSE === */

#UserUniverse {
}
.user-universe .container {
    display: flex;
	flex-wrap: wrap;
    background: var(--user-universe-container-background);
    color: var(--user-universe-container-color);
    font-family: Arial;
	border-bottom: 1px solid rgb(233 233 233 / 15%);
}

.user-universe .sidebar {
    flex: 1;
	min-width: 250px;
    background: var(--user-universe-sidebar-background);
    border-right: 1px solid #333;
    overflow-y: auto;
    padding: 20px;
}

@media (max-width: 625px) {
	.user-universe .sidebar {
		max-height: 390px;
	}
}

.user-universe .sidebar h2 {
	text-align: center;
	margin-top: 0;
}

/* Create New Button */
.user-universe .sidebar .create-new {
	padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 2vw, 1.25rem);
	background: linear-gradient(135deg, #4f46e5, #9333ea);
	border-radius: 16px;
	color: white;
	text-decoration: none;
	transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
	display: flex;
    justify-content: center;
}

.user-universe .sidebar .create-new:hover {
    box-shadow: 0 8px 20px rgba(147, 51, 234, 0.4);
}

.user-universe .sidebar .create-new:active {
	transform: translateY(1px) scale(0.98);
	box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
}

/* Main */

@font-face {
    font-family: 'Work Sans';
    src: url('../lib/fonts/Work_Sans/WorkSans-Regular.woff2') format('woff2'),
        url('../lib/fonts/Work_Sans/WorkSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.user-universe .main {
    flex: 3;
	min-width: 280px;
	min-height: 60vh;
    padding: 20px;
	font-family: 'Work Sans', sans-serif;
}

.user-universe .note-item {
    padding: 15px;
    border-bottom: 1px solid #333;
}

.sidebar .note-item:first-of-type {
    margin-top: 0.75rem;
}

.sidebar .note-item:last-of-type {
	border-bottom: none;
}

.user-universe .note-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.user-universe .note-visibility {
    color: #888;
    font-size: 14px;
    margin-bottom: 10px;
}

.user-universe .note-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.user-universe .note-actions a {
    color: var(--user-universe-sidebar-actions-color);
    text-decoration: none;
}

.user-universe input,
.user-universe textarea,
.user-universe select {
    width: 100%;
    margin-bottom: 15px;
    padding: 12px;
    background: #222;
    border: 1px solid #444;
    color: white;
    box-sizing: border-box;
	font-family: 'Work Sans', sans-serif;
}

.user-universe textarea {
    min-height:400px;
    resize:vertical;
}

.user-universe button {
    background:#444;
    color:white;
    border:none;
    padding:12px 20px;
    cursor:pointer;
}

.user-universe .empty-state {
	text-align: center;
}

.user-universe .note-view {
	line-height: 1.2;
	letter-spacing: 0.02rem;
}

.user-universe .view-note-title {
	font-size: calc(clamp(2.35rem, 6vw, 3.25rem) + var(--font-size-larger));
	text-align: center;
	margin-bottom: 2rem;
	margin-top: 1rem;
	color: var(--user-universe-container-title-color);
}

/* === NOTE CONTENT === */

@media (max-width: 605px) {
	#note-content {
		scroll-margin-top: 60px;
	}
}

@media (min-width: 606px) {
	#note-content {
		scroll-margin-top: 100vh;
	}
}

.note-content {
	font-size: calc(clamp(0.85rem, 3vw, 1rem) + var(--font-size-larger));
}

.note-content h1 {
	font-size: calc(clamp(1.5rem, 4vw, 2.15rem) + var(--font-size-larger));
}

.note-content h2 {
	font-size: calc(clamp(1.15rem, 4vw, 1.75rem) + var(--font-size-larger));
}

.note-content h3 {
	font-size: calc(clamp(1rem, 4vw, 1.5rem) + var(--font-size-larger));
}


/* ONLINE ZAHL */

.online-info {
	margin-bottom: 0.75rem;
	margin-left: 0.75rem;
    display: block;
    margin-top: auto;
    font-size: 12px;
    color: var(--details-info-color);
}

/* MEDIA */

@media (max-width: 600px) {
	.profile-tabs {
		justify-content: center;
		gap: 0.5rem;
	}
	.tab-button {
		margin: 0;
	}
	.account-settings h1 {
		text-align: center;
	}
	.profile-picture-upload {
		justify-content: center;
	}
	.form-group {
		flex-direction: column;
	}
	.input-form-group {
		justify-content: center;
	}
	.buttons-form-group {
		justify-content: center;
	}
	.online-info,
	.note {
		text-align: center;
	}
	.user-buttons {
		justify-items: center;
	}
}

@media (max-width: 430px) {
	.profile-header {
		justify-content: center;
		text-align: center;
	}
	.profile-content {
		justify-content: center;
		gap: clamp(0.5rem, 3vw, 1.5rem);
	}
	.role-badge-wrapper {
		justify-content: center;
	}
}