.topbar{min-height:68px;height:auto;padding:5px clamp(16px,4vw,56px);gap:14px;background:#07090df2;border-bottom:1px solid #ffffff0d;box-shadow:0 12px 40px #0004}
.top-nav{display:flex;align-items:stretch;justify-content:center;gap:8px}
.top-nav .nav-app-button{position:relative;min-width:68px;min-height:46px;padding:4px 7px;border:1px solid #272e38;border-radius:11px;background:linear-gradient(145deg,#151a21,#0d1117);color:#9ba4b1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9px;font-weight:700;letter-spacing:.1px;box-shadow:inset 0 1px #ffffff0b,0 7px 18px #0002;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease}
.top-nav .nav-app-button:hover{transform:translateY(-2px);border-color:#526026;color:#fff;background:linear-gradient(145deg,#1b221d,#10151b)}
.top-nav .nav-app-button.active{color:#0a0d08;border-color:#d8ff3e;background:linear-gradient(145deg,#e3ff75,#c8f52a);box-shadow:0 8px 24px #d8ff3e24,inset 0 1px #fff9}
.nav-icon{position:relative;width:19px;height:19px;display:grid;place-items:center}
.nav-icon svg,.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-label{line-height:1}
.nav-pro .nav-icon svg circle{fill:none}
.top-nav .badge{top:-5px;right:-8px;min-width:19px;height:19px;padding:0 5px;border:2px solid #11151b;box-sizing:content-box;font-size:10px}
.top-nav .active .badge{border-color:#d8ff3e}
.head-actions{align-items:center;gap:8px}
.head-actions .icon-btn,.head-actions .avatar{width:38px;height:38px;min-width:38px;border-radius:12px;border:1px solid #29313b;background:linear-gradient(145deg,#151a21,#0d1117);display:grid;place-items:center;color:#eef1f5;box-shadow:inset 0 1px #ffffff0d;transition:transform .18s ease,border-color .18s ease,color .18s ease}
.head-actions .icon-btn:hover{transform:translateY(-2px);border-color:#7b8f2b;color:var(--lime)}
.head-actions .avatar{border:0;border-radius:50%;background:var(--lime);color:#090c08;font-size:13px;box-shadow:0 0 0 4px #d8ff3e13}
.notification-btn .notice-dot{top:-4px;right:-4px;border:2px solid #07090d}
.top-subscribe{display:flex;align-items:center;justify-content:center;min-width:52px;min-height:42px;padding:6px 10px;border:1px solid #d8ff3e55;border-radius:14px;background:linear-gradient(145deg,#1b2414,#0f1512);color:#fff;box-shadow:0 7px 20px #0005}.top-subscribe span{display:grid;place-items:center;min-width:34px;height:26px;padding:0 7px;border-radius:8px;background:var(--lime);color:#080b08;font-size:10px;font-weight:900;letter-spacing:.7px}
@media(max-width:1120px){.topbar{gap:10px;padding-inline:14px}.brand>span:last-child{display:none}.top-nav .nav-app-button{min-width:78px;padding-inline:9px}.head-actions .search-button{display:none}}
@media(max-width:760px){.topbar{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand actions" "nav nav";padding:5px 9px 7px;gap:5px;background:#07090df7}.brand{grid-area:brand;justify-self:start}.head-actions{grid-area:actions}.head-actions .avatar{display:none}.head-actions .icon-btn{width:35px;height:35px;min-width:35px;border-radius:11px}.top-nav{grid-area:nav;width:100%;gap:4px}.top-nav .nav-app-button{flex:1;min-width:0;min-height:43px;padding:3px 2px;border-radius:10px;font-size:8px}.nav-icon{width:18px;height:18px}.nav-icon svg{width:16px;height:16px}.nav-label{max-width:100%;overflow:hidden;text-overflow:ellipsis}.top-nav .badge{top:-7px;right:-9px}.brandmark{width:31px;height:31px}}
@media(max-width:390px){.top-nav .nav-app-button{font-size:9px}.head-actions{gap:5px}.head-actions .icon-btn{width:40px;height:40px;min-width:40px}}