/* ===================================================================
   128B!t Hub X — Shared Styles
   =================================================================== */

/* ============ CONFIG ============ */
:root{
  /* Colors */
  --bg-0:#08080b;
  --bg-1:#111116;
  --bg-2:#1a1a22;
  --glow-violet:#7c6cff;
  --glow-blue:#5da8ff;
  --glow-pink:#ff6ce0;
  --text-hi:#f5f5fa;
  --text-mid:#b9b9c6;
  --text-low:#77778a;
  --card-bg: rgba(255,255,255,0.055);
  --card-bg-hover: rgba(255,255,255,0.09);
  --card-border: rgba(255,255,255,0.10);
  --card-border-hover: rgba(124,108,255,0.55);
  --accent-grad: linear-gradient(135deg, var(--glow-violet), var(--glow-blue));

  /* Radii */
  --radius-lg:28px;
  --radius-md:18px;
  --radius-pill:999px;

  /* Fonts */
  --font-display:'Baloo 2', 'Kanit', sans-serif;
  --font-body:'Sarabun', 'Kanit', sans-serif;
  --font-code:'JetBrains Mono', 'Courier New', monospace;
}

/* Discord invite link */
:root{ --discord-invite-url: "https://discord.gg/E6ft5s7Ddu"; }

/* ============ RESET ============ */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:var(--font-body);
  color:var(--text-hi);
  min-height:100dvh;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ============ ANIMATED AURORA BACKGROUND ============ */
.bg-wrap{ position:fixed; inset:0; z-index:-3; background:var(--bg-0); overflow:hidden; }
.bg-wrap::after{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image: radial-gradient(circle at 15% 10%, #000 0%, rgba(0,0,0,.35) 35%, transparent 65%);
          mask-image: radial-gradient(circle at 15% 10%, #000 0%, rgba(0,0,0,.35) 35%, transparent 65%);
}
.aurora-blob{
  position:absolute;
  width:60vmax; height:60vmax;
  border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  will-change:transform;
}
.blob-1{ background:radial-gradient(circle, var(--glow-violet), transparent 70%); top:-20%; left:-15%; animation:float1 22s ease-in-out infinite; }
.blob-2{ background:radial-gradient(circle, var(--glow-blue), transparent 70%); bottom:-25%; right:-15%; animation:float2 26s ease-in-out infinite; }
.blob-3{ background:radial-gradient(circle, var(--glow-pink), transparent 70%); top:35%; right:10%; opacity:.28; width:45vmax; height:45vmax; animation:float3 30s ease-in-out infinite; }

@keyframes float1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(8%,10%) scale(1.15); }
}
@keyframes float2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-10%,-6%) scale(1.1); }
}
@keyframes float3{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-6%,8%) scale(1.2); }
}
@media (prefers-reduced-motion: reduce){
  .aurora-blob{ animation:none; }
}

/* ============ LAYOUT SHELL ============ */
.page{
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding:28px 24px 22px;
  max-width:480px;
  margin:0 auto;
  animation: pageIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pageIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .page{ animation:none; }
}

.back-btn{
  background:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600;
  font-size:1.05rem; color:var(--text-mid);
  align-self:flex-start;
  padding:8px 10px 8px 6px;
  border-radius:var(--radius-pill);
  transition:color .2s ease, background .2s ease, transform .15s ease;
}
.back-btn:hover{ color:var(--text-hi); background:rgba(255,255,255,.06); }
.back-btn:active{ transform:scale(.94); }
.back-btn svg{ width:18px; height:18px; transition:transform .2s ease; }
.back-btn:hover svg{ transform:translateX(-3px); }
.invisible{ visibility:hidden; }

a, button{ font-family:inherit; text-decoration:none; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--glow-blue); outline-offset:3px; border-radius:8px; }

.footer-credit{
  text-align:center;
  color:var(--text-low);
  font-size:.78rem;
  letter-spacing:.3px;
  padding-top:28px;
  margin-top:auto;
}

