/* ==========================================================================
   FirstLook web app — shared components, app shell, library, settings.
   Builds on firstlook.css tokens (never edit that file).
   ========================================================================== */

:root {
  --sb-w: 252px;
  --tb-h: 60px;
  --ease: var(--fl-ease);
  color-scheme: light;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100vh; min-height: 100dvh; }
.ic { width: 18px; height: 18px; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fl-red); outline-offset: 2px; }
.fl-input:focus-visible, .fl-select:focus-visible, .fl-textarea:focus-visible { outline: none; }
.fl-icon-btn:focus-visible { outline: 2px solid var(--fl-red); outline-offset: 2px; }
.fl-icon-btn { transition: color var(--fl-fast) ease, border-color var(--fl-fast) ease, background var(--fl-fast) ease, transform var(--fl-fast) var(--ease); }
.fl-icon-btn:active { transform: scale(.94); }
.fl-icon-btn--ghost { border-color: transparent; background: transparent; }
.fl-icon-btn--ghost:hover { background: var(--fl-surface-3); border-color: transparent; color: var(--fl-ink); }
.fl-btn { transition: background var(--fl-med) ease, border-color var(--fl-med) ease, color var(--fl-med) ease, box-shadow var(--fl-med) ease, transform var(--fl-med) var(--ease); }
.fl-btn--secondary:hover { transform: translateY(-1px); box-shadow: var(--fl-shadow-sm); }
.fl-btn--soft { background: var(--fl-red-soft); color: var(--fl-red); }
.fl-btn--soft:hover { background: var(--fl-red-tint); transform: translateY(-1px); }
.fl-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.fl-btn.is-busy > * { visibility: hidden; }
.fl-btn.is-busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2.2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: fl-spin .7s linear infinite; }
.fl-btn--secondary.is-busy::after, .fl-btn--ghost.is-busy::after, .fl-btn--soft.is-busy::after { border-color: rgba(var(--fl-red-rgb), .2); border-top-color: var(--fl-red); }
.fl-input[aria-invalid="true"], .fl-textarea[aria-invalid="true"] { border-color: rgba(180, 35, 24, .55); box-shadow: 0 0 0 3px rgba(180, 35, 24, .1); }

/* Avatar colour from data */
.av { background: var(--av, #e8f0fe); color: #fff; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.fl-avatar--xl { width: 72px; height: 72px; font-size: 24px; }

/* Keyboard keys */
.fl-kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--fl-line); border-bottom-width: 2px; background: #fff; color: var(--fl-text); font: 800 11px/1 var(--fl-font); box-shadow: 0 1px 0 rgba(16, 24, 40, .04); }
.fl-kbd-plus { margin: 0 3px; color: var(--fl-muted-2); font-weight: 800; font-size: 11px; }
.fl-kbd--dark { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }

/* ---------- Logo ---------- */
.fl-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--fl-ink); border-radius: 10px; }
.fl-logo .fl-mark { flex: none; }
.fl-logo .fl-mark__needle { transform-box: fill-box; transform-origin: 50% 50%; transition: transform var(--fl-slow) var(--ease); }
.fl-logo:hover .fl-mark__needle { transform: rotate(-28deg); }
.fl-logo__word { font-size: 18px; font-weight: 800; letter-spacing: -.4px; line-height: 1; }
.fl-logo__word b { font-weight: 800; color: var(--fl-ink); }
.fl-logo__word i { font-style: normal; color: var(--fl-red); }
.fl-logo--white .fl-logo__word b, .fl-logo--white .fl-logo__word i { color: #fff; }

/* ---------- Toast extras ---------- */
.fl-toasts { left: auto; }
.fl-toast__txt { flex: 1; min-width: 0; }
.fl-toast__action { flex: none; border: 0; background: var(--fl-red-soft); color: var(--fl-red); height: 30px; padding: 0 12px; border-radius: 999px; font-weight: 800; font-size: 12px; transition: background var(--fl-fast) ease; }
.fl-toast__action:hover { background: var(--fl-red-tint); }
.fl-toast__close { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--fl-muted-2); margin-right: -4px; }
.fl-toast__close:hover { background: var(--fl-surface-3); color: var(--fl-text); }
.fl-toast__close svg { width: 14px; height: 14px; }
.fl-toast.is-leaving { animation: fl-toast-out .22s var(--ease) forwards; }
@keyframes fl-toast-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (max-width: 560px) {
  .fl-toasts { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .fl-toast { min-width: 0; max-width: none; }
}

/* ---------- Dialogs ---------- */
.fl-dlg-back { overscroll-behavior: contain; }
.fl-dlg-back.is-leaving { animation: fl-fade-out .16s ease forwards; }
.fl-dlg-back.is-leaving .fl-dlg { animation: fl-pop-out .16s ease forwards; }
@keyframes fl-fade-out { to { opacity: 0; } }
@keyframes fl-pop-out { to { opacity: 0; transform: translateY(6px) scale(.985); } }
.fl-dlg__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 6px; }
.fl-dlg__titles { flex: 1; min-width: 0; padding-top: 6px; }
.fl-dlg__head .fl-dialog__title { font-size: 17px; line-height: 1.3; }
.fl-dlg__ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--fl-surface-3); color: var(--fl-text-2); }
.fl-dlg__ic.is-danger { background: var(--fl-danger-bg); color: var(--fl-danger-text); }
.fl-dlg__ic.is-red { background: var(--fl-red-soft); color: var(--fl-red); }
.fl-dlg__x { display: grid; place-items: center; width: 32px; height: 32px; margin: -2px -6px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--fl-muted); transition: background var(--fl-fast) ease, color var(--fl-fast) ease; }
.fl-dlg__x:hover { background: var(--fl-surface-3); color: var(--fl-ink); }
.fl-dlg__x svg { width: 18px; height: 18px; }
.fl-dlg__body { padding: 10px 20px 6px; }
.fl-dlg__msg { font-size: 13.5px; line-height: 1.55; color: var(--fl-text-2); font-weight: 600; }
.fl-dlg--sm { width: min(420px, calc(100vw - 32px)); }
.fl-dlg--md { width: min(540px, calc(100vw - 32px)); }
.fl-dlg--lg { width: min(720px, calc(100vw - 32px)); }
.fl-dlg--xl { width: min(980px, calc(100vw - 32px)); }
html.has-dialog { overflow: hidden; }
@media (max-width: 560px) {
  .fl-dlg-back { place-items: end center; padding: 0; }
  .fl-dlg { width: 100% !important; max-height: 92vh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: fl-sheet-in var(--fl-slow) var(--ease); }
  .fl-dlg__actions { flex-wrap: wrap-reverse; }
  .fl-dlg__actions .fl-btn { flex: 1 1 auto; }
}
@keyframes fl-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Popovers & menus ---------- */
.fl-pop { position: fixed; z-index: 1500; animation: fl-drop var(--fl-med) var(--ease); }
.fl-pop.is-leaving { animation: fl-fade-out .12s ease forwards; }
.fl-pop--menu .fl-menu { animation: none; }
.fl-pop--panel { background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(15, 23, 42, .1); border-radius: 16px; box-shadow: var(--fl-shadow-pop); }
.fl-menu { max-height: min(70vh, 520px); overflow: auto; }
.fl-menu__item { transition: background var(--fl-fast) ease, color var(--fl-fast) ease; cursor: pointer; }
.fl-menu__item:disabled { opacity: .45; cursor: default; }
.fl-menu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-menu__hint { margin-left: 12px; color: var(--fl-muted-2); font-size: 11.5px; font-weight: 700; }
.fl-menu__check { display: grid; place-items: center; width: 16px; height: 16px; color: var(--fl-red); }
.fl-menu__check svg { color: var(--fl-red) !important; }
.fl-menu__heading { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fl-muted-2); }
.fl-menu__item:hover svg, .fl-menu__item:focus-visible svg { color: var(--fl-ink); }
.fl-menu__item--danger:hover, .fl-menu__item--danger:focus-visible { background: var(--fl-danger-bg); color: var(--fl-danger); }
.fl-menu__item--danger:hover svg { color: var(--fl-danger); }

