* { box-sizing: border-box; margin: 0; padding: 0; }
html { background-color: #0d0e10; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    background: transparent;
    color: #333;
    min-height: 100vh;
}
body.vault-bg { background: #0d0e10; }
body.vault-bg::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: #0d0e10 url("../img/bck.abc2e2cbdbaa.png") center/cover no-repeat;
}

/* --- Login (modern, glass on image) --- */
body.login-bg { background: #0d0e10; }
body.login-bg::before {
    content: ""; position: fixed; inset: 0; z-index: -2;
    background: #0d0e10 url("../img/bck.abc2e2cbdbaa.png") center/cover no-repeat;
    filter: saturate(1.1);
}
body.login-bg::after {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(99,230,190,.18), transparent 60%),
        linear-gradient(180deg, rgba(13,14,16,.35) 0%, rgba(13,14,16,.72) 100%);
}

.login-wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh; padding: 24px;
}
.login-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    width: min(400px, 100%); padding: 48px 40px 40px;
    background: rgba(20,22,26,.55);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    animation: card-in .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes card-in {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.login-mark {
    width: 68px; height: 68px; margin-bottom: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 18px; font-family: Consolas, monospace;
    font-size: 34px; font-weight: 700; color: #0d0e10;
    background: linear-gradient(145deg, #63e6be, #38b48a);
    box-shadow: 0 8px 24px rgba(56,180,138,.45);
}
.login-mark span { transform: translateY(-2px); }

.login-brand {
    font-size: 30px; font-weight: 700; letter-spacing: 3px; color: #fff;
    font-family: Consolas, monospace;
}
.login-sub {
    margin-top: 8px; margin-bottom: 34px;
    font-size: 13.5px; color: rgba(255,255,255,.55); text-align: center;
}

.btn-google {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; padding: 14px 20px;
    font-size: 15px; font-weight: 600; color: #202124;
    border: 0; border-radius: 14px; background: #fff;
    cursor: pointer; transition: transform .12s ease, box-shadow .2s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.btn-google:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.36); }
.btn-google:active { transform: translateY(0); }
.g-icon { width: 20px; height: 20px; flex: none; }

.login-foot {
    margin-top: 26px; font-size: 12px; color: rgba(255,255,255,.4);
    display: flex; align-items: center; gap: 6px;
}
.login-foot svg { width: 13px; height: 13px; }

.vault-wrap { max-width: 900px; margin: 0 auto; padding: 20px 10px; }
.entry-box {
    background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.3);
    border-radius: 16px; padding: 15px;
    box-shadow: rgba(0,0,0,.19) 0 10px 20px, rgba(0,0,0,.23) 0 6px 6px;
}
.entry-box textarea {
    width: 100%; border: 1px solid rgba(255,255,255,.3); border-radius: 8px;
    padding: 10px; font-size: 15px; resize: vertical;
    color: #fff; background: rgba(0,0,0,.3);
}
.entry-box textarea::placeholder { color: rgba(255,255,255,.6); }
.entry-box textarea:focus {
    outline: none; border-color: rgba(255,255,255,.6); background: rgba(0,0,0,.4);
}
.action-bar { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.action-bar button, .action-bar a {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 16px; border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px; background: rgba(0,0,0,.3); cursor: pointer; color: #fff;
    text-decoration: none;
}
.action-bar button:hover, .action-bar a:hover { background: rgba(0,0,0,.5); }
.action-bar button svg, .action-bar a svg { width: 22px; height: 22px; }

.vault-wrap hr { border: 0; border-top: 1px solid rgba(255,255,255,.3); margin: 10px 0; }

#dataList { margin-top: 10px; }
.rec {
    position: relative;
    background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.2); border-radius: 8px;
    padding: 8px 38px 8px 10px; margin-bottom: 8px;
    display: flex; align-items: flex-start; gap: 10px;
}
.rec-no-btn {
    min-width: 38px; padding: 6px 4px;
    border: 1px solid rgba(255,255,255,.3); border-radius: 6px;
    background: rgba(0,0,0,.35); color: #fff; cursor: pointer;
    font-size: 15px; font-weight: 600;
}
.rec-no-btn:hover { background: rgba(0,0,0,.55); }
.rec.open .rec-no-btn {
    background: rgba(0,123,255,.8); border-color: rgba(0,123,255,.8);
}
.rec-ta {
    flex: 1; min-width: 0; border: 0; background: transparent; resize: none;
    font-family: Consolas, monospace; font-size: 14px; color: #fff;
    line-height: 1.5; padding: 6px 0 0; height: 30px;
    white-space: nowrap; overflow: hidden;
}
.rec-ta:focus { outline: none; }
.rec.open .rec-ta {
    white-space: pre-wrap; word-break: break-all; overflow: visible;
    color: #63e6be; font-weight: 600;
}
.rec-del {
    position: absolute; top: 6px; right: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border: 0; border-radius: 6px; background: transparent;
    color: rgba(255,255,255,.5); cursor: pointer;
}
.rec-del:hover { color: #ff6b6b; background: rgba(255,255,255,.08); }
.rec-del svg { width: 15px; height: 15px; }

@media (max-width: 768px) {
    .action-bar button { min-width: 48px; min-height: 44px; }
    .rec-no-btn { min-width: 42px; min-height: 40px; font-size: 16px; }
    .rec-del { width: 32px; height: 32px; }
    .rec-ta { font-size: 15px; }
}

.modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal.hidden, .hidden { display: none; }
.modal-box {
    background: #fff; border-radius: 10px; padding: 24px;
    width: min(320px, 90vw); display: flex; flex-direction: column; gap: 12px;
}
.modal-box input {
    border: 1px solid #ced4da; border-radius: 6px; padding: 10px;
    font-size: 18px; text-align: center; letter-spacing: 4px;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal-actions button {
    border: 1px solid #ced4da; border-radius: 6px; background: #fff;
    cursor: pointer; padding: 8px 16px;
}
#pinOk { background: #228be6; color: #fff; border-color: #228be6; }
.pin-error { color: #e03131; font-size: 13px; min-height: 16px; }