/* =========================================
   VARIABLES & RESET
   ========================================= */
:root {
  --p: #7cf0ff; --s: #a78bfa; --a: #fb7185;
  --glow: rgba(124,240,255,.22);
  --bg: #07070c; --glass: rgba(255,255,255,.045);
  --border: rgba(255,255,255,.08);
  --tx: #f4f1ea; --mt: #9aa3b5;
  --fd: 'Syne',sans-serif; --fm: 'JetBrains Mono',monospace; --fb: 'Outfit',sans-serif;
  --r: 22px; --tr: .35s cubic-bezier(.22,1,.36,1);
}
body.th-green { --p:#00ff88; --s:#00cc66; --a:#ffcc00; --glow:rgba(0,255,136,.3); }
body.th-red   { --p:#ff4444; --s:#ff2d78; --a:#ff8800; --glow:rgba(255,68,68,.3); }
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--p) var(--bg); }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:var(--p); border-radius:2px; }
body { font-family:var(--fb); background:var(--bg); color:var(--tx); overflow-x:hidden; cursor:default; }
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(124,240,255,.16), transparent 55%),
    radial-gradient(800px 480px at 92% 8%, rgba(167,139,250,.16), transparent 50%),
    radial-gradient(700px 400px at 50% 110%, rgba(251,113,133,.08), transparent 55%);
}
body::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================
   CURSOR
   ========================================= */
#cur { position:fixed; width:11px; height:11px; background:var(--p); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:screen; transition:background .2s; }
#cur-r { position:fixed; width:34px; height:34px; border:1px solid var(--p); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .2s,height .2s,opacity .2s; opacity:.5; }
body.ch #cur { transform:translate(-50%,-50%) scale(2); background:var(--a); }
body.ch #cur-r { width:56px; height:56px; opacity:.15; }

/* =========================================
   LOADER
   ========================================= */
