/* Compact HUB links: half-size icons alongside readable labels. */
#quick-panel{container-type:inline-size;container-name:hub}
#grid-cockpit #quick-panel .hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;height:auto;gap:6px;margin:0}
#grid-cockpit #quick-panel .quick-tile{display:flex;flex-direction:row;width:100%;aspect-ratio:auto;min-height:36px;min-width:0;height:auto;padding:7px 8px;gap:7px;justify-content:flex-start;align-items:center;font-size:12px;line-height:1.2}
#grid-cockpit #quick-panel .quick-tile>span{white-space:nowrap;overflow-wrap:normal;color:#b4e4ff;font-weight:700}
#grid-cockpit #quick-panel .quick-tile i{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;font-size:18px;line-height:1}
#grid-cockpit .grid-body.top-panels-aligned #quick-panel:not(.is-minimized):not(.is-maximized){height:auto;min-height:0;max-height:none}
#grid-cockpit .grid-body.top-panels-aligned #quick-panel:not(.is-minimized):not(.is-maximized)>.panel-body{flex:none}
@container hub (max-width:460px){#grid-cockpit #quick-panel .hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container hub (max-width:400px){#grid-cockpit #quick-panel .quick-tile{font-size:11px}#grid-cockpit #quick-panel .quick-tile i{width:16px;height:16px;flex-basis:16px;font-size:16px}}
@container hub (max-width:340px){#grid-cockpit #quick-panel .quick-tile{padding:7px 5px;gap:5px}#grid-cockpit #quick-panel .quick-tile i{width:15px;height:15px;flex-basis:15px;font-size:15px}}
#quick-panel .fa-file-lines{color:#60a5fa}
#quick-panel .fa-list-check{color:#49e5b5}
#quick-panel .fa-book{color:#8fcfff}
#quick-panel .fa-shield-halved{color:#e8c675}
#quick-panel .fa-photo-film{color:#ee7bff}
#quick-panel .fa-cubes{color:#c69bff}
#quick-panel .fa-folder-tree{color:#ffd166}
#quick-panel .fa-wand-magic-sparkles{color:#ff9a73}
#quick-panel .fa-coins{color:#89ecad}
#quick-panel .fa-steam{color:#b4d2ee}
#quick-panel .fa-server{color:#60b0ff}
#quick-panel .fa-paper-plane{color:#48ddcf}
@container hub (max-width:280px){#grid-cockpit #quick-panel .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Match realm names; center each icon and label together. */
#grid-cockpit #quick-panel .quick-tile{justify-content:center;font-family:Consolas,"Lucida Console","Courier New",monospace;font-size:10px;font-weight:400}
#grid-cockpit #quick-panel .quick-tile>span{font-weight:400;color:var(--text)}
@media(min-width:1500px){#grid-cockpit #quick-panel .quick-tile{font-size:11px}}
@media(max-width:700px){#grid-cockpit #quick-panel .quick-tile{font-size:12px}}