/* FRANYXAI — Base Styles */
/* ══════════════════════════════════════════
   TOKENS
══════════════════════════════════════════ */
:root{
  --bg:#06060d; --bg2:#0a0a14; --bg3:#0f0f1c; --bg4:#141424;
  --glass:rgba(255,255,255,.04); --glass2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.14);
  --p1:#7C3AED; --p2:#00e5ff; --p3:#FF4D9D;
  --grad:linear-gradient(135deg,var(--p1),var(--p2));
  --grad3:linear-gradient(90deg,var(--p1),var(--p2),var(--p3));
  --accent-dim:rgba(0,229,255,.12);
  --purple-dim:rgba(124,58,237,.15);
  --text:#eeeef8; --text2:#7878a0; --text3:#40405a;
  --green:#00e5a0; --green-dim:rgba(0,229,160,.12);
  --red:#ff4d6a;   --red-dim:rgba(255,77,106,.12);
  --amber:#ffc84a; --gold:#f5c842;
  --r:12px; --r2:18px; --r3:24px;
  --sw:240px; --swc:64px;
  --ease:color .22s cubic-bezier(.4,0,.2,1), background-color .22s cubic-bezier(.4,0,.2,1), border-color .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1);
  --sh:0 8px 40px rgba(0,0,0,.5);
  --sh2:0 20px 80px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
html{ text-size-adjust:100%; -webkit-text-size-adjust:100%; }
/* overflow-x:clip (NOT hidden) — `hidden` forces overflow-y to compute to `auto`, turning
   body into a scroll container that breaks touch-scroll on iOS Safari (page stuck at top
   on mobile while desktop/wheel works). `clip` clips horizontally without that side effect. */
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6;overflow-x:clip;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}
::selection{background:var(--purple-dim);color:var(--p2);}

/* ── keyframes ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
@keyframes itemIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes diceRoll{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-25deg) scale(1.1)}50%{transform:rotate(20deg) scale(.95)}75%{transform:rotate(-10deg) scale(1.05)}100%{transform:rotate(0) scale(1)}}
@keyframes boardPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes pgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes dotGlow{0%,100%{box-shadow:0 0 4px var(--p1),0 0 8px var(--p1)}50%{box-shadow:0 0 10px var(--p2),0 0 20px var(--p2)}}
@keyframes goldShimmer{0%,100%{background-position:0%}50%{background-position:200%}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 6px rgba(0,229,160,.5)}50%{box-shadow:0 0 18px rgba(0,229,160,.9)}}

/* ══════════════════════════════════════════
   SCREEN SYSTEM
══════════════════════════════════════════ */
.screen{display:none;min-height:100vh;min-height:100dvh;}
.screen.on{display:block;animation:fadeIn .35s ease;}
#screen-login.on{display:flex;}

/* ══════════════════════════════════════════
   LOADING
══════════════════════════════════════════ */
#screen-loading{
  position:fixed;inset:0;background:var(--bg);z-index:9999;
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:28px;
}
#screen-loading.on{display:flex;}
.ld-logo{position:relative;width:88px;height:88px;display:flex;align-items:center;justify-content:center;}
.ld-ring{position:absolute;inset:0;border:2px solid transparent;border-radius:50%;}
.ld-ring:nth-child(1){border-top-color:var(--p2);animation:spin 1.1s linear infinite;}
.ld-ring:nth-child(2){inset:10px;border-right-color:var(--p1);animation:spin 1.5s linear infinite reverse;}
.ld-ring:nth-child(3){inset:20px;border-bottom-color:var(--p3);animation:spin 2s linear infinite;}
.ld-core{font-family:'Syne',sans-serif;font-size:1rem;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;z-index:1;}
.ld-name{font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:800;letter-spacing:4px;
  background:var(--grad3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ld-hint{font-size:.7rem;letter-spacing:4px;text-transform:uppercase;color:var(--text3);animation:pulse 1.6s ease infinite;}
.ld-bar{width:180px;height:2px;background:var(--bg3);border-radius:99px;overflow:hidden;}
.ld-fill{height:100%;background:var(--grad3);background-size:300%;width:40%;animation:shimmer 1.3s ease-in-out infinite;}

/* ══════════════════════════════════════════
   LANDING
══════════════════════════════════════════ */
#screen-landing{position:relative;overflow-x:clip;}  /* clip, not hidden — see body note (iOS touch-scroll) */
.lp-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 900px 600px at 10% -10%,rgba(124,58,237,.18) 0%,transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 110%,rgba(0,229,255,.12) 0%,transparent 60%);}
.lp-grid{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.3;
  background-image:linear-gradient(rgba(124,58,237,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,.06) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 20%,transparent 75%);}
.lp-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:16px 40px;background:rgba(6,6,13,.75);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);}
.fx-brand{display:flex;align-items:center;gap:10px;cursor:pointer;}
.fx-mark{width:34px;height:34px;border-radius:9px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:1rem;color:#fff;
  box-shadow:0 0 24px rgba(124,58,237,.5);flex-shrink:0;}
.fx-name{font-family:'Syne',sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:2px;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lp-nav-links{display:flex;gap:28px;list-style:none;}
.lp-nav-links a{color:var(--text2);text-decoration:none;font-size:.85rem;font-weight:500;transition:var(--ease);}
.lp-nav-links a:hover{color:var(--p2);}
.lp-nav-r{display:flex;gap:10px;}
.btn-ghost-lp{background:transparent;color:var(--text2);border:1px solid var(--border);border-radius:8px;
  padding:8px 16px;font-family:'DM Sans',sans-serif;font-size:.84rem;font-weight:500;cursor:pointer;transition:var(--ease);}
.btn-ghost-lp:hover{border-color:var(--p2);color:var(--p2);}
.btn-solid-lp{background:var(--grad);color:#fff;border:none;border-radius:8px;
  padding:9px 18px;font-family:'DM Sans',sans-serif;font-size:.84rem;font-weight:600;cursor:pointer;transition:var(--ease);
  box-shadow:0 0 20px rgba(124,58,237,.4);}
.btn-solid-lp:hover{transform:translateY(-1px);box-shadow:0 0 32px rgba(124,58,237,.6);}
.lp-hero{position:relative;z-index:5;text-align:center;padding:90px 24px 70px;max-width:1000px;margin:0 auto;}
.hero-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(124,58,237,.35);
  background:var(--purple-dim);border-radius:99px;padding:5px 14px 5px 8px;margin-bottom:32px;
  font-size:.75rem;font-weight:600;color:var(--text2);animation:fadeUp .6s ease both;}
.hero-pill-badge{background:var(--grad);color:#fff;border-radius:99px;padding:2px 8px;font-size:.65rem;font-weight:700;letter-spacing:1px;}
.lp-h1{font-family:'Syne',sans-serif;font-size:clamp(3rem,7.5vw,6rem);font-weight:800;
  line-height:1;letter-spacing:-3px;margin-bottom:22px;animation:fadeUp .7s .08s ease both;}
.lp-h1 .g1{background:var(--grad3);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lp-sub{max-width:580px;margin:0 auto 40px;font-size:clamp(.95rem,1.5vw,1.1rem);color:var(--text2);animation:fadeUp .7s .16s ease both;}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:fadeUp .7s .24s ease both;}
.btn-hero-main{background:var(--grad);color:#fff;border:none;border-radius:10px;padding:14px 30px;
  font-family:'DM Sans',sans-serif;font-weight:600;font-size:1rem;cursor:pointer;transition:var(--ease);
  box-shadow:0 6px 30px rgba(124,58,237,.45);}
.btn-hero-main:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(124,58,237,.6);}
.btn-hero-alt{background:var(--glass);color:var(--text);border:1px solid var(--border2);border-radius:10px;
  padding:14px 30px;font-family:'DM Sans',sans-serif;font-weight:500;font-size:1rem;cursor:pointer;transition:var(--ease);
  backdrop-filter:blur(12px);}
.btn-hero-alt:hover{border-color:var(--p2);color:var(--p2);}
.hero-stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:52px;animation:fadeUp .7s .35s ease both;}
.hstat-val{font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:800;background:var(--grad);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hstat-lbl{font-size:.74rem;color:var(--text3);}

/* Modules section */
.lp-mods{position:relative;z-index:5;padding:80px 24px;max-width:1100px;margin:0 auto;}
.lp-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-align:center;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;}
.lp-sec-title{font-family:'Syne',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:800;
  text-align:center;letter-spacing:-1.5px;margin-bottom:50px;}
.mods-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.mod-card{border-radius:var(--r2);border:1px solid var(--border);overflow:hidden;cursor:pointer;
  transition:var(--ease);background:var(--bg2);position:relative;}