#ldr { position:fixed; inset:0; background:var(--bg); z-index:100000; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .8s,visibility .8s; }
#ldr.out { opacity:0; visibility:hidden; pointer-events:none; }
.ldr-logo { font-family:var(--fd); font-size:clamp(2rem,6vw,4rem); font-weight:900; letter-spacing:.2em; background:linear-gradient(135deg,var(--p),var(--s)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:lp 1.5s ease-in-out infinite; }
@keyframes lp { 0%,100%{opacity:.4;transform:scale(.98)} 50%{opacity:1;transform:scale(1.02)} }
.ldr-sub { font-family:var(--fm); font-size:.72rem; color:var(--p); letter-spacing:.3em; margin-top:.5rem; opacity:.6; }
.ldr-bar { width:280px; height:2px; background:rgba(255,255,255,.06); border-radius:2px; margin-top:2rem; overflow:hidden; }
.ldr-fill { height:100%; background:linear-gradient(90deg,var(--p),var(--s)); animation:lf 2.2s ease forwards; }
@keyframes lf { from{width:0} to{width:100%} }
.ldr-pct { font-family:var(--fm); font-size:.7rem; color:var(--mt); margin-top:.6rem; }

/* =========================================
   SCROLL PROGRESS + TOAST
   ========================================= */
#sb { position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--p),var(--s)); box-shadow:0 0 8px var(--p); z-index:99999; transition:width .1s linear; }
#toast { position:fixed; bottom:76px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(3,7,18,.96); border:1px solid var(--p); color:var(--p); padding:10px 22px; border-radius:30px; font-family:var(--fm); font-size:.72rem; font-weight:600; opacity:0; transition:opacity .3s,transform .3s; z-index:99999; pointer-events:none; white-space:nowrap; box-shadow:0 0 20px var(--glow); }

/* =========================================
   BG CANVAS + PARTICLE CANVAS
   ========================================= */
#bgc { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; opacity:.72; pointer-events:none; }
#ptc { position:fixed; inset:0; pointer-events:none; z-index:1; }

/* =========================================
   NAVIGATION
   ========================================= */
nav { position:fixed; top:14px; left:50%; transform:translateX(-50%); width:min(1120px, calc(100% - 24px)); z-index:1000; padding:.7rem 1rem .7rem 1.2rem; display:flex; align-items:center; justify-content:space-between; background:rgba(10,10,16,.62); backdrop-filter:blur(24px) saturate(140%); border:1px solid rgba(255,255,255,.08); border-radius:999px; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.n-logo { font-family:var(--fd); font-size:1.05rem; font-weight:800; letter-spacing:-.03em; background:linear-gradient(135deg,#fff,var(--p)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.n-links { display:flex; gap:1.4rem; list-style:none; }
.n-links a { font-family:var(--fb); font-size:.78rem; font-weight:500; color:var(--mt); text-decoration:none; letter-spacing:.01em; transition:var(--tr); position:relative; }
.n-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--p); transition:width .3s; }
.n-links a:hover { color:var(--p); }
.n-links a:hover::after { width:100%; }
.n-right { display:flex; gap:.6rem; align-items:center; }
.t-dots { display:flex; gap:6px; }
.t-dot { width:14px; height:14px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:var(--tr); }
.t-dot:hover, .t-dot.on { transform:scale(1.3); border-color:#fff; }
.t-dot.c1 { background:linear-gradient(135deg,#00d4ff,#7b2fff); }
.t-dot.c2 { background:linear-gradient(135deg,#00ff88,#00cc66); }
.t-dot.c3 { background:linear-gradient(135deg,#ff4444,#ff2d78); }
.hbg { display:none; flex-direction:column; gap:4px; cursor:pointer; }
.hbg span { width:22px; height:2px; background:var(--p); border-radius:2px; transition:var(--tr); }
#music-btn { position:fixed; bottom:max(16px, env(safe-area-inset-bottom)); right:16px; width:44px; height:44px; border-radius:50%; background:rgba(3,7,18,.9); border:1.5px solid var(--p); color:var(--p); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px var(--glow); z-index:900; transition:.3s; }
#music-btn:hover { transform:scale(1.1); }
#music-btn.ply { animation:pr 1.5s infinite; }
@keyframes pr { 0%{box-shadow:0 0 0 0 var(--glow)} 70%{box-shadow:0 0 0 10px transparent} 100%{box-shadow:0 0 0 0 transparent} }

/* =========================================
   LAYOUT
   ========================================= */
main { position:relative; z-index:1; }
section { padding:5rem 1.5rem; max-width:1200px; margin:0 auto; }
.st { font-family:var(--fd); font-size:clamp(1.7rem,4vw,2.6rem); font-weight:800; letter-spacing:-.04em; color:#fff; margin-bottom:.35rem; }
.ss { font-family:var(--fb); font-size:.78rem; color:var(--mt); letter-spacing:.04em; margin-bottom:2.2rem; }
.gc { background:linear-gradient(180deg,rgba(14,14,22,.88),rgba(10,10,16,.82)); border:1px solid var(--border); border-radius:var(--r); padding:1.5rem; backdrop-filter:blur(18px); transition:var(--tr); position:relative; overflow:hidden; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.gc::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle at center,var(--glow),transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.gc:hover { border-color:var(--p); transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.4),0 0 20px var(--glow); }
.gc:hover::before { opacity:.25; }
.rv { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.rv.vis { opacity:1; transform:translateY(0); }

/* =========================================
   HERO
   ========================================= */
#hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top:5.6rem; max-width:100%; overflow-x:hidden; padding-left:.75rem; padding-right:.75rem; }
.av { position:relative; width:150px; height:150px; margin-bottom:1.8rem; animation:fl 4s ease-in-out infinite; }
@keyframes fl { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.av-img { width:150px; height:150px; border-radius:50%; object-fit:cover; border:3px solid var(--p); box-shadow:0 0 30px var(--glow),0 0 60px var(--glow); }
.av-fb { width:150px; height:150px; border-radius:50%; display:none; align-items:center; justify-content:center; font-family:var(--fd); font-size:3rem; background:linear-gradient(135deg,var(--p),var(--s)); color:var(--bg); }
.av-r1 { position:absolute; inset:-10px; border-radius:50%; border:2px solid transparent; background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(135deg,var(--p),var(--s),var(--p)) border-box; animation:sp 6s linear infinite; }
.av-r2 { position:absolute; inset:-20px; border-radius:50%; border:1px solid var(--p); opacity:.2; animation:sp 12s linear infinite reverse; }
@keyframes sp { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.h-greet { font-family:var(--fb); font-size:.8rem; color:var(--p); letter-spacing:.18em; text-transform:uppercase; margin-bottom:.8rem; opacity:.9; }
.h-name { font-family:var(--fd); font-size:clamp(1.32rem, 5.4vw, 4.4rem); font-weight:800; line-height:1.1; letter-spacing:.06em; background:linear-gradient(180deg,#fff 18%,#cfd8e8 62%,var(--p)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:.55rem; width:100%; max-width:100%; padding:0 10px; overflow:visible; white-space:nowrap; text-align:center; filter:drop-shadow(0 0 14px var(--glow)); }
.h-typed { font-family:var(--fm); font-size:clamp(.9rem,2.5vw,1.3rem); color:var(--s); min-height:2em; margin-bottom:1.2rem; }
.typed-cur { border-right:2px solid var(--p); animation:bk .7s step-end infinite; }
@keyframes bk { 0%,100%{opacity:1} 50%{opacity:0} }
.h-bio { font-size:.95rem; color:var(--mt); max-width:480px; line-height:1.7; margin-bottom:1.8rem; }
.v-badge { display:inline-flex; align-items:center; gap:.5rem; background:var(--glass); border:1px solid var(--border); border-radius:100px; padding:.35rem .9rem; font-family:var(--fm); font-size:.68rem; color:var(--p); margin-bottom:2rem; backdrop-filter:blur(10px); }
.v-dot { width:6px; height:6px; background:#00ff88; border-radius:50%; animation:pd 1.5s ease-in-out infinite; }
@keyframes pd { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.5} }
.h-btns { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

/* Floating orbs */
#float-layer { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#float-layer i { position:absolute; border-radius:50%; filter:blur(32px); opacity:.16; animation:orbFloat 16s ease-in-out infinite; }
#float-layer i:nth-child(1){ width:160px;height:160px; left:-40px; top:12%; background:var(--p); animation-duration:18s; }
#float-layer i:nth-child(2){ width:220px;height:220px; right:-60px; top:28%; background:var(--s); animation-duration:22s; animation-delay:-4s; }
#float-layer i:nth-child(3){ width:120px;height:120px; left:18%; bottom:12%; background:var(--a); animation-duration:15s; animation-delay:-7s; }
#float-layer i:nth-child(4){ width:90px;height:90px; right:22%; bottom:22%; background:var(--p); animation-duration:19s; animation-delay:-2s; }
#float-layer i:nth-child(5){ width:70px;height:70px; left:48%; top:18%; background:var(--s); animation-duration:14s; animation-delay:-9s; }
#float-layer i:nth-child(6){ width:180px;height:180px; left:8%; top:58%; background:var(--p); opacity:.22; animation-duration:24s; }
#float-layer i:nth-child(7){ width:50px;height:50px; right:12%; top:8%; background:#fff; opacity:.12; animation-duration:11s; }
#float-layer i:nth-child(8){ width:140px;height:140px; right:30%; top:70%; background:var(--a); opacity:.2; animation-duration:20s; animation-delay:-6s; }
@keyframes orbFloat {
  0%,100% { transform:translate3d(0,0,0) scale(1); }
  33% { transform:translate3d(28px,-36px,0) scale(1.08); }
  66% { transform:translate3d(-22px,24px,0) scale(.92); }
}

/* Flip clock — grouped HH MM SS */
.flip-wrap { display:flex; flex-direction:column; align-items:center; gap:.5rem; margin:0 0 1.2rem; }
.flip-clock { display:flex; align-items:stretch; gap:8px; }
.led-block {
  min-width:72px; padding:10px 12px 8px; border-radius:14px;
  background:linear-gradient(180deg,#171720,#0b0b12);
  border:1px solid color-mix(in srgb,var(--p) 40%, transparent);
  box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 18px var(--glow), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; flex-direction:column; align-items:center; gap:2px; perspective:240px;
}
.led-block span {
  font-family:var(--fd); font-weight:800; font-size:1.7rem; line-height:1.1; letter-spacing:.08em;
  color:#fff; text-shadow:0 0 16px var(--glow); font-variant-numeric:tabular-nums;
}
.led-block small { font-family:var(--fm); font-size:.48rem; letter-spacing:.18em; color:var(--mt); }
.led-block.tick span { animation:ledPop .32s ease; }
@keyframes ledPop { 0%{transform:rotateX(-80deg);opacity:.3} 100%{transform:rotateX(0);opacity:1} }
.led-sep { font-family:var(--fd); font-weight:800; font-size:1.5rem; color:var(--p); align-self:center; text-shadow:0 0 12px var(--glow); animation:bk 1s step-end infinite; padding-bottom:10px; }
.flip-meta { display:flex; align-items:center; gap:.45rem; font-family:var(--fm); font-size:.58rem; letter-spacing:.16em; color:var(--mt); }
.flip-dot { width:5px; height:5px; border-radius:50%; background:var(--p); box-shadow:0 0 8px var(--p); animation:pd 1.5s ease-in-out infinite; }
@media (max-width:380px){
  .led-block { min-width:62px; padding:8px 10px 6px; }
  .led-block span { font-size:1.4rem; }
}
.s-btn { display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1.4rem; border-radius:100px; border:1px solid var(--border); background:var(--glass); color:var(--tx); text-decoration:none; font-family:var(--fm); font-size:.72rem; backdrop-filter:blur(12px); transition:var(--tr); position:relative; overflow:hidden; isolation:isolate; }
.s-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--p),var(--s)); opacity:0; transition:opacity .3s; z-index:0; }
.s-btn::after { content:''; position:absolute; top:0; left:-140%; width:55%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-22deg); transition:left .55s ease; z-index:1; pointer-events:none; }
.s-btn:hover::before { opacity:.16; }
.s-btn:hover::after { left:150%; }
.s-btn:hover { transform:translateY(-3px); box-shadow:0 8px 25px var(--glow); border-color:color-mix(in srgb, var(--p) 45%, var(--border)); }
.s-btn svg, .s-btn span { position:relative; z-index:2; }
.s-btn svg { flex-shrink:0; transition:var(--tr); }
.s-btn:focus-visible { outline:2px solid var(--p); outline-offset:3px; }
.btn-gh:hover { border-color:#e6edf3!important; color:#e6edf3!important; box-shadow:0 8px 28px rgba(255,255,255,.18)!important; background:rgba(255,255,255,.06)!important; }
.btn-gh:hover svg path { fill:#e6edf3; }
.btn-ig:hover { border-color:#d6249f!important; color:#fd5949!important; box-shadow:0 8px 30px rgba(214,36,159,.4)!important; }
.btn-tg:hover { border-color:#26A5E4!important; color:#26A5E4!important; box-shadow:0 8px 28px rgba(38,165,228,.4)!important; }
.btn-prompt:hover { transform:translateY(-3px) scale(1.04)!important; box-shadow:0 8px 35px rgba(255,45,120,.6)!important; }
.ripple { position:absolute; border-radius:50%; background:rgba(255,255,255,.15); transform:scale(0); animation:rp .6s linear; pointer-events:none; }
@keyframes rp { to{transform:scale(4);opacity:0} }

/* =========================================
   REPOS / FEATURED / PROMPTS / SKILLS
   ========================================= */
.r-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.2rem; }
.r-card { display:flex; flex-direction:column; gap:.7rem; }
.r-name { font-family:var(--fd); font-size:.82rem; color:var(--p); }
.r-desc { font-size:.8rem; color:var(--mt); line-height:1.6; flex:1; }
.r-meta { display:flex; gap:.9rem; align-items:center; font-family:var(--fm); font-size:.65rem; color:var(--mt); }
.lang-dot { width:8px; height:8px; border-radius:50%; }
.r-btn { display:inline-block; padding:.3rem .75rem; border-radius:100px; font-family:var(--fm); font-size:.62rem; text-decoration:none; border:1px solid var(--p); color:var(--p); transition:var(--tr); }
.r-btn:hover { background:var(--p); color:var(--bg); }
.r-loading { text-align:center; font-family:var(--fm); font-size:.78rem; color:var(--mt); padding:2rem; }
.f-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.4rem; }
.f-icon { width:100%; height:150px; border-radius:10px; margin-bottom:.9rem; display:flex; align-items:center; justify-content:center; font-size:2rem; background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(123,47,255,.08)); }
.f-title { font-family:var(--fd); font-size:.95rem; color:var(--tx); margin-bottom:.4rem; }
.f-desc { font-size:.8rem; color:var(--mt); line-height:1.6; margin-bottom:.9rem; }
.f-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.9rem; }
.f-tag { padding:.18rem .55rem; border-radius:4px; font-family:var(--fm); font-size:.58rem; border:1px solid var(--border); color:var(--mt); }
.p-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:1.2rem; }
.p-title { font-family:var(--fd); font-size:.78rem; color:var(--p); margin-bottom:.4rem; display:flex; justify-content:space-between; }
.p-body { font-family:var(--fm); font-size:.68rem; color:var(--mt); line-height:1.7; max-height:58px; overflow:hidden; transition:max-height .4s ease; }
.p-body.ex { max-height:400px; }
.p-acts { display:flex; gap:.45rem; margin-top:.7rem; }
.b-sm { display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .65rem; border-radius:6px; font-family:var(--fm); font-size:.62rem; border:1px solid var(--border); background:transparent; color:var(--mt); cursor:pointer; transition:var(--tr); }
.b-sm:hover { border-color:var(--p); color:var(--p); }
.b-sm.cp { border-color:#00ff88; color:#00ff88; }
.sk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1rem; }
.sk-item { display:flex; flex-direction:column; gap:.45rem; }
.sk-name { font-family:var(--fm); font-size:.72rem; color:var(--mt); display:flex; justify-content:space-between; }
.sk-bar { height:4px; background:rgba(255,255,255,.06); border-radius:2px; overflow:hidden; }
.sk-fill { height:100%; background:linear-gradient(90deg,var(--p),var(--s)); border-radius:2px; width:0; transition:width 1.5s cubic-bezier(.4,0,.2,1); }

/* =========================================
   TOOLS
   ========================================= */
.t-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:1.5rem; }
.t-tab { padding:14px 12px; border-radius:16px; font-family:var(--fb); font-size:.78rem; font-weight:600; border:1px solid var(--border); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); color:var(--tx); cursor:pointer; transition:var(--tr); white-space:normal; position:relative; overflow:hidden; text-align:left; min-height:54px; display:flex; align-items:center; gap:8px; line-height:1.25; }
.t-tab::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--p),var(--s)); opacity:0; transition:opacity .25s; }
.t-tab:hover, .t-tab.on { border-color:var(--p); color:#fff; box-shadow:0 8px 22px var(--glow); transform:translateY(-2px); }
.t-tab:hover::before, .t-tab.on::before { opacity:.18; }
.t-tab:focus-visible { outline:2px solid var(--p); outline-offset:3px; }
.t-panel { display:none; animation:fdIn .3s ease; }
.t-panel.on { display:block; }

#tool-bar { display:none; }
body.tool-open { overflow:hidden; }
body.tool-open #float-layer { z-index:4990; opacity:.9; }
body.tool-open #bgc { z-index:4988; opacity:.5; }
body.tool-open nav, body.tool-open footer, body.tool-open #music-btn { display:none !important; }
body.tool-open main > :not(#tools) { display:none !important; }
body.tool-open #tools { position:fixed; inset:0; z-index:5000; max-width:none; width:100%; margin:0; padding:0; overflow:auto; background:rgba(7,7,12,.55); }
body.tool-open #tools .st,
body.tool-open #tools .ss,
body.tool-open #tools .tools-note,
body.tool-open #tools .t-tabs,
body.tool-open #tools .t-head { display:none !important; }
body.tool-open #tool-bar {
  display:flex; align-items:center; gap:.8rem; position:sticky; top:0; z-index:6;
  padding:.85rem 1rem; background:rgba(8,8,14,.92); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.tool-back {
  border:1px solid var(--p); background:transparent; color:var(--p); font-family:var(--fm);
  font-size:.72rem; font-weight:700; padding:.45rem .85rem; border-radius:999px; cursor:pointer;
}
.tool-back:active { transform:scale(.94); }
#tool-bar-title { font-family:var(--fd); font-weight:800; font-size:1rem; color:#fff; }
body.tool-open .t-panel.on {
  display:block; border-radius:0; min-height:calc(100dvh - 56px); margin:0;
  padding:1.2rem 1.1rem 3rem; max-width:560px; width:100%; margin-left:auto; margin-right:auto;
  border:none; box-shadow:none; background:transparent;
}
@keyframes fdIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.t-head { font-family:var(--fd); font-size:1.05rem; font-weight:700; color:var(--p); margin-bottom:.9rem; text-shadow:0 0 10px var(--glow); }
.t-lbl { font-family:var(--fm); font-size:.65rem; color:var(--mt); text-transform:uppercase; letter-spacing:1px; margin:9px 0 4px; }
.t-inp { width:100%; padding:10px 13px; border-radius:10px; border:1px solid var(--border); background:rgba(0,0,0,.4); color:var(--tx); font-family:var(--fm); font-size:.82rem; outline:none; transition:var(--tr); margin-bottom:3px; box-sizing:border-box; }
.t-inp:focus { border-color:var(--p); box-shadow:0 0 0 3px rgba(0,212,255,.1); }
select.t-inp { cursor:pointer; }
.t-btn { padding:10px 16px; border-radius:10px; border:1px solid var(--p); background:transparent; color:var(--p); font-family:var(--fm); font-size:.78rem; font-weight:700; cursor:pointer; transition:color .35s, border-color .35s, transform .35s, box-shadow .35s; position:relative; overflow:hidden; z-index:0; isolation:isolate; }
.t-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--p),var(--s)); transform:scaleX(0); transform-origin:left center; transition:transform .38s cubic-bezier(.22,1,.36,1); z-index:-1; }
.t-btn:hover::before { transform:scaleX(1); }
.t-btn:hover { color:var(--bg); box-shadow:0 0 16px var(--glow); }
.t-btn.fw { width:100%; margin-top:9px; display:block; }
.t-btn:focus-visible { outline:2px solid var(--p); outline-offset:3px; }
.t-res { margin-top:11px; padding:11px; border-radius:10px; background:rgba(0,212,255,.07); border:1px solid rgba(0,212,255,.2); color:var(--p); font-family:var(--fm); font-size:.95rem; font-weight:800; text-align:center; display:none; }
.pm { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:13px; }
.pm-btn { padding:7px 11px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--mt); font-family:var(--fm); font-size:.66rem; font-weight:700; cursor:pointer; transition:var(--tr); }
.pm-btn.on, .pm-btn:hover { background:var(--p); color:var(--bg); border-color:var(--p); }
.c-sub { display:none; }
.c-sub.on { display:block; }

.tm-stage { display:flex; flex-direction:column; align-items:center; gap:12px; margin:8px 0 4px; }
.tm-ring { width:150px; height:150px; filter:drop-shadow(0 0 12px var(--glow)); }
#t-ring { transition:stroke-dashoffset 1s linear, stroke .4s ease; }
.tm-flip { display:flex; align-items:stretch; gap:8px; }

.calc-screen {
  min-height:76px; margin-bottom:12px; padding:16px 16px 12px; border-radius:16px;
  background:linear-gradient(180deg,#101018,#07070c);
  border:1px solid color-mix(in srgb,var(--p) 35%, transparent);
  box-shadow:inset 0 0 24px rgba(0,0,0,.45), 0 0 16px var(--glow);
  font-family:var(--fd); font-size:2rem; font-weight:800; letter-spacing:.04em;
  text-align:right; color:#fff; text-shadow:0 0 12px var(--glow);
  overflow:hidden; word-break:break-all; line-height:1.15;
}
.calc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.ck {
  min-height:56px; border:none; border-radius:14px; cursor:pointer;
  font-family:var(--fd); font-size:1.25rem; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#1c1c28,#12121a);
  box-shadow:0 4px 0 #07070c, 0 8px 16px rgba(0,0,0,.35);
  transition:.12s ease;
}
.ck:active { transform:translateY(3px); box-shadow:0 1px 0 #07070c; }
.ck-op { background:linear-gradient(180deg,var(--s), color-mix(in srgb,var(--s) 55%, #000)); color:#fff; }
.ck-mute { background:linear-gradient(180deg,#2a2a38,#1a1a24); color:var(--mt); font-size:1.05rem; }
.ck-eq { background:linear-gradient(180deg,var(--p),var(--s)); color:var(--bg); grid-row:span 1; }
.ck-zero { grid-column:span 2; }

@media (max-width:380px){
  .ck { min-height:50px; font-size:1.12rem; }
  .calc-screen { font-size:1.65rem; min-height:64px; }
}

/* BMI */
.bmi-box { padding:10px 12px; border-radius:10px; background:rgba(15,23,42,.8); border:1px solid var(--border); }
.bmi-bl { font-family:var(--fm); font-size:.6rem; color:var(--mt); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.bmi-bv { font-family:var(--fd); font-size:.82rem; font-weight:800; color:var(--p); }

/* EMI */
.emi-row { display:flex; justify-content:space-between; padding:10px 14px; border-radius:10px; background:rgba(15,23,42,.8); border:1px solid var(--border); margin-bottom:7px; font-family:var(--fm); font-size:.78rem; color:var(--mt); }
.emi-val { color:var(--p); font-weight:800; font-size:.88rem; }

/* World Clock */
.wc-i { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-radius:10px; background:rgba(15,23,42,.7); border:1px solid var(--border); margin-bottom:7px; }
.wc-city { font-family:var(--fm); font-size:.7rem; color:var(--mt); }
.wc-time { font-family:var(--fd); font-size:1.15rem; font-weight:800; color:var(--p); text-shadow:0 0 8px var(--glow); }
.wc-date { font-family:var(--fm); font-size:.58rem; color:var(--mt); text-align:right; }

/* Todo */
.td-i { display:flex; align-items:center; gap:9px; background:rgba(15,23,42,.8); border:1px solid var(--border); border-radius:10px; padding:10px 12px; transition:var(--tr); }
.td-i.dn { opacity:.45; }
.td-i.dn .td-t { text-decoration:line-through; color:var(--mt); }
.td-t { flex:1; font-family:var(--fm); font-size:.78rem; color:var(--tx); }
.td-d { background:transparent; border:none; color:var(--a); font-size:.95rem; cursor:pointer; padding:2px 5px; border-radius:5px; }

/* Habit */
.hd-btn { width:27px; height:27px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--mt); font-family:var(--fm); font-size:.63rem; cursor:pointer; transition:var(--tr); }
.hd-btn.on { background:var(--p); color:var(--bg); border-color:var(--p); }
.h-item { display:flex; align-items:center; gap:9px; background:rgba(15,23,42,.8); border:1px solid var(--border); border-radius:10px; padding:10px 12px; transition:var(--tr); }
.h-item.don { border-color:var(--p); background:rgba(0,212,255,.05); }
.h-chk { width:22px; height:22px; border-radius:6px; border:2px solid var(--border); background:transparent; color:var(--p); font-size:.78rem; cursor:pointer; transition:var(--tr); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.h-chk.don { background:var(--p); border-color:var(--p); color:var(--bg); }
.h-nm { flex:1; font-family:var(--fm); font-size:.78rem; color:var(--tx); }
.h-del { background:transparent; border:none; color:var(--a); font-size:.88rem; cursor:pointer; }
.h-dots { display:flex; gap:3px; }
.h-dot { width:7px; height:7px; border-radius:2px; background:var(--border); }
.h-dot.d { background:var(--p); }
.h-str { font-family:var(--fm); font-size:.58rem; color:var(--mt); }

/* Timetable */
.tt-grid { display:grid; grid-template-columns:58px repeat(6,1fr); gap:2px; font-size:.62rem; min-width:380px; }
.tt-hd { background:rgba(0,212,255,.08); border:1px solid var(--border); border-radius:5px; padding:5px 3px; text-align:center; font-family:var(--fm); font-weight:700; color:var(--p); }
.tt-sl { background:rgba(3,7,18,.9); border:1px solid var(--border); border-radius:5px; padding:5px 3px; text-align:center; min-height:30px; font-family:var(--fm); color:var(--mt); cursor:pointer; transition:var(--tr); word-break:break-word; font-size:.58rem; }
.tt-sl:hover { border-color:var(--p); color:var(--tx); }
.tt-sl.fil { background:rgba(123,47,255,.15); color:#a78bfa; border-color:rgba(123,47,255,.4); }
.tt-modal { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:99999; display:none; align-items:center; justify-content:center; }
.tt-modal.op { display:flex; }
.tt-mbox { background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:20px; width:90%; max-width:300px; }

/* Exam */
.ex-card { position:relative; padding:13px; border-radius:12px; background:rgba(15,23,42,.8); border:1px solid var(--border); }
.ex-card.urg { border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.05); }
.ex-nm { font-family:var(--fd); font-size:.88rem; color:var(--p); margin-bottom:9px; }
.ex-row { display:flex; gap:12px; }
.ex-u { text-align:center; }
.ex-n { font-family:var(--fd); font-size:1.7rem; color:var(--p); display:block; text-shadow:0 0 15px var(--glow); }
.ex-l { font-family:var(--fm); font-size:.53rem; color:var(--mt); text-transform:uppercase; }
.ex-del { position:absolute; top:9px; right:9px; background:none; border:none; color:var(--a); cursor:pointer; font-size:.85rem; }

/* Breathing */
#br-ring { transition:transform 4s ease,border-color .5s,box-shadow .5s; }
#br-inn  { transition:transform 4s ease; }

/* Password */
.ps-bar { height:4px; background:rgba(255,255,255,.05); border-radius:99px; overflow:hidden; margin:5px 0 3px; }
#ps-fill { height:100%; width:0; border-radius:99px; transition:width .4s,background .4s; }

/* Stopwatch lap */
.sw-lap { display:flex; justify-content:space-between; padding:7px 10px; border-radius:8px; background:rgba(15,23,42,.8); font-family:var(--fm); font-size:.68rem; border:1px solid var(--border); }
.lap-n { color:var(--mt); }
.lap-t { color:var(--p); font-weight:700; }
.lap-s { color:var(--mt); font-size:.62rem; }

/* BGMI */
.bg-tab { flex:1; padding:8px 4px; border-radius:8px; border:none; background:transparent; color:var(--mt); font-family:var(--fm); font-size:.65rem; font-weight:700; cursor:pointer; transition:var(--tr); }
.bg-tab.on { background:rgba(239,68,68,.2); color:#f87171; }
.bg-pnl { display:none; }
.bg-pnl.on { display:block; }
.sens-row { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-radius:8px; background:rgba(15,23,42,.8); margin-bottom:5px; font-family:var(--fm); font-size:.73rem; color:var(--mt); border:1px solid var(--border); }
.sens-v { font-weight:800; color:var(--p); }
.bg-tip { display:flex; gap:9px; align-items:flex-start; padding:11px; border-radius:10px; background:rgba(15,23,42,.8); border:1px solid var(--border); margin-bottom:7px; font-family:var(--fm); font-size:.73rem; color:var(--mt); line-height:1.6; }

/* Decision */
.d-res { margin-top:13px; padding:18px; border-radius:14px; background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(123,47,255,.08)); border:1px solid var(--p); text-align:center; }
.d-em { font-size:2.5rem; margin-bottom:7px; animation:bi .5s ease; }
.d-tx { font-family:var(--fd); font-size:1.15rem; color:var(--p); }
.d-sx { font-family:var(--fm); font-size:.68rem; color:var(--mt); margin-top:4px; }
@keyframes bi { 0%{transform:scale(.3);opacity:0} 50%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }

/* AI output */
.ai-out { margin-top:12px; padding:14px; border-radius:10px; border:1px solid var(--border); font-family:var(--fm); font-size:.75rem; color:var(--tx); line-height:1.8; white-space:pre-wrap; max-height:280px; overflow-y:auto; display:none; }
.ai-out.roast { background:rgba(239,68,68,.06); border-color:rgba(239,68,68,.25); }
.ai-out.study { background:rgba(0,212,255,.05); }
.ai-cpbtn { display:none; width:100%; margin-top:8px; }

/* =========================================
   FOOTER
   ========================================= */
footer { text-align:center; padding:3rem 2rem; border-top:1px solid var(--border); font-family:var(--fm); font-size:.73rem; color:var(--mt); }
footer a { color:var(--p); text-decoration:none; }
.f-socials { display:flex; gap:.7rem; justify-content:center; margin-top:1.1rem; align-items:center; }
.f-si { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--glass); transition:var(--tr); color:var(--mt); backdrop-filter:blur(10px); }
.f-gh:hover { border-color:#e6edf3; background:rgba(255,255,255,.08); transform:translateY(-4px) scale(1.1); box-shadow:0 8px 20px rgba(255,255,255,.1); }
.f-gh:hover svg path { fill:#e6edf3; }
.f-ig:hover { border-color:#d6249f; background:rgba(214,36,159,.1); transform:translateY(-4px) scale(1.1); box-shadow:0 8px 20px rgba(214,36,159,.25); }
.f-tg:hover { border-color:#26A5E4; background:rgba(38,165,228,.1); transform:translateY(-4px) scale(1.1); box-shadow:0 8px 20px rgba(38,165,228,.25); }

/* =========================================
   RESPONSIVE
   ========================================= */
@media(max-width:768px){
  nav { top:10px; width:calc(100% - 16px); padding:.5rem .7rem .5rem .9rem; border-radius:20px; gap:.45rem; }
  .n-logo { font-size:.92rem; }
  .n-links { display:none; position:fixed; top:68px; left:8px; right:8px; background:rgba(8,8,14,.96); flex-direction:column; align-items:center; padding:1.2rem; gap:1rem; border:1px solid var(--border); border-radius:18px; }
  .n-links.op { display:flex; }
  .hbg { display:flex; }
  .gw-btn { padding:.4rem .7rem; font-size:.58rem; }
  .gw-txt { display:none; }
  .f-grid,.r-grid { grid-template-columns:1fr; }
  section { padding:3.2rem 1.1rem; }
  #hero { min-height:auto; padding-top:4.6rem; padding-bottom:2.2rem; }
  .av, .av-img, .av-fb { width:118px; height:118px; }
  .av-r1 { inset:-8px; }
  .av-r2 { inset:-16px; }
  .h-bio { font-size:.84rem; margin-bottom:1rem; }
  .v-badge { margin-bottom:1.1rem; }
  .cta-row { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
  .cta-btn { min-width:0; width:100%; padding:.7rem 1rem; font-size:.72rem; }
  .cta-ghost { grid-column:1 / -1; }
  .about-grid { grid-template-columns:1fr !important; }
}

/* =========================================
   CTA BUTTONS — Uiverse mast interactions
   ========================================= */
.cta-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.7rem; border-radius:100px; font-family:var(--fm); font-size:.78rem; font-weight:800; text-decoration:none; transition:var(--tr); position:relative; overflow:hidden; letter-spacing:.06em; isolation:isolate; min-height:48px; }
.cta-row { display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-bottom:1.5rem; width:min(560px,100%); }
.cta-btn svg, .cta-btn span:not(.uv-line) { position:relative; z-index:2; }
.cta-btn:focus-visible, .s-btn:focus-visible { outline:2px solid var(--p); outline-offset:3px; }
.cta-btn:active, .s-btn:active { transform:scale(.93) translateY(2px) !important; filter:brightness(1.15); }
.t-btn:active { transform:scale(.94) translateY(1px); }
.t-tab:active { transform:scale(.96); }


/* 1) Hire Me — gradient + shine sweep */
.cta-primary { background:linear-gradient(135deg,var(--p),var(--s)); color:var(--bg); box-shadow:0 0 28px var(--glow), 0 6px 0 color-mix(in srgb, var(--s) 70%, #000); border:none; }
.cta-primary::after { content:''; position:absolute; top:0; left:-130%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); transform:skewX(-20deg); animation:uv-idle-shine 2.4s ease-in-out infinite; z-index:1; pointer-events:none; }
.cta-primary:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 10px 34px var(--glow), 0 7px 0 color-mix(in srgb, var(--s) 70%, #000); }
@keyframes uv-idle-shine { 0%{left:-130%} 60%,100%{left:140%} }

/* 2) Download Resume — rotating conic neon ring */
.cta-secondary { background:var(--bg); color:var(--p); border:1px solid transparent; z-index:0; box-shadow:0 0 18px var(--glow); }
.cta-secondary::before { content:''; position:absolute; inset:-3px; border-radius:inherit; background:conic-gradient(from 0deg, var(--p), var(--s), var(--a), #fff, var(--p)); animation:uv-spin 1.6s linear infinite; z-index:-2; }
.cta-secondary::after { content:''; position:absolute; inset:2px; border-radius:inherit; background:var(--bg); z-index:-1; }
.cta-secondary:hover { transform:translateY(-3px); color:var(--tx); box-shadow:0 0 26px var(--glow); }
@keyframes uv-spin { to { transform:rotate(360deg); } }

/* 3) Contact Me — 4-side running neon lines */
.cta-ghost { background:var(--glass); border:1px solid var(--border); color:var(--tx); backdrop-filter:blur(12px); }
.cta-ghost .uv-line { position:absolute; display:block; background:var(--p); box-shadow:0 0 10px var(--p); z-index:3; pointer-events:none; }
.cta-ghost .uv-line:nth-child(1) { top:0; left:-100%; width:100%; height:2px; animation:uv-run-x 2s linear infinite; }
.cta-ghost .uv-line:nth-child(2) { top:-100%; right:0; width:2px; height:100%; animation:uv-run-y 2s linear infinite .5s; }
.cta-ghost .uv-line:nth-child(3) { bottom:0; right:-100%; width:100%; height:2px; animation:uv-run-x-rev 2s linear infinite; }
.cta-ghost .uv-line:nth-child(4) { bottom:-100%; left:0; width:2px; height:100%; animation:uv-run-y-rev 2s linear infinite .5s; }
.cta-ghost:hover { border-color:transparent; color:var(--bg); background:linear-gradient(135deg,var(--p),var(--s)); box-shadow:0 0 28px var(--glow); transform:translateY(-3px); }
.cta-ghost:hover .uv-line { background:#fff; box-shadow:0 0 12px #fff; }
@keyframes uv-run-x { 0%{left:-100%} 50%,100%{left:100%} }
@keyframes uv-run-y { 0%{top:-100%} 50%,100%{top:100%} }
@keyframes uv-run-x-rev { 0%{right:-100%} 50%,100%{right:100%} }
@keyframes uv-run-y-rev { 0%{bottom:-100%} 50%,100%{bottom:100%} }

@media (prefers-reduced-motion: reduce) {
  .cta-secondary::before, .cta-ghost .uv-line, .s-btn::after, .cta-primary::after, .cta-primary { animation:none !important; transition:none !important; }
  .cta-secondary::before { background:linear-gradient(135deg,var(--p),var(--s)); opacity:.85; }
}

/* =========================================
   GITHUB STATS
   ========================================= */
.gh-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; margin-bottom:1.4rem; }
.gh-stat-card { background:var(--glass); border:1px solid var(--border); border-radius:var(--r); padding:1.2rem 1rem; text-align:center; transition:var(--tr); }
.gh-stat-card:hover { border-color:var(--p); transform:translateY(-3px); box-shadow:0 12px 30px var(--glow); }
.gh-stat-num { font-family:var(--fd); font-size:1.8rem; font-weight:900; background:linear-gradient(135deg,var(--p),var(--s)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.gh-stat-lbl { font-family:var(--fm); font-size:.62rem; color:var(--mt); letter-spacing:.1em; margin-top:.3rem; }
.lang-bars { display:flex; flex-direction:column; gap:.6rem; }
.lang-row { display:flex; align-items:center; gap:.6rem; font-family:var(--fm); font-size:.68rem; }
.lang-name { width:80px; color:var(--tx); flex-shrink:0; }
.lang-bar-wrap { flex:1; height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.lang-bar-fill { height:100%; border-radius:4px; transition:width 1s cubic-bezier(.4,0,.2,1); }
.lang-pct { width:36px; text-align:right; color:var(--mt); flex-shrink:0; }
.contrib-grid { display:flex; flex-wrap:wrap; gap:3px; margin-top:.8rem; }
.contrib-cell { width:12px; height:12px; border-radius:2px; cursor:pointer; transition:.2s; }
.contrib-cell:hover { transform:scale(1.4); }

/* =========================================
   CONTACT SECTION
   ========================================= */
#contact { scroll-margin-top:80px; }
.contact-wrap { display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; }
@media(max-width:700px){ .contact-wrap{grid-template-columns:1fr;} }
.contact-info { display:flex; flex-direction:column; gap:1rem; }
.contact-item { display:flex; align-items:center; gap:.85rem; padding:1rem 1.2rem; background:var(--glass); border:1px solid var(--border); border-radius:var(--r); transition:var(--tr); }
.contact-item:hover { border-color:var(--p); transform:translateX(4px); }
.contact-icon { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,rgba(0,212,255,.15),rgba(123,47,255,.15)); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.contact-label { font-family:var(--fm); font-size:.62rem; color:var(--mt); letter-spacing:.1em; }
.contact-val { font-family:var(--fb); font-size:.82rem; color:var(--tx); margin-top:.1rem; }
.contact-form { display:flex; flex-direction:column; gap:.85rem; }
.cf-input { width:100%; padding:.8rem 1rem; background:rgba(0,0,0,.35); border:1px solid var(--border); border-radius:10px; color:var(--tx); font-family:var(--fb); font-size:.85rem; outline:none; transition:var(--tr); resize:vertical; }
.cf-input:focus { border-color:var(--p); box-shadow:0 0 0 3px var(--glow), 0 0 18px var(--glow); }
.cf-input:focus-visible { outline:2px solid var(--p); outline-offset:2px; }
.cf-input::placeholder { color:var(--mt); }
.cf-submit { padding:.85rem 2rem; border:none; border-radius:100px; background:linear-gradient(135deg,var(--p),var(--s)); color:var(--bg); font-family:var(--fm); font-size:.78rem; font-weight:800; cursor:pointer; transition:var(--tr); letter-spacing:.05em; }
.cf-submit:hover { transform:translateY(-2px); box-shadow:0 8px 24px var(--glow); }
.cf-submit:disabled { opacity:.5; cursor:wait; }
.cf-status { font-family:var(--fm); font-size:.72rem; text-align:center; min-height:1.4em; }
.cf-ok { color:#22c55e; } .cf-err { color:var(--a); }

/* =========================================
   TOOLS SECTION NOTE
   ========================================= */
.tools-note { background:rgba(123,47,255,.08); border:1px solid rgba(123,47,255,.25); border-radius:12px; padding:.8rem 1.2rem; font-family:var(--fm); font-size:.7rem; color:var(--mt); margin-bottom:1.4rem; display:flex; align-items:center; gap:.6rem; }
.tools-note b { color:var(--s); }

/* ===== GAMING WORLD OVERLAY (moved from index) ===== */
/* Overlay wrapper */
#gw-overlay{
  display:none;position:fixed;inset:0;z-index:999998;
  background:#07000e;overflow-y:auto;
}
#gw-overlay.open{display:block;animation:gwSlide .45s cubic-bezier(.4,0,.2,1);}
@keyframes gwSlide{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* Animated fire-particle bg */
#gw-overlay::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 10% 90%,rgba(255,60,0,.22) 0%,transparent 50%),
    radial-gradient(ellipse at 90% 10%,rgba(255,150,0,.18) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 50%,rgba(120,0,200,.1) 0%,transparent 65%);
  background-color:#07000e;
}
#gw-overlay::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1px 1px at 10% 20%,rgba(255,140,0,.7),transparent),
    radial-gradient(1px 1px at 30% 60%,rgba(255,60,0,.6),transparent),
    radial-gradient(1px 1px at 60% 30%,rgba(255,200,0,.5),transparent),
    radial-gradient(1px 1px at 80% 75%,rgba(255,80,0,.6),transparent),
    radial-gradient(1px 1px at 50% 85%,rgba(255,170,0,.4),transparent);
  background-size:280px 280px;
  animation:ffStars 30s linear infinite;opacity:.6;
}
@keyframes ffStars{from{background-position:0 0}to{background-position:0 900px}}

/* Close btn */
#gw-close{
  position:fixed;top:16px;right:18px;z-index:9999999;
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.75);border:1.5px solid rgba(255,80,0,.7);
  color:#ff4500;font-size:1.35rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.25s;backdrop-filter:blur(10px);
  box-shadow:0 0 16px rgba(255,60,0,.5);
}
#gw-close:hover{transform:rotate(90deg) scale(1.15);}

/* Page content */
.gw-wrap{
  position:relative;z-index:1;
  max-width:700px;margin:0 auto;
  padding:72px 18px 60px;
  display:flex;flex-direction:column;align-items:center;
}

/* Top label */
.ff-pg-label{
  font-family:'Orbitron',monospace;
  font-size:clamp(.6rem,1.5vw,.78rem);
  letter-spacing:.45em;color:#ff8c00;
  text-transform:uppercase;margin-bottom:1.6rem;
  text-shadow:0 0 16px rgba(255,140,0,.7);
  opacity:.9;
}

/* ── BIG RECTANGULAR PICTURE ── */
.ff-rect-wrap{
  width:100%;max-width:640px;
  position:relative;margin-bottom:2rem;
  border-radius:20px;overflow:hidden;
  /* glowing border via box-shadow */
  box-shadow:
    0 0 0 3px #ff4500,
    0 0 40px rgba(255,80,0,.7),
    0 0 90px rgba(255,140,0,.35),
    0 0 150px rgba(255,60,0,.15);
  animation:ffFloat 5s ease-in-out infinite;
}
@keyframes ffFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* top fire stripe */
.ff-rect-wrap::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,#ff4500 20%,#ffd700 50%,#ff4500 80%,transparent);
  animation:ffStripe 3s ease-in-out infinite;
}
@keyframes ffStripe{0%,100%{opacity:.7}50%{opacity:1}}

/* bottom fire stripe */
.ff-rect-wrap::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,#ff4500 20%,#ffd700 50%,#ff4500 80%,transparent);
}

.ff-big-img{
  width:100%;
  /* shows full image without crop */
  display:block;
  object-fit:contain;
  background:#0d0005;
  max-height:70vh;
  transition:.4s;
}
.ff-big-img:hover{transform:scale(1.02);}

/* Fallback when no image */
.ff-img-fallback{
  width:100%;height:280px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#1c0500,#0d0005);
  font-size:4rem;gap:.5rem;
}
.ff-img-fallback span{font-family:'Orbitron',monospace;font-size:.75rem;color:#5a3820;letter-spacing:.2em;}

/* Player name row */
.ff-pname-row{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:1.6rem;text-align:center;
}
.ff-pname{
  font-family:'Orbitron',monospace;
  font-size:clamp(1.8rem,6vw,2.8rem);
  font-weight:900;line-height:1.1;
  background:linear-gradient(135deg,#fff 20%,#ffd700 55%,#ff4500 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,140,0,.6));
  margin-bottom:.3rem;
}
.ff-uid-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:.6rem;}
.ff-uid-lbl{font-family:'Space Mono',monospace;font-size:.55rem;color:#5a3820;letter-spacing:.14em;text-transform:uppercase;}
.ff-uid{font-family:'Orbitron',monospace;font-size:.8rem;color:#00d4ff;letter-spacing:.07em;}
.ff-uid-copy{
  background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);
  color:#00d4ff;border-radius:5px;padding:2px 9px;
  font-family:'Space Mono',monospace;font-size:.52rem;font-weight:700;cursor:pointer;transition:.2s;
}
.ff-uid-copy:hover{background:rgba(0,200,255,.22);}
.ff-badges-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.ff-badge{font-size:.55rem;font-weight:700;letter-spacing:.1em;padding:3px 10px;border-radius:100px;text-transform:uppercase;}
.ff-b-gm{background:rgba(255,210,0,.14);border:1px solid rgba(255,210,0,.4);color:#ffd700;}
.ff-b-in{background:rgba(0,180,255,.1);border:1px solid rgba(0,180,255,.3);color:#00c8ff;}
.ff-b-ok{background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.3);color:#00ff88;}
.ff-b-fire{background:rgba(255,69,0,.14);border:1px solid rgba(255,100,0,.4);color:#ff6a00;}

/* ── STATS GRID ── */
.ff-stats-title{
  font-family:'Orbitron',monospace;font-size:.7rem;color:#ff6a00;
  text-transform:uppercase;letter-spacing:.25em;
  margin-bottom:1rem;align-self:flex-start;
  display:flex;align-items:center;gap:10px;width:100%;max-width:640px;
}
.ff-stats-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,90,0,.35),transparent);}

.ff-stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;
  width:100%;max-width:640px;margin-bottom:1.8rem;
}
@media(max-width:480px){.ff-stats-grid{grid-template-columns:repeat(2,1fr);}}

.ff-stat{
  background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid rgba(255,90,0,.2);border-radius:14px;
  padding:1rem .7rem;text-align:center;position:relative;overflow:hidden;transition:.3s;
}
.ff-stat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,150,0,.3),transparent);
}
.ff-stat:hover{border-color:rgba(255,200,0,.5);transform:translateY(-5px);box-shadow:0 14px 28px rgba(255,60,0,.2);}
.ff-stat-icon{font-size:1.4rem;margin-bottom:.4rem;}
.ff-stat-val{
  font-family:'Orbitron',monospace;font-size:1.35rem;font-weight:900;line-height:1;
  background:linear-gradient(135deg,#fff,#ffaa40);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:.3rem;
}
.ff-stat-val.fire{background:linear-gradient(135deg,#ffd700,#ff4500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.ff-stat-lbl{font-family:'Space Mono',monospace;font-size:.52rem;color:#5a3820;letter-spacing:.1em;text-transform:uppercase;}

/* ── SKILL BARS ── */
.ff-bars-wrap{width:100%;max-width:640px;margin-bottom:1.8rem;}
.ff-bar-item{margin-bottom:.9rem;}
.ff-bar-head{
  display:flex;justify-content:space-between;margin-bottom:4px;
  font-family:'Space Mono',monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.ff-bar-head span:first-child{color:#5a3820;}
.ff-bar-head span:last-child{color:#ff8c00;}
.ff-bar-track{height:5px;background:rgba(255,255,255,.05);border-radius:99px;overflow:hidden;}
.ff-bar-fill{height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,#dc143c,#ff4500,#ffd700);
  box-shadow:0 0 8px rgba(255,80,0,.6);
  transition:width 1.8s cubic-bezier(.4,0,.2,1);}

/* ── LOADOUT ── */
.ff-loadout-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;
  width:100%;max-width:640px;margin-bottom:1.8rem;
}
@media(min-width:480px){.ff-loadout-grid{grid-template-columns:repeat(4,1fr);}}
.ff-lbox{
  background:rgba(0,0,0,.35);border:1px solid rgba(255,90,0,.18);
  border-radius:12px;padding:.8rem .7rem;text-align:center;transition:.25s;
}
.ff-lbox:hover{border-color:rgba(255,160,0,.4);transform:translateY(-3px);}
.ff-lbox-icon{font-size:1.5rem;margin-bottom:.35rem;}
.ff-lbox-lbl{font-family:'Space Mono',monospace;font-size:.5rem;color:#5a3820;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.2rem;}
.ff-lbox-val{font-family:'Orbitron',monospace;font-size:.78rem;color:#ff8c00;font-weight:700;}


/* ===== TOOLS LAYOUT FIXES ===== */
.t-tabs { overflow:visible; -webkit-overflow-scrolling: touch; }
.t-panel input, .t-panel select, .t-panel textarea { max-width: 100%; }
.t-btn, .pm-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.t-res { word-break: break-word; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .t-btn { font-size: .72rem; padding: 9px 12px; }
  .t-tabs { gap: 10px; }
}