:root{--ease-smooth: cubic-bezier(.4, 0, .2, 1);--header-height: 80px;--header-top: 2rem}.header-fixed{position:fixed;top:var(--header-top);left:0;right:0;z-index:10000;display:flex;justify-content:center;align-items:center;padding:1rem;height:var(--header-height);pointer-events:none}.header-fixed>*{pointer-events:auto}.dynamic-island{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:linear-gradient(135deg,#ffffff1f,#ffffff0f);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.22);border-radius:1.5rem;padding:.75rem 1.5rem;box-shadow:0 8px 32px #0000001f,inset 0 1px #ffffff40;text-decoration:none;max-width:48rem;width:100%;transition:background .15s var(--ease-smooth),box-shadow .15s var(--ease-smooth),transform .15s var(--ease-smooth),border-color .15s var(--ease-smooth);outline:none}.dynamic-island:hover{background:linear-gradient(135deg,#ffffff29,#ffffff17);box-shadow:0 12px 48px #00000029,inset 0 1px #ffffff4d;transform:scale(1.01);border-color:#ffffff47}.island-content{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0;transition:all .2s var(--ease-smooth)}.island-content:hover{opacity:.8}.icon-logo{flex-shrink:0;width:2rem;height:2rem;-o-object-fit:contain;object-fit:contain;transition:all .2s var(--ease-smooth);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.island-content:hover .icon-logo{transform:scale(1.1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.island-title{font-weight:600;letter-spacing:-.025em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.island-utilities{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.utility-item{position:relative;width:2.5rem;height:2.5rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:.75rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:#fff;font-size:1.2rem;cursor:default}.utility-item:hover{background:#ffffff26;transform:scale(1.05)}.utility-clickable{cursor:pointer!important}.utility-clickable:hover{background:#fff3!important;transform:scale(1.08)!important}.desktop-only{display:flex}.mobile-only{display:none}.online .connection-icon{color:#10b981}.offline{background:#ef444426!important;border-color:#ef44444d!important}.offline .connection-icon{color:#ef4444}.connection-text{position:absolute;bottom:-24px;left:50%;transform:translate(-50%);font-size:.65rem;color:#ef4444;background:#000c;padding:.2rem .4rem;border-radius:.25rem;white-space:nowrap;font-weight:600}.ping-popup{position:fixed;inset:0;z-index:9999;pointer-events:none;display:none;visibility:hidden;opacity:0;background:transparent;transition:opacity .2s ease,background .2s ease,visibility 0s linear .2s}.ping-popup.popup-visible{display:block;visibility:visible;pointer-events:auto;opacity:1;background:#0000004d;transition:opacity .2s ease,background .2s ease,visibility 0s linear 0s}.ping-popup-content{position:absolute;width:320px;max-width:calc(100vw - 2rem);background:linear-gradient(135deg,#181a1efa,#23242bfa);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border:1px solid rgba(255,255,255,.15);border-radius:1rem;box-shadow:0 20px 60px #0006,0 8px 32px #0000004d,inset 0 1px #ffffff1a;opacity:0;transform:translateY(-10px) scale(.95);transition:all .2s cubic-bezier(.4,0,.2,1);pointer-events:all;max-height:calc(100vh - 4rem);overflow-y:auto;-webkit-overflow-scrolling:touch}.ping-popup-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}.ping-popup-header h4{color:#fff;font-size:1rem;font-weight:600;margin:0}.close-popup-btn{background:transparent;border:none;color:#fff9;cursor:pointer;padding:.25rem;border-radius:.25rem;transition:all .2s ease;font-size:1rem}.close-popup-btn:hover{color:#fff;background:#ffffff1a}.ping-popup-body{padding:1.25rem}.ping-status{margin-bottom:1rem}.ping-indicator{display:flex;align-items:center;gap:.75rem}.ping-dot{width:12px;height:12px;border-radius:50%;background:#10b981;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.ping-details{margin-bottom:1.5rem}.ping-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.ping-row:last-child{border-bottom:none}.ping-label{color:#ffffffb3;font-size:.875rem}.ping-value{color:#fff;font-weight:600;font-size:.875rem}.ping-history h5{color:#fff;font-size:.875rem;font-weight:600;margin:0 0 .75rem}.ping-chart{height:60px;background:#ffffff0d;border-radius:.5rem;padding:.5rem;position:relative}.ping-bars{display:flex;align-items:end;height:100%;gap:4px}.ping-bar{flex:1;background:linear-gradient(to top,#10b981,#34d399);border-radius:2px;min-height:8px;transition:all .3s ease;position:relative}.ping-bar[data-quality=excellent]{background:linear-gradient(to top,#10b981,#34d399)}.ping-bar[data-quality=good]{background:linear-gradient(to top,#f59e0b,#fbbf24)}.ping-bar[data-quality=fair]{background:linear-gradient(to top,#f97316,#fb923c)}.ping-bar[data-quality=slow]{background:linear-gradient(to top,#ef4444,#f87171)}.ping-bar[data-quality=very-slow]{background:linear-gradient(to top,#dc2626,#ef4444)}.battery-indicator.battery-low{background:#ef444433!important;border-color:#ef44444d!important}.battery-icon{font-size:1.1rem}#live-clock{width:auto;min-width:2.5rem;padding:0 .5rem;gap:.25rem}#live-clock .fas{font-size:1rem}.clock-time{font-size:.75rem;font-weight:600;white-space:nowrap}.island-slot{display:flex;gap:.5rem;align-items:center;flex-shrink:0}body{padding-top:calc(var(--header-top) + var(--header-height) + 1rem)}@media (max-width: 768px){:root{--header-height: 70px;--header-top: 1rem}.dynamic-island{padding:.5rem 1rem}.desktop-only{display:none!important}.mobile-only{display:flex!important}.ping-popup-content{width:calc(100vw - 2rem);max-width:340px;left:50%!important;top:50%!important;transform:translate(-50%,-50%) scale(.95)!important}.ping-popup-content[style*="opacity: 1"]{transform:translate(-50%,-50%) scale(1)!important}.ping-popup-header,.ping-popup-body{padding:1rem}.ping-popup-header h4{font-size:.95rem}.utility-item{width:2.4rem;height:2.4rem;font-size:1.15rem}.island-utilities{gap:.4rem}}@media (max-width: 480px){.dynamic-island{padding:.5rem .75rem;gap:.5rem}.ping-popup-content{width:calc(100vw - 1.5rem);max-width:300px}.ping-popup-header,.ping-popup-body{padding:.875rem}.clock-time{display:none}.utility-item{width:2.2rem;height:2.2rem;font-size:1.05rem}.ping-row{padding:.4rem 0}.ping-label,.ping-value{font-size:.8rem}}