.mod-card:hover{border-color:rgba(124,58,237,.4);transform:translateY(-4px);box-shadow:0 16px 50px rgba(124,58,237,.18);}
.mod-card.wide{grid-column:1/-1;}
.mc-top{padding:32px 28px 24px;position:relative;}
.mc-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin-bottom:18px;}
.mc-icon.games{background:linear-gradient(135deg,rgba(245,200,66,.2),rgba(245,200,66,.05));border:1px solid rgba(245,200,66,.3);}
.mc-icon.tools{background:var(--purple-dim);border:1px solid rgba(124,58,237,.3);}
.mc-badge{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  border-radius:99px;padding:3px 9px;margin-bottom:10px;}
.mc-badge.live{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,229,160,.2);}
.mc-badge.soon{background:var(--glass);color:var(--text3);border:1px solid var(--border);}
.mc-title{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;margin-bottom:8px;}
.mc-desc{font-size:.85rem;color:var(--text2);line-height:1.6;}
.mc-arrow{position:absolute;top:28px;right:28px;width:32px;height:32px;border-radius:8px;
  background:var(--glass);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--text3);transition:var(--ease);}
.mod-card:hover .mc-arrow{background:var(--grad);border-color:transparent;color:#fff;}
.mc-bottom{padding:16px 28px;border-top:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;background:rgba(0,0,0,.2);}
.mc-tag{font-size:.72rem;padding:3px 9px;border-radius:99px;background:var(--glass);border:1px solid var(--border);color:var(--text2);}
.lp-strip{position:relative;z-index:5;padding:60px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2);}
.strip-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.fstrip{text-align:center;padding:10px;}
.fstrip-ic{font-size:1.6rem;margin-bottom:12px;}
.fstrip-t{font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;margin-bottom:5px;}
.fstrip-d{font-size:.82rem;color:var(--text2);}
.lp-cta-sec{position:relative;z-index:5;padding:90px 24px;text-align:center;}
.lp-cta-sec h2{font-family:'Syne',sans-serif;font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;letter-spacing:-2px;margin-bottom:16px;}
.lp-cta-sec p{color:var(--text2);max-width:480px;margin:0 auto 36px;}
.lp-foot{position:relative;z-index:5;padding:22px 40px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:.78rem;color:var(--text3);}

/* ══════════════════════════════════════════
   LOGIN
══════════════════════════════════════════ */
#screen-login{align-items:center;justify-content:center;padding:24px;position:relative;background:var(--bg);}
.login-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 700px 500px at 50% 30%,rgba(124,58,237,.14) 0%,transparent 60%);}
.login-card{position:relative;z-index:5;width:100%;max-width:420px;background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--r3);padding:36px 32px;box-shadow:var(--sh2);}
.lc-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px;}
.lc-brand .fx-mark{width:38px;height:38px;}
.auth-tabs{display:flex;gap:4px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:4px;margin-bottom:22px;}
.auth-tab{flex:1;padding:8px;background:none;border:none;border-radius:7px;color:var(--text2);
  font-family:'DM Sans',sans-serif;font-weight:600;font-size:.84rem;cursor:pointer;transition:var(--ease);}
.auth-tab.on{background:var(--grad);color:#fff;box-shadow:0 2px 12px rgba(124,58,237,.35);}
.auth-tab:not(.on):hover{background:var(--glass2);color:var(--text);}
.auth-error{background:rgba(255,77,106,.1);border:1px solid rgba(255,77,106,.3);border-radius:8px;
  padding:10px 14px;font-size:.82rem;color:#ff8fa3;margin-bottom:14px;animation:fadeUp .3s ease;}
.lf{display:flex;flex-direction:column;gap:13px;}
.lf-field{display:flex;flex-direction:column;gap:5px;}
.lf-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text2);}
.lf-input{background:var(--bg3);border:1px solid var(--border);border-radius:9px;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:.9rem;padding:11px 14px;outline:none;transition:var(--ease);}
.lf-input:focus{border-color:var(--p1);box-shadow:0 0 0 3px rgba(124,58,237,.18);}
.lf-input::placeholder{color:var(--text3);}
.lf-row{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;}
.lf-row label{display:flex;align-items:center;gap:6px;color:var(--text2);cursor:pointer;}
.lf-row input[type=checkbox]{accent-color:var(--p1);}
.lf-row a{color:var(--p2);text-decoration:none;}
.btn-login{background:var(--grad);color:#fff;border:none;border-radius:9px;padding:12px;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.92rem;cursor:pointer;transition:var(--ease);
  box-shadow:0 4px 20px rgba(124,58,237,.35);margin-top:4px;position:relative;overflow:hidden;}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(124,58,237,.5);}
.btn-login:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.btn-login-spin{display:inline-block;animation:spin .7s linear infinite;}
.lf-or{display:flex;align-items:center;gap:10px;color:var(--text3);font-size:.72rem;}
.lf-or::before,.lf-or::after{content:'';flex:1;height:1px;background:var(--border);}
.btn-sso{background:var(--glass);border:1px solid var(--border);color:var(--text);border-radius:9px;
  padding:11px;font-family:'DM Sans',sans-serif;font-weight:500;font-size:.84rem;cursor:pointer;transition:var(--ease);
  display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-sso:hover{background:var(--glass2);border-color:var(--border2);transform:translateY(-1px);}
.login-back{position:absolute;top:20px;left:20px;z-index:10;background:var(--glass);border:1px solid var(--border);
  color:var(--text2);border-radius:8px;padding:7px 13px;font-size:.8rem;cursor:pointer;transition:var(--ease);
  font-family:'DM Sans',sans-serif;backdrop-filter:blur(10px);}
.login-back:hover{color:var(--p2);}

/* ══════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════ */
#screen-app{display:none;}
#screen-app.on{display:block;}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sw);background:var(--bg2);
  border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:200;
  transition:width .28s cubic-bezier(.4,0,.2,1);overflow:hidden;}
.sidebar.col{width:var(--swc);}
.sb-top{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;
  border-bottom:1px solid var(--border);min-height:60px;}
.sb-brand{display:flex;align-items:center;gap:9px;white-space:nowrap;overflow:hidden;}
.sb-brand .fx-mark{width:30px;height:30px;border-radius:7px;font-size:.85rem;flex-shrink:0;}
.sb-brand .fx-name{font-size:1rem;letter-spacing:1.5px;}
.sidebar.col .sb-label,.sidebar.col .sb-sec,.sidebar.col .u-info,.sidebar.col .fx-name{opacity:0;width:0;pointer-events:none;}
.sb-tog{background:var(--glass);border:1px solid var(--border);border-radius:6px;color:var(--text2);
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:.85rem;flex-shrink:0;transition:var(--ease);}
.sb-tog:hover{color:var(--p2);}
.sb-tog-ic{display:inline-block;transition:transform .28s ease;}
.sidebar.col .sb-tog-ic{transform:rotate(180deg);}
.sb-nav{flex:1;padding:12px 8px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;}
.sb-nav::-webkit-scrollbar{display:none;}
.sb-sec{font-size:.6rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text3);
  padding:10px 8px 4px;white-space:nowrap;transition:var(--ease);}
.sb-ul{list-style:none;display:flex;flex-direction:column;gap:1px;}
.sb-li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;
  color:var(--text2);font-size:.86rem;font-weight:500;white-space:nowrap;position:relative;
  transition:background .18s ease,color .18s ease,transform .15s ease;}
.sb-li:hover{background:rgba(124,58,237,.08);color:var(--text);transform:translateX(2px);}
.sb-li.on{background:linear-gradient(90deg,rgba(124,58,237,.18),rgba(0,229,255,.06));color:#c4b5fd;
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.25);}
.sb-li.on .sb-dot{opacity:1;animation:dotGlow 2.5s ease infinite;}
.sb-badge{position:absolute;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  background:var(--p3);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:0;
  display:none;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 0 0 2px var(--bg2),0 0 8px rgba(255,77,157,.5);font-family:'DM Sans',sans-serif;}
.sb-badge.on{display:inline-flex;animation:fadeUp .25s ease;}
.sidebar.col .sb-badge{right:6px;font-size:.55rem;min-width:14px;height:14px;padding:0 3px;}
.sb-ic{font-size:.95rem;width:18px;text-align:center;flex-shrink:0;}
.sb-label{transition:var(--ease);}
.sb-dot{position:absolute;right:8px;width:5px;height:5px;border-radius:50%;
  background:var(--grad);opacity:0;transition:var(--ease);}
.sb-foot{display:flex;align-items:center;gap:6px;padding:10px 12px 14px;border-top:1px solid var(--border);}
.u-badge{display:flex;align-items:center;gap:9px;overflow:hidden;padding:4px;flex:1;}
.u-av{width:30px;height:30px;border-radius:50%;background:var(--grad);display:flex;align-items:center;
  justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.8rem;color:#fff;flex-shrink:0;
  overflow:hidden;}

/* Universal avatar image rule — any <img.av-img> inside any avatar container fills it */
.av-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
/* When an avatar contains an image, hide the gradient + letter so the image is clean */
.has-avatar{background:var(--bg3) !important;color:transparent !important;}
/* Ensure presence dots stay visible above the image */
.chat-item-av,.fr-av,#chatHdAv{position:relative;}
.chat-item-av .av-img,.fr-av .av-img,#chatHdAv .av-img{position:absolute;inset:0;}
.u-info{display:flex;flex-direction:column;transition:var(--ease);overflow:hidden;white-space:nowrap;}
.u-name{font-size:.82rem;font-weight:600;}
.u-plan{font-size:.68rem;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:'JetBrains Mono',monospace;letter-spacing:.5px;}
.btn-signout{background:none;border:none;color:var(--text3);cursor:pointer;padding:6px;
  border-radius:6px;transition:var(--ease);display:flex;align-items:center;flex-shrink:0;}
