/* Private Vault Face ID lock (v3.1.79). Functional layout by Claude; ChatGPT may restyle.
 * Hooks: #sb-vault-lock, #sb-vault-unlocked, #sb-vault-keys, [data-vault-lock], [data-vault-lock-message].
 * Uses the existing .card, .primary, .secondary and .hint styles; no shared recipe is changed.
 */

#screen .vault-lock-head {
 display:flex;align-items:flex-start;gap:12px;
}
#screen .vault-lock-head > div { display:flex;flex-direction:column;gap:4px;min-width:0; }
#screen .vault-lock-head strong { font-weight:700;font-size:15px;letter-spacing:-.16px; }
#screen .vault-lock-head small { font-size:12px;line-height:1.45;color:#a99ab7; }
#screen .vault-lock-icon {
 width:34px;height:34px;flex:0 0 34px;padding:7px;box-sizing:border-box;
 border-radius:11px;fill:none;stroke:#d7b7f6;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
 background:linear-gradient(150deg,rgba(180,139,214,.16),rgba(31,25,43,.32));
 border:1px solid rgba(217,183,247,.16);
}
#screen .vault-lock > .hint { margin:14px 0 0!important;font-size:12px!important;line-height:1.5!important; }
#screen .vault-lock-button { width:100%;margin-top:16px;min-height:48px; }
#screen .vault-lock-message { margin:12px 0 0;font-size:12px;line-height:1.45;color:#c1b2d1; }
#screen .vault-lock-message[hidden] { display:none; }
#screen .vault-lock-message[data-tone="good"] { color:#9be8b8; }
#screen .vault-lock-message[data-tone="warn"] { color:#f0c36a; }
#screen .vault-lock-message[data-tone="bad"] { color:#f3a1b4; }

#screen .vault-unlocked {
 display:flex;align-items:center;justify-content:space-between;gap:12px;
}
#screen .vault-unlocked .vault-lock-icon { stroke:#9be8b8; }
#screen .vault-lock-now { flex:0 0 auto;min-height:40px;padding:0 16px; }

#screen .vault-keys-list { display:flex;flex-direction:column;gap:8px;margin-top:12px; }
#screen .vault-key-row {
 display:flex;align-items:center;justify-content:space-between;gap:10px;
 padding:11px 12px;border-radius:13px;
 background:linear-gradient(150deg,rgba(180,139,214,.085),rgba(31,25,43,.28));
 border:1px solid rgba(217,183,247,.115);
}
#screen .vault-key-row > span { display:flex;flex-direction:column;gap:3px;min-width:0; }
#screen .vault-key-row strong { font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#screen .vault-key-row small { font-size:11px;color:#a99ab7; }
#screen .vault-key-remove { flex:0 0 auto;min-height:36px;padding:0 14px; }
#screen .vault-key-add { width:100%;margin-top:12px;min-height:44px; }

/* ---- Vault data (v3.1.81): status lights, favorites, Safety filters --------------------- */
#screen [data-vault-health][data-state="available"] .vault-health-dot { background:#6fdc9c;box-shadow:0 0 0 2px rgba(111,220,156,.16),0 0 10px rgba(111,220,156,.45); }
#screen [data-vault-health][data-state="degraded"] .vault-health-dot { background:#f0c36a;box-shadow:0 0 0 2px rgba(240,195,106,.16),0 0 10px rgba(240,195,106,.4); }
#screen [data-vault-health][data-state="unavailable"] .vault-health-dot { background:#f3a1b4;box-shadow:0 0 0 2px rgba(243,161,180,.16),0 0 10px rgba(243,161,180,.4); }
#screen [data-vault-health] { cursor:pointer; }

