:root {
  --hub-bg:#050b14;
  --hub-bg-2:#08111f;
  --hub-panel:rgba(13,24,42,.78);
  --hub-panel-strong:rgba(16,30,52,.94);
  --hub-border:rgba(148,163,184,.13);
  --hub-border-bright:rgba(83,213,255,.24);
  --hub-text:#f7fbff;
  --hub-muted:#8291a8;
  --hub-accent:#24d7ff;
  --hub-accent-2:#7c5cff;
  --hub-good:#36e58d;
  --hub-warn:#ffb84d;
  --hub-danger:#ff6687;
}

.creatorHubMenuButton{position:relative;overflow:hidden}
.creatorHubMenuButton::after{content:"V2";position:absolute;top:5px;right:6px;font-size:8px;font-weight:900;padding:2px 5px;border-radius:999px;background:linear-gradient(135deg,var(--hub-accent),var(--hub-accent-2));color:#fff;box-shadow:0 0 14px rgba(36,215,255,.35)}

.creatorHubPanel{position:fixed;inset:0 0 0 88px;z-index:50;display:flex;min-width:0;color:var(--hub-text);font-family:Inter,"Segoe UI",Arial,sans-serif;background:
radial-gradient(900px 500px at 15% -5%,rgba(36,215,255,.095),transparent 58%),
radial-gradient(800px 520px at 92% 0%,rgba(124,92,255,.10),transparent 62%),
linear-gradient(155deg,var(--hub-bg-2),var(--hub-bg) 56%)}
.creatorHubPanel::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:34px 34px}