/* ============ TEXT STYLES ============ */
.eyebrow{
  font-family:var(--font-display); font-weight:600;
  font-size:1rem; color:var(--text-mid);
  margin:30px 0 14px;
  text-align:center;
}
.page-title{
  font-family:var(--font-display); font-weight:800;
  font-size:2.6rem; line-height:1.05;
  letter-spacing:.5px;
  background:linear-gradient(135deg, #fff, #cfd1ff 60%, var(--glow-violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-top:6px;
  text-align:center;
}
.page-sub{
  font-family:var(--font-body); font-weight:400;
  font-size:1rem; color:var(--text-mid);
  margin-top:14px; line-height:1.65;
  max-width:36ch;
  text-align:center;
  margin-left:auto; margin-right:auto;
}

/* ============ GLASS PANEL / CARD ============ */
.panel{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  transition: background .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}

.hub-card{
  cursor:pointer;
  display:flex; flex-direction:column; gap:14px;
  position:relative;
  overflow:hidden;
}
.hub-card::before{
  content:'';
  position:absolute; inset:0;
  background:var(--accent-grad);
  opacity:0;
  transition:opacity .3s ease;
  z-index:0;
  mix-blend-mode:overlay;
}
.hub-card:hover, .hub-card:focus-visible{
  background:var(--card-bg-hover);
  border-color:var(--card-border-hover);
  transform:translateY(-4px);
  box-shadow: 0 14px 40px rgba(124,108,255,.25);
}
.hub-card:hover::before{ opacity:.15; }
.hub-card:active{ transform:translateY(-1px) scale(.99); }
.hub-card > *{ position:relative; z-index:1; }

.hub-card-head{ display:flex; align-items:center; gap:14px; }
.hub-icon-wrap{
  flex:none; width:46px; height:46px;
  border-radius:14px;
  background:var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(124,108,255,.35);
}
.hub-icon-wrap svg{ width:24px; height:24px; color:#fff; }
.hub-card-title{
  font-family:var(--font-display); font-weight:700;
  font-size:1.4rem; color:var(--text-hi);
}
.hub-card-desc{
  font-family:var(--font-body); font-weight:400;
  font-size:.95rem; color:var(--text-mid);
  line-height:1.6;
}
.hub-card-more{
  align-self:flex-end;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:600;
  font-size:.82rem; color:var(--glow-blue);
  transition:gap .2s ease;
}
.hub-card:hover .hub-card-more{ gap:10px; }

.discord-card .home-sub-title{
  font-family:var(--font-display); font-weight:700;
  font-size:1.4rem; color:var(--text-hi); margin-bottom:12px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  text-align:center;
}
.discord-card p{
  font-family:var(--font-body); font-weight:400;
  font-size:.95rem; color:var(--text-mid);
  line-height:1.6; margin-bottom:20px;
  text-align:center;
}

/* ============ BUTTONS ============ */
.cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  background:var(--accent-grad);
  color:#fff;
  border:none; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-weight:700;
  font-size:1.08rem;
  padding:17px 20px;
  text-align:center;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 10px 28px rgba(124,108,255,.4);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease;
  position:relative;
  overflow:hidden;
}
.cta-btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:none;
}
.cta-btn:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(124,108,255,.5); filter:brightness(1.05); }
.cta-btn:hover::after{ transform:translateX(120%); transition:transform .7s ease; }
.cta-btn:active{ transform:translateY(0) scale(.97); box-shadow:0 6px 16px rgba(124,108,255,.35); }

.cta-btn.secondary{
  background:rgba(255,255,255,.08);
  box-shadow:none;
  border:1px solid var(--card-border);
}
.cta-btn.secondary:hover{ background:rgba(255,255,255,.14); box-shadow:0 8px 20px rgba(0,0,0,.3); }

/* ============ WELCOME SCREEN ============ */
.welcome-page{ justify-content:flex-start; align-items:center; padding-top:12vh; }
.welcome-page .back-btn{ align-self:flex-start; }
.welcome-page .cta-btn{ width:100%; }
.brand-badge{
  width:64px; height:64px; border-radius:20px;
  background:var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(124,108,255,.45);
  margin-bottom:22px;
  animation: badgeIn .6s cubic-bezier(.34,1.56,.64,1) .1s both;
}
@keyframes badgeIn{
  from{ opacity:0; transform:scale(.5) rotate(-10deg); }
  to{ opacity:1; transform:scale(1) rotate(0); }
}
.brand-badge svg{ width:32px; height:32px; color:#fff; }
.welcome-title{
  font-family:var(--font-display); font-weight:800;
  font-size:3.1rem; line-height:1;
  background:linear-gradient(135deg, #fff, #cfd1ff 60%, var(--glow-violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-align:center;
}
.welcome-sub{
  font-family:var(--font-display); font-weight:600;
  font-size:1.05rem; color:var(--text-mid);
  margin-top:8px;
  text-align:center;
}
.welcome-spacer{ flex:1; min-height:6vh; }
.get-started-label{
  font-family:var(--font-body); font-weight:400;
  font-size:.85rem; color:var(--text-low);
  margin-bottom:12px; letter-spacing:.4px;
  text-align:center;
}

/* ============ GET SCRIPT SCREEN ============ */
.script-panel{ margin-top:30px; }
.script-panel-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.script-panel-title{
  font-family:var(--font-display); font-weight:700;
  font-size:1.4rem; color:var(--text-hi);
}
.code-box{
  background:#0c0c11;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);
  padding:18px;
  min-height:170px;
  max-height:280px;
  overflow-y:auto;
  position:relative;
}
.code-box::before{
  content:'';
  display:block;
  position:absolute; top:14px; left:16px;
  width:34px; height:10px;
}
.code-box pre{
  margin:0;
  font-family:var(--font-code);
  font-size:.82rem;
  line-height:1.6;
  color:#c9d6ff;
  white-space:pre-wrap;
  word-break:break-word;
}
.code-box .tok-kw{ color:#c792ea; }
.code-box .tok-str{ color:#a3e6a3; }
.code-box::-webkit-scrollbar{ width:8px; }
.code-box::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:8px; }

.copy-btn{ margin-top:20px; }
.copy-btn.copied{
  background:linear-gradient(135deg, #34d399, #10b981);
  box-shadow:0 10px 28px rgba(16,185,129,.4);
}

/* ============ RESPONSIVE ============ */
@media (max-width:380px){
  .page-title{ font-size:2.2rem; }
  .welcome-title{ font-size:2.6rem; }
}