.btn-signout:hover{color:var(--red);background:var(--red-dim);}
.sidebar.col .btn-signout{display:none;}
.main{margin-left:var(--sw);min-height:100vh;display:flex;flex-direction:column;transition:margin-left .28s cubic-bezier(.4,0,.2,1);}
.main.col{margin-left:var(--swc);}
.top-bar{height:60px;background:rgba(6,6,13,.85);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:100;
  transition:box-shadow .3s ease;}
.top-bar.scrolled{box-shadow:0 1px 0 rgba(124,58,237,.15),0 4px 24px rgba(0,0,0,.4);}
.tb-l{display:flex;align-items:center;gap:10px;}
.tb-r{display:flex;align-items:center;gap:14px;}
.mob-btn{display:none;background:none;border:none;color:var(--text2);font-size:1.1rem;cursor:pointer;}
.bc{display:flex;align-items:center;gap:6px;font-size:.82rem;}
.bc-root{color:var(--text3);}
.bc-sep{color:var(--text3);}
.bc-page{font-family:'Syne',sans-serif;font-weight:700;}
.tb-clock{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:600;letter-spacing:2px;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.tb-div{width:1px;height:18px;background:var(--border);}
.tb-date{font-size:.74rem;color:var(--text3);}
.content{flex:1;padding:28px 24px;max-width:1140px;width:100%;}
.page{display:none;}
.page.on{display:block;animation:pgIn .32s cubic-bezier(.22,.68,0,1.1) both;}
.pg-head{margin-bottom:26px;}
.pg-title{font-family:'Syne',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.5px;}
.pg-sub{color:var(--text3);font-size:.83rem;margin-top:4px;}

/* cards */
.card{background:var(--glass);border:1px solid var(--border);border-radius:var(--r2);padding:22px;
  box-shadow:var(--sh);backdrop-filter:blur(10px);
  transition:border-color .22s ease,box-shadow .25s ease,transform .2s ease;}
.card:hover{border-color:rgba(124,58,237,.28);transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 0 1px rgba(124,58,237,.1);}
.card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.card-title{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;}
.card-badge{background:var(--purple-dim);color:#b48cff;font-size:.68rem;font-weight:700;
  padding:2px 8px;border-radius:99px;border:1px solid rgba(124,58,237,.25);}

/* ══════════════════════════════════════════
   HOME PAGE
══════════════════════════════════════════ */
.platform-banner{background:var(--grad);border-radius:var(--r2);padding:28px 30px;margin-bottom:22px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  box-shadow:0 8px 40px rgba(124,58,237,.3);position:relative;overflow:hidden;}
.platform-banner::before{content:'';position:absolute;right:-60px;top:-60px;width:240px;height:240px;
  border-radius:50%;background:rgba(255,255,255,.06);}
.pb-greeting{font-family:'Syne',sans-serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:#fff;margin-bottom:4px;}
.pb-sub{font-size:.85rem;color:rgba(255,255,255,.7);}
.pb-ctas{display:flex;gap:10px;flex-wrap:wrap;}
.btn-banner{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;
  padding:9px 16px;font-family:'DM Sans',sans-serif;font-weight:600;font-size:.84rem;cursor:pointer;transition:var(--ease);}
.btn-banner:hover{background:rgba(255,255,255,.25);}
.btn-banner.solid{background:#fff;color:var(--p1);}
.btn-banner.solid:hover{background:#f0f0ff;}
.pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px;}

/* FRX Identity strip on home */
.frx-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border2);border-radius:var(--r2);
  padding:16px 20px;margin-bottom:22px;flex-wrap:wrap;
  box-shadow:0 0 0 1px rgba(124,58,237,.06),0 8px 30px rgba(0,0,0,.3);}
.frx-strip-left{display:flex;align-items:center;gap:14px;}
.frx-strip-av{width:46px;height:46px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:1.2rem;
  color:#fff;box-shadow:0 0 0 3px var(--bg2),0 0 0 4px rgba(124,58,237,.4);flex-shrink:0;
  position:relative;overflow:hidden;}
.frx-strip-label{font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);font-weight:700;}
.frx-strip-id{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.05rem;letter-spacing:1px;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-top:2px;}
.frx-strip-right{display:flex;gap:8px;}
.frx-copy-btn,.frx-share-btn{background:var(--glass);border:1px solid var(--border);color:var(--text2);
  padding:8px 14px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;
  transition:var(--ease);}
.frx-copy-btn:hover,.frx-share-btn:hover{border-color:var(--p1);color:#c4b5fd;background:var(--purple-dim);}
.frx-copy-btn.copied{background:rgba(0,229,160,.12);border-color:rgba(0,229,160,.4);color:var(--green);}

/* Activity list */
.activity-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;}
.activity-row{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--bg3);
  border:1px solid var(--border);border-radius:8px;animation:itemIn .2s ease both;}
.activity-row:hover{background:var(--glass2);}
.activity-ic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;flex-shrink:0;background:var(--purple-dim);border:1px solid rgba(124,58,237,.25);}
.activity-ic.green{background:var(--green-dim);border-color:rgba(0,229,160,.25);color:var(--green);}
.activity-ic.cyan{background:var(--accent-dim);border-color:rgba(0,229,255,.25);color:var(--p2);}
.activity-ic.gold{background:rgba(245,200,66,.12);border-color:rgba(245,200,66,.25);color:var(--gold);}
.activity-ic.pink{background:rgba(255,77,157,.12);border-color:rgba(255,77,157,.25);color:var(--p3);}
.activity-info{flex:1;min-width:0;}
.activity-msg{font-size:.83rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.activity-time{font-size:.7rem;color:var(--text3);margin-top:2px;}
.activity-cta{font-size:.74rem;font-weight:600;color:#b48cff;cursor:pointer;flex-shrink:0;
  padding:5px 10px;border-radius:6px;background:var(--purple-dim);border:1px solid rgba(124,58,237,.2);
  transition:var(--ease);}
.activity-cta:hover{background:rgba(124,58,237,.25);}
.pm-card{border-radius:var(--r2);border:1px solid var(--border);overflow:hidden;cursor:pointer;
  transition:border-color .22s ease,box-shadow .25s ease,transform .2s ease;background:var(--bg2);position:relative;}
.pm-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.4);}
.pm-top{padding:22px 20px 14px;}
.pm-ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:14px;}
.pm-ic.gold{background:linear-gradient(135deg,rgba(245,200,66,.2),rgba(245,200,66,.05));border:1px solid rgba(245,200,66,.25);}
.pm-ic.purple{background:var(--purple-dim);border:1px solid rgba(124,58,237,.25);}
.pm-ic.cyan{background:var(--accent-dim);border:1px solid rgba(0,229,255,.2);}
.pm-title{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;margin-bottom:4px;}
.pm-desc{font-size:.8rem;color:var(--text2);}
.pm-footer{padding:10px 20px;border-top:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;background:rgba(0,0,0,.15);}
.pm-count{font-size:.72rem;color:var(--text3);}
.pm-action{font-size:.75rem;font-weight:600;color:#b48cff;}
.recent-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.stat{background:var(--glass);border:1px solid var(--border);border-radius:var(--r);padding:14px;
  display:flex;align-items:center;gap:12px;transition:var(--ease);}
.stat:hover{border-color:rgba(0,229,255,.2);transform:translateY(-2px);}
.stat-ic{width:36px;height:36px;border-radius:8px;background:var(--purple-dim);color:#b48cff;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;}
.stat-val{font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:800;line-height:1;}
.stat-lbl{font-size:.7rem;color:var(--text3);margin-top:2px;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

/* ══════════════════════════════════════════
   GAMES HUB
══════════════════════════════════════════ */
.hub-section-label{font-size:.65rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.hub-section-label::before{content:'';display:block;width:18px;height:1px;background:var(--grad);flex-shrink:0;}
.mono-hero-card{position:relative;overflow:hidden;
  background:linear-gradient(140deg,#08060a 0%,#110e1a 40%,#0a0910 100%);
  border:1px solid rgba(245,200,66,.22);border-radius:var(--r3);padding:48px 44px;margin-bottom:32px;
  box-shadow:0 0 0 1px rgba(245,200,66,.06),0 20px 60px rgba(0,0,0,.55);}
.mono-hero-card::before{content:'';position:absolute;top:-120px;left:-80px;width:440px;height:440px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(245,200,66,.12) 0%,transparent 70%);pointer-events:none;}
.mono-hero-card::after{content:'';position:absolute;bottom:-100px;right:-60px;width:320px;height:320px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(124,58,237,.1) 0%,transparent 70%);pointer-events:none;}
.mono-hero-inner{position:relative;z-index:1;display:flex;align-items:center;gap:40px;flex-wrap:wrap;}
.mono-hero-left{flex:1;min-width:260px;}
.mono-hero-live{display:inline-flex;align-items:center;gap:7px;background:rgba(0,229,160,.08);
  border:1px solid rgba(0,229,160,.25);border-radius:99px;padding:4px 12px;margin-bottom:22px;}
.mono-live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:pulse 2s infinite;}
.mono-live-txt{font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);}
.mono-hero-title{font-family:'Syne',sans-serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;
  letter-spacing:-1px;line-height:1.1;margin-bottom:10px;color:#fff;}
.gold-word{background:linear-gradient(90deg,#f5c842,#ffe580,#f5c842);background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:goldShimmer 3s ease infinite;}
.mono-hero-sub{font-size:.92rem;color:var(--text2);line-height:1.6;margin-bottom:28px;max-width:420px;}
.mono-hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;}
.mono-tag{font-size:.7rem;font-weight:600;padding:4px 11px;border-radius:99px;
  border:1px solid rgba(245,200,66,.2);color:rgba(245,200,66,.7);background:rgba(245,200,66,.06);}
.btn-tg-play{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(135deg,#f5c842,#e8a800);
  color:#000;border:none;border-radius:12px;padding:16px 32px;font-family:'Syne',sans-serif;font-weight:800;font-size:1.05rem;
  cursor:pointer;text-decoration:none;box-shadow:0 0 0 1px rgba(245,200,66,.4),0 8px 30px rgba(245,200,66,.35);
  transition:var(--ease);position:relative;overflow:hidden;}
.btn-tg-play:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(245,200,66,.6),0 12px 40px rgba(245,200,66,.5);}
.tg-sub{font-size:.7rem;font-weight:600;color:rgba(0,0,0,.55);display:block;margin-top:2px;letter-spacing:.5px;}
.mono-hero-right{flex-shrink:0;}
.deco-board{width:140px;height:140px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);
  gap:3px;padding:6px;background:rgba(245,200,66,.05);border:1px solid rgba(245,200,66,.18);border-radius:10px;}
.dc{border-radius:3px;}
.dc.corner{background:rgba(245,200,66,.15);}
.dc.r{background:rgba(255,77,106,.4);}
.dc.b{background:rgba(0,229,255,.35);}
.dc.g{background:rgba(0,229,160,.35);}
.dc.y{background:rgba(245,200,66,.3);}
.dc.blank{background:rgba(255,255,255,.04);}
.deco-label{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:2px;text-transform:uppercase;
  color:rgba(245,200,66,.35);margin-top:8px;text-align:center;}
.more-games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px;}
.more-game-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:24px 20px;
  position:relative;overflow:hidden;transition:var(--ease);}
