@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Share+Tech+Mono&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; font-family:'Inter',sans-serif; background:#000; }

/* ── SCROLLBAR ───────────────────────── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(167,139,250,.4); border-radius:99px; }

/* ── CUSTOM CURSOR ───────────────────── */
* { cursor:none !important; }
#cursor-dot {
  position:fixed; width:8px; height:8px; background:#fff; border-radius:50%;
  pointer-events:none; z-index:99999; transform:translate(-50%,-50%);
  transition:transform .1s ease, background .2s;
  box-shadow:0 0 8px rgba(255,255,255,.8);
}
#cursor-ring {
  position:fixed; width:32px; height:32px; border:1.5px solid rgba(255,255,255,.5);
  border-radius:50%; pointer-events:none; z-index:99998; transform:translate(-50%,-50%);
  transition:width .2s ease, height .2s ease, border-color .2s, opacity .2s;
}
#cursor-label {
  position:fixed; pointer-events:none; z-index:99997;
  font-family:'Share Tech Mono',monospace; font-size:9px; font-weight:700;
  color:rgba(255,255,255,.45); letter-spacing:1.5px; text-transform:uppercase;
  transform:translate(14px,4px); white-space:nowrap; transition:opacity .2s;
}
body.cursor-hover #cursor-dot  { transform:translate(-50%,-50%) scale(2.5); background:#a78bfa; box-shadow:0 0 14px rgba(167,139,250,.9); }
body.cursor-hover #cursor-ring { width:48px; height:48px; border-color:rgba(167,139,250,.6); }
body.cursor-hover #cursor-label{ opacity:0; }
#cursor-dot.click { transform:translate(-50%,-50%) scale(4); opacity:0; transition:transform .25s ease, opacity .25s ease; }

/* ── SPLASH ──────────────────────────── */
#splash {
  position:fixed; inset:0; z-index:999; display:flex; align-items:center; justify-content:center;
  background:#04040a; transition:opacity .7s ease;
}
#splash::after  { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.07) 2px,rgba(0,0,0,.07) 4px); }
#splash::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(110,60,255,.13) 0%,transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
#splashType { position:relative; z-index:2; font-family:'Share Tech Mono',monospace; font-size:clamp(18px,4.5vw,40px); color:#fff; letter-spacing:.5px; text-align:center; padding:0 24px; line-height:1.4; }
.cur { display:inline-block; width:2px; height:1em; background:#fff; margin-left:2px; vertical-align:text-bottom; animation:blink .75s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
#splash.gone { opacity:0; pointer-events:none; }

/* ── VIDEO BG ────────────────────────── */
.yt-wrap { position:fixed; inset:0; z-index:0; background:#000; overflow:hidden; }
.yt-wrap #ytf,
.yt-wrap #ytf iframe {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-height:100vh; min-width:177.78vh;
  border:none; pointer-events:none;
}
.overlay { position:fixed; inset:0; z-index:1; background:rgba(0,0,0,.52); pointer-events:none; transition:background .3s; }

/* ── MAIN PAGE ───────────────────────── */
.page {
  position:relative; z-index:10; width:100%; height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px; gap:10px; opacity:0; transition:opacity .8s ease; pointer-events:none;
  overflow-y:auto;
}
.page.visible { opacity:1; pointer-events:all; }

/* ── CARD ────────────────────────────── */
.card-wrap { width:100%; max-width:780px; }
.card {
  width:100%;
  background:rgba(15,15,22,.48);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,.09); border-radius:20px;
  padding:26px 28px 22px;
  box-shadow:0 16px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  position:relative; overflow:hidden;
  transition:box-shadow .35s ease;
}
.card::after {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
  transition:left .7s ease; pointer-events:none; z-index:0;
}
.card:hover::after { left:160%; }
.card::before {
  content:''; position:absolute; inset:0; border-radius:20px;
  background:linear-gradient(135deg,rgba(167,139,250,.08),rgba(56,189,248,.06),transparent 60%);
  opacity:0; transition:opacity .35s; pointer-events:none; z-index:0;
}
.card:hover::before { opacity:1; }
.card > * { position:relative; z-index:1; }

/* ── TOP ROW ─────────────────────────── */
.top-row { display:flex; align-items:flex-start; gap:20px; margin-bottom:18px; }

