:root{
  --bg:#0f1117; --card:#141826; --muted:#9aa6b2; --text:#e9eef2;
  --accent:#38bdf8; --accent2:#60a5fa; --border:#1f2636; --border-strong:#2b3246;
}

/* Universal nav */
.nav{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(8px);
  background:rgba(13,16,24,.7); border-bottom:4px solid var(--border-strong);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:14px 18px; display:flex; align-items:center; gap:14px;
}


/* KasPlay logo block */
/* KasPlay logo */
.nav .logo{
  width:48px;               /* was 36px */
  height:48px;
  display:inline-block;
  border-radius:14px;
  background-image: url('/KasPlay/KasPlayLogo.png');
  background-repeat: no-repeat;
  background-position: center 52%;
  background-size: 100%;    /* zoom into the art */
  background-color:#0f1524;
  border:1px solid var(--border);
  box-shadow: 0 0 22px rgba(56,189,248,.25);
  margin-right:120px;
}


.brand{font-weight:700; letter-spacing:.3px; color:var(--text); text-decoration:none}
.dev-btn{
  margin-left:8px; padding:6px 10px; border-radius:10px;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
  text-decoration:none; color:var(--text); font-weight:700; font-size:13px;
}
.spacer{flex:1}

/* centered balance pill */
.balance{
  min-width:220px; text-align:center; font-size:18px; font-weight:900;
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background:linear-gradient(180deg,#17223b,#101628);
  box-shadow:0 6px 24px rgba(0,0,0,.25); user-select:none; cursor:pointer;
}
.balance small{
  display:block; font-size:12px; color:#9fb0c5; font-weight:700; letter-spacing:.2px
}

/* right cluster */
.nav-right{
  display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted);
}
.clickcopy{
  cursor:pointer; padding:6px 8px; border-radius:8px;
  border:1px solid var(--border); background:rgba(255,255,255,.03);
}
.clickcopy:hover{ background:rgba(255,255,255,.06) }

/* stacked email & address */
.id-container{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  max-width:360px;
}
.id-container .email{
  font-weight:800;
  line-height:1.1;
}
.id-container .address{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  line-height:1.1;
  word-break:break-all;
  opacity:.9;
}

/* red logout button */
button.logout{
  all:unset;
  cursor:pointer;
  padding:6px 12px;
  border-radius:8px;
  border:1px solid #7f1d1d;
  background:#ef4444;
  color:#fff;
  font-weight:800;
  box-shadow:0 6px 18px rgba(239,68,68,.25);
  transition:transform .06s ease, background .12s ease, box-shadow .12s ease;
}
button.logout:hover{ background:#dc2626; }
button.logout:active{ transform:scale(.98); }
button.logout:focus-visible{
  outline:2px solid #fca5a5;
  outline-offset:2px;
}

/* tiny toast used by the nav */
.nav-toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:#101827; border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-weight:800;
  box-shadow:0 16px 40px rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .15s, transform .1s;
  z-index:1000;
}
.nav-toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}