:root {
    font-family:Inter,system-ui,Segoe UI,sans-serif;
    color:#e7edf9;
    background:#0b1220
}

* {
    box-sizing:border-box
}

body {
    margin:0
}

header {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:22px max(24px,calc((100vw - 1080px)/2));
    background:#131f34;
    border-bottom:1px solid #30415c
}

header span {
    color:#9badc7
}

main {
    max-width:1080px;
    margin:32px auto;
    padding:0 20px
}

h1 {
    font-size:28px;
    margin:0 0 10px
}

h2 {
    font-size:18px;
    margin:0 0 18px
}

p {
    color:#9badc7
}

.panel,section#login,section#setup,section#setupOtp,section#loginOtp {
    background:#17243a;
    border:1px solid #2e405c;
    border-radius:15px;
    padding:24px;
    margin-bottom:22px
}

section#login,section#setup,section#setupOtp,section#loginOtp {
    max-width:520px;
    margin:70px auto
}

.heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px
}

.grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:end;
    gap:12px
}

label {
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:13px;
    color:#a9bad4;
    margin-bottom:14px
}

input,select {
    background:#0d1829;
    border:1px solid #3c5273;
    border-radius:8px;
    padding:12px;
    color:white;
    min-width:0;
    width:100%;
    font-size:15px
}

button {
    background:#3569ee;
    color:white;
    border:0;
    border-radius:8px;
    padding:12px 17px;
    cursor:pointer;
    font-weight:600
}

button:hover {
    filter:brightness(1.14)
}

button:disabled {
    opacity:.6;
    cursor:wait
}

#totpQr {
    max-width:100%;
    width:320px;
    height:auto;
    image-rendering:pixelated
}

button.outline {
    background:transparent;
    border:1px solid #56729c
}

.grid label {
    margin:0
}

.license {
    border:1px solid #354762;
    border-radius:10px;
    padding:15px;
    margin:12px 0
}

.license-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px
}

.license small {
    color:#9badc7;
    display:block;
    margin:8px 0
}

.actions {
    display:flex;
    gap:9px;
    flex-wrap:wrap
}

.actions button {
    padding:8px 12px
}

.notice {
    padding:15px;
    border-radius:8px;
    background:#133c33;
    margin-top:16px;
    overflow:auto
}

pre {
    white-space:pre-wrap;
    overflow-wrap:anywhere
}

#message {
    color:#fbbf75
}

#audit {
    font-size:13px;
    color:#b8c9e2;
    line-height:2
}

@media(max-width:760px) {
    .grid {
    grid-template-columns:1fr
}

.heading {
    align-items:flex-start;
    gap:12px
}

header span {
    display:none
}


}