/* Server navigation: compact custom menu, separate from the installation flow. */
.menu-icon{width:21px;height:21px;min-width:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body #app #nav button{display:flex;align-items:center;gap:12px}
body #app #nav button[hidden]{display:none}
.rail-brand{width:34px;height:34px;object-fit:contain;margin:0 0 6px}
body #app .guild-search{display:flex;flex-direction:row;align-items:center;gap:8px;margin:3px 3px 12px;padding:8px 10px;background:#13212b;border:1px solid #344c5e;border-radius:8px;color:#a9c7df}
body #app .guild-search input{min-width:0;width:100%;padding:0;border:0;background:transparent;box-shadow:none;color:#e5eef5;font-size:12px;outline:none}
body #app .guild-search:focus-within{outline:2px solid #a9c7df;outline-offset:1px}
body #app .guild-search .menu-icon{width:16px;height:16px;min-width:16px}
body #app .guild-options .guild-group-heading{font-size:12px;min-height:36px;color:#b4d7f4;gap:8px;padding:8px 6px}
.guild-group-heading>span:first-of-type{flex:1}.guild-group-heading .menu-icon{width:16px;height:16px;min-width:16px}
.guild-group{margin-bottom:8px}
body #app .guild-item{display:flex;align-items:center;border-radius:8px;padding-right:3px}
body #app .guild-item.is-selected{background:var(--surface-high)}
body #app .guild-options .guild-option{flex:1;min-width:0;gap:8px;padding:9px 6px}
body #app .guild-options .guild-favorite{width:24px;min-height:30px;flex:0 0 24px;padding:3px;color:#a9c7df}
.guild-favorite .menu-icon{width:16px;height:16px;min-width:16px}
.guild-favorite[aria-pressed=true] .menu-icon{fill:currentColor}
.guild-title{display:block;font-size:12px;font-weight:650;line-height:1.5}
.guild-name small,.guild-add small{display:block;font-size:10px;font-weight:400;color:#bad1e2;line-height:1.5;margin-top:3px}
.guild-check{color:#b4d7f4;font-size:14px}
body #app:not([hidden]){grid-template-columns:72px 236px minmax(0,1fr)}
body #app>.server-rail{position:sticky;top:0;height:100dvh;min-height:0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 8px 16px;background:#0e151b;border-right:1px solid #2b3944;z-index:65}
body #app>aside{position:sticky!important;top:0!important;height:100dvh;min-height:0;min-width:0;z-index:70}
body #app>aside #nav{min-height:0;overflow-y:auto;flex:1}
body #app>main{grid-column:3;min-width:0}
body #app>main::before,body #app>main::after{left:308px}
.rail-servers{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;flex:0 1 auto;padding:3px 0}
body #app .rail-button{position:relative;display:grid;place-items:center;width:48px;height:48px;min-height:48px;flex-shrink:0;padding:0;border:1px solid #30424f;border-radius:17px;background:#1b2b37;color:#a9c7df;cursor:pointer;font-size:23px;line-height:1;transition:border-radius .15s,background .15s}
body #app .rail-button>img{width:29px;height:29px;object-fit:contain}
body #app .rail-button .server-icon{width:44px;height:44px;flex-basis:44px;border-radius:15px;background:transparent;color:inherit;font-size:20px;font-weight:700}
body #app .rail-button:hover,body #app .rail-button.is-active{background:#29485e;border-color:#53768e;border-radius:13px;color:#e2edf5}
body #app .rail-button.is-active::before{content:'';position:absolute;left:-7px;top:9px;width:3px;height:28px;border-radius:4px;background:#a9c7df}
body #app .rail-button:focus-visible{outline:2px solid #a9c7df;outline-offset:2px}
body #app .rail-button:disabled{opacity:.4;cursor:default}
body #app .rail-add{font-size:32px;font-weight:300}
.rail-divider{width:30px;height:1px;min-height:1px;background:#2b3944}
.rail-bottom{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:12px}
body #app .rail-bottom .rail-button{width:38px;height:38px;min-height:38px;border-radius:50%;font-size:21px}
@media(max-width:1100px) and (min-width:761px){body #app:not([hidden]){grid-template-columns:64px 220px minmax(0,1fr)}body #app>main::before,body #app>main::after{left:284px}}
@media(max-width:760px){body #app:not([hidden]){grid-template-columns:60px minmax(0,1fr);align-items:start}body #app>.server-rail{grid-column:1;grid-row:1 / span 2;padding:16px 5px;position:sticky}body #app>aside{grid-column:2;grid-row:1;position:relative!important;height:auto;min-height:0}body #app>aside #nav{max-height:260px;flex:none}body #app>main{grid-column:2;grid-row:2}body #app>main::before,body #app>main::after{left:60px}body #app .rail-button{width:44px;height:44px;min-height:44px}body #app .rail-button .server-icon{width:40px;height:40px}body #app .rail-button.is-active::before{left:-5px}}
@media(prefers-reduced-motion:reduce){body #app .rail-button{transition:none}}
body #app .guild-picker{position:relative;margin:12px 16px 8px;letter-spacing:0}
body #app .guild-picker summary{display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 12px;border:1px solid #2b404f;border-radius:10px;list-style:none;transition:border-color .15s,box-shadow .15s;font-size:14px;font-weight:650}
.guild-picker summary::-webkit-details-marker{display:none}
body #app .guild-picker summary:focus-visible{outline:2px solid #a9c7df;outline-offset:1px}
body #app .guild-picker .server-icon{width:26px;height:26px;flex-basis:26px;border-radius:50%;font-size:12px}
body #app .guild-name{flex:1;min-width:0;text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.guild-chevron{font-size:20px;transition:transform .15s;flex:0 0 auto}
.guild-picker[open] .guild-chevron{transform:rotate(180deg)}
body #app .guild-options{position:absolute;z-index:60;top:calc(100% + 7px);left:0;right:auto;width:max(100%,300px);max-width:calc(100vw - 96px);padding:7px;max-height:none;overflow:visible;border:1px solid #2b404f;border-radius:10px;}
.guild-option-rows{max-height:min(320px,42dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
body #app .guild-options button{display:flex;align-items:center;gap:11px;width:100%;min-height:46px;padding:9px 10px;border:0;border-radius:8px;text-align:left;font-size:13px;font-weight:600;white-space:normal;line-height:1.5;letter-spacing:0}
body #app .guild-options .is-selected{background:var(--surface-high)}
body #app .guild-options button:focus-visible{outline:2px solid #a9c7df;outline-offset:-2px;}
body #app .guild-options .guild-add{margin-top:7px;padding-top:13px;padding-bottom:12px;border-top:1px solid var(--line);border-radius:0 0 7px 7px;}
.guild-add-icon{display:grid;place-items:center;border:1.5px solid currentColor;width:20px;height:20px;flex:0 0 20px;border-radius:50%;font-size:18px;font-weight:400;line-height:1}
.guild-empty{padding:10px;font-size:12px;line-height:1.6;margin:0}
.server-dialog{width:min(680px,94vw);padding:24px;border:1px solid #405c70;border-radius:18px;}
.server-dialog::backdrop{backdrop-filter:blur(4px)}
.server-dialog-head{margin-bottom:20px}.server-dialog-head h2{font-size:22px;letter-spacing:-.4px}
.server-dialog .server-search{width:100%;margin:14px 0 4px;padding:12px 14px;border:1px solid #405c70;border-radius:10px;font-size:14px}
.server-dialog .server-search:focus-visible{outline:2px solid #a9c7df;outline-offset:2px}
.server-dialog .server-list{gap:10px;margin:12px 0 20px}
.server-dialog .server-entry{align-items:center;grid-template-columns:40px minmax(0,1fr) auto;padding:16px;border:1px solid #405c70;border-radius:12px;gap:12px}
.server-dialog .server-entry[hidden]{display:none}
.server-dialog .server-icon{width:40px;height:40px;flex-basis:40px;border-radius:50%;}
.server-dialog .server-entry p{margin:4px 0 0;font-size:12px}
.server-dialog button,.server-dialog a{min-height:38px;border-radius:8px;font-weight:600}
.server-dialog button:focus-visible,.server-dialog a:focus-visible{outline:2px solid #a9c7df;outline-offset:2px}
@media(max-width:640px){.server-dialog{padding:18px}.server-dialog .server-entry{grid-template-columns:40px minmax(0,1fr)}.server-dialog .server-entry-actions{grid-column:2}.guild-option-rows{max-height:32dvh}}
@media(prefers-reduced-motion:reduce){.guild-chevron,body #app .guild-picker summary{transition:none}}

/* The installation browser lives in the sidebar, without a modal backdrop. */
body #app>aside .server-browser{position:absolute;left:16px;right:auto;margin:0;width:320px;max-width:calc(100vw - 96px);padding:12px;overflow-y:auto;overscroll-behavior:contain;z-index:90;border:1px solid #405c70;border-radius:12px;background:#111c24;color:#edf3f7;box-shadow:0 15px 30px #0008;scrollbar-width:thin}
.server-browser .server-dialog-head{margin:0 0 4px;gap:8px}
.server-browser .server-dialog-head h2{font-size:14px;letter-spacing:0}
.server-browser .server-dialog-head button{min-height:28px;padding:3px 7px;font-size:10px}
.server-browser .server-browser-account{font-size:11px;color:#bad1e2;margin:4px 0 8px}
.server-browser .server-search{margin:4px 0 8px;min-height:36px;padding:9px 10px;font-size:12px}
.server-browser .server-list{display:block;margin:0 0 8px}
.server-browser .server-browser-group{margin:8px 0;border:0}
.server-browser .server-browser-group>summary{cursor:pointer;color:#b4d7f4;font-size:12px;font-weight:650;padding:8px 3px;list-style:none;display:flex;justify-content:space-between}
.server-browser .server-browser-group>summary::after{content:'⌄'}
.server-browser .server-browser-group[open]>summary::after{content:'⌃'}
.server-browser .server-entry{grid-template-columns:32px minmax(0,1fr);padding:10px 6px;margin:3px 0;border:0;border-radius:8px;gap:8px}
.server-browser .server-entry:hover{background:#203544}
.server-browser .server-icon{height:32px;width:32px;flex-basis:32px}
.server-browser .server-entry h3{font-size:12px;line-height:1.5}
.server-browser .server-entry p{font-size:10px;line-height:1.5;margin:2px 0 0}
.server-browser .server-entry-actions{grid-column:2;flex-direction:row;flex-wrap:wrap;max-width:none;gap:6px}
.server-browser .server-entry-actions button,.server-browser .server-entry-actions a{min-height:26px;font-size:10px;padding:4px 7px}
.server-browser .server-entry-actions button[hidden],.server-browser [hidden]{display:none}
.server-browser .server-browser-help{font-size:11px;color:#bad1e2;margin:10px 0}
.server-browser .server-browser-help summary{cursor:pointer}
.server-browser .server-browser-help p{font-size:11px}
.server-browser>div>button{font-size:11px;padding:5px 8px;min-height:30px}
.server-browser :focus-visible{outline:2px solid #a9c7df;outline-offset:1px}


/* Match the dashboard surfaces and keep keyboard focus distinct from open state. */
body #app .guild-picker summary:hover,body #app .guild-picker[open] summary{background:var(--surface-low);border-color:var(--primary-border)}
body #app .guild-search{background:var(--surface-low);border-radius:7px}
body #app .guild-options button:hover,body #app .guild-options button:focus-visible{background:var(--surface-high)}
body #app .guild-empty,body #app .guild-name small,body #app .guild-add small{color:var(--muted)}
body #app>aside .server-browser{background:var(--panel);border-color:#2b404f;border-radius:10px}