#vault-content { max-width: 1280px; }
.vault-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #566173; }
.vault-toolbar button, .vault-root form button { background: #e6edff; color: #285ccc; text-align: center; }
.vault-message { min-height: 22px; color: #566173; overflow-wrap: anywhere; font-size: 14px; }
.vault-auth { max-width: 420px; margin: 36px auto 20px; border: 1px solid #e0e5ed; padding: 28px; border-radius: 12px; }
.vault-auth h2 { margin: 0 0 14px; font-size: 20px; }
.vault-auth p { font-size: 14px; line-height: 1.7; }
.vault-root form { display: grid; gap: 14px; }
.vault-root form label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: #566173; min-width: 0; }
.vault-root input, .vault-root textarea { width: 100%; min-width: 0; padding: 10px; border: 1px solid #ccd5e1; border-radius: 6px; font: inherit; }
.vault-root textarea { min-height: 80px; resize: vertical; }
.vault-root input:focus-visible, .vault-root textarea:focus-visible { outline: 2px solid #285ccc; outline-offset: 2px; }
.vault-root button:disabled { opacity: .5; cursor: wait; }
.vault-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
.vault-groups { align-self: start; background: #f8f9fc; border: 1px solid #e0e5ed; border-radius: 10px; padding: 20px; }
.vault-layout h2 { font-size: 18px; margin: 0 0 18px; overflow-wrap: anywhere; }
.vault-group-list { list-style: none; padding: 0; margin: 0 0 20px; }
.vault-group-list li { display: flex; gap: 4px; margin: 5px 0; }
.vault-group-list button { padding: 9px 8px; font-size: 14px; }
.vault-group-list [data-action="select-group"] { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vault-group-list [aria-pressed="true"] { background: #e6edff; color: #285ccc; }
.vault-group-list [data-action="delete-group"] { flex-shrink: 0; color: #a43b49; }
.vault-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.vault-card { min-width: 0; padding: 20px; border: 1px solid #e0e5ed; border-top: 3px solid #3979ce; border-radius: 10px; }
.vault-card h3 { font-size: 17px; margin: 0 0 18px; overflow-wrap: anywhere; }
.vault-account { display: grid; gap: 6px; overflow-wrap: anywhere; }
.vault-caption { font-size: 12px; color: #7b8492; }
.vault-password { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vault-secret { flex: 1; min-width: 80px; overflow-wrap: anywhere; white-space: pre-wrap; font-family: monospace; }
.vault-card button { font-size: 13px; padding: 6px 8px; background: #edf2fb; color: #285ccc; }
.vault-item-actions { display: flex; justify-content: flex-end; gap: 8px; }
.vault-card [data-action="delete-item"] { color: #a43b49; background: transparent; }
.vault-note { font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.vault-item-form { margin-top: 24px; padding: 20px; border-radius: 10px; background: #f8f9fc; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vault-item-form h3 { grid-column: 1 / -1; font-size: 16px; margin: 0; }
.vault-empty { font-size: 14px; color: #7b8492; }
.vault-confirm { width: min(460px, calc(100vw - 40px)); border: 1px solid #d9e0eb; border-radius: 12px; padding: 24px; color: #242b38; }
.vault-confirm::backdrop { background: rgb(20 30 50 / 35%); }
.vault-confirm h2 { margin: 0 0 14px; font-size: 20px; }
.vault-confirm p { overflow-wrap: anywhere; color: #566173; }
.vault-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.vault-confirm-actions [data-action="confirm-delete"] { background: #b73e4e; color: white; }
@media (max-width: 760px) { .vault-layout, .vault-item-form { grid-template-columns: 1fr; } }
/* Legacy two-column password cards, handle and 54px photo thumbnails. */
#vault-content .vault-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
#vault-content .vault-card { position:relative; border:1px solid var(--card-bd); border-radius:var(--r); padding:17px 18px 16px; background:var(--card-bg); box-shadow:var(--sh-card),var(--card-hl); }
#vault-content .vault-card-heading { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
#vault-content .vault-card-heading h3 { flex:1; min-width:0; margin:0; font-size:16px; font-weight:700; letter-spacing:-.2px; }
#vault-content .vault-drag { flex:none; padding:0; width:18px; cursor:grab; color:var(--tx-faint); background:transparent; font-size:17px; }
#vault-content .vault-dragging { opacity:.4; } #vault-content .vault-drop { box-shadow:inset 0 0 0 2px var(--accent); }
#vault-content .vault-photos { display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-height:40px; margin:12px 0; }
#vault-content .vault-photos > .vault-caption { width:100%; }
#vault-content .vault-photo { position:relative; width:54px; height:54px; flex:none; }
#vault-content .vault-photo-open { display:block; width:54px; height:54px; padding:0; background:transparent; }
#vault-content .vault-photo img { width:54px; height:54px; object-fit:cover; display:block; cursor:zoom-in; border-radius:8px; border:1px solid var(--field-bd); background:var(--field-bg); }
#vault-content .vault-photo img:hover { border-color:var(--accent); }
#vault-content .vault-photo.bad img { opacity:.25; }
#vault-content .vault-photo.bad:after { content:"解不开"; position:absolute; inset:0; display:grid; place-items:center; font-size:10px; color:var(--red); pointer-events:none; }
#vault-content .vault-photo .vault-photo-remove { position:absolute; top:-7px; right:-7px; width:19px; height:19px; padding:0; border-radius:50%; background:var(--red); color:#fff; font-size:12px; line-height:19px; text-align:center; box-shadow:0 1px 5px rgba(0,0,0,.22); z-index:2; }
#vault-content .vault-photo-add { height:54px; padding:0 14px; border-radius:var(--r-xs); border:1px dashed var(--field-bd); background:transparent; color:var(--tx-sub); font-size:11.5px; white-space:nowrap; }
#vault-content .vault-photo-add:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.vault-photo-viewer { max-width:94vw; max-height:94vh; border:1px solid var(--line); border-radius:var(--r); padding:16px; background:var(--panel-bg); color:var(--tx); box-shadow:var(--sh-pop); }
.vault-photo-viewer::backdrop { background:rgba(0,0,0,.65); }
.vault-photo-viewer img { display:block; max-width:88vw; max-height:82vh; margin-top:12px; object-fit:contain; }
@media(max-width:900px) { #vault-content .vault-cards { grid-template-columns:1fr; } }