html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Shared "user identity avatar" support (wwwroot/js/user-avatar.js) — the actual
   size/shape/fallback-color comes from whichever context-specific class the
   caller already uses (.user-avatar in the header, .collab-avatar in the editor,
   .directory-avatar in Browse/search); this just makes an <img> uploaded photo
   fill that same circle and sit on top of the initials fallback underneath it. */
.user-avatar-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}
.user-avatar, .collab-avatar, .directory-avatar { position: relative; overflow: hidden; }
/* In-page confirm/prompt (appConfirm/appPrompt in site.js). */
.app-dialog-backdrop {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.app-dialog {
  width: 380px; max-width: 100%; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
  padding: 18px 20px; font-family: var(--sans);
}
.app-dialog-text { margin: 0 0 14px; font-size: 14px; line-height: 1.45; white-space: pre-line; }
.app-dialog-input {
  width: 100%; box-sizing: border-box; height: 36px; padding: 0 10px; margin-bottom: 14px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--panel-alt); color: var(--text); font-size: 14px;
}
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.app-dialog-btn {
  height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-alt); color: var(--text); font-size: 13px; cursor: pointer;
}
.app-dialog-btn:hover { filter: brightness(1.08); }
.app-dialog-ok { background: var(--accent); color: var(--accent-contrast, #fff); border-color: var(--accent); }
.app-dialog-danger { background: #d9534f; border-color: #d9534f; color: #fff; }

/* -- Document-kind icons shared by the Start page's recent list and Entdecken's grid
   (wwwroot/js/doc-icons.js): code, whiteboard, presentation, spreadsheet — each with a
   hover animation in the spirit of the video/audio ones (index.css / browse.css). -- */
.code-icon, .whiteboard-icon, .presentation-icon, .sheet-icon { position: relative; width: 52px; height: 50px; margin-bottom: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

/* Code: a dark editor window whose lines type themselves out. */
.code-icon .code-frame { position: relative; width: 44px; height: 34px; border-radius: 5px; background: #1f2430; border: 1px solid var(--border); box-sizing: border-box; padding: 7px 6px 0; overflow: hidden; transition: border-color .25s ease; }
.code-icon .code-dots { position: absolute; top: 3px; left: 5px; display: flex; gap: 2px; }
.code-icon .code-dots i { width: 3px; height: 3px; border-radius: 50%; background: #5b6472; }
.code-icon .code-line { display: block; height: 2.5px; border-radius: 2px; margin-top: 3px; transition: width .35s cubic-bezier(.34,1.2,.64,1); }
.code-icon .code-line-1 { width: 14px; background: #c678dd; }
.code-icon .code-line-2 { width: 24px; margin-left: 5px; background: #61afef; }
.code-icon .code-line-3 { width: 18px; margin-left: 5px; background: #98c379; }
.code-icon .code-line-4 { width: 8px; background: #e5c07b; }
.code-icon .code-caret { position: absolute; right: 7px; bottom: 5px; width: 2px; height: 7px; background: #e6e6e6; opacity: 0; }
.recent-doc-card:hover .code-frame, .browse-card:hover .code-frame, .browse-row:hover .code-frame, .global-search-item:hover .code-frame, .global-search-item.active .code-frame { border-color: var(--accent); }
.recent-doc-card:hover .code-line-1, .browse-card:hover .code-line-1, .browse-row:hover .code-line-1, .global-search-item:hover .code-line-1, .global-search-item.active .code-line-1 { width: 20px; }
.recent-doc-card:hover .code-line-2, .browse-card:hover .code-line-2, .browse-row:hover .code-line-2, .global-search-item:hover .code-line-2, .global-search-item.active .code-line-2 { width: 28px; transition-delay: .06s; }
.recent-doc-card:hover .code-line-3, .browse-card:hover .code-line-3, .browse-row:hover .code-line-3, .global-search-item:hover .code-line-3, .global-search-item.active .code-line-3 { width: 22px; transition-delay: .12s; }
.recent-doc-card:hover .code-line-4, .browse-card:hover .code-line-4, .browse-row:hover .code-line-4, .global-search-item:hover .code-line-4, .global-search-item.active .code-line-4 { width: 14px; transition-delay: .18s; }
.recent-doc-card:hover .code-caret, .browse-card:hover .code-caret, .browse-row:hover .code-caret, .global-search-item:hover .code-caret, .global-search-item.active .code-caret { opacity: 1; animation: code-caret-blink .8s steps(1) infinite; }
@keyframes code-caret-blink { 50% { opacity: 0; } }

/* Whiteboard: a sheet on which a stroke draws itself, the pen following. */
.whiteboard-icon .wbi-board { position: relative; width: 44px; height: 34px; border-radius: 4px; background: var(--panel); border: 1px solid var(--border); box-sizing: border-box; box-shadow: 0 2px 5px rgba(0,0,0,.14); overflow: visible;
    background-image: linear-gradient(rgba(30,136,229,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(30,136,229,.18) 1px, transparent 1px); background-size: 8px 8px; transition: border-color .25s ease; }
.whiteboard-icon svg { position: absolute; inset: 0; }
.whiteboard-icon .wbi-stroke { stroke: var(--accent, #1e88e5); stroke-dasharray: 90; stroke-dashoffset: 0; transition: stroke-dashoffset .05s; }
.whiteboard-icon .wbi-pen { position: absolute; right: -4px; bottom: -6px; width: 6px; height: 18px; border-radius: 3px 3px 1px 1px; background: linear-gradient(#fb8c00, #fb8c00 70%, #ffe0b2 70%); transform: rotate(35deg); transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.recent-doc-card:hover .wbi-board, .browse-card:hover .wbi-board, .browse-row:hover .wbi-board, .global-search-item:hover .wbi-board, .global-search-item.active .wbi-board { border-color: var(--accent); }
.recent-doc-card:hover .wbi-stroke, .browse-card:hover .wbi-stroke, .browse-row:hover .wbi-stroke, .global-search-item:hover .wbi-stroke, .global-search-item.active .wbi-stroke { animation: wbi-draw .9s ease-out; }
.recent-doc-card:hover .wbi-pen, .browse-card:hover .wbi-pen, .browse-row:hover .wbi-pen, .global-search-item:hover .wbi-pen, .global-search-item.active .wbi-pen { transform: rotate(35deg) translate(-16px, -10px); }
@keyframes wbi-draw { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }

/* Presentation: the next slide comes in from the right, the chart bars grow. */
.presentation-icon .pres-slide { position: absolute; width: 40px; height: 28px; border-radius: 3px; background: var(--panel); border: 1px solid var(--border); box-sizing: border-box; padding: 4px 5px 0; box-shadow: 0 2px 5px rgba(0,0,0,.14); transition: transform .35s cubic-bezier(.34,1.3,.64,1), opacity .3s ease; }
.presentation-icon .pres-slide-back { background: var(--panel-alt); transform: translate(6px, -4px); opacity: .7; z-index: 1; }
.presentation-icon .pres-slide-front { z-index: 2; }
.presentation-icon .pres-title { display: block; height: 3px; width: 18px; border-radius: 2px; background: #e53935; margin-bottom: 4px; }
.presentation-icon .pres-bar { position: absolute; bottom: 3px; width: 5px; border-radius: 1px 1px 0 0; background: var(--text-dim); transition: height .35s cubic-bezier(.34,1.56,.64,1), background .25s ease; }
.presentation-icon .pres-bar-a { left: 7px; height: 6px; }
.presentation-icon .pres-bar-b { left: 15px; height: 10px; }
.presentation-icon .pres-bar-c { left: 23px; height: 4px; }
.presentation-icon .pres-foot { position: absolute; bottom: 4px; width: 14px; height: 2px; border-radius: 1px; background: var(--border); }
.recent-doc-card:hover .pres-slide-front, .browse-card:hover .pres-slide-front, .browse-row:hover .pres-slide-front, .global-search-item:hover .pres-slide-front, .global-search-item.active .pres-slide-front { transform: translate(-6px, 4px) rotate(-3deg); }
.recent-doc-card:hover .pres-slide-back, .browse-card:hover .pres-slide-back, .browse-row:hover .pres-slide-back, .global-search-item:hover .pres-slide-back, .global-search-item.active .pres-slide-back { transform: translate(4px, -6px) rotate(3deg); opacity: 1; }
.recent-doc-card:hover .pres-bar, .browse-card:hover .pres-bar, .browse-row:hover .pres-bar, .global-search-item:hover .pres-bar, .global-search-item.active .pres-bar { background: var(--accent); }
.recent-doc-card:hover .pres-bar-a, .browse-card:hover .pres-bar-a, .browse-row:hover .pres-bar-a, .global-search-item:hover .pres-bar-a, .global-search-item.active .pres-bar-a { height: 9px; }
.recent-doc-card:hover .pres-bar-b, .browse-card:hover .pres-bar-b, .browse-row:hover .pres-bar-b, .global-search-item:hover .pres-bar-b, .global-search-item.active .pres-bar-b { height: 14px; transition-delay: .05s; }
.recent-doc-card:hover .pres-bar-c, .browse-card:hover .pres-bar-c, .browse-row:hover .pres-bar-c, .global-search-item:hover .pres-bar-c, .global-search-item.active .pres-bar-c { height: 11px; transition-delay: .1s; }

/* Spreadsheet: a grid whose cells light up green in a wave. */
.sheet-icon .sheet-frame { width: 44px; height: 34px; border-radius: 4px; background: var(--panel); border: 1px solid var(--border); box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s ease; }
.sheet-icon .sheet-head { display: block; height: 6px; background: #1e8e3e; opacity: .85; }
.sheet-icon .sheet-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1px; padding: 1px; background: var(--border); }
.sheet-icon .sheet-cell { display: block; background: var(--panel); transition: background .25s ease; }
/* Translucent greens, so the wave reads on light and dark panels alike. */
.recent-doc-card:hover .sheet-frame, .browse-card:hover .sheet-frame, .browse-row:hover .sheet-frame, .global-search-item:hover .sheet-frame, .global-search-item.active .sheet-frame { border-color: #2e9e4f; }
.recent-doc-card:hover .sheet-cell, .browse-card:hover .sheet-cell, .browse-row:hover .sheet-cell, .global-search-item:hover .sheet-cell, .global-search-item.active .sheet-cell { background: rgba(76,175,80,.28); }
.recent-doc-card:hover .sheet-cell-0, .browse-card:hover .sheet-cell-0, .browse-row:hover .sheet-cell-0, .global-search-item:hover .sheet-cell-0, .global-search-item.active .sheet-cell-0 { transition-delay: 0s; background: rgba(76,175,80,.6); }
.recent-doc-card:hover .sheet-cell-1, .browse-card:hover .sheet-cell-1, .browse-row:hover .sheet-cell-1, .global-search-item:hover .sheet-cell-1, .global-search-item.active .sheet-cell-1, .recent-doc-card:hover .sheet-cell-4, .browse-card:hover .sheet-cell-4, .browse-row:hover .sheet-cell-4, .global-search-item:hover .sheet-cell-4, .global-search-item.active .sheet-cell-4 { transition-delay: .06s; background: rgba(76,175,80,.45); }
.recent-doc-card:hover .sheet-cell-2, .browse-card:hover .sheet-cell-2, .browse-row:hover .sheet-cell-2, .global-search-item:hover .sheet-cell-2, .global-search-item.active .sheet-cell-2, .recent-doc-card:hover .sheet-cell-5, .browse-card:hover .sheet-cell-5, .browse-row:hover .sheet-cell-5, .global-search-item:hover .sheet-cell-5, .global-search-item.active .sheet-cell-5, .recent-doc-card:hover .sheet-cell-8, .browse-card:hover .sheet-cell-8, .browse-row:hover .sheet-cell-8, .global-search-item:hover .sheet-cell-8, .global-search-item.active .sheet-cell-8 { transition-delay: .12s; }
.recent-doc-card:hover .sheet-cell-3, .browse-card:hover .sheet-cell-3, .browse-row:hover .sheet-cell-3, .global-search-item:hover .sheet-cell-3, .global-search-item.active .sheet-cell-3, .recent-doc-card:hover .sheet-cell-6, .browse-card:hover .sheet-cell-6, .browse-row:hover .sheet-cell-6, .global-search-item:hover .sheet-cell-6, .global-search-item.active .sheet-cell-6, .recent-doc-card:hover .sheet-cell-9, .browse-card:hover .sheet-cell-9, .browse-row:hover .sheet-cell-9, .global-search-item:hover .sheet-cell-9, .global-search-item.active .sheet-cell-9 { transition-delay: .18s; }
.recent-doc-card:hover .sheet-cell-7, .browse-card:hover .sheet-cell-7, .browse-row:hover .sheet-cell-7, .global-search-item:hover .sheet-cell-7, .global-search-item.active .sheet-cell-7, .recent-doc-card:hover .sheet-cell-10, .browse-card:hover .sheet-cell-10, .browse-row:hover .sheet-cell-10, .global-search-item:hover .sheet-cell-10, .global-search-item.active .sheet-cell-10 { transition-delay: .24s; }
.recent-doc-card:hover .sheet-cell-11, .browse-card:hover .sheet-cell-11, .browse-row:hover .sheet-cell-11, .global-search-item:hover .sheet-cell-11, .global-search-item.active .sheet-cell-11 { transition-delay: .3s; background: rgba(76,175,80,.6); }

/* ---- Animated vault/document icons (markup from wwwroot/js/doc-icons.js), shared by the
   Start page's cards, Entdecken's cards and rows and the header search's results —
   the hover of any of those hosts plays the animation; a plain CSS transition, so it
   reverses by itself on mouseleave. ---- */
/* -- Folder icon hover animation: documents slide out from behind the
   folder's front flap when hovering anywhere over the card, and slide back
   in when the hover ends. Pure CSS transitions (no keyframes) so the same
   interaction plays in reverse automatically on mouseleave. -- */
.vault-folder-icon { position: relative; width: 74px; height: 58px; margin-bottom: 10px; flex-shrink: 0; }
.vault-folder-icon .folder-tab {
    position: absolute; left: 6%; top: 0; width: 46%; height: 26%;
    background: var(--accent); opacity: .18; border-radius: 6px 8px 0 0;
}
.vault-folder-icon .folder-back {
    position: absolute; left: 0; bottom: 0; width: 100%; height: 74%;
    background: var(--accent); opacity: .18; border-radius: 4px 8px 8px 8px;
}
.vault-folder-icon .doc {
    position: absolute; left: 50%; bottom: 9px; width: 36px; height: 42px; margin-left: -18px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,.16);
    opacity: 0; transform: translateY(0) rotate(0deg);
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
    padding-top: 6px; box-sizing: border-box;
}
.vault-folder-icon .doc span { display: block; height: 2px; margin: 4px 6px 0; border-radius: 1px; background: var(--border); }
.vault-folder-icon .doc-1 { z-index: 1; }
.vault-folder-icon .doc-2 { z-index: 2; }
.vault-folder-icon .doc-3 { z-index: 3; }
.vault-folder-icon .folder-front {
    position: absolute; left: 0; bottom: 0; width: 100%; height: 58%;
    background: var(--accent); border-radius: 6px 6px 8px 8px; z-index: 4;
    transition: transform .2s ease;
}
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .doc-1, .global-search-item.active .doc-1 { opacity: 1; transform: translateY(-30px) rotate(-9deg); transition-delay: 0s; }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .doc-2, .global-search-item.active .doc-2 { opacity: 1; transform: translateY(-38px) rotate(4deg); transition-delay: .05s; }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .doc-3, .global-search-item.active .doc-3 { opacity: 1; transform: translateY(-24px) rotate(11deg); transition-delay: .1s; }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .folder-front, .global-search-item.active .folder-front { transform: translateY(2px); }

/* -- Recent-document "stack of two papers" hover animation: the back sheet
   shifts right, the front sheet shifts left, fanning them apart to reveal
   both. Reverses automatically on mouseleave (plain CSS transition). -- */
.doc-stack-icon { position: relative; width: 52px; height: 50px; margin-bottom: 9px; flex-shrink: 0; }
.doc-stack-icon .stack-back, .doc-stack-icon .stack-front {
    position: absolute; top: 3px; left: 10px; width: 32px; height: 40px;
    border: 1px solid var(--border); border-radius: 4px; box-sizing: border-box; padding-top: 6px;
    transition: transform .3s cubic-bezier(.34,1.4,.64,1);
}
.doc-stack-icon .stack-back { background: var(--panel-alt); z-index: 1; }
.doc-stack-icon .stack-front { background: var(--panel); box-shadow: 0 2px 5px rgba(0,0,0,.16); z-index: 2; }
.doc-stack-icon span { display: block; height: 2px; margin: 4px 6px 0; border-radius: 1px; background: var(--border); }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .stack-back, .global-search-item.active .stack-back { transform: translate(9px, 3px) rotate(7deg); }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .stack-front, .global-search-item.active .stack-front { transform: translate(-9px, -3px) rotate(-7deg); }

/* -- Recent-document "video" icon (used instead of the paper stack for video
   files): a screen with a play triangle that grows and lights up on hover,
   instead of documents fanning apart. -- */
.video-icon { position: relative; width: 52px; height: 50px; margin-bottom: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.video-icon .video-frame {
    position: relative; width: 44px; height: 34px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 5px;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    transition: border-color .25s ease, background .25s ease;
}
.video-icon .video-play {
    width: 0; height: 0; margin-left: 3px;
    border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--text-dim);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-left-color .25s ease;
}
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .video-frame, .global-search-item.active .video-frame { border-color: var(--accent); background: var(--panel); }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .video-play, .global-search-item.active .video-play { transform: scale(1.35); border-left-color: var(--accent); }

/* -- Recent-document "audio" icon (used instead of the paper stack for mp3/
   audio files): equalizer bars that grow up on hover, like a music player
   reacting to sound — reverses automatically on mouseleave. -- */
.audio-icon { position: relative; width: 52px; height: 50px; margin-bottom: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.audio-icon .audio-frame {
    display: flex; align-items: flex-end; justify-content: center; gap: 4px;
    width: 44px; height: 34px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px;
    padding-bottom: 6px; box-sizing: border-box; transition: border-color .25s ease, background .25s ease;
}
.audio-icon .eq-bar {
    display: block; width: 4px; height: 6px; border-radius: 2px; background: var(--text-dim);
    transition: height .35s cubic-bezier(.34,1.56,.64,1), background .25s ease;
}
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .audio-frame, .global-search-item.active .audio-frame { border-color: var(--accent); background: var(--panel); }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .eq-bar, .global-search-item.active .eq-bar { background: var(--accent); }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .eq-bar-1, .global-search-item.active .eq-bar-1 { height: 14px; transition-delay: 0s; }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .eq-bar-2, .global-search-item.active .eq-bar-2 { height: 22px; transition-delay: .06s; }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .eq-bar-3, .global-search-item.active .eq-bar-3 { height: 10px; transition-delay: .12s; }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .eq-bar-4, .global-search-item.active .eq-bar-4 { height: 18px; transition-delay: .03s; }

/* -- Recent-document "avatar" icon (used instead of the paper stack for
   image files, e.g. profile pictures): the photo pops slightly and a ring
   pulses outward around it on hover, like an active/online highlight. -- */
.avatar-icon { position: relative; width: 52px; height: 50px; margin-bottom: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.avatar-icon .avatar-photo {
    width: 38px; height: 38px; border-radius: 50%; background-size: cover; background-position: center;
    background-color: var(--accent); border: 2px solid var(--panel); box-shadow: 0 2px 5px rgba(0,0,0,.16);
    position: relative; z-index: 2; box-sizing: border-box;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.avatar-icon .avatar-ring {
    position: absolute; width: 38px; height: 38px; border-radius: 50%;
    border: 2px solid var(--accent); opacity: 0; transform: scale(1); box-sizing: border-box;
    transition: transform .4s ease, opacity .4s ease; z-index: 1;
}
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .avatar-photo, .global-search-item.active .avatar-photo { transform: scale(1.12); }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .avatar-ring, .global-search-item.active .avatar-ring { opacity: 1; transform: scale(1.4); }
.avatar-photo.image-fallback { display: flex; align-items: center; justify-content: center; color: var(--accent-contrast); }

/* -- Recent-document "picture" icon (general images that aren't avatars —
   see isAvatarName): the photo sits zoomed-in/cropped at rest and zooms out
   to reveal the full image on hover, while a light shine sweeps across it. -- */
.picture-icon {
    position: relative; width: 52px; height: 50px; margin-bottom: 9px; flex-shrink: 0;
    border-radius: 8px; border: 1px solid var(--border); background: var(--panel-alt); overflow: hidden;
}
.picture-icon .picture-photo {
    width: 100%; height: 100%; background-size: cover; background-position: center;
    transform: scale(1.18); transition: transform .4s cubic-bezier(.34,1.2,.64,1);
}
.picture-icon .picture-shine {
    position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(75deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg); transition: left .5s ease;
}
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .picture-photo, .global-search-item.active .picture-photo { transform: scale(1); }
:is(.vault-card, .recent-doc-card, .browse-card, .browse-row, .global-search-item):hover .picture-shine, .global-search-item.active .picture-shine { left: 130%; }
.picture-photo.image-fallback { display: flex; align-items: center; justify-content: center; color: var(--text-dim); }