#infoTip{position:fixed;z-index:80;background:rgba(24,22,29,.95);border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;font-size:12px;color:var(--text);display:none;backdrop-filter:blur(8px);
  box-shadow:0 10px 30px #000b;pointer-events:none;line-height:1.6;max-width:260px;}
#infoTip.show{display:block;}
#infoTip b{color:var(--accent);}
#infoTip i{width:14px;color:var(--dim);}
#infoTip.bottom-card{left:50%;right:auto;top:auto;bottom:26px;transform:translateX(-50%);max-width:420px;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:11px 18px;}

#titleMenu{position:absolute;top:32px;left:0;min-width:230px;background:rgba(24,22,29,.97);
  border:1px solid var(--line);border-radius:10px;padding:6px;display:none;box-shadow:0 16px 50px #000c;
  backdrop-filter:blur(8px);z-index:70;font-weight:400;letter-spacing:normal;}
#titleMenu.show{display:block;}
#titleMenu .tm-label{padding:6px 10px 3px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim-faint);}
#titleMenu .tm-item{padding:8px 10px;font-size:13px;border-radius:6px;cursor:pointer;color:var(--text);
  display:flex;align-items:center;gap:8px;}
#titleMenu .tm-item i{width:14px;color:var(--dim);}
#titleMenu .tm-item:hover{background:var(--plum);color:var(--accent);}
#titleMenu .tm-vault{padding:6px 10px;font-size:12.5px;border-radius:6px;cursor:pointer;color:var(--text);
  display:flex;align-items:center;gap:6px;}
#titleMenu .tm-vault:hover{background:var(--surface-hover);color:var(--accent);}
#titleMenu .tm-vault .fa-check{color:var(--accent);width:12px;}
#titleMenu .tm-vault .fa-star{color:#ffcf6b;width:12px;}
#titleMenu .tm-vault-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Faded until the row is hovered — same "reveal on hover" convention as launcher.css's .lr-actions,
   so the quick-switch list doesn't look cluttered with icons for vaults you're not looking at. */
#titleMenu .tm-vault-actions{display:flex;gap:2px;flex-shrink:0;opacity:0;transition:opacity .15s;}
#titleMenu .tm-vault:hover .tm-vault-actions{opacity:1;}
#titleMenu .tm-vault-actions i{padding:4px;border-radius:5px;width:auto;color:var(--dim);
  transition:color .15s,background-color .15s;}
#titleMenu .tm-vault-actions i:hover{color:var(--accent);background:var(--plum);}
#titleMenu .tm-empty{padding:6px 10px;font-size:12px;color:var(--dim);}
#titleMenu hr{border:none;border-top:1px solid var(--line);margin:4px 0;}

/* 3.3: toast de deshacer tras un borrado por agujero negro — separado de #saveToast a propósito
   (un autoguardado durante los ~10s de esta ventana no debe pisar/objecir este aviso). */
#deleteUndoToast{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text);
  background:rgba(24,22,29,.95);border:1px solid var(--line);border-radius:10px;padding:9px 10px 9px 16px;
  box-shadow:0 14px 40px #000a;opacity:0;pointer-events:none;transition:opacity .25s;z-index:60;}
#deleteUndoToast.show{opacity:1;pointer-events:auto;}
#deleteUndoToast button{flex-shrink:0;}

#modalWrap,#infoModalWrap,#conflictWrap,#lockCollisionWrap{position:fixed;inset:0;background:#000c;
  display:none;align-items:center;justify-content:center;z-index:60;}
#modalWrap.show,#infoModalWrap.show,#conflictWrap.show,#lockCollisionWrap.show{display:flex;}

/* Conflict resolution dialog (ui/conflict-dialog.js) — shown when an autosave loses its
   compare-and-swap check against a newer remote write. See storage/vault.js's saveVaultData(). */
#conflictModal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;
  width:400px;box-shadow:0 20px 60px #000c;}
#conflictModal h3{margin:0 0 8px;font-size:15px;display:flex;align-items:center;gap:8px;}
#conflictModal h3 i{color:#ffcf6b;}
#conflictModal p{font-size:12.5px;color:var(--dim);line-height:1.6;margin:0 0 14px;}
.conflict-side{border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-bottom:8px;}
.conflict-label{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim-faint);margin-bottom:3px;}
.conflict-meta{font-size:12.5px;color:var(--text);}

/* Prompt B3 collision dialog (ui/lock-dialog.js) — same modal shape as #conflictModal. */
#lockCollisionModal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;
  width:400px;box-shadow:0 20px 60px #000c;}
