* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #1b1b1f;
    color: #e6e6ea;
}

header {
    background: #111114;
    border-bottom: 1px solid #2a2a32;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
}

.brand {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.nav-right { display: flex; gap: 1rem; align-items: center; }
.nav-right a, .nav-right span { color: #b8b8c2; text-decoration: none; }
.nav-right a:hover { color: #fff; }

.linklike {
    background: none; border: none; color: #b8b8c2;
    cursor: pointer; padding: 0; font: inherit;
}
.linklike:hover { color: #fff; }

main { padding: 1.25rem; max-width: 960px; margin: 0 auto; }

h1, h2 { font-weight: 600; }

form .form-row { margin: 0.75rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
label { color: #c8c8d2; font-size: 0.9rem; }
input[type=text], input[type=email], input[type=password] {
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #3a3a44;
    background: #14141a;
    color: #fff;
    font: inherit;
    width: 100%;
    max-width: 360px;
}

button[type=submit], button#btn-connect, button#btn-disconnect {
    padding: 0.5rem 1rem;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }

.text-danger { color: #f87171; }
.status { color: #34d399; }

.totp-setup { display: flex; gap: 1.25rem; align-items: flex-start; margin: 1rem 0; }
.totp-setup img { background: #fff; padding: 8px; border-radius: 8px; }
.manual-key { display: inline-block; padding: 0.5rem; background: #14141a;
              border-radius: 6px; font-family: ui-monospace, monospace; }

.codes { columns: 2; max-width: 420px; }
.codes li { margin: 0.25rem 0; }

#vnc-toolbar { display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0; }
#vnc-status { color: #b8b8c2; font-size: 0.9rem; }
#vnc-screen {
    width: 100%;
    height: calc(100vh - 180px);
    background: #000;
    border: 1px solid #2a2a32;
    border-radius: 6px;
    overflow: hidden;
}