/* ---------- Forms ---------- */
.fl-form { display: grid; gap: 14px; }
.fl-field { display: grid; gap: 6px; align-content: start; }
.fl-field .fl-label { margin: 0; }
.fl-field__hint { font-size: 11.5px; color: var(--fl-muted); font-weight: 600; }
.fl-field__err { font-size: 12px; color: var(--fl-danger-text); font-weight: 700; display: flex; align-items: center; gap: 6px; animation: fl-fade .2s ease; }
.fl-field__err svg { width: 14px; height: 14px; }
.fl-pw { position: relative; }
.fl-pw .fl-input { padding-right: 44px; }
.fl-pw__toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--fl-muted); }
.fl-pw__toggle:hover { color: var(--fl-ink); background: var(--fl-surface-3); }
.fl-pw__toggle svg { width: 17px; height: 17px; }
.fl-alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; font-size: 12.5px; font-weight: 700; line-height: 1.45; animation: fl-pop .24s var(--ease); }
.fl-alert svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.fl-alert--error { background: var(--fl-danger-bg); color: var(--fl-danger-text); border: 1px solid var(--fl-danger-line); }
.fl-alert--info { background: var(--fl-surface-2); color: var(--fl-text-2); border: 1px solid var(--fl-line-3); }
.fl-alert--success { background: var(--fl-success-bg); color: var(--fl-success-text); border: 1px solid var(--fl-success-line); }
.fl-row { display: flex; align-items: center; gap: 10px; }
.fl-row--between { justify-content: space-between; }
.fl-grow { flex: 1; min-width: 0; }
.fl-copyfield { display: flex; gap: 8px; }
.fl-copyfield .fl-input { font-family: var(--fl-mono); font-size: 12px; font-weight: 500; background: var(--fl-surface-2); }
.fl-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--fl-line-soft); cursor: pointer; }
.fl-switch-row:last-child { border-bottom: 0; }
.fl-switch-row__t { font-size: 13px; font-weight: 800; color: var(--fl-ink); }
.fl-switch-row__d { font-size: 12px; color: var(--fl-muted); font-weight: 600; margin-top: 2px; }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--sb-w);
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 14px 14px; background: #fff; border-right: 1px solid var(--fl-line-3);
}
.sidebar__brand { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 14px; }
.sidebar__close { display: none; }
.sb-new { width: 100%; height: 44px; margin: 2px 0 14px; font-size: 13.5px; gap: 10px; }
.sb-new .sb-new__dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
.sb-new:hover .sb-new__dot { animation: fl-pulse-w 1.4s ease-out infinite; }
@keyframes fl-pulse-w { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 80% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.sb-nav { display: grid; gap: 2px; }
.sb-section { display: flex; align-items: center; justify-content: space-between; padding: 16px 10px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fl-muted-2); }
.sb-section button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--fl-muted); margin-right: -4px; }
.sb-section button:hover { background: var(--fl-surface-3); color: var(--fl-red); }
.sb-section button svg { width: 15px; height: 15px; }
.sb-item {
  position: relative; display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px;
  border-radius: 11px; color: var(--fl-text-2); font-size: 13px; font-weight: 700;
  transition: background var(--fl-fast) ease, color var(--fl-fast) ease;
}
.sb-item .ic { width: 18px; height: 18px; color: var(--fl-muted); transition: color var(--fl-fast) ease; }
.sb-item:hover { background: var(--fl-surface-3); color: var(--fl-ink); }
.sb-item:hover .ic { color: var(--fl-text); }
.sb-item.is-active { background: var(--fl-red-soft); color: var(--fl-red); font-weight: 800; }
.sb-item.is-active .ic { color: var(--fl-red); }
.sb-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item__count { font-size: 11px; font-weight: 800; color: var(--fl-muted-2); }
.sb-item.is-active .sb-item__count { color: rgba(var(--fl-red-rgb), .7); }
.sb-item__more { display: none; place-items: center; width: 24px; height: 24px; margin-right: -4px; border: 0; border-radius: 7px; background: transparent; color: var(--fl-muted); }
.sb-item__more svg { width: 15px; height: 15px; }
.sb-item:hover .sb-item__more, .sb-item:focus-within .sb-item__more, .sb-item__more[aria-expanded="true"] { display: grid; }
.sb-item:hover .sb-item__count, .sb-item:focus-within .sb-item__count { display: none; }
.sb-item__more:hover { background: rgba(16, 24, 40, .06); color: var(--fl-ink); }
.sb-folders { display: grid; gap: 2px; max-height: 34vh; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.sb-folders__empty { padding: 4px 10px 6px; font-size: 12px; color: var(--fl-muted-2); font-weight: 600; }
.sb-item.is-drop { background: var(--fl-red-tint); color: var(--fl-red); box-shadow: inset 0 0 0 1.5px rgba(var(--fl-red-rgb), .4); }
.sb-spacer { flex: 1; }
.sb-promo {
  position: relative; overflow: hidden; display: grid; gap: 8px; padding: 14px; margin-bottom: 8px;
  border-radius: 16px; background: var(--fl-gradient); color: #fff; box-shadow: var(--fl-shadow-red);
}
.sb-promo::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; border: 14px solid rgba(255, 255, 255, .09); }
.sb-promo__t { font-size: 13px; font-weight: 800; line-height: 1.3; }
.sb-promo__d { font-size: 11.5px; font-weight: 600; opacity: .85; line-height: 1.4; }
.sb-promo .fl-btn { height: 32px; font-size: 12px; background: #fff; color: var(--fl-red); justify-self: start; position: relative; z-index: 1; }
.sb-promo .fl-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, .14); }
.sb-ext { display: flex; align-items: center; gap: 8px; padding: 9px 10px; margin-bottom: 6px; border-radius: 11px; background: var(--fl-success-bg); color: var(--fl-success-text); font-size: 11.5px; font-weight: 800; }
.sb-ext__dot { width: 7px; height: 7px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 3px rgba(18, 183, 106, .18); }
.sb-foot { display: flex; align-items: center; gap: 8px; padding: 10px 8px 0; border-top: 1px solid var(--fl-line-soft); font-size: 11.5px; color: var(--fl-muted); font-weight: 700; }
.sb-foot__ws { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main-col { margin-left: var(--sb-w); min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--tb-h);
  display: flex; align-items: center; gap: 12px; padding: 0 28px;
  background: rgba(240, 242, 245, .82); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid transparent; transition: border-color var(--fl-med) ease, background var(--fl-med) ease;
}
.topbar.is-scrolled { border-bottom-color: rgba(16, 24, 40, .07); background: rgba(247, 248, 250, .9); }
.topbar__menu { display: none; }
.topbar__search { flex: 1; max-width: 520px; }
.topbar__search .fl-input { height: 40px; background: #fff; border-color: var(--fl-line-2); box-shadow: var(--fl-shadow-xs); padding-right: 44px; }
.topbar__search .fl-input:focus { border-color: var(--fl-focus-border); }
.topbar__search .fl-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--fl-muted); }
.topbar__search .fl-input:focus ~ .fl-kbd, .topbar__search.has-value .fl-kbd { display: none; }
.topbar__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--fl-muted); }
.topbar__search.has-value .topbar__clear { display: grid; }
.topbar__clear:hover { background: var(--fl-surface-3); color: var(--fl-ink); }
.topbar__clear svg { width: 14px; height: 14px; }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.topbar .fl-icon-btn { width: 38px; height: 38px; background: #fff; border-color: var(--fl-line-2); }
.topbar .fl-icon-btn svg { width: 18px; height: 18px; }
.bell { position: relative; }
.bell__count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--fl-red); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--fl-bg); animation: fl-pop .3s var(--ease); }
.bell.has-unread svg { animation: bell-ring 1.2s var(--ease) 1; transform-origin: 50% 10%; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
.avatar-btn { display: grid; place-items: center; padding: 0; border: 0; background: transparent; border-radius: 50%; transition: transform var(--fl-fast) var(--ease), box-shadow var(--fl-fast) ease; }
.avatar-btn .fl-avatar { width: 38px; height: 38px; font-size: 13px; }
.avatar-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .16); }
.avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(var(--fl-red-rgb), .2); }
.content { flex: 1; padding: 10px 28px 64px; width: 100%; max-width: 1600px; }