/* Safety filters editor: replaces the Vault's main view while open. */
#screen[data-vault-view="filters"] :is([data-vault-root], #sb-vault-unlocked, #sb-vault-keys, #sb-vault-filters-entry) { display:none!important; }
#screen .vault-filters { display:flex;flex-direction:column;gap:14px;margin-bottom:14px; }
#screen .vault-filters > .card { margin:0; }
#screen .vault-filters-top { display:flex;align-items:center;justify-content:space-between;gap:10px; }
#screen .vault-filters-top .back-link { margin:0; }
#screen .vault-filters-status[data-tone="good"] { color:#9be8b8; }
#screen .vault-filters-status[data-tone="warn"] { color:#f0c36a; }
#screen .vault-filters-status[data-tone="bad"] { color:#f3a1b4; }
#screen .vault-filters-tabs { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;border-radius:14px;background:rgba(31,25,43,.5);border:1px solid rgba(217,183,247,.12); }
#screen .vault-filters-tab { min-height:38px;border-radius:10px;border:0;background:transparent;color:#c1b2d1;font-weight:650;font-size:14px; }
#screen .vault-filters-tab[aria-selected="true"] { background:linear-gradient(150deg,rgba(180,139,214,.32),rgba(120,90,160,.24));color:#fff; }
#screen .vault-filters-card > .hint { margin:8px 0 0!important;font-size:12px!important;line-height:1.45!important; }
#screen .vault-filters-count { font-size:12px;color:#a99ab7; }
#screen .vault-filters-rule { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px; }
#screen .vault-switch { position:relative;display:inline-block;width:51px;height:31px;flex:0 0 51px; }
#screen .vault-switch input { position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1; }
#screen .vault-switch-track { position:absolute;inset:0;border-radius:999px;background:rgba(120,110,135,.45);transition:background .2s; }
#screen .vault-switch-track::after { content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .2s; }
#screen .vault-switch input:checked + .vault-switch-track { background:#6fdc9c; }
#screen .vault-switch input:checked + .vault-switch-track::after { transform:translateX(20px); }
#screen .vault-switch input:disabled + .vault-switch-track { opacity:.5; }
#screen .vault-tag-list { display:flex;flex-wrap:wrap;gap:7px;margin-top:12px; }
#screen .vault-tag-chip { display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:5px 6px 5px 11px;border-radius:999px;font-size:13px;color:#e9def4;background:rgba(180,139,214,.13);border:1px solid rgba(217,183,247,.16); }
#screen .vault-tag-chip > span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#screen .vault-tag-chip.is-locked { padding-right:11px;color:#c1b2d1;background:rgba(60,50,75,.35); }
#screen .vault-tag-chip.is-locked::before { content:"🔒";font-size:10px;margin-right:2px; }
#screen .vault-tag-remove { width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#f3a1b4;font-size:16px;line-height:1;padding:0; }
#screen .vault-filters-empty { color:#a99ab7;font-size:12px; }
#screen .vault-filters-add { display:flex;gap:8px;margin-top:14px; }
#screen .vault-filters-add input { flex:1 1 auto!important;width:auto!important;min-width:0!important;min-height:44px;margin:0!important;padding:0 13px;border-radius:14px;font-size:16px; }
#screen .vault-filters-add button { flex:0 0 auto!important;width:auto!important;min-height:44px;margin:0!important;padding:0 20px; }
#screen .vault-filters-floor-toggle { display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:0;border:0;background:none;color:inherit;text-align:left; }
#screen .vault-filters-floor-toggle strong { font-size:15px;font-weight:700; }
#screen .vault-filters-floor-toggle small { font-size:12px;color:#a99ab7; }
#screen .vault-filters-entry { padding:0!important; }
#screen .vault-filters-open { display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px;border:0;background:none;color:inherit;text-align:left; }
#screen .vault-filters-open > span:first-child { display:flex;flex-direction:column;gap:4px; }
#screen .vault-filters-open strong { font-size:15px;font-weight:700; }
#screen .vault-filters-open small { font-size:12px;color:#a99ab7; }
#screen .vault-filters-chevron { font-size:22px;color:#a99ab7; }

/* ---- Vault search (v3.1.82): sort / time range / site pickers and tag suggestions ----------- */
#screen .vault-extras { margin-top:12px!important; }
#screen .vault-extras[hidden], #screen .vault-extras [hidden] { display:none!important; }
#screen .vault-suggestions { display:flex;gap:7px;margin-top:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch; }
#screen .vault-suggestions::-webkit-scrollbar { display:none; }
#screen .vault-suggestions[hidden] { display:none; }
#screen .vault-suggestion { flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(217,183,247,.18);background:rgba(180,139,214,.13);color:#e9def4;font-size:13px;font-weight:600;white-space:nowrap; }
#screen .vault-suggestion small { color:#a99ab7;font-size:11px;font-weight:500; }