.creatorHubSidebar{position:relative;z-index:2;width:236px;flex:0 0 236px;padding:18px 12px 22px;border-right:1px solid var(--hub-border);background:rgba(4,9,17,.66);backdrop-filter:blur(22px);overflow-y:auto}
.creatorHubBrand{display:flex;gap:11px;align-items:center;padding:2px 7px 18px}
.creatorHubBrand strong,.creatorHubBrand small{display:block}.creatorHubBrand strong{font-size:15px;letter-spacing:.01em}.creatorHubBrand small{color:var(--hub-muted);margin-top:3px;font-size:11px}
.creatorHubLogo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;font-weight:900;background:linear-gradient(135deg,#31dcff,#7555ff);box-shadow:0 8px 30px rgba(36,215,255,.18),inset 0 1px rgba(255,255,255,.22)}
.hubNavGroup{margin:8px 0 16px}.hubNavLabel{display:block;padding:0 10px 7px;color:#536379;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.creatorHubTab{position:relative;width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;margin:2px 0;border:1px solid transparent;border-radius:11px;text-align:left;color:#aab7c9;background:transparent;cursor:pointer;font-size:13px;font-weight:650;transition:.18s ease}
.creatorHubTab .hubTabIcon{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(255,255,255,.035);font-size:13px;transition:.18s ease}
.creatorHubTab:hover{background:rgba(255,255,255,.045);color:#fff;transform:translateX(2px)}
.creatorHubTab.active{color:#fff;border-color:rgba(36,215,255,.14);background:linear-gradient(90deg,rgba(36,215,255,.115),rgba(124,92,255,.055))}
.creatorHubTab.active::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:5px;background:linear-gradient(var(--hub-accent),var(--hub-accent-2));box-shadow:0 0 16px rgba(36,215,255,.7)}
.creatorHubTab.active .hubTabIcon{background:linear-gradient(135deg,rgba(36,215,255,.17),rgba(124,92,255,.15));box-shadow:inset 0 0 0 1px rgba(36,215,255,.09)}
.hubSidebarFooter{margin-top:18px;padding:12px;border:1px solid var(--hub-border);border-radius:13px;background:rgba(255,255,255,.025)}
.hubSidebarFooter .hubTinyStatus{display:flex;align-items:center;gap:8px;font-size:11px;color:#a7b5c8}.hubTinyStatus+.hubTinyStatus{margin-top:8px}.hubTinyDot{width:7px;height:7px;border-radius:50%;background:#536379}.hubTinyDot.ok{background:var(--hub-good);box-shadow:0 0 12px rgba(54,229,141,.55)}

.creatorHubContent{position:relative;z-index:1;flex:1;min-width:0;overflow-y:auto;padding:23px 26px 50px}
.creatorHubHeader{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:19px}
.creatorHubHeader h2{margin:4px 0 0;font-size:27px;letter-spacing:-.025em}.creatorHubEyebrow{color:var(--hub-accent);font-size:9px;font-weight:900;letter-spacing:.19em}
.hubHeaderRight{display:flex;align-items:center;gap:10px}.creatorHubLiveState{display:flex;align-items:center;gap:9px;color:#c8d3e2;border:1px solid var(--hub-border);border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.025);font-size:12px}
#creatorHubLiveDot{width:8px;height:8px;border-radius:50%;background:#526177;box-shadow:0 0 0 4px rgba(82,97,119,.12)}#creatorHubLiveDot.active{background:var(--hub-good);box-shadow:0 0 0 4px rgba(54,229,141,.10),0 0 17px rgba(54,229,141,.6)}
.hubHeaderProfile{display:flex;align-items:center;gap:9px;padding:7px 9px 7px 8px;border:1px solid var(--hub-border);border-radius:12px;background:rgba(255,255,255,.025)}.hubHeaderAvatar{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,rgba(36,215,255,.19),rgba(124,92,255,.24));font-size:12px}.hubHeaderProfile strong,.hubHeaderProfile small{display:block}.hubHeaderProfile strong{font-size:11px}.hubHeaderProfile small{font-size:9px;color:var(--hub-muted);margin-top:1px}

.creatorHubPage{display:none}.creatorHubPage.active{display:block;animation:hubFade .22s ease}@keyframes hubFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.creatorHubMetrics{display:grid;grid-template-columns:repeat(6,minmax(116px,1fr));gap:10px;margin-bottom:12px}
.creatorMetric,.creatorHubCard,.creatorFeature,.creatorHubAnalytics article{border:1px solid var(--hub-border);background:linear-gradient(180deg,rgba(18,34,57,.77),rgba(10,20,35,.85));box-shadow:0 16px 42px rgba(0,0,0,.17);backdrop-filter:blur(12px)}
.creatorMetric{position:relative;overflow:hidden;padding:14px 14px 13px;border-radius:14px;min-width:0;transition:.18s ease}.creatorMetric:hover{transform:translateY(-2px);border-color:rgba(36,215,255,.22)}.creatorMetric::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--metric-color,var(--hub-accent)),transparent);opacity:.65}
.metricTop{display:flex;align-items:center;justify-content:space-between}.metricLabel{display:flex;align-items:center;gap:7px;color:#b6c4d7;font-size:11px}.metricIcon{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:color-mix(in srgb,var(--metric-color,var(--hub-accent)) 13%,transparent);font-size:12px}.metricPulse{width:5px;height:5px;border-radius:50%;background:var(--metric-color,var(--hub-accent));box-shadow:0 0 10px var(--metric-color,var(--hub-accent));opacity:.65}.creatorMetric strong{display:block;font-size:23px;letter-spacing:-.03em;margin:10px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.creatorMetric small{color:var(--hub-muted);font-size:10px}

.creatorHubDashboardGrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);gap:12px}.creatorHubCard{border-radius:15px;padding:15px;min-height:205px}.creatorHubCardHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.creatorHubCardHead h3{display:flex;align-items:center;gap:8px;margin:0;font-size:13px}.creatorHubCardHead h3 .cardIcon{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:rgba(36,215,255,.08);font-size:12px}.creatorHubCardHead span{color:var(--hub-muted);font-size:10px}.hubChartLegend{display:flex;gap:13px;align-items:center;color:var(--hub-muted);font-size:9px}.hubChartLegend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;background:var(--hub-accent)}.hubChartLegend i.purple{background:var(--hub-accent-2)}

