:root{
	--accent: 238 84% 47%;
	--text: #0a0a0a;
	--muted: 0 0 0 / 0.65;
	--border-dark: 0 0 0 / 0.12;
	--glass-dark: 0 0 0 / 0.00;
	--glass-dark-strong: 0 0 0 / 0.08;
	--radius-xl: 24px;
	--shadow-md: 0 10px 28px rgba(0,0,0,.02);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; color:var(--text); font: 500 16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; overflow-x:hidden; background:#ffffff}

/* BACKGROUND ANIMATION */
.gradient{position:fixed; inset:0; z-index:-1}
.gradient::before{content:""; position:absolute; inset:-15%; background:#ffffff}
.gradient::after{content:""; position:absolute; inset:-20%;
	background:
	radial-gradient(40% 35% at 20% 20%, rgba(0,0,0,.06), transparent 60%),
	radial-gradient(35% 30% at 85% 15%, rgba(0,0,0,.05), transparent 60%),
	radial-gradient(35% 30% at 15% 85%, rgba(0,0,0,.04), transparent 60%);
	filter:saturate(120%);
	animation: drift 28s ease-in-out infinite;
	background-size: 160% 160%;
	opacity:.45;
}
@keyframes drift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-3%, 2%, 0)}100%{transform:translate3d(0,0,0)}}

/* LAYOUT */
.wrap{min-height:100dvh; display:grid; place-items:start center; padding:24px}
.container{width:min(520px, 100%)}

.section{margin-top:8px}
.section h2{margin:10px 6px; font-size:12px; text-transform:lowercase; letter-spacing:.18em; opacity:.55}
.stack{display:flex; flex-direction:column; gap:12px} /* Gap reduced slightly */

/* ============================
   LINK CARDS (NOTIFICATIONS)
   ============================ */
.notif{
	--tint: 0 0 0 / 0;
	--tint-strong: 0 0 0 / 0;
	position:relative; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
	padding:12px; /* REDUCED PADDING HERE */
	border-radius:22px;
	border:1px solid rgba(var(--border-dark));
	background: rgba(var(--glass-dark));
	backdrop-filter: blur(14px) saturate(130%);
	-webkit-backdrop-filter: blur(14px) saturate(130%);
	box-shadow: var(--shadow-md);
	text-decoration:none; color:var(--text);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
	overflow:visible;
	isolation:isolate;
}
.notif::before{
	content:""; position:absolute; inset:0; z-index:-1;
	background: linear-gradient( to bottom right, hsl(var(--tint)) , transparent 65% );
	opacity:.5; pointer-events:none;
	border-radius: inherit;
	clip-path: inset(0 round 22px);
}
.notif:hover{ transform: translateY(-3px); }

/* Left icon container */
.appicon{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; flex:0 0 auto;
	border:1px solid rgba(var(--border-dark));
	background: rgba(255,255,255,.55); backdrop-filter: blur(10px);
	overflow:hidden;
}
.appicon img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; }

/* Content with badge rail on the right */
.content{min-width:0; display:grid; grid-template-columns: 1fr auto; grid-template-rows:auto auto; column-gap:12px; align-items:center; padding-right:36px}
.title{font-weight:750; font-size:16px; letter-spacing:.01em; grid-column:1; grid-row:1}
.subtitle{font-size:13px; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; grid-column:1; grid-row:2}

