:root{
  --bg:#07080b;
  --panel:rgba(255,255,255,.06);
  --hair:rgba(255,255,255,.10);
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);

  /* 2027 accents (subtle, premium) */
  --accent1:#5b8cff; /* blue */
  --accent2:#7a5cff; /* violet */

  --radius:18px;
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%;width:100%}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  position:fixed;
  top:0;left:0;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
}

/* Top bar */
.tb-topbar{
  position:fixed;
  top:0;left:0;right:0;
  padding:10px 14px;
  padding-top:calc(10px + var(--safe-top));
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
}
.tb-brand{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.tb-brand-name{
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:.3px;
}
.tb-actions{display:flex;gap:10px;align-items:center}
.tb-iconbtn{
  width:40px;height:40px;
  border-radius:999px;
  border:1px solid var(--hair);
  background:rgba(0,0,0,.35);
  color:var(--text);
  display:grid;
  place-items:center;
}
.tb-iconbtn:active{transform:scale(.98)}

/* Search */
.tb-search{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  top:calc(56px + var(--safe-top));
  width:min(640px, 92vw);
  z-index:1100;
  padding:10px 0;
}
.tb-searchbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,0,255,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.tb-searchbar input{
  width:100%;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:15px;
  outline:none;
}
.tb-searchbar button{
  border:none;
  background:transparent;
  color:var(--accent1);
  font-size:16px;
}

/* Bottom tabs */
.tb-tabs{
  position:fixed;
  left:0;right:0;bottom:0;
  height:64px;
  padding-bottom:var(--safe-bot);
  background:rgba(0,0,0,.85);
  border-top:1px solid var(--hair);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  z-index:1300;
  display:flex;
}
.tb-tab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none;
  color:rgba(255,255,255,.72);
  font-size:11px;
}
.tb-tab svg{width:22px;height:22px}
.tb-tab.active{color:#fff}

/* Common panels */
.tb-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--panel);
  border:1px solid var(--hair);
  box-shadow:var(--shadow);
}

.tb-gradient{
  background:linear-gradient(45deg, var(--accent1), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}


/* ---------- Layout stability (iOS-safe) ---------- */
.tb-page{
  height: calc(var(--vh, 1vh) * 100);
  display:flex;
  flex-direction:column;
}
.tb-scroll{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom: calc(78px + var(--safe-bot)); /* room for bottom nav */
}

/* ---------- 2027 text-only bottom nav ---------- */
.tb-tabs{
  height:62px;
}
.tb-tab{
  gap:0;
  font-size:12px;
  letter-spacing:.2px;
}
.tb-tab svg{display:none !important;} /* keep markup compatible but hide icons */
.tb-tab{
  justify-content:center;
  font-weight:600;
}
.tb-tab.active{
  position:relative;
}
.tb-tab.active::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:10px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent1), var(--accent2));
  opacity:.95;
}

/* ---------- Tabs row (Profile / Feed) ---------- */
.tb-segtabs{
  display:flex;
  gap:10px;
  padding:10px 14px;
  width:min(720px, 94vw);
  margin:0 auto;
}
.tb-segtab{
  flex:1;
  text-align:center;
  padding:10px 10px;
  border-radius:999px;
  border:1px solid var(--hair);
  background:rgba(0,0,0,.30);
  color:rgba(255,255,255,.78);
  font-weight:700;
}
.tb-segtab.active{
  background:linear-gradient(135deg, rgba(91,140,255,.25), rgba(122,92,255,.20));
  color:#fff;
  border-color:rgba(91,140,255,.35);
}

/* ---------- Bottom sheet sizing (no random jumps) ---------- */
.tb-sheet{
  max-height: calc(var(--vh, 1vh) * 92);
}