/* css/lock.css — ZS.Mark 锁屏层样式 */

#lock-screen {
    position: absolute; inset: 0;
    z-index: 9999999;
    background: linear-gradient(160deg, #fdfbf7 0%, #fff1eb 60%, #fce8e0 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 0 28px; box-sizing: border-box;
}

#lock-screen.hidden {
    animation: lockFadeOut 0.7s ease forwards;
    pointer-events: none;
}
@keyframes lockFadeOut {
    to { opacity: 0; transform: scale(1.03); }
}

/* 书签猫 */
.lock-cat {
    width: 110px; height: 110px;
    object-fit: contain;
    margin-bottom: 6px;
    animation: catFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 8px 16px rgba(255, 154, 139, 0.25));
}
@keyframes catFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}

/* 标题 */
.lock-title {
    font-size: 22px; font-weight: 900;
    color: #ff9a8b; letter-spacing: 5px;
    margin-bottom: 2px;
}
.lock-subtitle {
    font-size: 10px; color: #fcb69f;
    letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 22px;
}

/* 挑战码卡片 */
.lock-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 20px;
    padding: 16px 18px 12px;
    box-shadow: 0 8px 24px rgba(255, 154, 139, 0.12);
    margin-bottom: 14px;
}

.lock-card-label {
    font-size: 10px; color: #fcb69f;
    letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 8px;
}

.lock-challenge-code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 13px; font-weight: 600;
    color: #ff9a8b; letter-spacing: 1px;
    word-break: break-all; line-height: 1.7;
    user-select: all; cursor: text;
    background: rgba(255, 154, 139, 0.06);
    border-radius: 10px; padding: 8px 10px;
    margin-bottom: 10px;
}

.lock-copy-btn {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: #fcb69f;
    letter-spacing: 1px; cursor: pointer;
    border: none; background: none;
    padding: 0; font-family: inherit;
    transition: color 0.2s;
}
.lock-copy-btn:hover { color: #ff9a8b; }

/* 输入区 */
.lock-input-wrap {
    width: 100%;
    height: 50px; 
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 16px;
    position: relative; 
    display: flex; align-items: center;
    padding: 0 16px;
    box-shadow: 0 4px 16px rgba(255, 154, 139, 0.08);
    margin-bottom: 12px;
    transition: box-shadow 0.3s, border-color 0.3s;
}
.lock-input-wrap:focus-within {
    border-color: rgba(255, 154, 139, 0.5);
    box-shadow: 0 4px 20px rgba(255, 154, 139, 0.2);
}

.lock-input-icon { 
    font-size: 18px; color: #fcb69f; 
    position: relative; z-index: 2; 
    pointer-events: none; 
}

.lock-input {
    position: absolute; inset: 0; 
    width: 100%; height: 100%;
    border: none; background: transparent;
    padding: 0 40px; 
    font-size: 14px;
    color: #4a4a4a; letter-spacing: 2px;
    text-align: center; outline: none;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-weight: 600;
    box-sizing: border-box;
}
.lock-input::placeholder { color: #fcd5c8; font-weight: 400; letter-spacing: 1px; font-size: 13px; }

/* 解锁按钮 */
.lock-btn {
    width: 100%; padding: 15px;
    border: none; border-radius: 16px;
    background: linear-gradient(135deg, #ff9a8b, #ff6a88);
    color: white; font-size: 15px; font-weight: 700;
    letter-spacing: 3px; cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 106, 136, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    margin-bottom: 12px;
}
.lock-btn:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(255, 106, 136, 0.2); }

/* 状态提示 */
.lock-status {
    font-size: 12px; min-height: 18px;
    letter-spacing: 1px; transition: all 0.3s;
    color: transparent;
}
.lock-status.error { color: #ff6a88; }
.lock-status.ok    { color: #7bbf8a; }

/* 抖动动画 */
@keyframes lockShake {
    0%, 100% { transform: translateX(0); }
    20%, 60%  { transform: translateX(-6px); }
    40%, 80%  { transform: translateX(6px); }
}
.lock-shake { animation: lockShake 0.4s ease; }