.more-game-card:hover{border-color:rgba(124,58,237,.25);transform:translateY(-3px);}
.mg-glow{position:absolute;bottom:-40px;right:-40px;width:100px;height:100px;border-radius:50%;filter:blur(40px);opacity:.18;pointer-events:none;}
.mg-soon{position:absolute;top:14px;right:14px;font-size:.6rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  background:var(--glass);border:1px solid var(--border);color:var(--text3);padding:3px 9px;border-radius:99px;}
.mg-emoji{font-size:2rem;margin-bottom:12px;display:block;}
.mg-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;margin-bottom:4px;}
.mg-desc{font-size:.78rem;color:var(--text3);line-height:1.5;}

/* Profile links */
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.pf-link{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:15px 18px;text-decoration:none;color:var(--text);transition:var(--ease);position:relative;overflow:hidden;}
.pf-link:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.4);}
.pl-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.pl-info{flex:1;overflow:hidden;}
.pl-name{font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem;}
.pl-handle{font-size:.72rem;color:var(--text3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pf-arr{font-size:.8rem;color:var(--text3);opacity:0;transform:translateX(-4px);transition:var(--ease);}
.pf-link:hover .pf-arr{opacity:1;transform:translateX(0);}
.pl-steam   .pl-icon{background:rgba(102,192,244,.12);border:1px solid rgba(102,192,244,.2);}
.pl-steam:hover{border-color:rgba(102,192,244,.3);}
.pl-instagram .pl-icon{background:rgba(225,48,108,.12);border:1px solid rgba(225,48,108,.2);}
.pl-instagram:hover{border-color:rgba(225,48,108,.3);}
.pl-tiktok  .pl-icon{background:rgba(0,242,234,.1);border:1px solid rgba(0,242,234,.2);}
.pl-tiktok:hover{border-color:rgba(0,242,234,.3);}
.pl-facebook .pl-icon{background:rgba(24,119,242,.12);border:1px solid rgba(24,119,242,.2);}
.pl-facebook:hover{border-color:rgba(24,119,242,.3);}
.pl-twitter  .pl-icon{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);}
.pl-twitter:hover{border-color:rgba(255,255,255,.2);}
.pl-roblox   .pl-icon{background:rgba(226,35,26,.12);border:1px solid rgba(226,35,26,.2);}
.pl-roblox:hover{border-color:rgba(226,35,26,.3);}

/* ══════════════════════════════════════════
   PROFILE PAGE
══════════════════════════════════════════ */
.profile-page{max-width:600px;margin:0 auto;padding-bottom:48px;}
.pf-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0d0b14,#110e1c,#0b0d14);
  border:1px solid var(--border2);border-radius:var(--r3);padding:40px 36px 36px;margin-bottom:14px;text-align:center;
  box-shadow:0 2px 0 rgba(124,58,237,.15) inset,var(--sh2);}
.pf-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad3);border-radius:var(--r3) var(--r3) 0 0;}
.pf-hero::after{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:340px;height:340px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(124,58,237,.14) 0%,transparent 70%);pointer-events:none;}
.pf-av-wrap{position:relative;display:inline-block;margin-bottom:20px;z-index:1;}
.pf-av{width:96px;height:96px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-weight:800;font-size:2.4rem;color:#fff;
  box-shadow:0 0 0 3px var(--bg2),0 0 0 5px rgba(124,58,237,.4),0 0 32px rgba(124,58,237,.25);
  position:relative;overflow:hidden;}
.pf-sdot{position:absolute;bottom:4px;right:4px;width:16px;height:16px;border-radius:50%;
  background:var(--green);border:3px solid var(--bg2);box-shadow:0 0 10px rgba(0,229,160,.6);animation:pulseDot 2.5s ease infinite;}
.pf-name{font-family:'Syne',sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:-.5px;color:#fff;margin-bottom:4px;position:relative;z-index:1;}
.pf-username{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--text3);margin-bottom:12px;position:relative;z-index:1;}
.pf-bio{font-size:.9rem;color:var(--text2);line-height:1.6;max-width:360px;margin:0 auto 18px;position:relative;z-index:1;}
.pf-online{display:inline-flex;align-items:center;gap:6px;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.22);
  border-radius:99px;padding:5px 13px;font-size:.72rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--green);position:relative;z-index:1;}
.pf-online::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:pulseDot 2s ease infinite;}
.pf-section{margin-bottom:10px;display:flex;align-items:center;gap:10px;padding:0 2px;}
.pf-section-line{flex:1;height:1px;background:var(--border);}
.pf-section-text{font-size:.65rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text3);white-space:nowrap;}
.pf-links{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.pf-link2{display:flex;align-items:center;gap:16px;padding:15px 18px;border-radius:var(--r);
  background:var(--bg2);border:1px solid var(--border);text-decoration:none;color:var(--text);
  transition:var(--ease);position:relative;overflow:hidden;cursor:pointer;}
.pf-link2:hover{transform:translateY(-2px);}
.pf-link2.primary{background:linear-gradient(135deg,rgba(39,117,202,.18),rgba(39,117,202,.08));border-color:rgba(39,117,202,.35);}
.pf-link2.primary:hover{border-color:rgba(39,117,202,.55);box-shadow:0 8px 30px rgba(39,117,202,.22);}
.pf-link-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.15rem;transition:var(--ease);}
.pf-link2:hover .pf-link-icon{transform:scale(1.08);}
.pf-icon-tg  {background:rgba(39,117,202,.2);border:1px solid rgba(39,117,202,.3);}
.pf-icon-stm {background:rgba(102,192,244,.12);border:1px solid rgba(102,192,244,.2);}
.pf-icon-ig  {background:rgba(225,48,108,.12);border:1px solid rgba(225,48,108,.2);}
.pf-icon-tt  {background:rgba(0,242,234,.1);border:1px solid rgba(0,242,234,.2);}
.pf-icon-fb  {background:rgba(24,119,242,.12);border:1px solid rgba(24,119,242,.2);}
.pf-icon-x   {background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);}
.pf-icon-rblx{background:rgba(226,35,26,.12);border:1px solid rgba(226,35,26,.2);}
.pf-link-body{flex:1;overflow:hidden;}
.pf-link-name{font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;white-space:nowrap;}
.pf-link-handle{font-size:.74rem;color:var(--text3);margin-top:2px;font-family:'JetBrains Mono',monospace;}
.pf-link-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.pf-link-arrow{font-size:.85rem;color:var(--text3);transition:var(--ease);}
.pf-link2:hover .pf-link-arrow{color:var(--text2);transform:translateX(2px);}
.pf-primary-badge{font-size:.6rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  background:rgba(39,117,202,.2);border:1px solid rgba(39,117,202,.35);color:rgba(162,213,255,.9);border-radius:99px;padding:2px 8px;}
.pf-copy-btn{background:rgba(39,117,202,.15);border:1px solid rgba(39,117,202,.3);color:rgba(162,213,255,.9);border-radius:6px;
  padding:4px 10px;font-size:.68rem;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:var(--ease);}
