/* ===== LOCK SCREEN ===== */
#lock-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Tahoma, sans-serif;
}
#lock-screen.show { display: flex; }
#lock-screen-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.7);
    z-index: 0;
}
#lock-screen-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
#lock-time {
    font-size: 72px;
    font-weight: bold;
    color: #FFF;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}
#lock-date {
    font-size: 18px;
    color: #DDD;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
    text-align: center;
}
#lock-avatar img {
    width: 150px;
    height: 150px;
    border-radius: 60%;
    border: 3px solid rgba(0, 0, 0, 0.5);
    background: rgba(0,0,0,0.3);
    margin-top: 20px;
}
#lock-prompt {
    color: #FFF;
    font-size: 14px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}
#lock-input-group {
    display: flex;
    gap: 6px;
    align-items: center;
}
#lock-password-input {
    padding: 8px 12px;
    font-size: 14px;
    border: 2px solid;
    border-color: #808080 #FFF #FFF #808080;
    outline: none;
    width: 200px;
    background: rgba(255,255,255,0.9);
    color: #000;
}
#lock-password-input:focus { background: #FFF; }
#lock-unlock-btn {
    padding: 8px 16px;
    font-size: 13px;
    background: #C0C0C0;
    border: 2px solid;
    border-color: #FFF #808080 #808080 #FFF;
    cursor: default;
    font-family: Tahoma, sans-serif;
    color: #000;
}
#lock-unlock-btn:active { border-color: #808080 #FFF #FFF #808080; }
#lock-error {
    color: #FF6666;
    font-size: 12px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
#lock-footer {
    position: absolute;
    bottom: 20px;
    z-index: 1;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ===== DISPLAY PROPERTIES ===== */
.display-properties-content { padding: 15px; background: #C0C0C0; gap: 0; }
.display-properties-content .wp-section-title { font-weight: bold; font-size: 12px; color: #000; margin-bottom: 10px; border-bottom: 1px solid #808080; padding-bottom: 5px; }
.language-selector { display: flex; gap: 10px; margin-bottom: 4px; padding: 5px 0; }
.language-option {
    display: flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer;
    font-size: 12px; color: #000; border: 2px solid transparent; transition: border-color 0.15s;
    background: #D0D0D0; border-radius: 2px;
}
.language-option:hover { border-color: #000080; background: #E0E0E0; }
.language-option.active { border-color: #000080; background: #000080; color: #FFF; }
.language-option input[type="radio"] { margin: 0; accent-color: #000080; }
.language-option.active input[type="radio"] { accent-color: #FFF; }
.language-option span { font-size: 12px; cursor: pointer; }
.wp-divider { border: none; border-top: 1px solid #808080; margin: 10px 0; }
.wallpaper-gallery { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 5px 0; }
.wallpaper-option { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 3px; border: 2px solid transparent; transition: border-color 0.15s; }
.wallpaper-option:hover { border-color: #000080; }
.wallpaper-option.active { border-color: #000080; background-color: rgba(0,0,128,0.1); }
.wallpaper-preview { width: 140px; height: 90px; border: 2px outset #FFF; cursor: pointer; display: block; object-fit: cover; background-color: #008080; }
.wallpaper-preview:active { border-style: inset; }
.wallpaper-label { font-size: 11px; color: #000; margin-top: 3px; text-align: center; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== POWER OPTIONS ===== */
.power-option-item { display: flex; align-items: center; padding: 6px 4px; cursor: pointer; font-size: 13px; color: #000; gap: 8px; }
.power-option-item:hover { background-color: #000080; color: #FFF; }
.power-option-item input[type="radio"] { margin: 0; accent-color: #000080; flex-shrink: 0; }
.power-option-label { flex-grow: 1; cursor: pointer; }

/* ===== VOLUME CONTROL ===== */
.volume-control-container { position: relative; }
#volume-icon { width: 20px; height: 20px; cursor: pointer; }
#volume-slider-popup {
    display: none; position: absolute; bottom: 30px; right: -10px;
    background-color: #C0C0C0; border: 2px outset #FFF; padding: 10px; z-index: 1002;
}
#volume-slider { -webkit-appearance: none; appearance: none; width: 100px; height: 8px; background: #808080; outline: none; border: 1px inset #000; }
#volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 20px; background: #C0C0C0; border: 2px outset #FFF; cursor: pointer; }
#volume-slider::-moz-range-thumb { width: 15px; height: 20px; background: #C0C0C0; border: 2px outset #FFF; cursor: pointer; }

/* ===== SLEEP OVERLAY ===== */
#sleep-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 99999; display: none; opacity: 0; transition: opacity 1.5s ease; cursor: pointer; }
#sleep-overlay.active { display: block; opacity: 1; }
#sleep-led { position: fixed; top: 20px; right: 20px; width: 12px; height: 12px; border-radius: 50%; background: #F00; box-shadow: 0 0 8px rgba(255,0,0,0.6); animation: sleep-blink 2s ease-in-out infinite; z-index: 100000; }
@keyframes sleep-blink { 0%,100% { opacity: 0.15; box-shadow: 0 0 4px rgba(255,0,0,0.3); } 50% { opacity: 1; box-shadow: 0 0 12px rgba(255,0,0,0.9); } }
@keyframes dots-blink { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }
.dots-blink { animation: dots-blink 1.2s ease-in-out infinite; }