.server-storage{position:relative;flex:none;width:210px;margin-right:16px;letter-spacing:0;color:var(--green);font-variant-numeric:tabular-nums}
.topbar:has(.server-storage) .account>strong{white-space:nowrap;flex-shrink:0}
.server-storage summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;min-height:40px;border-radius:4px;padding:3px 5px}
.server-storage summary::-webkit-details-marker{display:none}
.server-storage summary:hover{background:var(--green-bg)}
.server-storage summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.server-storage summary>svg{width:19px;height:19px;flex:none}
.server-storage summary span{display:grid;gap:2px}
.server-storage summary small{font-size:11px;color:var(--muted)}
.server-storage summary strong{font-size:12px;line-height:1.4;font-weight:600;white-space:nowrap}
.server-storage[data-level="warning"]{color:#9a5b08}
.server-storage[data-level="critical"]{color:#b42318}
.server-storage[data-level="unknown"]{color:var(--muted)}
.storage-popover{position:absolute;right:0;top:calc(100% + 8px);width:270px;padding:16px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 20px #183a2618;z-index:30;line-height:1.5}
.storage-popover header{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.storage-popover .icon-btn{width:30px;height:30px;min-height:30px}
.storage-popover .storage-status{font-size:12px;margin:9px 0;color:var(--green)}
.server-storage[data-level="warning"] .storage-status{color:#9a5b08}
.server-storage[data-level="critical"] .storage-status{color:#b42318}
.storage-popover dl{display:grid;grid-template-columns:1fr auto;gap:10px;margin:14px 0;font-size:13px}
.storage-popover dt,.storage-popover>small{color:var(--muted)}
.storage-popover dd{margin:0;font-weight:600}
.storage-popover>small{font-size:11px}
@media(max-width:1100px){.server-storage{width:198px;margin-right:8px}}
@media(min-width:701px) and (max-width:960px){.topbar:has(.server-storage){padding:0 16px}}
@media(min-width:701px) and (max-width:800px){.topbar:has(.server-storage) .account>.avatar{display:none}}
@media(max-width:700px){.topbar:has(.server-storage)>.mobile-brand{flex:1 0 100%}.topbar:has(.server-storage)>.account{width:100%;min-width:0}.server-storage{width:198px;margin-right:auto}.storage-popover{left:0;right:auto;width:min(270px,calc(100vw - 32px))}}
@media(max-width:380px){.topbar:has(.server-storage) .account>.avatar{display:none}.server-storage{width:190px;margin-right:4px}}