.pf-copy-btn:hover{background:rgba(39,117,202,.28);border-color:rgba(39,117,202,.5);}
.pf-copy-btn.copied{background:rgba(0,229,160,.15);border-color:rgba(0,229,160,.35);color:var(--green);}
.pf-foot{text-align:center;padding-top:8px;}
.pf-foot-brand{display:inline-flex;align-items:center;gap:7px;background:var(--glass);border:1px solid var(--border);
  border-radius:99px;padding:6px 14px;font-size:.72rem;color:var(--text3);text-decoration:none;transition:var(--ease);}
.pf-foot-brand .fx-dot{width:8px;height:8px;border-radius:50%;background:var(--grad);}
.pf-foot-brand:hover{border-color:var(--border2);color:var(--text2);}

/* Edit Profile button + Modal */
.btn-edit-profile{background:var(--glass);border:1px solid var(--border2);color:var(--text);padding:9px 18px;border-radius:9px;
  font-family:'DM Sans',sans-serif;font-size:.84rem;font-weight:600;cursor:pointer;transition:var(--ease);}
.btn-edit-profile:hover{background:var(--purple-dim);border-color:var(--p1);color:#c4b5fd;transform:translateY(-1px);}
.pf-empty,.ghlinks-empty{text-align:center;padding:26px 18px;border:1px dashed var(--border);border-radius:var(--r);
  color:var(--text3);font-size:.85rem;background:rgba(255,255,255,.015);}
.pf-empty strong{color:var(--p2);}
.ghlinks-empty a{color:var(--p2);text-decoration:none;font-weight:600;}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);z-index:9000;
  display:none;align-items:center;justify-content:center;padding:20px;}
.modal-bg.on{display:flex;animation:fadeIn .22s ease;}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);max-width:480px;width:100%;
  max-height:88vh;overflow-y:auto;padding:26px 28px;box-shadow:var(--sh2);animation:fadeUp .28s ease;}
.modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.modal-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.15rem;}
.modal-close{background:none;border:none;color:var(--text2);cursor:pointer;font-size:1.1rem;padding:6px 10px;
  border-radius:6px;transition:var(--ease);}
.modal-close:hover{color:var(--red);background:var(--red-dim);}
.modal-row{display:flex;flex-direction:column;gap:5px;margin-bottom:11px;}
.modal-row label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text2);}
.modal-row input,.modal-row textarea{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:.88rem;padding:10px 12px;outline:none;transition:var(--ease);resize:vertical;}
.modal-row input:focus,.modal-row textarea:focus{border-color:var(--p1);box-shadow:0 0 0 3px rgba(124,58,237,.18);}
.modal-section{font-size:.62rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text3);
  margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--border);}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border);}

/* Avatar uploader (Edit Profile modal) */
.modal-avatar-row{display:flex;align-items:center;gap:18px;padding:14px;background:var(--bg3);
  border:1px solid var(--border);border-radius:12px;margin-bottom:14px;}
.modal-avatar-preview{width:72px;height:72px;border-radius:50%;flex-shrink:0;background:var(--grad);
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Syne',sans-serif;
  font-weight:800;font-size:1.7rem;overflow:hidden;position:relative;
  box-shadow:0 0 0 3px var(--bg2),0 0 0 4px rgba(124,58,237,.4);}
.modal-avatar-preview .av-img{position:absolute;inset:0;}
.modal-avatar-preview.has-avatar{background:var(--bg2) !important;color:transparent !important;}
.modal-avatar-preview.uploading::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--p2);border-right-color:var(--p2);
  animation:spin .8s linear infinite;background:rgba(0,0,0,.4);}
.modal-avatar-side{flex:1;min-width:0;}
.modal-avatar-label{font-size:.78rem;font-weight:700;color:var(--text);margin-bottom:2px;}
.modal-avatar-hint{font-size:.7rem;color:var(--text3);margin-bottom:10px;}
.modal-avatar-hint.error{color:#ff8fa3;}
.modal-avatar-hint.ok{color:var(--green);}
.modal-avatar-acts{display:flex;gap:6px;flex-wrap:wrap;}
.btn-avatar-upload{background:var(--purple-dim);border:1px solid rgba(124,58,237,.3);color:#c4b5fd;
  padding:7px 12px;border-radius:7px;font-size:.78rem;font-weight:600;cursor:pointer;
  font-family:'DM Sans',sans-serif;transition:var(--ease);}
.btn-avatar-upload:hover{background:rgba(124,58,237,.25);}
.btn-avatar-upload:disabled{opacity:.55;cursor:wait;}
.btn-avatar-remove{background:rgba(255,77,106,.1);border:1px solid rgba(255,77,106,.27);color:#ff8fa3;
  padding:7px 12px;border-radius:7px;font-size:.78rem;font-weight:600;cursor:pointer;
  font-family:'DM Sans',sans-serif;transition:var(--ease);}
.btn-avatar-remove:hover{background:rgba(255,77,106,.18);}
.btn-save{background:var(--grad);color:#fff;border:none;border-radius:8px;padding:10px 22px;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;transition:var(--ease);
  box-shadow:0 4px 18px rgba(124,58,237,.35);}
.btn-save:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(124,58,237,.5);}
.btn-cancel{background:transparent;color:var(--text2);border:1px solid var(--border);border-radius:8px;padding:10px 18px;
  font-family:'DM Sans',sans-serif;font-weight:600;font-size:.88rem;cursor:pointer;transition:var(--ease);}
.btn-cancel:hover{color:var(--text);border-color:var(--border2);}

/* FRANYXAI ID badge on profile */
.pf-frx{display:inline-flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--border);
  padding:5px 12px;border-radius:99px;font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--text2);
  margin-top:10px;cursor:pointer;transition:var(--ease);position:relative;z-index:1;}
.pf-frx:hover{border-color:var(--p1);color:#c4b5fd;}
.pf-frx-lbl{font-size:.6rem;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;}
.pf-frx-val{letter-spacing:1px;font-weight:700;}

/* FRIENDS PAGE */
.fr-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:980px){ .fr-grid{grid-template-columns:1fr 1fr;} }
.fr-add{display:flex;gap:8px;}
.fr-add input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:9px;color:var(--text);
  padding:11px 14px;font-family:'JetBrains Mono',monospace;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;outline:none;transition:var(--ease);}
.fr-add input:focus{border-color:var(--p1);box-shadow:0 0 0 3px rgba(124,58,237,.18);}
.fr-add button{background:var(--grad);color:#fff;border:none;border-radius:9px;padding:11px 18px;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;transition:var(--ease);
  box-shadow:0 4px 14px rgba(124,58,237,.3);}