.hubActivityChart{position:relative;height:178px;padding:12px 2px 0;border-bottom:1px solid rgba(148,163,184,.11);overflow:hidden}.hubActivityChart::before{content:"";position:absolute;inset:10px 0 0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 39px,rgba(148,163,184,.055) 40px);pointer-events:none}.hubActivitySvg{position:absolute;inset:12px 0 0;width:100%;height:calc(100% - 12px);overflow:visible}.hubActivityArea{fill:url(#hubAreaGradient)}.hubActivityLine{fill:none;stroke:url(#hubLineGradient);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(36,215,255,.28))}.hubActivityDots circle{fill:#08111f;stroke:#38dcff;stroke-width:1.5}

.hubRanking{display:flex;flex-direction:column;gap:7px}.hubRankRow{position:relative;display:grid;grid-template-columns:28px 31px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 10px;border:1px solid transparent;border-radius:11px;background:rgba(255,255,255,.026);overflow:hidden;transition:.16s ease}.hubRankRow:hover{background:rgba(255,255,255,.045);border-color:rgba(36,215,255,.10)}.hubRankBadge{font-size:13px;font-weight:900;text-align:center}.hubRankAvatar{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,rgba(36,215,255,.13),rgba(124,92,255,.13));font-size:11px;font-weight:900;color:#dffaff}.hubRankIdentity{min-width:0;position:relative;z-index:2}.hubRankIdentity strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hubRankIdentity small{display:block;color:var(--hub-muted);font-size:8px;margin-top:2px}.hubRankValue{position:relative;z-index:2;color:#67e8f9;font-size:11px;font-weight:800;white-space:nowrap}.hubRankProgress{position:absolute;left:0;bottom:0;height:2px;background:linear-gradient(90deg,rgba(36,215,255,.85),rgba(124,92,255,.7));opacity:.58}.hubEmpty{color:var(--hub-muted);padding:28px 4px;text-align:center;font-size:11px}

.hubEventFeed{display:flex;flex-direction:column;gap:6px;max-height:226px;overflow:auto}.hubEventRow{display:grid;grid-template-columns:31px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px 9px;border-radius:10px;background:rgba(255,255,255,.025)}.hubEventIcon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,rgba(36,215,255,.08),rgba(124,92,255,.08));font-size:12px}.hubEventRow span:nth-child(2){font-size:10px;color:#d6e0ec}.hubEventRow small{color:var(--hub-muted);font-size:8px}

.hubSystemStrip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}.hubSystemItem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid var(--hub-border);border-radius:11px;background:rgba(255,255,255,.022)}.hubSystemItem span{display:flex;align-items:center;gap:7px;color:#9cabc0;font-size:10px}.hubSystemItem b{font-size:9px;color:#718299}.hubSystemDot{width:6px;height:6px;border-radius:50%;background:#536379}.hubSystemDot.ok{background:var(--hub-good);box-shadow:0 0 10px rgba(54,229,141,.45)}

.creatorHubIntro{margin:0 0 15px}.creatorHubIntro h3{font-size:22px;margin:0 0 6px}.creatorHubIntro p{margin:0;color:var(--hub-muted);font-size:12px}.creatorHubFeatureGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.creatorFeature{position:relative;padding:18px;border-radius:15px;overflow:hidden;transition:.18s ease}.creatorFeature::after{content:"";position:absolute;width:120px;height:120px;right:-45px;top:-45px;border-radius:50%;background:radial-gradient(circle,rgba(36,215,255,.08),transparent 70%);pointer-events:none}.creatorFeature:hover{transform:translateY(-2px);border-color:rgba(36,215,255,.18)}.creatorFeature>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,rgba(36,215,255,.10),rgba(124,92,255,.10));font-size:18px}.creatorFeature h3{margin:12px 0 6px;font-size:15px}.creatorFeature p{color:var(--hub-muted);min-height:33px;font-size:11px;line-height:1.45}.creatorFeature button,.creatorHubPrimary{border:1px solid rgba(36,215,255,.17);border-radius:9px;padding:8px 11px;background:linear-gradient(135deg,rgba(8,145,178,.72),rgba(124,58,237,.72));color:#fff;font-size:10px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(36,215,255,.08);transition:.15s ease}.creatorFeature button:hover,.creatorHubPrimary:hover{transform:translateY(-1px);filter:brightness(1.09)}.creatorFeature button:disabled{opacity:.38;cursor:not-allowed;transform:none}
.creatorHubAnalytics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:15px 0}.creatorHubAnalytics article{padding:16px;border-radius:13px}.creatorHubAnalytics span{color:var(--hub-muted);font-size:10px}.creatorHubAnalytics strong{display:block;font-size:25px;margin-top:7px}

@media(max-width:1280px){.creatorHubSidebar{width:212px;flex-basis:212px}.creatorHubMetrics{grid-template-columns:repeat(3,1fr)}.creatorHubDashboardGrid{grid-template-columns:1fr}.hubSystemStrip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.creatorHubPanel{inset:0}.creatorHubSidebar{width:66px;flex-basis:66px;padding:11px 7px}.creatorHubBrand>div:not(.creatorHubLogo),.hubNavLabel,.creatorHubTab span:not(.hubTabIcon),.hubSidebarFooter{display:none}.creatorHubTab{justify-content:center;padding:9px}.creatorHubTab.active::before{left:-7px}.creatorHubContent{padding:16px 12px 36px}.creatorHubMetrics,.creatorHubFeatureGrid,.creatorHubAnalytics{grid-template-columns:repeat(2,1fr)}.hubSystemStrip{grid-template-columns:1fr 1fr}.hubHeaderProfile{display:none}}