/* avatar */
.avatar-wrap { position:relative; flex-shrink:0; }
.av-ring { width:88px; height:88px; border-radius:50%; padding:3px; background:#4a4a5a; transition:background .5s, box-shadow .5s; }
.av-ring.online  { background:#23d18b; box-shadow:0 0 20px rgba(35,209,139,.6); }
.av-ring.idle    { background:#f5a623; box-shadow:0 0 20px rgba(245,166,35,.6); }
.av-ring.dnd     { background:#f04747; box-shadow:0 0 20px rgba(240,71,71,.6); }
.av-ring.offline { background:#4a4a5a; }
.av-inner { width:100%; height:100%; border-radius:50%; background:#1a1a2e; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:900; color:#fff; border:2.5px solid #0f0f16; }
.av-inner img { width:100%; height:100%; object-fit:cover; display:block; }
.pip { position:absolute; bottom:3px; right:3px; width:18px; height:18px; border-radius:50%; border:3px solid #0f0f16; background:#4a4a5a; transition:background .4s; z-index:2; }
.pip.online  { background:#23d18b; }
.pip.idle    { background:#f5a623; }
.pip.dnd     { background:#f04747; }
.pip.online::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid #23d18b; opacity:0; animation:ripple 2s ease-out infinite; }
@keyframes ripple { 0%{transform:scale(.8);opacity:.7} 100%{transform:scale(2.2);opacity:0} }

/* info */
.info { flex:1; min-width:0; }
.name-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.username {
  font-size:24px; font-weight:900; letter-spacing:-.3px; line-height:1;
  background:linear-gradient(90deg,#fff 0%,#a78bfa 40%,#38bdf8 70%,#fff 100%);
  background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; animation:shimmer 3s linear infinite;
}
@keyframes shimmer { to { background-position:200% center; } }
.ncur { display:inline-block; width:2px; height:.85em; background:#a78bfa; vertical-align:text-bottom; margin-left:2px; animation:blink .75s step-end infinite; -webkit-text-fill-color:initial; }

/* badge box */
.badge-box { display:flex; align-items:center; gap:4px; flex-wrap:wrap; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:4px 7px; backdrop-filter:blur(8px); }
.bdg { width:24px; height:24px; display:flex; align-items:center; justify-content:center; transition:transform .18s; position:relative; }
.bdg:hover { transform:scale(1.35) translateY(-2px); }
.bdg img { width:22px; height:22px; object-fit:contain; filter:drop-shadow(0 1px 4px rgba(0,0,0,.7)); }
.bdg[title]:hover::after { content:attr(title); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:rgba(0,0,0,.88); color:#fff; font-family:'Inter',sans-serif; font-size:9px; font-weight:600; padding:3px 7px; border-radius:5px; white-space:nowrap; pointer-events:none; z-index:99; }

.bio { font-family:'Share Tech Mono',monospace; font-size:13px; color:rgba(255,255,255,.5); margin-bottom:8px; line-height:1.4; min-height:20px; }
.bcur { display:inline-block; width:2px; height:.9em; background:rgba(255,255,255,.4); vertical-align:text-bottom; margin-left:2px; animation:blink .75s step-end infinite; }

.sline { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:rgba(255,255,255,.35); transition:color .3s; }
.sline .sdot { width:7px; height:7px; border-radius:50%; background:#4a4a5a; transition:background .3s; }
.sline.online { color:#23d18b; } .sline.online .sdot { background:#23d18b; }
.sline.idle   { color:#f5a623; } .sline.idle   .sdot { background:#f5a623; }
.sline.dnd    { color:#f04747; } .sline.dnd    .sdot { background:#f04747; }

.arow { margin-top:6px; display:flex; align-items:center; gap:7px; font-size:11px; color:rgba(255,255,255,.3); }
.arow .an { color:rgba(255,255,255,.5); font-weight:600; }

/* ── DIVIDER ─────────────────────────── */
.divider { height:1px; background:rgba(255,255,255,.07); margin:14px 0; }

/* ── PC STATUS CARD ──────────────────── */
.pc-card {
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:13px 16px; margin-bottom:14px;
  transition:border-color .3s, background .3s;
}
.pc-card.pc-on  { border-color:rgba(35,209,139,.25); background:rgba(35,209,139,.04); }
.pc-card.pc-off { border-color:rgba(255,255,255,.07); }
.pc-icon {
  width:40px; height:40px; border-radius:10px;
  background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0; transition:background .3s;
}
.pc-card.pc-on .pc-icon { background:rgba(35,209,139,.12); }
.pc-info { flex:1; min-width:0; }
.pc-title { font-size:12px; font-weight:700; color:rgba(255,255,255,.7); letter-spacing:.3px; text-transform:uppercase; margin-bottom:2px; }
.pc-detail { font-family:'Share Tech Mono',monospace; font-size:11px; color:rgba(255,255,255,.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-meta { font-size:10px; color:rgba(255,255,255,.25); margin-top:2px; }
.pc-badge {
  font-family:'Share Tech Mono',monospace; font-size:9px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; padding:3px 9px; border-radius:99px;
  flex-shrink:0;
}
.pc-badge.on  { background:rgba(35,209,139,.15); color:#23d18b; border:1px solid rgba(35,209,139,.3); }
.pc-badge.off { background:rgba(255,255,255,.06); color:rgba(255,255,255,.3); border:1px solid rgba(255,255,255,.1); }

/* ── DEV ACTIVITY GRID ───────────────── */
.dev-activity {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;
}
.dev-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:12px; padding:12px 14px;
  transition:border-color .2s, background .2s;
}
.dev-card:hover { background:rgba(255,255,255,.06); border-color:rgba(167,139,250,.2); }
.dev-label { font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:5px; }
.dev-value { font-size:14px; font-weight:700; color:rgba(255,255,255,.85); margin-bottom:3px; line-height:1.2; }
.dev-sub   { font-family:'Share Tech Mono',monospace; font-size:10px; color:rgba(255,255,255,.35); }

/* ── SOCIALS ─────────────────────────── */
.socials { display:flex; justify-content:center; gap:14px; margin-bottom:14px; }
.soc {
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:background .18s, transform .18s, border-color .18s;
  position:relative;
}
.soc:hover { background:rgba(255,255,255,.16); transform:translateY(-3px) scale(1.1); border-color:rgba(255,255,255,.25); }
.soc[title]:hover::after { content:attr(title); position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); background:rgba(0,0,0,.9); color:#fff; font-size:9px; font-weight:600; padding:3px 8px; border-radius:5px; white-space:nowrap; pointer-events:none; z-index:99; }

/* ── BOTTOM ROW ──────────────────────── */
.bot { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }

.views { display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); border-radius:99px; padding:5px 13px; font-size:12px; font-weight:600; color:rgba(255,255,255,.7); white-space:nowrap; }

.np { font-size:9px; color:rgba(255,255,255,.35); display:none; align-items:center; gap:5px; overflow:hidden; max-width:160px; }
.np-dot { width:5px; height:5px; border-radius:50%; background:#23d18b; flex-shrink:0; animation:blink 1.2s ease-in-out infinite; }
.np-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'Share Tech Mono',monospace; }

/* ── CLOCK ───────────────────────────── */
.clock-wrap { display:flex; flex-direction:column; align-items:flex-end; gap:1px; flex-shrink:0; }
.clock-time {
  font-family:'Share Tech Mono',monospace; font-size:18px; font-weight:700; letter-spacing:2px;
  background:linear-gradient(90deg,#fff 0%,#a78bfa 50%,#38bdf8 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1;
}
.clock-date { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:1.5px; color:rgba(255,255,255,.3); text-transform:uppercase; line-height:1; }
.clock-tz   { font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:1px; color:rgba(167,139,250,.5); line-height:1; }

/* ── CONTROLS ────────────────────────── */
.cbar { width:100%; max-width:780px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.sldr { display:flex; align-items:center; gap:7px; background:rgba(15,15,22,.78); border:1px solid rgba(255,255,255,.08); border-radius:99px; padding:6px 14px; flex:1; min-width:100px; max-width:160px; }
.sldr svg { flex-shrink:0; opacity:.6; }
.sldr input[type=range] { -webkit-appearance:none; appearance:none; flex:1; height:3px; background:rgba(255,255,255,.15); border-radius:99px; outline:none; }
.sldr input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.6); }
.sldr input[type=range]::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:#fff; border:none; }

.dots { display:flex; align-items:center; gap:7px; background:rgba(15,15,22,.78); border:1px solid rgba(255,255,255,.08); border-radius:99px; padding:5px 10px; }
.dbtn { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.09); color:rgba(255,255,255,.45); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; transition:background .18s, color .18s, transform .15s; font-family:inherit; }
.dbtn.active { background:rgba(255,255,255,.2); color:#fff; border-color:rgba(255,255,255,.25); }
.dbtn:hover:not(.active) { background:rgba(255,255,255,.13); color:#ccc; transform:scale(1.05); }

/* ── MOBILE ──────────────────────────── */
@media(max-width:560px){
  .card { padding:18px 14px 16px; border-radius:14px; }
  .top-row { flex-direction:column; align-items:center; text-align:center; gap:12px; }
  .name-row { justify-content:center; }
  .bio { text-align:center; }
  .sline { justify-content:center; }
  .arow { justify-content:center; }
  .dev-activity { grid-template-columns:1fr; }
  .username { font-size:20px; }
  .av-ring { width:76px; height:76px; }
  .bot { flex-direction:column; align-items:center; gap:8px; }
  .clock-wrap { align-items:center; }
  .np { max-width:100%; }
  .sldr { min-width:80px; max-width:120px; padding:5px 10px; }
  .pc-card { flex-wrap:wrap; }
}