.fr-add button:hover{transform:translateY(-1px);}
.fr-add button:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.fr-fb{margin-top:10px;font-size:.82rem;min-height:18px;}
.fr-fb.ok{color:#7ee5b9;} .fr-fb.err{color:#ff8fa3;}
.fr-row{display:flex;align-items:center;gap:12px;padding:11px 12px;background:var(--bg3);border:1px solid var(--border);
  border-radius:10px;margin-bottom:8px;transition:var(--ease);}
.fr-row:hover{border-color:var(--border2);}
.fr-av{width:40px;height:40px;border-radius:50%;background:var(--grad);display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:700;flex-shrink:0;font-family:'Syne',sans-serif;font-size:.95rem;
  position:relative;}
.fr-presence-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:var(--text3);border:2px solid var(--bg3);transition:background .2s ease;}
.fr-av.is-online .fr-presence-dot{background:var(--green);box-shadow:0 0 6px var(--green);}
.fr-info{flex:1;overflow:hidden;min-width:0;}
.fr-name{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fr-frx{font-size:.7rem;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-top:2px;}
.fr-acts{display:flex;gap:6px;flex-shrink:0;}
.fr-btn{background:var(--glass);border:1px solid var(--border);color:var(--text2);padding:7px 12px;border-radius:7px;
  font-size:.74rem;font-weight:600;cursor:pointer;transition:var(--ease);font-family:'DM Sans',sans-serif;}
.fr-btn:hover{border-color:var(--border2);color:var(--text);}
.fr-btn.accept{background:rgba(0,229,160,.13);border-color:rgba(0,229,160,.32);color:#7ee5b9;}
.fr-btn.accept:hover{background:rgba(0,229,160,.22);}
.fr-btn.reject{background:rgba(255,77,106,.1);border-color:rgba(255,77,106,.27);color:#ff8fa3;}
.fr-btn.reject:hover{background:rgba(255,77,106,.18);}
.fr-btn.chat{background:var(--purple-dim);border-color:var(--p1);color:#c4b5fd;}
.fr-btn.chat:hover{background:rgba(124,58,237,.25);}
.empty-state{
  text-align:center;padding:24px 16px;color:var(--text2);font-size:.82rem;
  border:1px dashed rgba(255,255,255,.08);border-radius:12px;
  background:rgba(255,255,255,.018);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  line-height:1.5;
}

/* CHAT PAGE */
.chat-wrap{display:grid;grid-template-columns:300px 1fr;gap:14px;height:calc(100dvh - 200px);min-height:480px;}
@media (max-width:760px){
  .chat-wrap{grid-template-columns:1fr;height:auto;min-height:520px;}
  .chat-wrap.thread-on .chat-side{display:none;}
  .chat-wrap:not(.thread-on) .chat-thread{display:none;}
}
.chat-side{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;}
.chat-side-hd{padding:12px 14px;border-bottom:1px solid var(--border);font-family:'Syne',sans-serif;font-weight:800;font-size:.95rem;
  display:flex;align-items:center;justify-content:space-between;gap:8px;}
.chat-newgroup{background:var(--purple-dim);border:1px solid rgba(124,58,237,.3);color:#c4b5fd;
  width:30px;height:30px;border-radius:8px;font-size:1.1rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;transition:var(--ease);font-family:'DM Sans',sans-serif;}
.chat-newgroup:hover{background:rgba(124,58,237,.3);transform:rotate(90deg);}
.chat-list{flex:1;overflow-y:auto;}
.chat-item{display:flex;gap:10px;align-items:center;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s;}
.chat-item:hover{background:var(--bg3);}
.chat-item.active{background:var(--purple-dim);}
.chat-item-av{width:40px;height:40px;border-radius:50%;background:var(--grad);display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:700;flex-shrink:0;font-family:'Syne',sans-serif;font-size:.9rem;
  position:relative;}
.chat-item-av.group{background:linear-gradient(135deg,var(--p3),#9333ea);}
.chat-item-presence-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:var(--text3);border:2px solid var(--bg2);transition:background .2s ease;}
.chat-item-av.is-online .chat-item-presence-dot{background:var(--green);box-shadow:0 0 6px var(--green);}
.chat-item-av.group .chat-item-presence-dot{display:none;}
.chat-item-body{flex:1;overflow:hidden;min-width:0;}
.chat-item-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.chat-item-name{font-weight:700;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.chat-item-time{font-size:.66rem;color:var(--text3);font-family:'JetBrains Mono',monospace;flex-shrink:0;}
.chat-item-last{font-size:.74rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.chat-item.unread .chat-item-name{color:var(--text);}
.chat-item.unread .chat-item-last{color:var(--text2);font-weight:500;}
.chat-item.unread .chat-item-time{color:var(--p2);}
.chat-item-dot{width:8px;height:8px;border-radius:50%;background:var(--p2);box-shadow:0 0 6px var(--p2);flex-shrink:0;}
.chat-empty-prev{color:var(--text3);font-style:italic;}
.chat-thread{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;}
.chat-thread-hd{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);}
.chat-thread-back{display:none;background:none;border:none;color:var(--text2);font-size:1.4rem;cursor:pointer;padding:0 6px;}
@media (max-width:760px){ .chat-thread-back{display:inline-block;} }
.chat-thread-meta{flex:1;min-width:0;}
.chat-thread-name{font-family:'Syne',sans-serif;font-weight:800;font-size:.95rem;line-height:1.1;}
.chat-thread-frx{font-size:.7rem;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-top:2px;}
.chat-thread-sub{font-size:.7rem;color:var(--green);margin-top:2px;font-weight:500;}
.chat-thread-acts{display:flex;gap:6px;}
.chat-thread-act{background:var(--glass);border:1px solid var(--border);color:var(--text2);
  width:32px;height:32px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.95rem;transition:var(--ease);}
.chat-thread-act:hover{background:var(--red-dim);border-color:var(--red);color:var(--red);}

/* MESSAGE BUBBLES (Discord-style grouping) */
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:3px;}
.msg-row{display:flex;flex-direction:column;max-width:74%;animation:fadeUp .18s ease;}
.msg-row.in{align-self:flex-start;}
.msg-row.out{align-self:flex-end;align-items:flex-end;}
.msg-row.grouped{margin-top:0;}
.msg-row:not(.grouped){margin-top:8px;}
.msg-sender{font-size:.7rem;color:var(--p2);font-weight:600;margin-bottom:3px;padding:0 4px;}
.msg-bubble{padding:9px 13px;border-radius:14px;font-size:.88rem;line-height:1.45;word-wrap:break-word;
  overflow-wrap:break-word;max-width:100%;}
.msg-row.in .msg-bubble{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-bottom-left-radius:4px;}
.msg-row.out .msg-bubble{background:var(--grad);color:#fff;border-bottom-right-radius:4px;box-shadow:0 4px 14px rgba(124,58,237,.3);}
.msg-row.grouped.in .msg-bubble{border-top-left-radius:4px;}
.msg-row.grouped.out .msg-bubble{border-top-right-radius:4px;}
.msg-text{white-space:pre-wrap;}
.msg-img-wrap{display:block;border-radius:10px;overflow:hidden;cursor:zoom-in;background:var(--bg3);}
.msg-img-wrap:hover{filter:brightness(1.05);}
.msg-img{display:block;max-width:280px;max-height:320px;width:auto;height:auto;border-radius:10px;}
.msg-row.out .msg-img-wrap{margin-bottom:0;}
.msg-row .msg-img-wrap + .msg-text{margin-top:6px;}
.msg-meta{font-size:.62rem;opacity:.6;margin-top:3px;font-family:'JetBrains Mono',monospace;}
.msg-row.out .msg-meta{text-align:right;color:rgba(255,255,255,.7);}
.msg-row.in .msg-meta{color:var(--text3);}

/* TYPING INDICATOR */
.chat-typing{display:none;align-items:center;gap:8px;padding:6px 18px 0;font-size:.74rem;color:var(--text3);font-style:italic;animation:fadeIn .2s ease;}
.typing-dots{display:inline-flex;gap:3px;align-items:center;}
.typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--p2);animation:typingDot 1s ease infinite;}
.typing-dots span:nth-child(2){animation-delay:.15s;}
.typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-3px);opacity:1;}}

/* INPUT ROW */
.chat-input-wrap{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);align-items:center;}
.chat-attach{background:var(--glass);border:1px solid var(--border);color:var(--text2);width:38px;height:38px;
  border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.95rem;
  flex-shrink:0;transition:var(--ease);}
.chat-attach:hover{background:var(--purple-dim);border-color:var(--p1);color:#c4b5fd;}
.chat-attach.uploading{animation:spin 1s linear infinite;border-color:var(--p2);color:var(--p2);}
.chat-input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:99px;color:var(--text);
  padding:10px 16px;font-family:'DM Sans',sans-serif;font-size:.88rem;outline:none;transition:var(--ease);}
.chat-input:focus{border-color:var(--p1);box-shadow:0 0 0 3px rgba(124,58,237,.15);}
.chat-send{background:var(--grad);color:#fff;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;font-weight:700;
  box-shadow:0 4px 14px rgba(124,58,237,.35);transition:var(--ease);}
.chat-send:hover{transform:translateY(-1px);}
.chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:var(--text3);
  font-size:.88rem;gap:10px;padding:40px;text-align:center;animation:fadeIn .25s ease;}
.chat-empty-ic{font-size:2.6rem;opacity:.4;}

/* Loading + error states inside chatMsgs */
.chat-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;
  gap:14px;padding:40px;color:var(--text3);font-size:.85rem;animation:fadeIn .25s ease;min-height:200px;}
.chat-loading-spin{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);
  border-top-color:var(--p2);border-right-color:var(--p1);animation:spin .8s linear infinite;}
.chat-error{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;
  padding:40px 28px;color:#ff8fa3;background:rgba(255,77,106,.05);font-size:.85rem;text-align:center;
  border:1px dashed rgba(255,77,106,.3);border-radius:8px;margin:14px;line-height:1.5;}

/* Empty thread state */
.thread-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;
  gap:8px;padding:60px 24px;text-align:center;animation:fadeIn .35s ease;min-height:240px;}
.thread-empty-ic{font-size:3rem;opacity:.5;margin-bottom:6px;}
.thread-empty-title{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text);}
.thread-empty-sub{font-size:.82rem;color:var(--text3);max-width:280px;line-height:1.5;}

/* Day separator */
.msg-day-sep{display:flex;align-items:center;justify-content:center;margin:14px 0 6px;
  font-size:.7rem;color:var(--text3);font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  position:relative;}
.msg-day-sep span{background:var(--bg2);padding:3px 12px;border-radius:99px;border:1px solid var(--border);}

/* Inline send error toast */
.chat-send-err{margin:0 14px 8px;padding:8px 12px;background:rgba(255,77,106,.1);
  border:1px solid rgba(255,77,106,.3);border-radius:8px;color:#ff8fa3;font-size:.78rem;
  animation:fadeUp .2s ease;}

