/* Copyright by www.meck-it.de */
.login-gate{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:18px;background:linear-gradient(135deg,#10283d 0%,#19475d 65%,#138f8c 100%)}
.login-gate[hidden]{display:none}
.login-card{width:min(420px,100%);background:#fff;border-radius:16px;padding:31px;box-shadow:0 25px 80px #05172566}
.login-card h2{font-family:Manrope,Arial,sans-serif;font-size:22px;letter-spacing:-.6px;margin:7px 0}
.login-card>p:not(.eyebrow):not(.login-error){font-size:12px;line-height:1.6;color:#728a99;margin:0 0 22px}
.login-card>label{display:block;font-size:11px;font-weight:700;margin:12px 0;color:#29485b}
.login-card input{display:block;width:100%;margin-top:5px;border:1px solid #d9e6ea;border-radius:7px;padding:10px;font-size:13px}
.login-card form label{display:block;font-size:11px;font-weight:700;margin:12px 0;color:#29485b}
.login-card form input{display:block;width:100%;margin-top:5px;border:1px solid #d9e6ea;border-radius:7px;padding:10px;font-size:13px}
.login-card #inviteQrSection{margin-top:14px;border-top:1px solid #e7eff2;padding-top:14px}
.login-card #inviteQrSection[hidden]{display:none}
.login-card #inviteQrSection>p{font-size:12px;line-height:1.5;color:#527686}
.login-card #inviteQr{display:block;margin:0 auto;max-width:100%;height:auto}
.login-card .primary-button{width:100%;margin:6px 0 14px}
.login-card>small{display:block;text-align:center;color:#8da4af;font-size:10px}
.login-error{color:#b63e3e;font-size:11px;min-height:15px}
.enrollment-result{padding:14px;background:#ecf9f6;border:1px solid #9edcd3;border-radius:8px;margin-top:14px}
.enrollment-result[hidden]{display:none}
.enrollment-result strong,.enrollment-result small{display:block;font-size:11px;color:#285365}
.enrollment-result code{display:block;overflow-wrap:anywhere;font-size:14px;background:#fff;padding:10px;border-radius:5px;margin:10px 0;color:#123846;user-select:all}
.site-list{list-style:none;padding:0;text-align:left;max-width:450px;margin:18px auto}
.site-list li{padding:10px 12px;border-bottom:1px solid #e7eff2;display:flex;justify-content:space-between;font-size:12px}
.site-list small{color:#8096a4}
#exportList li{flex-wrap:wrap;gap:6px}
#exportList li>div{width:100%}
#exportList li>div small{display:block;margin:4px 0}
.router-pages{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0}
.router-pages span{font-size:13px;color:#607887}
.site-form{max-width:450px;margin:auto;display:flex;gap:8px}
#deviceForm,#grantForm{max-width:760px;flex-wrap:wrap}
#routerLinksView{margin-top:20px}
#routerLinksView .generic-panel{max-width:900px;padding:40px 30px}
#routerLinksView .site-form{max-width:800px;flex-wrap:wrap;margin-bottom:14px}
#routerLinksView .site-form input,#routerLinksView .site-form select{flex:1 1 170px}
#deviceForm input,#deviceForm select,#grantForm input,#grantForm select{flex:1 1 135px}
.vpn-panel{text-align:left;max-width:1000px;padding:40px 30px}
.vpn-panel>p,.vpn-plan p{max-width:760px;margin:12px auto;line-height:1.6;color:#527686;font-size:12px}
.vpn-panel .vpn-warning{padding:12px 14px;border-radius:8px;background:#fff5df;color:#714d16;border:1px solid #f0d397}
.vpn-form{max-width:900px;flex-wrap:wrap}
.vpn-form input{flex:1 1 180px}
.vpn-panel .vpn-hint{font-size:11px}
.vpn-list{max-width:900px}
.vpn-list li{gap:18px;align-items:center}
.vpn-list li div:first-child{min-width:0;overflow-wrap:anywhere}
.vpn-list li strong,.vpn-list li small{display:block}
.vpn-list li div:last-child{display:flex;gap:10px;flex-wrap:wrap}
.vpn-plan{max-width:900px;margin:24px auto 0;padding:16px;border:1px solid #d9e6ea;border-radius:8px}
.vpn-plan[hidden]{display:none}
.vpn-plan pre{white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;background:#eef5f6;padding:14px;border-radius:7px;font-size:12px}
.site-form input,.site-form select{flex:1;border:1px solid #d9e6ea;border-radius:7px;padding:8px;font-size:12px;min-width:0}
.site-form button{flex:none}
.site-message{font-size:11px;color:#527686;min-height:16px}
#exportView .site-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px;gap:10px;margin-bottom:18px}
#exportView .site-form input{width:100%;box-sizing:border-box}
#exportForm #exportEndpoint,#mqttExportForm #mqttExportEndpoint,#exportView .site-form button{grid-column:1/-1}
#exportView .site-form button{justify-self:stretch}
.smtp-alert-section{max-width:760px;margin:28px auto 18px;padding:20px;border:1px solid #dce9ed;border-radius:10px;background:#f7fbfb;text-align:left}
.smtp-alert-section[hidden]{display:none}
.smtp-alert-section h3{margin-top:0}
.smtp-alert-section>p{line-height:1.5}
.smtp-alert-section #smtpAlertForm{max-width:none}
.smtp-alert-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.smtp-alert-actions button:disabled{opacity:.5;cursor:not-allowed}
.device-tabs{display:flex;gap:8px;max-width:900px;margin:0 auto 18px;padding:6px;border:1px solid #dce9ed;border-radius:11px;background:#fff;box-shadow:0 3px 15px #183d4b07}
.device-tabs[hidden]{display:none}
.device-tabs button{flex:1;min-width:0;border:0;border-radius:7px;background:transparent;color:#597383;padding:11px 14px;font-size:12px;font-weight:700}
.device-tabs button:hover{background:#eef8f7;color:#168f89}
.device-tabs button[aria-selected="true"]{background:#dff5f1;color:#087f79;box-shadow:inset 0 -2px #13b5a9}
@media(max-width:760px){.login-card{padding:22px}.site-form{flex-direction:column}#exportView .site-form{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1100px){.content-grid{grid-template-columns:minmax(0,1fr)}.content-grid>*{min-width:0}}
@media(max-width:760px){.side-column{grid-template-columns:minmax(0,1fr)}.panel{min-width:0}.device-tabs{overflow-x:auto}.device-tabs button{flex:0 0 auto;white-space:nowrap;padding:10px 12px}}