/* Leopard-style login window (reference: 10.5 login panel over the desktop). */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 13px;
    background: #2a1040 url(/mac/img/aurora.svg) center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}
.login-panel {
    width: 470px;
    padding: 26px 28px 24px;
    background: linear-gradient(#ededed, #dedede);
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 18px 50px rgba(0,0,0,.6);
    text-align: center;
}
.login-panel.shake { animation: shake .45s; }
@keyframes shake {
    10%, 90% { transform: translateX(-3px); }
    20%, 80% { transform: translateX(6px); }
    30%, 50%, 70% { transform: translateX(-10px); }
    40%, 60% { transform: translateX(10px); }
}
.login-logo { width: 72px; height: 72px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.login-title { font-size: 26px; font-weight: bold; color: #222; margin-top: 4px; text-shadow: 0 1px 0 #fff; }
.login-sub { font-size: 12px; color: #777; margin-bottom: 16px; }
.login-box {
    background: #e2e2e2;
    border: 1px solid #b5b5b5;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.15);
    padding: 12px 16px;
    min-height: 150px;
    text-align: left;
}
.user-list { display: flex; flex-direction: column; gap: 2px; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 4px; font-size: 15px; }
.user-row:hover { background: rgba(0,0,0,.06); }
.user-row.focus { background: linear-gradient(#5170f6, #1a43f3); color: #fff; }
.user-pic {
    width: 40px; height: 40px;
    border-radius: 3px;
    border: 1px solid #999;
    background: #1d1030;
    image-rendering: pixelated;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
    flex: 0 0 auto;
}
.user-pic.big { width: 48px; height: 48px; }
img.user-pic { object-fit: contain; background: #cfd3da; padding: 3px; }
.picked-user { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 14px; }
.picked-name { font-size: 16px; }
.field-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; }
.field-row label { width: 80px; text-align: right; }
.field {
    width: 190px;
    height: 22px;
    border: 1px solid #8e8e8e;
    border-top-color: #6d6d6d;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    padding: 0 5px;
    font: 13px inherit;
    font-family: inherit;
    outline: none;
}
.field:focus { box-shadow: 0 0 0 3px rgba(92, 150, 240, .6), inset 0 1px 2px rgba(0,0,0,.2); }
.login-error { min-height: 16px; color: #b3150d; font-size: 11px; text-align: center; }
.login-note { max-width: 300px; margin: 6px auto; color: #444; font-size: 11px; text-align: center; line-height: 1.4; }
#step-invite .round-buttons { justify-content: center; }
.round-buttons { display: flex; justify-content: space-between; margin-top: 10px; padding: 0 20px; }
.round-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: 0; padding: 0;
    font: 11px inherit; font-family: inherit; color: #222;
    cursor: default;
}
.round-btn .round {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    color: #333;
    background: radial-gradient(circle at 50% 30%, #ffffff, #e2e2e2 55%, #b9b9b9);
    border: 1px solid #7f7f7f;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.round-btn.primary .round { color: #fff; background: radial-gradient(circle at 50% 30%, #c9e6ff, #5b9be8 50%, #2361c4); border-color: #28468a; }
.round-btn:active .round { filter: brightness(.85); }
.power-row { position: fixed; bottom: 36px; left: 0; right: 0; display: flex; justify-content: center; gap: 44px; }
.round-btn.light { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); font-size: 12px; }
.round-btn.light .round { background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.6), rgba(255,255,255,.15)); border-color: rgba(255,255,255,.6); color: #fff; }
.blackout { position: fixed; inset: 0; background: #000; color: #aaa; display: flex; align-items: center; justify-content: center; font-size: 14px; z-index: 10; }