#lockCollisionModal h3{margin:0 0 8px;font-size:15px;display:flex;align-items:center;gap:8px;}
#lockCollisionModal h3 i{color:#ffcf6b;}
#lockCollisionModal p{font-size:12.5px;color:var(--dim);line-height:1.6;margin:0 0 14px;}
#lockCollisionModal .prow{border:none;padding:0;justify-content:flex-end;}

/* Prompt B4 full-screen takeover screen (ui/lock-dialog.js) — sits on top of #app (z-index above
   its internal layers, which top out around 70-80, but below #authGateWrap's 200: a session expiry
   while displaced should always show the gate on top of this, not the reverse). */
#lockDisplacedWrap{position:fixed;inset:0;background:#000d;backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;z-index:90;}
#lockDisplacedWrap.show{display:flex;}
#lockDisplacedModal{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:36px;
  width:380px;text-align:center;box-shadow:0 30px 80px #000e;}
#lockDisplacedModal i{font-size:26px;color:#ffcf6b;margin-bottom:10px;}
#lockDisplacedModal h2{margin:0 0 8px;font-size:19px;}
#lockDisplacedModal p{color:var(--dim);font-size:13px;line-height:1.7;margin:0 0 20px;}
#lockDisplacedModal .prow{border:none;padding:0;justify-content:center;gap:10px;}
.conflict-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.conflict-actions .btn{width:100%;justify-content:center;}

/* @keyframes sync-spin is also used by base.css's #migrationSweepIndicator .spinner — keep both in
   sync if either changes. */
@keyframes sync-spin{to{transform:rotate(360deg);}}
#modal,#infoModal{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:22px;width:380px;box-shadow:0 20px 60px #000c;}
#modal h3,#infoModal h3{margin:0 0 10px;font-size:15px;}
#modal p,#infoModal p{font-size:13px;color:var(--dim);line-height:1.7;margin:0 0 6px;display:flex;gap:8px;}
#modal .prow,#infoModal .prow{border:none;padding:14px 0 0;justify-content:flex-end;}
#infoModal b{color:var(--text);}
#infoModal i{width:16px;color:var(--accent);margin-top:2px;}

input.plain{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:8px;
  padding:9px 10px;font-size:13px;outline:none;font-family:inherit;margin-bottom:10px;}

#ctxmenu{position:fixed;z-index:70;background:rgba(24,22,29,.95);border:1px solid var(--line);border-radius:10px;
  padding:6px;min-width:170px;box-shadow:0 12px 40px #000b;display:none;backdrop-filter:blur(8px);}
#ctxmenu.show{display:block;}
#ctxmenu .citem{padding:8px 12px;font-size:13px;border-radius:6px;cursor:pointer;color:var(--text);display:flex;align-items:center;gap:8px;}
#ctxmenu .citem i{width:14px;color:var(--dim);}
#ctxmenu .citem:hover{background:var(--plum);color:var(--accent);}
#ctxmenu .citem.danger:hover{background:#3a1414;color:#ff6b6b;}
#ctxmenu hr{border:none;border-top:1px solid var(--line);margin:4px 0;}

#ideaOrbitPopover{position:fixed;z-index:75;background:rgba(24,22,29,.97);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;width:220px;box-shadow:0 16px 50px #000c;display:none;backdrop-filter:blur(8px);}
#ideaOrbitPopover.show{display:block;}
#ideaOrbitPopover .iop-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;}
#ideaOrbitPopover .iop-title b{color:var(--idea-stroke);font-weight:700;}
#ideaOrbitPopover label{display:block;font-size:11px;color:var(--dim);margin:8px 0 4px;}
#ideaOrbitPopover input[type=range]{width:100%;accent-color:var(--idea-stroke);}
#ideaOrbitPopover .prow{border:none;padding:12px 0 0;justify-content:flex-end;}

#searchWrap{position:fixed;inset:0;background:#000a;display:none;align-items:flex-start;justify-content:center;
  padding-top:12vh;z-index:65;}
#searchWrap.show{display:flex;}
#searchBox{width:460px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;box-shadow:0 20px 60px #000c;}
#searchInput{width:100%;border:none;background:var(--bg);color:var(--text);padding:14px 16px;font-size:15px;
  outline:none;font-family:inherit;border-bottom:1px solid var(--line);}
#searchResults{max-height:280px;overflow:auto;}
#searchResults div{padding:10px 16px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;}
#searchResults div:hover, #searchResults div.active{background:var(--plum);color:var(--accent);}