:root {
  --hub-bg: #07050d;
  --hub-bg-2: #0e0919;
  --hub-panel: rgba(18, 12, 33, .78);
  --hub-panel-2: rgba(28, 18, 50, .72);
  --hub-border: rgba(255,255,255,.09);
  --hub-border-strong: rgba(157,92,255,.45);
  --hub-text: #f8fafc;
  --hub-muted: #9ca3b5;
  --hub-soft: rgba(255,255,255,.05);
  --hub-accent: #9d5cff;
  --hub-pink: #ff2d55;
  --hub-green: #2fe6ac;
  --hub-warning: #f6b94b;
  --hub-shadow: 0 18px 40px rgba(0,0,0,.26);
  --radius: 16px;
  --radius-sm: 11px;
}

[data-theme="light"] {
  --hub-bg: #f7f7fb;
  --hub-bg-2: #eef0f7;
  --hub-panel: rgba(255,255,255,.88);
  --hub-panel-2: rgba(255,255,255,.94);
  --hub-border: rgba(15,23,42,.09);
  --hub-border-strong: rgba(124,58,237,.28);
  --hub-text: #111827;
  --hub-muted: #64748b;
  --hub-soft: rgba(15,23,42,.04);
  --hub-shadow: 0 18px 40px rgba(31,41,55,.08);
}

* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; }
body {
  background: var(--hub-bg);
  color: var(--hub-text);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  overflow-x:hidden;
}