/* Smooth chat-item appearance */
.chat-item{animation:fadeIn .2s ease;}
.chat-item:focus{outline:2px solid var(--p1);outline-offset:-2px;}
.chat-item.active{background:linear-gradient(90deg,var(--purple-dim),transparent);
  box-shadow:inset 3px 0 0 var(--p1);}
/* Make chat-item a tiny bit more responsive feeling */
.chat-item:active{transform:scale(.985);}

/* Header avatar presence dot (mirrors chat-item-av) */
#chatHdAv{position:relative;}
#chatHdAv .chat-item-presence-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:var(--text3);border:2px solid var(--bg2);transition:background .2s ease;}
#chatHdAv.is-online .chat-item-presence-dot{background:var(--green);box-shadow:0 0 6px var(--green);}
#chatHdAv.group .chat-item-presence-dot{display:none;}

/* NEW GROUP MODAL friend picker */
.newgroup-friends{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto;
  border:1px solid var(--border);border-radius:8px;background:var(--bg3);padding:6px;}
.ngf-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer;transition:var(--ease);}
.ngf-row:hover{background:var(--glass2);}
.ngf-row input[type=checkbox]{accent-color:var(--p1);width:16px;height:16px;cursor:pointer;}
.ngf-av{width:30px;height:30px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:.78rem;font-family:'Syne',sans-serif;flex-shrink:0;position:relative;overflow:hidden;}
.ngf-name{font-size:.86rem;font-weight:600;}
.ngf-frx{font-size:.7rem;color:var(--text3);font-family:'JetBrains Mono',monospace;}
.ngf-empty{padding:20px;text-align:center;color:var(--text3);font-size:.82rem;}

/* ══════════════════════════════════════════
   TOOLS (dashboard/finance/gen/ai)
══════════════════════════════════════════ */
.todo-row{display:flex;gap:8px;margin-bottom:12px;}
.todo-in{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:.85rem;padding:9px 12px;outline:none;transition:var(--ease);}
.todo-in:focus{border-color:var(--p1);box-shadow:0 0 0 3px rgba(124,58,237,.15);}
.todo-in::placeholder{color:var(--text3);}
.btn-add{width:37px;height:37px;background:var(--grad);color:#fff;border:none;border-radius:8px;font-size:1.2rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--ease);flex-shrink:0;}
.btn-add:hover{transform:scale(1.06);box-shadow:0 0 16px rgba(124,58,237,.4);}
.todo-ul{list-style:none;display:flex;flex-direction:column;gap:5px;max-height:270px;overflow-y:auto;}
.todo-li{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg3);border:1px solid var(--border);
  border-radius:8px;transition:var(--ease);animation:itemIn .2s ease both;}
.todo-li:hover{background:var(--glass2);transform:translateX(2px);}
.chk{width:16px;height:16px;border-radius:4px;border:2px solid var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--ease);font-size:.55rem;color:transparent;}
.todo-li.done .chk{background:var(--green);border-color:var(--green);color:#000;}
.todo-txt{flex:1;font-size:.85rem;}
.todo-li.done .todo-txt{text-decoration:line-through;color:var(--text3);}
.del-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:.7rem;padding:2px 4px;border-radius:4px;opacity:0;transition:var(--ease);}
.todo-li:hover .del-btn{opacity:1;}
.del-btn:hover{color:var(--red);background:var(--red-dim);}
.save-lbl{font-size:.68rem;color:var(--green);opacity:.7;}
.note-ta{width:100%;min-height:200px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-family:'DM Sans',sans-serif;font-size:.88rem;line-height:1.7;padding:12px;resize:none;outline:none;transition:var(--ease);}
.note-ta:focus{border-color:var(--p1);box-shadow:0 0 0 3px rgba(124,58,237,.15);}
.note-ta::placeholder{color:var(--text3);font-style:italic;}
.note-ft{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.char-c{font-size:.7rem;color:var(--text3);}
.empty{display:none;flex-direction:column;align-items:center;gap:6px;padding:22px;color:var(--text3);font-size:.82rem;}
.empty-ic{font-size:1.3rem;opacity:.4;}
/* finance */
.bal-hero{background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(0,229,255,.06));
  border:1px solid rgba(124,58,237,.2);border-radius:var(--r2);padding:26px;text-align:center;margin-bottom:18px;}
.bal-lbl{font-size:.68rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:6px;}
.bal-amt{font-family:'Syne',sans-serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-1px;margin-bottom:10px;}
.bal-meta{display:flex;justify-content:center;gap:22px;font-size:.82rem;}
.meta-in{color:var(--green);font-weight:500;}
.meta-ex{color:var(--red);font-weight:500;}
.fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.tx-form{display:flex;flex-direction:column;gap:10px;}
.type-tog{display:flex;gap:5px;background:var(--bg3);padding:3px;border-radius:8px;border:1px solid var(--border);}
.type-btn{flex:1;padding:7px;background:none;border:none;border-radius:6px;color:var(--text2);
  font-family:'DM Sans',sans-serif;font-weight:600;font-size:.82rem;cursor:pointer;transition:var(--ease);}
.type-btn.on-income{background:var(--green-dim);color:var(--green);}
.type-btn.on-expense{background:var(--red-dim);color:var(--red);}
.f-in{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:.88rem;padding:10px 12px;outline:none;transition:var(--ease);width:100%;}
.f-in:focus{border-color:var(--p1);box-shadow:0 0 0 3px rgba(124,58,237,.15);}
.f-in::placeholder{color:var(--text3);}
.tx-ul{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto;}
.tx-li{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--bg3);
  border:1px solid var(--border);border-radius:8px;transition:var(--ease);animation:itemIn .2s ease both;}
.tx-li:hover{background:var(--glass2);}
.tx-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.tx-dot.income{background:var(--green);}
.tx-dot.expense{background:var(--red);}
.tx-info{flex:1;}
.tx-desc{font-size:.85rem;font-weight:500;}
.tx-date{font-size:.7rem;color:var(--text3);}
.tx-amt{font-family:'JetBrains Mono',monospace;font-size:.88rem;font-weight:600;}
.tx-amt.income{color:var(--green);}
.tx-amt.expense{color:var(--red);}
.tx-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:.7rem;padding:2px 4px;border-radius:4px;opacity:0;transition:var(--ease);}
.tx-li:hover .tx-del{opacity:1;}
.tx-del:hover{color:var(--red);background:var(--red-dim);}
/* generator */
.gen-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.gen-card{display:flex;flex-direction:column;gap:12px;}
.gen-plat{display:flex;align-items:center;gap:8px;}
.pdot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.pdot.insta{background:linear-gradient(135deg,#f09433,#dc2743,#bc1888);}
.pdot.tiktok{background:#00f2ea;}
.gen-hint{font-size:.78rem;color:var(--text3);}
.vibe-row{display:flex;flex-wrap:wrap;gap:5px;}
.vibe-btn{background:var(--bg3);border:1px solid var(--border);border-radius:99px;color:var(--text2);
  font-family:'DM Sans',sans-serif;font-size:.73rem;padding:4px 10px;cursor:pointer;transition:var(--ease);}
.vibe-btn:hover{color:var(--text);}
.vibe-btn.on{background:var(--purple-dim);border-color:rgba(124,58,237,.35);color:#b48cff;}
.gen-out{min-height:90px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:13px;
  font-size:.88rem;line-height:1.7;flex:1;position:relative;overflow:hidden;}
.gen-out.loading::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.07),transparent);animation:shimmer .7s ease infinite;}
.out-ph{color:var(--text3);font-style:italic;font-size:.82rem;}
.gen-acts{display:flex;gap:7px;}
.gen-acts .btn-pri{flex:1;}
/* AI */
.ai-wrap{display:flex;flex-direction:column;height:calc(100vh - 210px);min-height:400px;}
.chat-box{flex:1;background:var(--glass);border:1px solid var(--border);border-radius:var(--r2) var(--r2) 0 0;
  padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
.chat-welcome{display:flex;gap:9px;align-items:flex-start;}
.ai-av{width:32px;height:32px;border-radius:50%;background:var(--grad);display:flex;align-items:center;
  justify-content:center;font-size:.85rem;color:#fff;flex-shrink:0;}
.welcome-bub{background:var(--bg3);border:1px solid var(--border);border-radius:4px 14px 14px 14px;
  padding:11px 15px;font-size:.86rem;line-height:1.6;max-width:480px;}
.welcome-bub em{color:var(--p2);font-style:normal;}
.msg-wrap{display:flex;gap:8px;align-items:flex-end;animation:itemIn .25s ease both;}
.msg-wrap.user{flex-direction:row-reverse;}
.bubble{max-width:72%;padding:10px 14px;border-radius:14px;font-size:.86rem;line-height:1.6;}
.msg-wrap.bot .bubble{background:var(--bg3);border:1px solid var(--border);border-radius:4px 14px 14px 14px;}
.msg-wrap.user .bubble{background:var(--purple-dim);border:1px solid rgba(124,58,237,.25);border-radius:14px 4px 14px 14px;}
.msg-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;flex-shrink:0;}
.msg-wrap.bot .msg-av{background:var(--grad);color:#fff;}
.msg-wrap.user .msg-av{background:var(--bg3);border:1px solid var(--border);color:var(--text2);}
.typing{display:flex;gap:3px;align-items:center;padding:2px 0;}
.typing span{width:5px;height:5px;border-radius:50%;background:var(--text3);animation:bounce 1.2s ease infinite;}
.typing span:nth-child(2){animation-delay:.2s;}
.typing span:nth-child(3){animation-delay:.4s;}
.chat-in-row{display:flex;gap:8px;background:var(--bg3);border:1px solid var(--border);
  border-top:none;border-radius:0 0 var(--r2) var(--r2);padding:10px;}
.chat-in{flex:1;background:var(--glass);border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:.86rem;padding:10px 13px;outline:none;transition:var(--ease);}
.chat-in:focus{border-color:var(--p1);box-shadow:0 0 0 3px rgba(124,58,237,.15);}
.chat-in::placeholder{color:var(--text3);}
.send-btn{width:40px;height:40px;background:var(--grad);color:#fff;border:none;border-radius:8px;
  font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--ease);flex-shrink:0;}
.send-btn:hover{transform:scale(1.06);box-shadow:0 0 16px rgba(124,58,237,.4);}

/* Monopoly */
.mono-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start;}
.mono-board-wrap{background:var(--bg2);border:1px solid rgba(245,200,66,.2);border-radius:var(--r2);padding:20px;}
.mono-board-title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--gold);margin-bottom:16px;}
.mono-board{display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);
  gap:2px;aspect-ratio:1;background:rgba(245,200,66,.06);border:1px solid rgba(245,200,66,.15);
  border-radius:8px;overflow:hidden;animation:boardPop .5s ease both;}
