/* Log Off / Turn Off Computer dialogs */
#desktop, #taskbar { transition: filter 0.3s ease-in-out; }
body.screen-dim #desktop, body.screen-dim #taskbar {
    filter: grayscale(1) brightness(0.72);
    transition: filter 1.2s ease-in-out 0.4s;
}
.power-overlay { position: fixed; inset: 0; z-index: 10020; display: flex; align-items: center; justify-content: center; }
.power-overlay[hidden] { display: none; }
.power-dialog {
    width: 312px; max-width: calc(100vw - 24px); overflow: hidden; border-radius: 4px;
    font-family: Tahoma, Verdana, Arial, sans-serif; box-shadow: 4px 6px 18px rgba(0,0,0,0.45);
    animation: powerIn 0.18s ease-out;
}
@keyframes powerIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.power-head {
    display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 10px 0 14px;
    background: linear-gradient(180deg, #0a2ea5 0%, #00309c 100%); color: #fff;
    font: bold 17px 'Trebuchet MS', 'Franklin Gothic Medium', Tahoma, sans-serif;
}
.power-head img { width: 30px; height: 30px; object-fit: contain; }
.power-options {
    display: flex; justify-content: center; gap: 30px; padding: 22px 16px 18px;
    background: linear-gradient(90deg, #5a7edc 0%, #7b9ef0 50%, #5a7edc 100%);
    border-top: 2px solid #a5bdf2; border-bottom: 2px solid #3d5fbf;
}
.power-option {
    display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 66px; padding: 4px;
    background: none; border: 0; border-radius: 3px; color: #fff; cursor: pointer;
    font: 11px Tahoma, Verdana, Arial, sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.power-option img { width: 33px; height: 33px; object-fit: contain; transition: filter 0.1s; }
.power-option:hover img, .power-option:focus-visible img { filter: brightness(1.18); }
.power-option:focus-visible { outline: 1px dotted #fff; }
.power-foot { display: flex; justify-content: flex-end; padding: 8px 12px; background: #00309c; }
.power-cancel {
    min-width: 72px; padding: 3px 10px; cursor: pointer; color: #000;
    font: 11px Tahoma, Verdana, Arial, sans-serif;
    background: linear-gradient(180deg, #fff 0%, #ecebe6 86%, #d6d0c5 100%);
    border: 1px solid #003c74; border-radius: 3px;
}
.power-cancel:hover { box-shadow: inset 0 0 0 2px #fbc761; }
.power-cancel:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* Stand By and powered-off screens */
#standby-screen { position: fixed; inset: 0; z-index: 10030; background: #000; opacity: 0; transition: opacity 0.8s; cursor: none; }
#standby-screen.visible { opacity: 1; }
#standby-screen[hidden], #poweroff-screen[hidden] { display: none; }
#poweroff-screen {
    position: fixed; inset: 0; z-index: 10030; background: #000; color: #7a7a7a;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    font: 12px Tahoma, Verdana, Arial, sans-serif; text-align: center; padding: 20px;
}
.power-on-btn {
    width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
    border: 2px solid #3a3a3a; background: radial-gradient(circle at 50% 40%, #2c2c2c, #0d0d0d);
    color: #3fdc3f; font-size: 24px; box-shadow: 0 0 12px rgba(63,220,63,0.25);
}
.power-on-btn:hover, .power-on-btn:focus-visible { color: #7cff7c; box-shadow: 0 0 18px rgba(63,220,63,0.5); outline: none; }
@media (prefers-reduced-motion: reduce) {
    .power-dialog { animation: none; }
    body.screen-dim #desktop, body.screen-dim #taskbar { transition: none; }
}

/* Screen saver */
#screensaver { position: fixed; inset: 0; z-index: 10040; background: #000; cursor: none; overflow: hidden; }
#screensaver[hidden] { display: none; }
#screensaver canvas { display: block; width: 100%; height: 100%; }
.saver-logo {
    position: absolute; display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity 1.1s ease;
    color: #fff; font: bold italic 30px 'Trebuchet MS', 'Franklin Gothic Medium', Tahoma, sans-serif;
}
.saver-logo.visible { opacity: 1; }
.saver-logo img { width: 64px; height: 64px; object-fit: contain; }
.saver-logo sup { margin-left: 3px; color: #ff8a1f; font-size: 0.55em; }