.bg-orbs { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.orb { position:absolute; border-radius:999px; filter:blur(100px); opacity:.25; }
.orb-red { width:440px; height:440px; background:#a71234; left:-170px; top:80px; }
.orb-pink { width:330px; height:330px; background:#6f183c; right:-110px; top:130px; opacity:.18; }
.orb-violet { width:520px; height:520px; background:#5323a7; left:28%; bottom:-260px; opacity:.2; }

.hub-header {
  position:sticky; top:0; z-index:100;
  min-height:62px;
  display:flex; justify-content:space-between; align-items:center;
  padding:.55rem 1.3rem;
  border-bottom:1px solid var(--hub-border);
  background:rgba(8,5,15,.84);
  backdrop-filter:blur(16px);
}
[data-theme="light"] .hub-header { background:rgba(255,255,255,.84); }

.header-left, .header-right { display:flex; align-items:center; gap:.75rem; }
.back-link { color:var(--hub-muted); text-decoration:none; font-size:.78rem; font-weight:600; }
.back-link:hover { color:var(--hub-text); }
.brand {
  font-family:Sora, sans-serif; font-weight:800; font-size:1rem;
  background:linear-gradient(135deg,var(--hub-pink),var(--hub-accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.theme-btn, .icon-btn {
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--hub-border);
  background:var(--hub-soft); color:var(--hub-text);
  cursor:pointer;
}
.theme-btn:hover,.icon-btn:hover { border-color:var(--hub-border-strong); }

.online-summary { display:flex; align-items:center; gap:.45rem; color:var(--hub-muted); font-size:.78rem; }
.presence-dot { width:7px; height:7px; border-radius:50%; background:var(--hub-green); box-shadow:0 0 9px var(--hub-green); }

.user-menu-container { position:relative; }
.user-badge {
  display:flex; align-items:center; gap:.45rem;
  padding:3px 9px 3px 4px; border-radius:999px;
  border:1px solid var(--hub-border); background:var(--hub-soft);
}
.user-badge .avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.user-name { font-size:.8rem; font-weight:700; }
.user-dropdown {
  display:none; position:absolute; top:calc(100% + 7px); right:0;
  background:var(--hub-panel-2); border:1px solid var(--hub-border);
  border-radius:10px; padding:.6rem .9rem; box-shadow:var(--hub-shadow);
}
.user-menu-container:hover .user-dropdown { display:block; }
.logout-link { color:#ef4444; font-size:.78rem; text-decoration:none; }

main { position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:1.55rem 1.25rem 2.5rem; }

.hub-toolbar {
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  margin-bottom:1.35rem;
}
.eyebrow, .section-kicker {
  font-size:.68rem; letter-spacing:.14em; font-weight:800; color:var(--hub-accent); text-transform:uppercase;
}
.hub-toolbar h1 { margin:.2rem 0 .15rem; font-family:Sora,sans-serif; font-size:1.8rem; }
.hub-toolbar p { margin:0; color:var(--hub-muted); font-size:.88rem; }

.toolbar-actions {
  display:flex; gap:.35rem; padding:.3rem; border:1px solid var(--hub-border);
  border-radius:12px; background:var(--hub-soft);
}
.segmented-btn {
  border:0; border-radius:8px; padding:.5rem .82rem; cursor:pointer;
  background:transparent; color:var(--hub-muted); font-weight:700; font-size:.8rem;
}
.segmented-btn.active { background:var(--hub-panel-2); color:var(--hub-text); box-shadow:0 2px 8px rgba(0,0,0,.2); }

.hub-layout { display:grid; grid-template-columns:minmax(0,1fr) 325px; gap:1.45rem; align-items:start; }
.sidebar-stack { display:flex; flex-direction:column; gap:1rem; position:sticky; top:82px; }

.section-heading-row { display:flex; justify-content:space-between; align-items:end; margin-bottom:.95rem; }
.section-heading-row h2 { margin:.15rem 0 0; font-family:Sora,sans-serif; font-size:1.1rem; }
.section-count,.counter-pill {
  padding:.28rem .58rem; border-radius:999px; border:1px solid var(--hub-border);
  color:var(--hub-muted); font-size:.72rem; background:var(--hub-soft);
}

.apps-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }

.app-card,.panel {
  border:1px solid var(--hub-border);
  background:var(--hub-panel);
  border-radius:var(--radius);
  box-shadow:var(--hub-shadow);
  backdrop-filter:blur(14px);
}
.app-card {
  min-height:218px;
  display:flex; flex-direction:column; padding:1.1rem;
  position:relative; overflow:hidden; transition:.18s ease;
}
.app-card::before {
  content:""; position:absolute; width:145px; height:145px; right:-55px; top:-65px;
  border-radius:50%; filter:blur(18px); opacity:.16; background:var(--card-accent,var(--hub-accent));
}
.app-card:hover { transform:translateY(-2px); border-color:var(--hub-border-strong); }
.app-card.is-disabled { opacity:.66; }

.card-top { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.app-icon {
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--hub-border); background:var(--hub-soft); font-size:1.25rem;
}
.app-tag { border:1px solid var(--hub-border); color:var(--hub-muted); padding:.25rem .55rem; border-radius:999px; font-size:.68rem; }
.card-body { padding:.8rem 0 .9rem; flex:1; }
.card-body h3 { font-family:Sora,sans-serif; font-size:1.05rem; margin:0 0 .35rem; }
.card-body p { margin:0; color:var(--hub-muted); font-size:.82rem; line-height:1.48; }
.card-activity { margin-top:.55rem; font-size:.72rem; color:var(--hub-muted); }
.card-activity.live { color:var(--hub-green); }
.card-action {
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(255,255,255,.04); padding-top:.75rem;
  color:var(--hub-text); text-decoration:none; font-size:.78rem; font-weight:800;
}
.card-action.disabled { color:var(--hub-muted); cursor:default; }

.panel { padding:1rem; }
.panel-header { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; margin-bottom:.9rem; }
.panel-header h3 { font-family:Sora,sans-serif; font-size:.95rem; margin:.15rem 0 0; }
.live-kicker { color:var(--hub-green); }

.profile-card { padding:0; overflow:hidden; }
.profile-summary {
  width:100%; border:0; background:transparent; color:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:1rem;
}
.profile-main { display:flex; align-items:center; gap:.75rem; min-width:0; flex:1; }
.profile-avatar { width:44px; height:44px; border-radius:50%; border:1px solid var(--hub-border); object-fit:cover; }
.profile-info { min-width:0; flex:1; }
.profile-name-row { display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.profile-name-row strong { font-size:.9rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.level-badge { padding:.2rem .45rem; border-radius:7px; background:rgba(157,92,255,.18); color:#cbb2ff; font-size:.68rem; font-weight:800; }
.level-badge.large { font-size:.78rem; padding:.32rem .56rem; }
.xp-row { display:flex; justify-content:space-between; gap:.75rem; color:var(--hub-muted); font-size:.68rem; margin:.28rem 0 .4rem; }
.xp-track { width:100%; height:5px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.xp-track.wide { width:220px; margin-top:.4rem; }
.xp-fill { height:100%; background:linear-gradient(90deg,var(--hub-pink),var(--hub-accent)); border-radius:inherit; transition:width .3s ease; }
.chevron { color:var(--hub-muted); font-size:1rem; transition:transform .18s ease; }
.profile-card.open .chevron { transform:rotate(180deg); }
.profile-expanded { display:none; padding:0 1rem 1rem; border-top:1px solid var(--hub-border); }
.profile-card.open .profile-expanded { display:block; }
.mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; padding:.8rem 0; }
.mini-stats div { padding:.6rem; border-radius:10px; background:var(--hub-soft); }
.mini-stats span { display:block; color:var(--hub-muted); font-size:.63rem; text-transform:uppercase; margin-bottom:.2rem; }
.mini-stats strong { font-size:.78rem; }
.subsection-title { font-size:.74rem; font-weight:800; color:var(--hub-muted); text-transform:uppercase; letter-spacing:.06em; margin:.3rem 0 .55rem; }
.compact-history { display:flex; flex-direction:column; gap:.4rem; }
.compact-history-item {
  display:flex; justify-content:space-between; gap:.6rem; align-items:center;
  font-size:.72rem; padding:.45rem 0; border-bottom:1px solid var(--hub-border);
}
.profile-history-btn { width:100%; margin-top:.7rem; border:0; background:transparent; color:#c9b5ff; font-weight:700; cursor:pointer; font-size:.74rem; text-align:left; }

.live-list,.presence-list { display:flex; flex-direction:column; gap:.55rem; }
.live-item,.presence-item {
  display:flex; align-items:center; justify-content:space-between; gap:.65rem;
  padding:.62rem; border:1px solid var(--hub-border); border-radius:11px; background:var(--hub-soft);
}
.live-info { min-width:0; }
.live-title { font-weight:800; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-meta { margin-top:.18rem; color:var(--hub-muted); font-size:.68rem; }
.live-action {
  padding:.32rem .55rem; border-radius:999px; text-decoration:none; color:white; font-size:.68rem; font-weight:800;
  background:linear-gradient(135deg,var(--hub-pink),var(--hub-accent)); white-space:nowrap;
}
.live-action.secondary { background:var(--hub-soft); border:1px solid var(--hub-border); color:var(--hub-text); }
.presence-user { display:flex; align-items:center; gap:.55rem; min-width:0; }
.presence-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.presence-name { font-size:.76rem; font-weight:700; }
.presence-status { font-size:.65rem; color:var(--hub-muted); }
.empty-state { text-align:center; color:var(--hub-muted); font-size:.76rem; padding:1.15rem .4rem; }

.history-view { margin-top:.25rem; }
.history-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1rem; }
.history-main-panel,.history-side-panel { min-height:300px; }
.history-summary {
  display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap;
  padding:.8rem; border-radius:12px; background:var(--hub-soft); border:1px solid var(--hub-border);
}
.history-level-block { display:flex; align-items:center; gap:.8rem; }
.history-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.history-stat-grid div { min-width:78px; }
.history-stat-grid span { display:block; color:var(--hub-muted); font-size:.63rem; text-transform:uppercase; }
.history-stat-grid strong { display:block; margin-top:.15rem; font-size:.95rem; }
.history-title { margin-top:1rem; }
.history-list { display:flex; flex-direction:column; }
.history-item {
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  padding:.72rem 0; border-bottom:1px solid var(--hub-border); font-size:.78rem;
}
.history-meta { color:var(--hub-muted); font-size:.68rem; margin-top:.18rem; }
.history-result.win { color:var(--hub-green); }
.history-result.loss { color:#f87171; }
.history-result.neutral { color:var(--hub-muted); }
.game-stats-list { display:flex; flex-direction:column; gap:.55rem; }
.game-stat-row {
  display:grid; grid-template-columns:1fr auto; gap:.5rem;
  padding:.6rem; border-radius:10px; background:var(--hub-soft); border:1px solid var(--hub-border);
}
.game-stat-name { font-weight:800; font-size:.76rem; }
.game-stat-meta { color:var(--hub-muted); font-size:.66rem; margin-top:.15rem; }

@media (max-width:1050px) {
  .hub-layout { grid-template-columns:1fr; }
  .sidebar-stack { position:static; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .profile-card { grid-column:span 3; }
  .history-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .hub-header { padding:.5rem .75rem; }
  .brand { font-size:.9rem; }
  .online-summary { display:none; }
  main { padding:1rem .75rem 2rem; }
  .hub-toolbar { align-items:flex-start; flex-direction:column; }
  .apps-grid { grid-template-columns:1fr; }
  .sidebar-stack { display:flex; }
  .history-stat-grid { grid-template-columns:repeat(2,1fr); }
  .xp-track.wide { width:160px; }
}