.sb-backdrop { display: none; }
@media (max-width: 960px) {
  .sidebar { transform: translateX(-102%); transition: transform var(--fl-slow) var(--ease), box-shadow var(--fl-slow) ease; box-shadow: none; }
  .shell.is-nav-open .sidebar { transform: none; box-shadow: var(--fl-shadow-dialog); }
  .sidebar__close { display: grid; }
  .shell.is-nav-open .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15, 23, 42, .36); backdrop-filter: blur(2px); animation: fl-fade .2s ease; }
  .main-col { margin-left: 0; }
  .topbar { padding: 0 16px; gap: 8px; }
  .topbar__menu { display: grid; }
  .content { padding: 8px 16px 64px; }
  .topbar__search .fl-kbd { display: none; }
}

/* Notifications panel */
.notif { width: min(380px, calc(100vw - 24px)); overflow: hidden; }
.notif__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--fl-line-soft); }
.notif__title { font-size: 14px; font-weight: 800; }
.notif__mark { border: 0; background: transparent; color: var(--fl-red); font-weight: 800; font-size: 12px; padding: 4px 6px; border-radius: 8px; }
.notif__mark:hover { background: var(--fl-red-soft); }
.notif__list { max-height: min(60vh, 440px); overflow: auto; padding: 6px; }
.notif__item { display: flex; align-items: flex-start; gap: 11px; padding: 10px; border-radius: 12px; color: var(--fl-text); transition: background var(--fl-fast) ease; position: relative; }
.notif__item:hover, .notif__item:focus-visible { background: var(--fl-surface-3); outline: none; }
.notif__item.is-unread::after { content: ''; position: absolute; right: 12px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--fl-red); }
.notif__ic { position: relative; flex: none; display: block; height: 32px; }
.notif__type { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .2); font-size: 10px; color: var(--fl-red); }
.notif__type svg { width: 11px; height: 11px; }
.notif__txt { flex: 1; min-width: 0; padding-right: 14px; font-size: 12.5px; line-height: 1.4; font-weight: 600; color: var(--fl-text-2); }
.notif__txt b { color: var(--fl-ink); font-weight: 800; }
.notif__body { margin-top: 5px; padding: 6px 9px; border-radius: 9px; background: var(--fl-surface-2); border: 1px solid var(--fl-line-soft); color: var(--fl-text); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif__time { display: block; margin-top: 3px; font-size: 11px; color: var(--fl-muted-2); font-weight: 700; }
.notif__empty { display: grid; place-items: center; gap: 8px; padding: 36px 20px 40px; text-align: center; color: var(--fl-muted); font-size: 12.5px; }
.notif__empty .bubble { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--fl-surface-3); color: var(--fl-muted); }
.notif__empty b { color: var(--fl-ink); font-size: 13.5px; }