.badges{grid-column:2; grid-row:1 / span 2; display:flex; flex-wrap:wrap; gap:6px; justify-self:end}
.badge{position:relative; z-index:20; font:700 10px/1 system-ui; letter-spacing:.02em; padding:6px 9px; border-radius:999px; background: rgba(255,255,255,.85); color:#111; border:1px solid rgba(var(--border-dark)); backdrop-filter: blur(4px)}
.badge[data-tooltip]::after{content: attr(data-tooltip); position:absolute; left:50%; bottom: calc(100% + 8px); transform:translateX(-50%); white-space:nowrap; font:500 11px/1.2 system-ui; color:#0a0a0a; background:#fff; border:1px solid #e5e5e5; padding:6px 8px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.10); opacity:0; visibility:hidden; transition:opacity .15s ease, transform .15s ease, visibility .15s; pointer-events:none; z-index:9999}
.badge:hover::after{opacity:1; visibility:visible; transform:translateX(-50%) translateY(-2px)}

.chev{position:absolute; right:12px; top:50%; transform:translateY(-50%); width:24px; height:24px; display:grid; place-items:center; opacity:.7}
.chev svg{width:24px; height:24px}

/* Brand themes */
.theme-x{ --tint: 0 0% 0% / .18; } .theme-x .appicon{ background:#2d2d2d; color:#fff;} .theme-x .appicon img { padding: 10px; }
.theme-reddit{ --tint: 0 0% 0% / .18; } .theme-reddit .appicon{ background:#ff4500; color:#fff;}
.theme-telegram{ --tint: 0 0% 0% / .18; } .theme-telegram .appicon{ background:#229ED9; color:#fff }
.theme-fansly{ --tint: 210 100% 50% / .18; border: 1px solid #2799f6;} .theme-fansly .appicon{ background:#fff; color:#000 }
.theme-onlyfans{ --tint: 210 100% 50% / .18; border: 1px solid #008CCF;} .theme-onlyfans .appicon{ background:#008CCF ; color:#fff }
.theme-site{ --tint: 238 84% 47% / .16; } .theme-site .appicon{ background:#eef2ff; color:#111 }

.pinktext {color: #f73d7a;}
.blacktext {color: #000000;}

a:focus-visible, .badge:focus-visible{outline:2px solid hsl(var(--accent)); outline-offset:2px; border-radius:10px}

/* ============================
   HEADER V7 (SEAMLESS COVER)
   ============================ */
.header-v7 { position: relative; margin-bottom: 10px; background: transparent; box-shadow: none; border: none; }

.v7-banner {
	height: 140px; width: 100%;
	/* Default fallback gradient if no image */
	background: linear-gradient(to bottom, #cbd5e1 0%, #e2e8f0 100%);
	background-size: cover; background-position: center;
	border-radius: 24px 24px 0 0; position: relative;
}

.v7-avatar-container { position: absolute; top: 60px; left: 24px; width: 150px; height: 150px; z-index: 10; }
.v7-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; border: 6px solid #fff; background: #fff; }

.v7-content { position: relative; padding-left: 190px; padding-top: 12px; padding-bottom: 4px; min-height: 60px; }

.v7-name { font-size: 1.8rem; font-weight: 800; color: #0f1419; margin: 0; line-height: 1.1; letter-spacing: -0.5px; display: flex; align-items: center; gap: 6px; }
.v7-handle { font-size: 1rem; font-weight: 500; color: #536471; margin-top: 2px; display: block; }

/* V7 Badge (NSFW) */
.v7-nsfw-badge {
	position: absolute; bottom: 0; right: 0;
	display: inline-flex; align-items: center;
	padding: 0; background: transparent;
	color: #ef4444; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.5px;
}
.v7-dot {
	width: 8px; height: 8px; background-color: #ef4444;
	border-radius: 50%; margin-right: 8px;
	animation: pulse-v7 1.5s infinite ease-in-out;
}
@keyframes pulse-v7 {
	0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
	70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
	100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ============================
   HEADER V1 (MINIMAL)
   ============================ */
.profile-header { display: flex; align-items: center; gap: 14px; margin: 16px 6px 0px; font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif; }
.avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #ddd; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.profile-info { display: flex; flex-direction: column; justify-content: center; }
.username { display: flex; align-items: center; font-size: 18px; font-weight: 700; gap: 5px; }
.verified svg { display: inline-block; vertical-align: middle; }
.fullname { font-size: 14px; color: rgba(0,0,0,.6); margin-top: 2px; }
.stats { font-size: 14px; color: rgba(0,0,0,.8); margin-top: 4px; }
.stats strong { font-weight: 700; }

.status-online{ --gap: 6px; display:inline-flex; align-items:center; gap:var(--gap); margin-left:4px; padding:0px 0px 0px 8px; backdrop-filter: blur(4px) saturate(120%); }
.pulse-dot{ position:relative; width:10px; height:10px; border-radius:50%; background: hsl(0, 100%, 50%); box-shadow: 0 0 6px hsl(0, 100%, 63.7%); animation: beat 1.6s ease-in-out infinite; }
.pulse-dot::before, .pulse-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background: hsl(0, 60.5%, 56.3%); opacity:.55; animation: ripple 1.6s ease-out infinite; }
.pulse-dot::after{ animation-delay:.8s; }
.status-label{ font:700 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#d30000; letter-spacing:.1px; }

@keyframes beat{ 0%, 32%{transform:scale(1);} 36%{transform:scale(1.25);} 46%{transform:scale(1.05);} 60%{transform:scale(1.18);} 100%{transform:scale(1);} }
@keyframes ripple{ 0%{transform:scale(1);opacity:.45;} 60%{transform:scale(2.2);opacity:.10;} 100%{transform:scale(2.8);opacity:0;} }

/* ============================
   BIO BANNER (DARK MODE)
   ============================ */
.typewriter-wrap {
	color: #000000;
	padding: 2px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-bottom:10px;
}
.typewriter-wrap span, .typewriter-wrap p { color: #000000 !important; line-height: 1.5; font-size: 0.8rem; margin: 0; }
.bio-spacer { height: 1px; width: 40px; background: rgba(255,255,255,0.2); margin: 12px auto; }

/* Cursor Animation */
#typewriter-text { border-right: 2px solid #000000; white-space: nowrap; overflow: hidden; animation: blink-caret 0.8s step-end infinite; }
@keyframes blink-caret { 50% { border-color: transparent; } }
.typewriter-fade-in { animation: fadeIn 0.8s ease forwards; }
.typewriter-fade-out { animation: fadeOut 0.6s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes fadeOut { from { opacity: 1; transform: translateY(0); filter: blur(0); } to { opacity: 0; transform: translateY(-6px); filter: blur(2px); } }

/* ============================
   FOOTER
   ============================ */
.lang-pill { display: inline-flex; background: rgba(0,0,0,0.06); padding: 4px; border-radius: 999px; position: relative; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
.lang-item { text-decoration: none; padding: 6px 16px; font-size: 0.8rem; font-weight: 600; color: #666; border-radius: 999px; transition: all 0.3s ease; position: relative; z-index: 2; }
.lang-item:hover { color: #333; }
.lang-item.active-en { background-color: #00247d; color: #fff; box-shadow: 0 2px 6px rgba(0,36,125, 0.3); }
.lang-item.active-tr { background-color: #e30a17; color: #fff; box-shadow: 0 2px 6px rgba(227,10,23, 0.3); }

/* MOBILE RESPONSIVE */
@media (max-width: 520px){
	.notif{padding:10px} /* REDUCED MOBILE PADDING */
	.appicon{width:40px; height:40px; border-radius:12px}
	.content{ grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding-right:32px; column-gap:0; }
	.title{font-size:15px}
	.subtitle{font-size:12.5px; white-space:normal; overflow-wrap:anywhere; word-break:break-word}
	.badges{grid-column:1; grid-row:3; justify-self:start; margin-top:6px; display:none;}
	.badge{font-size:9.5px; padding:5px 8px}
	.chev{right:8px; top:50%; transform:translateY(-50%)}
	
	/* V7 Mobile */
	.v7-banner { height: 110px; }
	.v7-avatar-container { width: 110px; height: 110px; top: 60px; left: 16px; border-radius: 24px; }
	.v7-avatar { border-width: 4px; border-radius: 24px; }
	.v7-content { padding-left: 140px; padding-top: 8px; }
	.v7-name { font-size: 1.4rem; }
	.v7-nsfw-badge { position: relative; bottom: auto; right: auto; margin-top: 6px; }
}