:root{
	--bg:#f3f6f9;
	--card:#ffffff;
	--muted:#9aa7b2;
	--accent:#4B8CFF;
	--purple-1:#F6F3FF;
	--purple-2:#EBDFFB;
}
*{box-sizing:border-box}
.html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{background:linear-gradient(90deg,var(--bg),#eef3f7);display:flex;align-items:stretch;padding-top:86px}

/* Top floating site header (minimal, matches screenshot style) */
.site-top{position:fixed;left:50%;transform:translateX(-50%);top:18px;width:88%;max-width:1200px;height:56px;background:rgba(255,255,255,0.92);border-radius:12px;padding:8px 18px;box-shadow:0 6px 22px rgba(16,24,40,0.06);display:flex;align-items:center;z-index:30}
.site-top .container{width:100%;display:flex;justify-content:flex-end}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-item{font-size:13px;color:#64748b;padding:8px 12px;border-radius:10px;text-transform:lowercase;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;transition:transform 180ms ease,background-color 180ms ease,color 180ms ease}
.nav-item .icon{font-size:16px;line-height:1;display:inline-block;transform:translateY(0);transition:transform 240ms ease,color 240ms}
.nav-item:hover{background:rgba(75,140,255,0.06);color:#2f6cff}
.nav-item:hover .icon{transform:translateY(-3px)}
.nav-item.is-pressed{transform:scale(0.97)}

.nav-item:focus{outline:2px solid rgba(47,108,255,0.12);outline-offset:3px}

/* Animated decorative background */
.bg-animated{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.page-overlay{position:fixed;inset:0;z-index:40;pointer-events:none;background:linear-gradient(135deg, rgba(75,140,255,0.12), rgba(123,97,255,0.08));backdrop-filter:blur(3px);opacity:0;transform:scale(1.02);transition:opacity 260ms ease,transform 260ms ease}
.page-overlay.show{opacity:1;transform:scale(1)}
.bg-animated::before,.bg-animated::after{content:"";position:absolute;filter:blur(40px) saturate(120%);opacity:0.28;mix-blend-mode:overlay}
.bg-animated::before{width:720px;height:420px;background:radial-gradient(circle at 20% 30%, #a6c8ff 0%, transparent 40%), radial-gradient(circle at 80% 70%, #ffd8b3 0%, transparent 35%);left:-10%;top:-6%;transform:translate3d(0,0,0);animation:drift1 28s linear infinite}
.bg-animated::after{width:640px;height:340px;background:radial-gradient(circle at 70% 20%, #cbe9c8 0%, transparent 35%), radial-gradient(circle at 30% 80%, #fbd8f8 0%, transparent 32%);right:-12%;bottom:-8%;transform:translate3d(0,0,0);animation:drift2 36s linear infinite}

@keyframes drift1{0%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(30px,-18px,0) rotate(6deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}
@keyframes drift2{0%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(-28px,22px,0) rotate(-6deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}

/* Ensure app content is above animated background */
.app{position:relative;z-index:2}
.app{width:760px;margin:auto;min-height:560px;background:var(--card);border-radius:8px;box-shadow:0 8px 30px rgba(16,24,40,0.06);overflow:hidden;display:flex;flex-direction:column;transition:opacity 260ms ease,transform 260ms ease}
.app.is-exiting{opacity:0;transform:translateY(10px) scale(0.98)}
body.is-transitioning .site-top{transform:translateX(-50%) translateY(-2px)}
.topbar{height:72px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f3f6}
.topbar .left{display:flex;align-items:center;gap:12px}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,var(--purple-1),var(--purple-2));display:flex;align-items:center;justify-content:center;color:#2f2f41;font-weight:700;box-shadow:0 4px 12px rgba(107,90,196,0.12);transform:translateZ(0);animation:avatarPop 1600ms ease-in-out infinite}
.avatar span{font-size:18px}
.meta .role{font-size:11px;color:var(--muted);letter-spacing:1px}
.meta .name{font-size:16px;font-weight:600;color:#17202a}
.status{display:flex;align-items:center;gap:8px}
.status .dot{width:12px;height:12px;background:#8EE28E;border-radius:50%;box-shadow:0 0 0 0 rgba(142,226,142,0.35);animation:ping 2s infinite}
.status .text{font-size:13px;color:var(--muted);background:rgba(255,255,255,0.7);padding:6px 10px;border-radius:999px;border:1px solid rgba(120,170,255,0.06);font-weight:600;color:#4b5563}
.content{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:28px}

/* Profile card */
.profile-card{width:420px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px;border-radius:14px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 18px 50px rgba(16,24,40,0.06);transform:translateZ(0);animation:fadeInUp 500ms ease both}
.avatar-lg{width:92px;height:92px;border-radius:50%;background:linear-gradient(180deg,var(--purple-1),var(--purple-2));display:flex;align-items:center;justify-content:center;color:#2f2f41;font-weight:700;box-shadow:0 12px 30px rgba(107,90,196,0.08);animation:avatarPop 1600ms ease-in-out infinite}
.avatar-lg span{font-size:36px}
.profile-meta .name{font-size:20px;font-weight:700;color:#17202a}
.profile-meta .role{font-size:12px;color:var(--muted);letter-spacing:1px}
.fields{width:100%;margin-top:8px;display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px}
.value-row{display:flex;gap:10px;align-items:center}
.value{background:transparent;padding:10px 12px;border-radius:10px;border:1px solid #eef4fb;color:#24323a;font-weight:600}
.copy{padding:8px 12px;border-radius:10px;border:none;background:linear-gradient(90deg,var(--accent),#2f6cff);color:#fff;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(75,140,255,0.12);transition:transform 160ms ease}
.copy:active{transform:translateY(1px)}

/* remove old ephemeral rule if exists */
.ephemeral{display:none}

/* Animations */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@keyframes avatarPop{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(142,226,142,0.35)}70%{box-shadow:0 0 0 10px rgba(142,226,142,0)}100%{box-shadow:0 0 0 0 rgba(142,226,142,0)}}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}

/* Responsive small */
@media (max-width:820px){
	.app{width:94%;min-height:520px}
}