/* Account menu */
.acct { width: 260px; }
.acct__head { display: flex; gap: 11px; align-items: center; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--fl-line-soft); }
.acct__name { font-size: 13.5px; font-weight: 800; color: var(--fl-ink); }
.acct__email { font-size: 11.5px; color: var(--fl-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.acct__role { margin-top: 3px; }

/* New-recording popover */
.recpop { width: 320px; padding: 18px; display: grid; gap: 12px; }
.recpop__art { position: relative; height: 92px; border-radius: 14px; background: linear-gradient(180deg, #f7f8fa, #eef0f4); border: 1px solid var(--fl-line-3); overflow: hidden; }
.recpop__bar { position: absolute; left: 10px; right: 10px; top: 10px; height: 30px; border-radius: 9px; background: #fff; box-shadow: var(--fl-shadow-xs); display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 8px; }
.recpop__bar i { width: 16px; height: 16px; border-radius: 5px; background: var(--fl-line-2); }
.recpop__bar .fm-mark { filter: drop-shadow(0 2px 6px rgba(var(--fl-red-rgb), .35)); }
.recpop__ring { position: absolute; right: 8px; top: 7px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--fl-red); animation: ring-ping 1.6s var(--ease) infinite; }
@keyframes ring-ping { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.recpop__cursor { position: absolute; right: 14px; top: 34px; color: var(--fl-ink); animation: cursor-nudge 2.2s var(--ease) infinite; }
.recpop__cursor svg { width: 20px; height: 20px; fill: #fff; }
@keyframes cursor-nudge { 0%, 100% { transform: translate(14px, 22px); } 50% { transform: translate(0, 0); } }
.recpop__keys { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; }
.recpop__t { font-size: 14px; font-weight: 800; color: var(--fl-ink); }
.recpop__d { font-size: 12.5px; color: var(--fl-text-2); line-height: 1.5; font-weight: 600; }

/* ==========================================================================
   LIBRARY
   ========================================================================== */
.lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 0 18px; flex-wrap: wrap; }
.lib-head__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lib-head h1 { font-size: 26px; letter-spacing: -.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-head__count { height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--fl-line-3); display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--fl-text-2); }
.lib-head__sub { font-size: 12.5px; color: var(--fl-muted); font-weight: 600; margin-top: 4px; }
.lib-head__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lib-sort { position: relative; }
.lib-sort .fl-select { height: 38px; border-radius: 999px; width: auto; padding-left: 36px; font-weight: 800; color: var(--fl-text); background-color: #fff; border-color: var(--fl-line-2); cursor: pointer; }
.lib-sort > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--fl-muted); pointer-events: none; }
.lib-head .fl-seg { background: #fff; border-color: var(--fl-line-2); }
.lib-head .fl-seg button { height: 30px; padding: 0 10px; }
.lib-head .fl-seg button svg { width: 16px; height: 16px; }
.lib-head .fl-seg button[aria-pressed="true"] { background: var(--fl-surface-3); box-shadow: none; color: var(--fl-ink); }

.trash-note { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 18px; border-radius: 12px; background: #fff; border: 1px solid var(--fl-line-3); font-size: 12.5px; font-weight: 700; color: var(--fl-text-2); }
.trash-note svg { width: 16px; height: 16px; color: var(--fl-muted); }

.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 22px 20px; }
.vcard {
  position: relative; display: flex; flex-direction: column; padding: 7px; border-radius: 18px;
  background: #fff; border: 1px solid var(--fl-line-3); box-shadow: var(--fl-shadow-xs);
  transition: transform var(--fl-med) var(--ease), box-shadow var(--fl-med) ease, border-color var(--fl-med) ease;
  animation: card-in .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vcard:hover, .vcard:focus-within { transform: translateY(-3px); box-shadow: var(--fl-shadow-lift); border-color: var(--fl-line-2); }
.vcard.is-new { animation: card-new .7s var(--ease) both; }
@keyframes card-new { 0% { opacity: 0; transform: scale(.94); } 60% { opacity: 1; transform: scale(1.015); box-shadow: 0 0 0 4px rgba(var(--fl-red-rgb), .2); } 100% { transform: none; } }
.vcard.is-removing { animation: card-out .26s var(--ease) forwards; pointer-events: none; }
@keyframes card-out { to { opacity: 0; transform: scale(.95); } }
.vcard__link { position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
.vcard__link:focus-visible { outline: 2.5px solid var(--fl-red); outline-offset: 2px; }
.thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 13px; overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, #1d2939 0%, #0b1018 70%);
  isolation: isolate;
}
.thumb img.thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease, transform .5s var(--ease); opacity: 0; }
.thumb img.thumb__img.is-loaded { opacity: 1; }
.vcard:hover .thumb img.thumb__img { transform: scale(1.025); }
.thumb__sprite { position: absolute; inset: 0; background-repeat: no-repeat; opacity: 0; transition: opacity .12s ease; z-index: 1; }
.thumb.is-scrubbing .thumb__sprite { opacity: 1; }
.thumb__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease; z-index: 1; }
.thumb.is-previewing .thumb__preview { opacity: 1; }
.thumb__scrub { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--fl-red); z-index: 3; opacity: 0; transition: opacity .12s ease; box-shadow: 0 0 8px rgba(var(--fl-red-rgb), .6); }
.thumb.is-scrubbing .thumb__scrub { opacity: 1; }
.thumb__dur { position: absolute; right: 8px; bottom: 8px; z-index: 2; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 7px; background: rgba(11, 16, 24, .74); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.thumb__badges { position: absolute; left: 8px; top: 8px; z-index: 2; display: flex; gap: 6px; }
.thumb__badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 7px; background: rgba(11, 16, 24, .66); backdrop-filter: blur(6px); color: #fff; font-size: 10.5px; font-weight: 800; }
.thumb__badge svg { width: 12px; height: 12px; }
.thumb__badge--fail { background: rgba(180, 35, 24, .92); }
.thumb__play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--fl-red); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); opacity: 0; transform: scale(.85); transition: opacity var(--fl-med) ease, transform var(--fl-med) var(--ease); pointer-events: none; }
.thumb__play svg { width: 18px; height: 18px; margin-left: 2px; }
.vcard:hover .thumb__play { opacity: 1; transform: scale(1); }
.thumb.is-scrubbing .thumb__play { opacity: 0; }
.vcard__menu { position: absolute; right: 15px; top: 15px; z-index: 4; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .94); color: var(--fl-ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(-3px); transition: opacity var(--fl-fast) ease, transform var(--fl-fast) var(--ease), background var(--fl-fast) ease; }
.vcard__menu svg { width: 17px; height: 17px; }
.vcard:hover .vcard__menu, .vcard:focus-within .vcard__menu, .vcard__menu[aria-expanded="true"] { opacity: 1; transform: none; }
.vcard__menu:hover { background: #fff; color: var(--fl-red); }
@media (hover: none) { .vcard__menu { opacity: 1; transform: none; } }
.vcard__copy { position: absolute; right: 53px; top: 15px; z-index: 4; height: 32px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .94); color: var(--fl-ink); font-size: 12px; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(-3px); transition: opacity var(--fl-fast) ease, transform var(--fl-fast) var(--ease), color var(--fl-fast) ease; }
.vcard__copy svg { width: 14px; height: 14px; }
.vcard:hover .vcard__copy, .vcard:focus-within .vcard__copy { opacity: 1; transform: none; }
.vcard__copy:hover { color: var(--fl-red); }
.vcard__copy.is-done { color: var(--fl-success-text); }
@media (hover: none) { .vcard__copy { display: none; } }
.vcard__body { padding: 11px 7px 5px; display: grid; gap: 8px; }
.vcard__title { font-size: 14px; font-weight: 800; line-height: 1.35; color: var(--fl-ink); letter-spacing: -.15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; word-break: break-word; }
.vcard__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fl-muted); font-weight: 700; min-width: 0; }
.vcard__owner { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; }
.vcard__owner span.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fl-text-2); }
.vcard__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fl-muted-2); flex: none; }
.vcard__stats { display: flex; align-items: center; gap: 10px; flex: none; }
.vcard__stat { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.vcard__stat svg { width: 14px; height: 14px; }

/* Processing overlay on a card */
.proc { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 8px; background: linear-gradient(160deg, rgba(11, 16, 24, .72), rgba(29, 41, 57, .78)); backdrop-filter: blur(5px); color: #fff; text-align: center; }
.proc__ring { position: relative; width: 52px; height: 52px; }
.proc__ring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.proc__ring circle { fill: none; stroke-width: 4; }
.proc__ring .bg { stroke: rgba(255, 255, 255, .16); }
.proc__ring .fg { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .4s var(--ease); }
.proc__ring.is-indet svg { animation: fl-spin 1.1s linear infinite; }
.proc__pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.proc__label { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; opacity: .92; }
.proc--fail { background: linear-gradient(160deg, rgba(60, 10, 8, .8), rgba(29, 41, 57, .82)); }
.proc--upload .proc__bar { width: 62%; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.proc--upload .proc__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #fff; transition: width .25s var(--ease); }
.proc--upload .proc__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .14); }
.proc--upload .proc__icon svg { width: 20px; height: 20px; animation: up-bob 1.4s ease-in-out infinite; }
@keyframes up-bob { 50% { transform: translateY(-3px); } }

/* Skeletons */
.vcard--skel { pointer-events: none; animation: none; }
.vcard--skel .thumb { background: none; }
.vcard--skel .thumb .fl-skel { position: absolute; inset: 0; border-radius: 13px; }
.skel-line { height: 12px; border-radius: 6px; }

/* List view */
.vlist { display: grid; gap: 0; background: #fff; border: 1px solid var(--fl-line-3); border-radius: 18px; overflow: hidden; box-shadow: var(--fl-shadow-xs); }
.vlist__head, .vrow { display: grid; grid-template-columns: minmax(0, 1fr) 130px 100px 80px 80px 44px; align-items: center; gap: 14px; padding: 0 16px; }
.vlist__head { height: 40px; font-size: 10.5px; font-weight: 800; color: var(--fl-muted-2); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--fl-line-soft); background: #fbfcfe; }
.vrow { position: relative; min-height: 76px; border-bottom: 1px solid var(--fl-line-soft); transition: background var(--fl-fast) ease; animation: card-in .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); font-size: 12.5px; color: var(--fl-text-2); font-weight: 700; }
.vrow:last-child { border-bottom: 0; }
.vrow:hover { background: var(--fl-surface-2); }
.vrow__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vrow .thumb { width: 112px; flex: none; border-radius: 9px; }
.vrow .thumb__dur { right: 5px; bottom: 5px; height: 18px; font-size: 10px; padding: 0 5px; border-radius: 5px; }
.vrow .thumb__play { display: none; }
.vrow__title { font-size: 13.5px; font-weight: 800; color: var(--fl-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow__sub { margin-top: 3px; font-size: 11.5px; color: var(--fl-muted); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.vrow .vcard__menu { position: relative; inset: auto; opacity: 1; transform: none; box-shadow: none; background: transparent; color: var(--fl-muted); z-index: 2; }
.vrow .vcard__menu:hover { background: var(--fl-surface-3); }
.vrow .vcard__link { border-radius: 0; }
.vrow .num { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .vlist__head { display: none; }
  .vrow { grid-template-columns: minmax(0, 1fr) 44px; }
  .vrow > .col-opt { display: none; }
  .vrow .thumb { width: 96px; }
}

.load-more { display: flex; justify-content: center; padding: 26px 0 0; }

/* Empty states */
.empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 54px 20px 64px; background: #fff; border: 1px solid var(--fl-line-3); border-radius: 22px; box-shadow: var(--fl-shadow-xs); animation: fl-pop .4s var(--ease); }
.empty h2 { font-size: 22px; letter-spacing: -.5px; margin-top: 6px; }
.empty p { max-width: 440px; color: var(--fl-text-2); font-size: 13.5px; line-height: 1.6; font-weight: 600; }
.empty__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.empty__keys { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fl-muted); font-weight: 700; margin-top: 2px; }
.empty--small { padding: 44px 20px 48px; }
.empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--fl-surface-3); color: var(--fl-muted); }
.empty__icon svg { width: 28px; height: 28px; }

/* Empty illustration — a little recording window */
.ill { position: relative; width: 300px; height: 196px; margin-bottom: 6px; }
.ill__win { position: absolute; inset: 10px 18px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--fl-line-2); box-shadow: 0 24px 50px rgba(15, 23, 42, .12); overflow: hidden; }
.ill__bar { height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: var(--fl-surface-2); border-bottom: 1px solid var(--fl-line-3); }
.ill__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--fl-line); }
.ill__bar i:first-child { background: #f97066; }
.ill__bar i:nth-child(2) { background: #fdb022; }
.ill__bar i:nth-child(3) { background: #32d583; }
.ill__body { padding: 14px; display: grid; gap: 8px; }
.ill__line { height: 9px; border-radius: 6px; background: var(--fl-surface-3); }
.ill__line.w60 { width: 60%; } .ill__line.w80 { width: 80%; } .ill__line.w40 { width: 40%; }
.ill__line.red { background: var(--fl-red-tint); width: 34%; }
.ill__cam { position: absolute; left: 0; bottom: 4px; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #f4c7a1 0 17%, transparent 18%), radial-gradient(circle at 50% 100%, #d93025 0 38%, transparent 39%), linear-gradient(160deg, #fde9e7, #f8d4d0); border: 4px solid #fff; box-shadow: 0 14px 30px rgba(15, 23, 42, .2); animation: float 4s ease-in-out infinite; }
.ill__ctrl { position: absolute; right: 2px; bottom: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--fl-night-2); color: #fff; box-shadow: 0 14px 30px rgba(15, 23, 42, .3); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; animation: float 4s ease-in-out -2s infinite; }
.ill__ctrl .fl-rec-dot { width: 10px; height: 10px; }
.ill__ctrl i { width: 1px; height: 18px; background: rgba(255, 255, 255, .2); }
.ill__ctrl svg { width: 14px; height: 14px; opacity: .8; }
.ill__cursor { position: absolute; left: 58%; top: 46%; animation: cursor-wander 6s var(--ease) infinite; }
.ill__cursor svg { width: 22px; height: 22px; fill: #fff; color: var(--fl-ink); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .2)); }
.ill__click { position: absolute; left: -10px; top: -10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--fl-red-rgb), .25); animation: click-ripple 6s var(--ease) infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes cursor-wander { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-60px, -30px); } 60% { transform: translate(30px, 10px); } }
@keyframes click-ripple { 0%, 28% { transform: scale(0); opacity: 0; } 32% { transform: scale(.4); opacity: 1; } 42% { transform: scale(1.4); opacity: 0; } 100% { opacity: 0; } }

/* Drag & drop upload overlay */
.dropzone { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px; background: rgba(240, 242, 245, .72); backdrop-filter: blur(8px); animation: fl-fade .15s ease; pointer-events: none; }
.dropzone__box { display: grid; justify-items: center; gap: 12px; width: min(560px, 100%); padding: 56px 28px; border-radius: 26px; border: 2.5px dashed rgba(var(--fl-red-rgb), .55); background: rgba(255, 255, 255, .9); box-shadow: var(--fl-shadow-dialog); text-align: center; animation: fl-pop .3s var(--ease); }
.dropzone__ic { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; background: var(--fl-red-soft); color: var(--fl-red); }
.dropzone__ic svg { width: 30px; height: 30px; animation: up-bob 1.2s ease-in-out infinite; }
.dropzone__t { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.dropzone__d { font-size: 13px; color: var(--fl-muted); font-weight: 600; }

/* Folder picker dialog list */
.pick-list { display: grid; gap: 4px; max-height: 320px; overflow: auto; margin: 0 -4px; padding: 2px 4px; }
.pick { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 1px solid var(--fl-line-3); border-radius: 12px; background: #fff; font-weight: 800; font-size: 13px; color: var(--fl-text); text-align: left; transition: border-color var(--fl-fast) ease, background var(--fl-fast) ease, color var(--fl-fast) ease; }
.pick svg { width: 17px; height: 17px; color: var(--fl-muted); }
.pick:hover { border-color: rgba(var(--fl-red-rgb), .3); }
.pick[aria-pressed="true"] { border-color: rgba(var(--fl-red-rgb), .45); background: var(--fl-red-soft); color: var(--fl-red); }
.pick[aria-pressed="true"] svg { color: var(--fl-red); }
.pick__n { margin-left: auto; font-size: 11.5px; color: var(--fl-muted-2); }

/* ==========================================================================
   SETTINGS
   ========================================================================== */
.set-wrap { max-width: 920px; }
.set-head { padding: 18px 0 6px; }
.set-head h1 { font-size: 26px; letter-spacing: -.6px; }
.set-head p { margin-top: 4px; color: var(--fl-muted); font-size: 13px; font-weight: 600; }
.tabs { display: flex; gap: 4px; margin: 16px 0 22px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--fl-line-3); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--fl-muted); font-weight: 800; font-size: 13px; white-space: nowrap; transition: background var(--fl-med) ease, color var(--fl-med) ease; }
.tab svg { width: 16px; height: 16px; }
.tab:hover { color: var(--fl-ink); }
.tab[aria-selected="true"] { background: var(--fl-ink); color: #fff; box-shadow: 0 4px 12px rgba(16, 24, 40, .18); }
.set-panel { display: grid; gap: 18px; animation: fl-pop .3s var(--ease); }
.set-card { background: #fff; border: 1px solid var(--fl-line-3); border-radius: 18px; box-shadow: var(--fl-shadow-xs); }
.set-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 0; }
.set-card__t { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.set-card__d { margin-top: 3px; font-size: 12.5px; color: var(--fl-muted); font-weight: 600; line-height: 1.5; }
.set-card__body { padding: 16px 22px 20px; }
.set-card__foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--fl-line-soft); background: #fbfcfe; border-radius: 0 0 18px 18px; }
.set-card__foot .fl-muted { margin-right: auto; font-size: 12px; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.set-grid .full { grid-column: 1 / -1; }
@media (max-width: 680px) { .set-grid { grid-template-columns: 1fr; } }
.profile-hero { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.profile-hero__name { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.profile-hero__email { color: var(--fl-muted); font-size: 12.5px; font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { padding: 16px; border-radius: 14px; background: var(--fl-surface-2); border: 1px solid var(--fl-line-soft); }
.stat__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--fl-red); box-shadow: var(--fl-shadow-xs); margin-bottom: 10px; }
.stat__ic svg { width: 17px; height: 17px; }
.stat__v { font-size: 22px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.stat__l { font-size: 11.5px; color: var(--fl-muted); font-weight: 700; }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }
.members { display: grid; }
.member { display: grid; grid-template-columns: minmax(0, 1fr) 90px 140px 40px; gap: 12px; align-items: center; padding: 12px 22px; border-top: 1px solid var(--fl-line-soft); }
.member:first-child { border-top: 0; }
.member__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.member__name { font-size: 13.5px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.member__email { font-size: 12px; color: var(--fl-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member__vids { font-size: 12px; color: var(--fl-muted); font-weight: 700; }
.member .fl-select { height: 34px; font-size: 12.5px; border-radius: 999px; }
@media (max-width: 680px) { .member { grid-template-columns: minmax(0, 1fr) 120px 36px; } .member__vids { display: none; } }
.tokens { display: grid; }
.token { display: flex; align-items: center; gap: 14px; padding: 13px 22px; border-top: 1px solid var(--fl-line-soft); }
.token:first-child { border-top: 0; }
.token__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--fl-red-soft); color: var(--fl-red); flex: none; }
.token__ic svg { width: 18px; height: 18px; }
.token__t { font-size: 13.5px; font-weight: 800; }
.token__d { font-size: 12px; color: var(--fl-muted); font-weight: 600; }
.ext-status { display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
.ext-status__ic { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--fl-surface-3); }
.ext-status__ic .ok { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #12b76a; color: #fff; border: 2.5px solid #fff; }
.ext-status__ic .ok svg { width: 11px; height: 11px; stroke-width: 3.2; }
.ext-status__t { font-size: 15px; font-weight: 800; }
.ext-status__d { font-size: 12.5px; color: var(--fl-muted); font-weight: 600; margin-top: 2px; }
.mini-steps { display: grid; gap: 10px; counter-reset: st; margin: 0; padding: 0; list-style: none; }
.mini-steps li { counter-increment: st; display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--fl-text); font-weight: 600; line-height: 1.5; }
.mini-steps li::before { content: counter(st); display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--fl-red-soft); color: var(--fl-red); font-size: 11.5px; font-weight: 800; }
.mini-steps code, .code-chip { font-family: var(--fl-mono); font-size: 12px; padding: 2px 7px; border-radius: 6px; background: var(--fl-surface-3); border: 1px solid var(--fl-line-3); color: var(--fl-ink); font-weight: 600; }
.set-skel { height: 180px; border-radius: 18px; }

/* Page boot loader */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--fl-bg); z-index: 5; transition: opacity .25s ease; }
.boot .fl-mark { animation: boot-spin 1.6s var(--ease) infinite; }
@keyframes boot-spin { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .72; } }
.boot.is-done { opacity: 0; pointer-events: none; }

/* Invites */
.inv-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.inv-btn { height: 40px; }
.inv-out { margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--fl-surface-2); border: 1px solid var(--fl-line-soft); animation: fl-pop .3s var(--fl-ease); }
@media (max-width: 560px) { .inv-row > .fl-field { width: 100% !important; flex: 1 1 100%; } .inv-btn { width: 100%; } }
html.has-dialog .fl-toasts { bottom: auto; top: 18px; }

@media (max-width: 960px) {
  .topbar__spacer { display: none; }
  .topbar__search { max-width: none; }
}
@media (max-width: 560px) {
  .lib-head { padding: 14px 0 16px; gap: 12px; }
  .lib-head h1 { font-size: 23px; }
  .lib-head > div:first-child { width: 100%; }
  .lib-head__tools { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .lib-sort { flex: 1; min-width: 0; }
  .lib-sort .fl-select { width: 100%; }
  #libUpload { width: 38px; height: 38px; padding: 0; flex: none; }
  #libUpload span { display: none; }
  .vgrid { gap: 16px; }
}@media (max-width: 560px) { .vcard__title { min-height: 0; } }