.mb{display:flex;align-items:center;justify-content:center;font-size:.42rem;text-align:center;
  padding:1px;line-height:1.2;position:relative;transition:var(--ease);}
.mb:hover{filter:brightness(1.3);}
.mb.corner{background:rgba(245,200,66,.12);font-size:.55rem;}
.mb.prop-brown{background:rgba(150,80,40,.35);}
.mb.prop-lblue{background:rgba(0,180,220,.35);}
.mb.prop-pink{background:rgba(220,80,180,.35);}
.mb.prop-orange{background:rgba(255,140,0,.35);}
.mb.prop-red{background:rgba(220,40,60,.35);}
.mb.prop-yellow{background:rgba(235,215,0,.35);}
.mb.prop-green{background:rgba(0,180,90,.35);}
.mb.prop-dblue{background:rgba(0,80,200,.35);}
.mb.railroad{background:rgba(80,80,80,.4);}
.mb.utility{background:rgba(100,200,100,.2);}
.mb.tax{background:rgba(200,50,50,.2);}
.mb.chance{background:rgba(200,160,0,.2);}
.mb.chest{background:rgba(0,150,200,.2);}
.mb.corner{background:rgba(245,200,66,.12);}
.mono-side{display:flex;flex-direction:column;gap:14px;}
.mono-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px;}
.mono-card-title{font-family:'Syne',sans-serif;font-size:.85rem;font-weight:700;margin-bottom:12px;color:var(--gold);}
.player-list{display:flex;flex-direction:column;gap:8px;}
.player-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);}
.player-row.active-turn{border-color:rgba(245,200,66,.35);background:rgba(245,200,66,.05);}
.player-token{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;}
.player-name{flex:1;font-size:.84rem;font-weight:500;}
.player-bal{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--gold);}
.player-turn-tag{font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:99px;background:rgba(245,200,66,.15);color:var(--gold);}
.dice-area{display:flex;gap:12px;align-items:center;justify-content:center;padding:16px 0;}
.die{width:52px;height:52px;background:var(--bg3);border:2px solid rgba(245,200,66,.3);border-radius:10px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:7px;gap:3px;cursor:pointer;transition:var(--ease);}
.die:hover{border-color:var(--gold);}
.die.rolling{animation:diceRoll .5s ease;}
.die-pip{border-radius:50%;background:var(--gold);display:none;}
.die-total{font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;color:var(--gold);min-width:44px;text-align:center;}
.btn-roll{width:100%;background:var(--gold);color:#000;border:none;border-radius:8px;padding:11px;
  font-family:'Syne',sans-serif;font-weight:800;font-size:.9rem;cursor:pointer;transition:var(--ease);}
.btn-roll:hover{background:#ffe066;}
.btn-roll:disabled{background:var(--bg3);color:var(--text3);cursor:not-allowed;}
.game-log{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;}
.log-entry{font-size:.75rem;color:var(--text2);padding:4px 8px;border-radius:5px;background:var(--bg3);border-left:2px solid var(--border);}
.log-entry.roll{border-left-color:var(--gold);}
.log-entry.buy{border-left-color:var(--green);}
.log-entry.pay{border-left-color:var(--red);}
.log-entry.system{border-left-color:var(--p1);}
.btn-action{width:100%;background:var(--glass);border:1px solid var(--border);color:var(--text);border-radius:8px;
  padding:9px;font-family:'DM Sans',sans-serif;font-weight:600;font-size:.82rem;cursor:pointer;transition:var(--ease);margin-bottom:6px;}
.btn-action:hover{background:var(--glass2);border-color:var(--gold);color:var(--gold);}
.btn-action:disabled{opacity:.4;cursor:not-allowed;}
.prop-info{padding:10px;background:var(--bg3);border-radius:8px;border:1px solid var(--border);}
.prop-name{font-family:'Syne',sans-serif;font-size:.85rem;font-weight:700;}
.prop-detail{font-size:.75rem;color:var(--text2);margin-top:3px;}
.prop-color{width:100%;height:4px;border-radius:2px;margin-top:8px;}

/* Buttons */
.btn-pri{background:var(--grad);color:#fff;border:none;border-radius:8px;padding:10px 18px;
  font-family:'DM Sans',sans-serif;font-weight:600;font-size:.86rem;cursor:pointer;transition:var(--ease);width:100%;}
.btn-pri:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(124,58,237,.4);}
.btn-ghost{background:var(--glass);color:var(--text2);border:1px solid var(--border);border-radius:8px;
  padding:7px 12px;font-family:'DM Sans',sans-serif;font-size:.78rem;cursor:pointer;transition:var(--ease);}
.btn-ghost:hover{background:var(--glass2);color:var(--text);}
.btn-ghost-sm{background:none;color:var(--text3);border:none;font-size:.74rem;cursor:pointer;padding:3px 6px;
  border-radius:4px;font-family:'DM Sans',sans-serif;transition:var(--ease);}
.btn-ghost-sm:hover{color:var(--red);background:var(--red-dim);}

/* Overlay */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:150;backdrop-filter:blur(3px);}
.overlay.show{display:block;}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1024px){.mono-layout{grid-template-columns:1fr;}.pm-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:900px){.stats-row{grid-template-columns:1fr 1fr;}.gen-grid,.fin-grid{grid-template-columns:1fr;}.more-games-grid{grid-template-columns:1fr 1fr;}.profile-grid{grid-template-columns:1fr 1fr;}.mods-grid{grid-template-columns:1fr;}.strip-inner{grid-template-columns:1fr 1fr;}}
@media(max-width:700px){
  .sidebar{transform:translateX(-100%);width:var(--sw)!important;transition:transform .28s cubic-bezier(.4,0,.2,1);}
  .sidebar.mob-open{transform:translateX(0);}
  .main{margin-left:0!important;}
  .mob-btn{display:block;}
  .two-col,.recent-row{grid-template-columns:1fr;}
  .content{padding:16px 14px;}
  .top-bar{padding:0 14px;}
  .tb-date,.tb-div{display:none;}
  .lp-nav{padding:13px 18px;}
  .lp-nav-links{display:none;}
  .pm-grid{grid-template-columns:1fr;}
  .more-games-grid{grid-template-columns:1fr;}
  .profile-grid{grid-template-columns:1fr 1fr;}
  .mono-hero-right{display:none;}
  .pf-hero{padding:32px 22px 28px;}
}
@media(max-width:500px){.strip-inner{grid-template-columns:1fr;}.profile-grid{grid-template-columns:1fr;}}

/* ══════════════════════════════════════════
   TOUCH & INTERACTION BASELINE
══════════════════════════════════════════ */
button,a,[role=button],input[type=submit],[tabindex]{
  touch-action:manipulation;
}
:focus-visible{
  outline:2px solid var(--p1);
  outline-offset:2px;
  border-radius:4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible){
  outline:none;
}

/* ══════════════════════════════════════════
   PREFERS-REDUCED-MOTION (base layer)
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html{ scroll-behavior:auto !important; }
  .ld-ring{ animation:none !important; }
  .ld-fill{ animation:none !important; width:100%; }
  .ld-hint{ animation:none !important; opacity:.7; }
  .lp-h1,.lp-sub,.hero-ctas,.hero-stats,.hero-pill{ animation:none !important; opacity:1; }
  .msg-row{ animation:none !important; }
  .typing-dots span{ animation:none !important; }
}