:root{--c-white: #ffffff;--c-white-soft: #f8f8f8;--c-white-mute: #f2f2f2;--c-black: #181818;--c-black-soft: #222222;--c-black-mute: #282828;--c-primary: #2c3e50;--c-primary-weak: #4f6a85;--sidebar-closed-width: 72px;--sidebar-open-width: 200px;--timing-bounce: cubic-bezier(.47, 1.64, .41, .8)}:root{--colorscheme-inverted: #000000;--background: var(--c-white);--background-soft: var(--c-white-soft);--background-mute: var(--c-white-mute);--c-heading: #000000;--fg-surface: #222222;--bg-surface: var(--background-mute);--bg-disabled: #333;--fg-disabled: #888;--bg-card: #ffffff;--fg-card: #333;--outline: #ddd;--bg-sidebar: #fafafa;--fg-sidebar: #333;--bg-header: #fff;--fg-header: #000;--bg-dropdown: #fff9;--bg-dropdown-hover: #eee;--color-link: #00f;--accent-one: #0b8;--color-secure: #3c7;--color-warn: #d53}:root[data-colorscheme=dark]{--colorscheme-inverted: #ffffff;--background: var(--c-black);--background-soft: var(--c-black-soft);--background-mute: var(--c-black-mute);--c-heading: #ffffff;--fg-surface: #dddddd;--bg-surface: var(--background-mute);--bg-disabled: #333;--fg-disabled: #888;--bg-card: #333;--fg-card: #ccc;--outline: #444;--bg-sidebar: #222;--fg-sidebar: #ccc;--bg-header: #272727;--fg-header: #ddd;--bg-dropdown: #1119;--bg-dropdown-hover: #333;--color-link: #88f;--accent-one: #0c9;--color-secure: #3f8;--color-warn: #f63}:root[data-colorscheme=dark] .primaryButton.secondary{--primary-button-fg: #ffffff;--primary-button-bg: #666666}*,*:before,*:after{box-sizing:border-box;margin:0}body{min-height:100vh;color:var(--c-surface);background:var(--background);line-height:1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:15px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.input-group>.input-box{box-shadow:none;background-color:transparent;border:none;position:relative;z-index:0}.input-box{--_input-fg: var(--input-fg, var(--fg-surface));--_input-bg: var(--input-bg, var(--bg-surface));margin-bottom:1rem;box-shadow:8px 8px 10px -6px #0000001a;color:var(--_input-fg);display:flex;flex-direction:column}.input-box:has(input:placeholder-shown)>label{opacity:0;transform:translateY(.5em)}.input-box label{-webkit-user-select:none;user-select:none;margin-left:.5rem;z-index:-1;transition:transform .3s,opacity .3s}.toggle-text-security{display:flex}.input-box input[type=text],.input-box input[type=password]{flex-grow:1;background-color:var(--_input-bg);color:var(--_input-fg);border:2px solid #0001;padding:.6rem;outline:none;font-size:1.2rem}.input-box input[type=text]::placeholder,.input-box input[type=password]::placeholder{color:var(--_input-placeholder-fg)}.input-box.error input{border-color:#dc3545}.input-box>.error{color:#dc3545;opacity:0;min-height:32px;transition:margin-top .2s,opacity .2s}.input-box>.error.show{margin-top:0;opacity:1}.input-box>.error>.feather{position:absolute;margin-top:5px;transform:scale(.5);font-size:.8em;transition:transform .2s}.input-box>.error.show>.feather{transform:none}.input-box>.error>.message{-webkit-user-select:none;user-select:none;margin-left:1rem;margin-top:.5em;z-index:-1;opacity:0;display:flex;flex-direction:row;align-items:center;gap:1em;transition:margin-left .3s}.input-box>.error.show>.message{margin-left:2rem;opacity:1}.toggle-text-security-btn{display:inline-flex;align-self:flex-end;position:relative;width:1.4rem;height:1.4rem;margin:auto 0 auto .5rem;-webkit-user-select:none;user-select:none;cursor:pointer;overflow:hidden}.toggle-text-security-btn .feather{width:100%;height:100%}*{margin:0;box-sizing:border-box}html{height:100%}body{position:relative;height:100%;font-family:sans-serif}.feather{width:2em;height:2em}@keyframes animation-pop-in{0%{transform:scale(0)}to{transform:scale(1)}}.animate-pop-in{animation:animation-pop-in .2s;animation-timing-function:var(--timing-bounce)}.monospace{font-family:monospace}@property --notifs-offset-top{syntax: "<length>"; initial-value: 10px; inherits: true;}@property --notifs-offset-right{syntax: "<length>"; initial-value: 10px; inherits: true;}@property --notifs-spacing{syntax: "<length>"; initial-value: 6px; inherits: true;}#app:has(.frame-content){--notifs-offset-top: 90px;--notifs-offset-right: 10px}.notifs-container{position:fixed;top:0;right:0;padding:var(--notifs-offset-top, 0) var(--notifs-offset-right, 0) 0 30px;width:100%;max-width:400px;max-height:100vh;overflow-y:auto;-webkit-user-select:none;user-select:none;z-index:20000;pointer-events:none;overflow-x:hidden;transition:padding .2s}.notifs-container:after{content:"";position:relative;min-height:200px;height:20vh;width:100%;display:block}.notif{background-color:var(--notif-bg, var(--surface20));color:var(--notif-fg, var(--onSurface));padding:1rem;border-radius:6px;margin-bottom:var(--notifs-spacing, 10px);pointer-events:auto;--notif-fg: #fff}.notif.error{--notif-bg: #dc3545;--notif-fg: #fff}.notif.info{--notif-bg: #0d6efd}.notif.warning{--notif-bg: #cd9b06}.notif.success{--notif-bg: #198754}:root[data-colorscheme=dark] .notif{--notif-fg: #fff}:root[data-colorscheme=dark] .notif.error{--notif-bg: #844;--notif-fg: #fcc}:root[data-colorscheme=dark] .notif.info{--notif-bg: #368;--notif-fg: #cef}:root[data-colorscheme=dark] .notif.warning{--notif-bg: #875;--notif-fg: #fed}:root[data-colorscheme=dark] .notif.success{--notif-bg: #464;--notif-fg: #dfd}#modal-overlay{z-index:15000;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none}#modal-overlay>.modal-background{position:absolute;top:0;left:0;right:0;bottom:0;transition:background-color .2s,backdrop-filter .2s}#modal-overlay:has(#modal-container *){pointer-events:all}#modal-overlay:has(#modal-container>:first-child:not(.modal-leave-active))>.modal-background{background-color:#0004;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#modal-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none;z-index:1}#modal-container>*{display:none;pointer-events:all}#modal-container>*:last-child{display:block}a{text-decoration:none;color:inherit}.sideNavBtn{position:relative;-webkit-user-select:none;user-select:none;margin-top:.5rem;padding:.4rem 0;color:#777;color:currentColor;text-align:center;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;overflow:hidden;transition:background-color .2s,color .1s}.sideNavBtn.router-link-exact-active,.sideNavBtn.selected{color:var(--accent-one)!important}.sideNavBtn:hover{background-color:#eee;color:#000}[data-colorscheme=dark] .sideNavBtn:hover{background-color:#333;color:#fff}.sideNavBtn:after{position:absolute;bottom:-.5rem;height:1px;background-color:var(--outline10);width:50%;left:25%;pointer-events:none}.sideNavBtnIcon{padding-top:.5rem;color:currentColor;flex-shrink:0;width:var(--sidebar-closed-width)}.sideNavBtnName{opacity:0;transform:translate(-1em);white-space:nowrap;transition:opacity .2s,transform .2s}.sidebar-open .sideNavBtnName{opacity:1;transform:none;transition:opacity .2s,transform .2s}#app:has(.app-frame){--small-spinner-color: var(--accent-one)}.app-frame{--sidebar-width: var(--sidebar-closed-width);display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:80px 1fr;grid-template-areas:"sidebar-header header" "sidebar main";position:relative;height:100vh;width:100%;-webkit-user-select:none;user-select:none;transition:grid-template-columns .2s}.sidebar-open .app-frame{--sidebar-width: var(--sidebar-open-width)}.toggle-sidebar{position:relative;top:50%;left:calc(var(--sidebar-closed-width) / 2);width:3em;height:3em;color:var(--fg-sidebar);transform:translate(-50%,-50%)}.toggle-sidebar>path{d:path("M9,4 l8,8 l-8,8");transition:d .2s}.sidebar-open .toggle-sidebar>path{d:path("M15,4 l-8,8 l8,8")}.app-frame>.sidebar-header{background-color:var(--bg-header);border-bottom:1px solid rgb(from var(--fg-sidebar) R G B / .2);grid-area:sidebar-header;cursor:pointer;-webkit-user-select:none;user-select:none}.app-frame>.sidebar{position:relative;background-color:var(--bg-sidebar);color:var(--fg-sidebar);border-right:1px solid rgb(from var(--fg-sidebar) R G B / .2);grid-area:sidebar;z-index:1000;display:flex;flex-direction:column;flex:0 0}.app-frame>header{background-color:var(--bg-header);color:var(--fg-header);grid-column-start:main-content;grid-area:header;z-index:1000;display:flex;align-items:center;justify-content:flex-start;border-bottom:1px solid rgb(from var(--fg-sidebar) R G B / .2)}.app-frame>.frame-content{padding:2rem;color:var(--fg-surface);grid-area:main;--shadow-size: 14px;box-shadow:inset var(--shadow-size) var(--shadow-size) var(--shadow-size) calc(-1 * var(--shadow-size)) #0000001a;-webkit-user-select:text;user-select:text;height:100%;overflow-y:auto;z-index:1}.app-frame>.frame-content a{color:var(--color-link)}.app-frame>.frame-content-particles{position:absolute;pointer-events:none;grid-area:main;width:100%;height:100%;background:linear-gradient(45deg,#dde,#eef,#f8eeee)}[data-colorscheme=dark] .app-frame>.frame-content-particles{background:linear-gradient(45deg,#202020,#202026,#262020)}.app-frame>.frame-content-particles>canvas{position:absolute;top:0;left:0;width:100%;height:100%}.toggle-color-scheme-btn{margin-top:auto;width:100%;height:var(--sidebar-closed-width);align-self:center;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative}.dropdown{position:relative}header>h1{margin-left:2rem}header>.header-container-right{margin-left:auto}header .user{padding:1rem;margin-right:4rem;min-width:200px}.user>.dropdown-activator{text-align:center;font-size:1.2em;padding:1rem;cursor:pointer;border-radius:10px;transition:background-color .2s}.user>.dropdown-activator:hover,.user:focus-within>.dropdown-activator{background-color:var(--bg-dropdown-hover)}.dropdown-section{position:absolute;top:100%;width:max-content;right:0;opacity:0;pointer-events:none;background-color:var(--bg-dropdown);padding:.5rem 0;border-radius:.5rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:opacity .2s,transform .2s}.dropdown:focus-within>.dropdown-section{opacity:1;pointer-events:all;transform:translateY(20px)}.dropdown-section>.dropdown-link{padding:.5rem 2rem;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background-color .2s}.dropdown-section>.dropdown-link:hover{padding:.5rem 2rem;background-color:#0001}main{padding-top:3rem;display:flex;flex-direction:column;max-width:1800px;margin:0 auto;--grid-gap: 2rem;gap:var(--grid-gap);overflow-x:hidden}.card-row{display:flex;flex-direction:row;align-items:stretch;gap:var(--grid-gap)}.card-row>*{flex-grow:1;flex-shrink:1;flex-basis:100%}.card{color:var(--fg-card);background-color:rgb(from var(--bg-card) R G B / .5);padding:1rem;border-radius:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--outline)}.status-dot:before{content:"";position:relative;display:inline-block;width:.6em;height:.6em;margin-right:.4em;border-radius:50%;background-color:var(--dot-color);box-shadow:0 0 20px 0 var(--shadow-color),0 0 4px 0 var(--shadow-color)}.status-dot{font-size:1.1em;position:relative;font-family:monospace;text-transform:uppercase;--dot-color: #fb0;--shadow-color: hsl(from var(--dot-color) H S calc(L + 20) );color:var(--dot-color);-webkit-user-select:none;user-select:none}[data-colorscheme=dark] .status-dot{--shadow-color: var(--dot-color)}.status-dot.online{--dot-color: #0c5}.status-dot.offline{--dot-color: #f44}.serverCard{flex-basis:max-content;flex-grow:0;cursor:pointer;-webkit-user-select:none;user-select:none}.serverCard:hover{border-color:var(--accent-one)}.servers-pie-chart>h3{font-size:.8em;text-align:center}.servers-pie-chart>div{width:100px;height:100px}.plusButton{position:relative;width:min-content;height:3em;background-color:#0c5;color:#fff;display:block;flex-shrink:0;flex-grow:1;flex-basis:unset;border-radius:1.5em;display:flex;align-items:center;gap:1em;padding:.5em 1em;white-space:nowrap;-webkit-user-select:none;user-select:none;font-weight:600;cursor:pointer}[data-colorscheme=dark] .plusButton{background-color:#384}.plusButton>svg{position:relative;stroke-width:3;transform:none;transition:transform .2s}.plusButton:hover>svg{transform:scale(1.2)}.dialog-modal{background-color:rgb(from var(--bg-surface) R G B / .9);padding:2rem;border-radius:6px;color:var(--fg-surface)}.dialog-modal .header{-webkit-user-select:none;user-select:none;font-size:1.8em;font-weight:300;margin-bottom:.6em}.dialog-modal .body{display:flex;flex-direction:column;align-items:stretch}.modal-leave-active,.modal-enter-active{transition:opacity .2s,transform .2s}.modal-enter-from{opacity:0;transform:translateY(40px)}.modal-enter-to{opacity:1;transform:none}.modal-leave-to{opacity:0;transform:translateY(40px)}.trashButton{background-color:var(--bg-surface);color:#f53;padding:.2em;font-size:1.2em;border-radius:6px;cursor:pointer;transition:background-color .2s,color .2s}.trashButton:hover{background-color:#f53;color:#fff}.primaryButton{--_primary-button-fg: var(--primary-button-fg, #fff);--_primary-button-bg: var(--primary-button-bg, var(--c-primary));--_primary-button-border: var(--primary-button-border, var(--_primary-button-bg));--_primary-button-disabled-fg: var(--primary-button-fg, var(--fg-disabled));--_primary-button-disabled-bg: var(--primary-button-disabled-bg, var(--bg-disabled));--_primary-button-hover-border: var(--primary-button-hover-border, var(--c-primary-weak));position:relative;-webkit-user-select:none;user-select:none;color:var(--_primary-button-fg);font-size:1.3em;padding:.8em 2em;text-align:center;cursor:pointer;z-index:1;transition:color .2s}.primaryButton.danger{--_primary-button-fg: var(--primary-button-fg, #fff);--_primary-button-bg: var(--primary-button-bg, #c20);--_primary-button-hover-border: var(--primary-button-hover-border, #800)}.primaryButton.secondary{--_primary-button-fg: var(--primary-button-fg, #fff);--_primary-button-bg: var(--primary-button-bg, #aaa);--_primary-button-hover-border: var(--primary-button-hover-border, #888)}.primaryButton.disabled{color:var(--_primary-button-disabled-fg);cursor:not-allowed}.primaryButton:before{content:"";position:absolute;box-sizing:border-box;top:50%;left:50%;width:100%;height:100%;background-color:var(--_primary-button-bg);border:4px solid var(--_primary-button-border);transform:translate(-50%,-50%);transition:background-color .2s,border-color .2s,transform .2s;border-radius:6px;z-index:-1}.primaryButton:not(.noTransform):before{transform:translate(-50%,-50%) scale(1)}.primaryButton:not(.noTransform).disabled:before{transform:translate(-50%,-50%) scale(.9)}.primaryButton:not(.noTransform):not(.disabled):hover:before{transform:translate(-50%,-50%) scale(1.1)}.primaryButton.disabled:before{background-color:var(--_primary-button-disabled-bg);border-color:var(--_primary-button-disabled-bg)}.primaryButton:not(.disabled):hover{border-color:var(--_primary-button-hover-border);z-index:2}.primaryButton:not(.disabled):hover:before{border-color:var(--_primary-button-hover-border)}@keyframes loadSpinnerAnim{0%{transform:translate(-50%,-50%) rotate(120deg)}50%{transform:translate(-50%,-50%) rotate(600deg)}to{transform:translate(-50%,-50%) rotate(1200deg)}}@keyframes spinner-scale-in{0%{transform:scale(0)}to{transform:scale(1)}}.small-spinner{--var-small-spinner-color: var(--small-spinner-color, var(--c-primary));--var-small-spinner-size: var(--small-spinner-size, 4em);--var-small-spinner-stroke-width: var( --small-spinner-stroke-width, calc(var(--var-small-spinner-size) / 11) );width:var(--var-small-spinner-size);height:var(--var-small-spinner-size);position:relative;transform:scale(0);transition:transform .2s}.small-spinner.absolute{position:absolute}.small-spinner.active{transform:scale(1);width:var(--var-small-spinner-size);height:var(--var-small-spinner-size)}.small-spinner-container:has(>.active).spinner-animate-in{animation:spinner-scale-in .2s;animation-iteration-count:1}.small-spinner:before{content:"";animation:4s ease-in-out 0s infinite normal both running loadSpinnerAnim;pointer-events:none;position:absolute;aspect-ratio:1;display:block;width:var(--var-small-spinner-size);height:var(--var-small-spinner-size);top:calc(var(--var-small-spinner-size) / 2);left:calc(var(--var-small-spinner-size) / 2);border:var(--var-small-spinner-stroke-width) solid var(--var-small-spinner-color);border-top-color:transparent;border-bottom-color:transparent;border-radius:50%;box-sizing:border-box}.small-spinner:after{content:"";animation:2s ease-in-out .75s infinite reverse both running loadSpinnerAnim;pointer-events:none;position:absolute;aspect-ratio:1;display:block;width:60%;height:60%;top:50%;left:50%;border:var(--var-small-spinner-stroke-width) solid var(--var-small-spinner-color);border-top-color:transparent;border-bottom-color:transparent;border-radius:50%;box-sizing:border-box}.small-spinner>.spinner-background{opacity:.8;--var-small-spinner-background: var(--small-spinner-background, #fff);background:radial-gradient(50% 50% at 50% 50%,var(--var-small-spinner-background),rgb(from var(--var-small-spinner-background) r g b / .8) 60%,rgb(from var(--var-small-spinner-background) r g b / .13) 90%,#0000);width:calc(100% + 8 * var(--var-small-spinner-stroke-width));height:calc(100% + 8 * var(--var-small-spinner-stroke-width));top:calc(-4 * var(--var-small-spinner-stroke-width));left:calc(-4 * var(--var-small-spinner-stroke-width));position:absolute;z-index:-1;border-radius:50%}[data-colorscheme=dark] .small-spinner>.spinner-background{--var-small-spinner-background: var(--small-spinner-background, #000)}.input-container{display:flex;position:relative}.input-end{display:inline-flex;position:relative;overflow:hidden}.dns-entry-enter-active,.dns-entry-leave-active{transition:transform .2s,opacity .2s}.dns-entry-enter-from,.dns-entry-leave-to{opacity:0;transform:translate(50px)}.switch-input{width:3.5em;height:2em;--switch-fg: #fff;--switch-border: #ccc;--switch-bg: #888;border-radius:1em;position:relative;cursor:pointer}.switch-input.enabled{--switch-bg: #0af}.switch-input:before{content:"";position:absolute;top:.5em;left:.25em;width:3em;height:1em;border-radius:.5em;background-color:var(--switch-bg);transition:background-color .2s}.switch-input:after{width:2em;height:2em;border-radius:1em;content:"";position:absolute;top:0;left:0;background-color:var(--switch-fg);box-shadow:0 0 10px #0001;border:1px solid var(--switch-border);transform:none;transition:transform .2s}.switch-input.enabled:after{transform:translate(1.5em)}.ssl-status{display:flex;flex-direction:column;align-items:center}.ssl-status>h4,.ssl-status>h5{line-height:1em}.ssl-status>h4{margin-top:.3em}.dynamicDnsCard{position:relative;display:flex;align-items:center;white-space:nowrap;overflow:hidden;min-width:0}.dynamicDnsCard:before{opacity:0;position:absolute;content:"";width:100%;height:100%;top:0;left:0;transition:opacity .5s;pointer-events:none;background:radial-gradient(at bottom center,#fcc8,#f882,#f881,#f880)}[data-colorscheme=dark] .dynamicDnsCard:before{background:radial-gradient(at bottom center,#f008,#f002,#f001,#f000)}.dynamicDnsCard:has(.trashButton:hover):before{opacity:1}.refreshButton{display:flex;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer;transition:color .2s}.refreshButton:hover{color:#4ac;text-decoration:underline}.refreshButton>svg{transition:transform .2s}.refreshButton:hover>svg{transform:rotate(45deg)}.hostname-entry-enter-active,.hostname-entry-leave-active{transition:transform .2s,opacity .2s}.hostname-entry-enter-from,.hostname-entry-leave-to{opacity:0;transform:translate(50px)}