/*
 * ndevr-forms.css — shared modern form kit for the native-web OWL widgets (auth, upload, etc.).
 * Dark, self-contained, scoped under .ndevr-forms so its rules stay contained to the widgets.
 * Colors consume the canonical --nd-* theme tokens (/shared/css/theme.css) directly, with the original
 * dark literals as var() fallbacks, so every .nf-* component follows the dark/light toggle.
 * Floating labels, inline validation, password-strength meter, beveled accent buttons —
 * deliberately the antidote to the dated QGroupBox-per-field native dialogs.
 */

@layer page {
.ndevr-forms {
  color: var(--nd-text, #e8eaed);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}
.ndevr-forms *, .ndevr-forms *::before, .ndevr-forms *::after { box-sizing: border-box; }

/* Kill the mobile tap-highlight box (the translucent blue/grey flash WebKit & Chrome draw on tap)
   on every interactive element, and reserve visible focus rings for keyboard users (:focus-visible)
   so a tap/click doesn't leave a lingering blue outline. */
.ndevr-forms, .ndevr-forms * { -webkit-tap-highlight-color: transparent; }
.ndevr-forms button, .ndevr-forms a, .ndevr-forms [role="button"] { -webkit-tap-highlight-color: transparent; }
.ndevr-forms button:focus:not(:focus-visible),
.ndevr-forms a:focus:not(:focus-visible),
.ndevr-forms [role="button"]:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.ndevr-forms button:focus-visible,
.ndevr-forms [role="button"]:focus-visible { outline: 2px solid var(--nd-accent-deep, #f2a900); outline-offset: 2px; }

.ndevr-forms .nf-card {
  background: var(--nd-surface-2, #23272f);
  border: 1px solid var(--nd-border, #353b46);
  border-radius: 14px; /* intentional card radius (one step softer than --nd-radius 12px) */
  padding: 26px 24px 24px;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: var(--nd-shadow-2, 0 18px 50px rgba(0, 0, 0, 0.35));
}
.ndevr-forms .nf-title { font-size: 20px; font-weight: 700; margin: 0 0 2px; }
.ndevr-forms .nf-sub { color: var(--nd-muted, #9aa3b2); font-size: 13px; margin: 0 0 20px; }

/* Segmented pill toggle (Sign in / Create account, My files / Shared, Bug / Feature, Site Studio
   widget). Built + positioned by ndevr-segmented.js: a single pill slides between options, placed
   from the active button's box (robust to padding/gaps). Box model + typography are pinned across
   every state so :hover/:focus/:active never resize the tabs (the sliding pill must track a stable box).

   Sizes (data-size on .nf-tabs): "full" = equal-width segments filling the row (the sign-in look);
   "md" (default) / "sm" = content-width segments for inline placement (e.g. the file-browser
   breadcrumb row). Only "full" carries the card-spacing bottom margin. */
.ndevr-forms .nf-tabs {
  position: relative; display: inline-flex; gap: 4px;
  background: var(--nd-field, #1b1e24); border: 1px solid var(--nd-border, #353b46);
  border-radius: 10px; padding: 4px; margin-bottom: 0;
}
.ndevr-forms .nf-tabs[data-size="full"] { display: flex; margin-bottom: 22px; }
.ndevr-forms .nf-tabs .nf-tab-pill {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0;
  margin: 0; padding: 0; border: 0;
  border-radius: 7px;
  /* Lighter than the field track + a 1px rim so the highlight reads even if the theme flattens shadows. */
  background: var(--nd-hover, #222732);
  box-shadow: inset 0 0 0 1px var(--nd-tint-1, rgba(255, 255, 255, .07)), 0 1px 4px rgba(0, 0, 0, .35);
  z-index: 0; pointer-events: none; opacity: 1; display: block;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), width .26s cubic-bezier(.4, 0, .2, 1);
}
.ndevr-forms .nf-tab,
.ndevr-forms .nf-tab:hover,
.ndevr-forms .nf-tab:focus,
.ndevr-forms .nf-tab:active {
  position: relative; z-index: 1;
  flex: 0 0 auto; text-align: center; cursor: pointer; width: auto; min-height: 0;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  font: 600 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-transform: none; text-decoration: none;
  transform: none; outline: none;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  color: var(--nd-muted, #9aa3b2);
  box-shadow: none;
  transition: color .2s ease;
}
.ndevr-forms .nf-tab:hover,
.ndevr-forms .nf-tab:focus,
.ndevr-forms .nf-tab.is-active { color: var(--nd-text, #e8eaed); }
/* Size variants (selectors beat the base block's specificity so no extra is needed,
   except to override the base's locked padding/font on "sm"). */
.ndevr-forms .nf-tabs[data-size="full"] .nf-tab { flex: 1 1 0; }
.ndevr-forms .nf-tabs[data-size="sm"] .nf-tab { padding: 6px 13px; font-size: 13px; }

/* Form area whose height JS animates when switching tabs / toggling the recovery warning. The
   incoming pane fades+slides in. overflow is only clamped by JS during the transition. */
.ndevr-forms .nf-forms { position: relative; }
@keyframes nf-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ndevr-forms .nf-fade { animation: nf-fadein .26s ease; }

/* Floating-label field */
.ndevr-forms .nf-field { position: relative; margin-bottom: 16px; }
.ndevr-forms .nf-field input {
  width: 100%; height: 52px; padding: 22px 14px 8px; border-radius: 10px;
  background: var(--nd-field, #1b1e24); border: 1px solid var(--nd-border, #353b46);
  color: var(--nd-text, #e8eaed); font-size: 15px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ndevr-forms .nf-field input::placeholder { color: transparent; }
.ndevr-forms .nf-field label {
  position: absolute; left: 14px; top: 16px; color: var(--nd-muted, #9aa3b2);
  font-size: 15px; pointer-events: none; transition: transform .14s ease, color .14s, font-size .14s;
  transform-origin: left top;
}
.ndevr-forms .nf-field input:focus + label,
.ndevr-forms .nf-field input:not(:placeholder-shown) + label {
  transform: translateY(-9px); font-size: 11.5px; color: var(--nd-accent-deep, #f2a900); letter-spacing: .02em;
}
.ndevr-forms .nf-field input:focus { border-color: var(--nd-accent-deep, #f2a900); box-shadow: 0 0 0 3px rgba(242,169,0,.15); }
.ndevr-forms .nf-field.is-error input { border-color: var(--nd-error, #ff7a85); }
.ndevr-forms .nf-field.is-error input:focus { box-shadow: 0 0 0 3px rgba(255,122,133,.16); }
.ndevr-forms .nf-hint { font-size: 12px; color: var(--nd-muted, #9aa3b2); margin: 6px 2px 0; min-height: 14px; }
.ndevr-forms .nf-field.is-error .nf-hint { color: var(--nd-error, #ff7a85); }

/* Show/hide password toggle. Box model + the vertical-centering transform are locked with
   across every state so :hover/:focus/:active never resize or shift it. */
.ndevr-forms .nf-field .nf-eye,
.ndevr-forms .nf-field .nf-eye:hover,
.ndevr-forms .nf-field .nf-eye:focus,
.ndevr-forms .nf-field .nf-eye:active {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  background: transparent; color: var(--nd-muted, #9aa3b2); cursor: pointer;
  margin: 0; padding: 8px 10px; border: 0; border-radius: 6px;
  font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-transform: none; text-decoration: none;
  width: auto; height: auto; min-width: 0; min-height: 0;
  box-shadow: none; outline: none; -webkit-appearance: none; appearance: none;
}
.ndevr-forms .nf-field .nf-eye:hover,
.ndevr-forms .nf-field .nf-eye:focus { color: var(--nd-text, #e8eaed); }

/* Password-strength meter */
.ndevr-forms .nf-strength { display: flex; gap: 4px; margin: 8px 2px 0; }
.ndevr-forms .nf-strength i { height: 4px; flex: 1; border-radius: 2px; background: var(--nd-border, #353b46); transition: background .2s; }
.ndevr-forms .nf-strength.s1 i:nth-child(-n+1),
.ndevr-forms .nf-strength.s2 i:nth-child(-n+2),
.ndevr-forms .nf-strength.s3 i:nth-child(-n+3),
.ndevr-forms .nf-strength.s4 i:nth-child(-n+4) { background: var(--nd-accent-deep, #f2a900); }
.ndevr-forms .nf-strength.s1 i:nth-child(-n+1) { background: var(--nd-error, #ff7a85); }
.ndevr-forms .nf-strength.s2 i:nth-child(-n+2) { background: var(--nd-warn, #e8a13a); }

.ndevr-forms .nf-check { display: flex; align-items: center; gap: 9px; margin: 4px 2px 12px; color: var(--nd-muted, #9aa3b2); font-size: 13.5px; cursor: pointer; }
.ndevr-forms .nf-check input { width: 16px; height: 16px; accent-color: var(--nd-accent-deep, #f2a900); flex: 0 0 auto; }

/* Password-recovery opt-in note + the "no recovery" acknowledgment warning */
.ndevr-forms .nf-note { margin: -6px 2px 14px 27px; color: var(--nd-muted, #9aa3b2); font-size: 12px; }
.ndevr-forms .nf-warn {
  border-radius: 10px; padding: 11px 13px; margin: 0 0 12px;
  background: var(--nd-warn-bg, rgba(232,161,58,.1)); border: 1px solid var(--nd-warn-line, rgba(232,161,58,.4)); color: var(--nd-warn-fg, #e8a13a); font-size: 13px;
}
.ndevr-forms .nf-warn b { color: var(--nd-warn, #f3b85a); }

/* Buttons */
/* Flat fill to match the .nui-btn system (was a gold gradient + bevel; now a solid token fill). */
.ndevr-forms .nf-btn {
  width: 100%; height: 50px; border: 0; border-radius: var(--nd-radius-sm, 8px); cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--nd-accent-contrast, #232323);
  background: var(--nd-accent-deep, #f2a900);
  box-shadow: none;
  transition: filter .15s, transform .05s;
}
.ndevr-forms .nf-btn:hover { filter: brightness(1.06); }
.ndevr-forms .nf-btn:active { transform: translateY(1px); }
.ndevr-forms .nf-btn[disabled] { filter: grayscale(.5) brightness(.8); cursor: default; box-shadow: none; }
.ndevr-forms .nf-btn.nf-btn-ghost {
  background: transparent; color: var(--nd-muted, #9aa3b2); box-shadow: none; height: auto; font-weight: 600; font-size: 13.5px;
}
.ndevr-forms .nf-btn.nf-btn-ghost:hover { color: var(--nd-text, #e8eaed); filter: none; }
.ndevr-forms .nf-btn .nf-spin {
  display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px;
  border: 2px solid rgba(0,0,0,.35); border-top-color: rgba(0,0,0,.85); border-radius: 50%;
  animation: nf-spin .7s linear infinite;
}
@keyframes nf-spin { to { transform: rotate(360deg); } }

/* Message banners */
.ndevr-forms .nf-msg { border-radius: 10px; padding: 11px 13px; font-size: 13.5px; margin-bottom: 16px; display: none; }
.ndevr-forms .nf-msg.show { display: block; }
.ndevr-forms .nf-msg.err { background: rgba(255,122,133,.12); border: 1px solid rgba(255,122,133,.4); color: var(--nd-error, #ff7a85); }
.ndevr-forms .nf-msg.ok { background: rgba(94,224,138,.1); border: 1px solid rgba(94,224,138,.35); color: var(--nd-ok, #5ee08a); }
.ndevr-forms .nf-msg.info { background: rgba(242,169,0,.1); border: 1px solid rgba(242,169,0,.35); color: var(--nd-accent-deep, #f2a900); }

.ndevr-forms .nf-foot { text-align: center; margin-top: 14px; }

/* Inline text link (e.g. "Forgot password?", "Back to sign in") — quiet button styled as a link */
.ndevr-forms .nf-link {
  background: none; border: 0; padding: 4px 2px; margin: 0; cursor: pointer;
  color: var(--nd-muted, #9aa3b2); font-size: 13px; font-family: inherit; text-decoration: none;
}
.ndevr-forms .nf-link:hover { color: var(--nd-accent-deep, #f2a900); text-decoration: underline; }
.ndevr-forms .nf-forgot { text-align: right; margin: -6px 2px 12px; }
.ndevr-forms .nf-back { display: block; margin: 12px auto 0; }

/* Logged-in state */
.ndevr-forms .nf-account { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ndevr-forms .nf-avatar {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nd-accent-deep, #f2a900);
  color: var(--nd-accent-contrast, #232323); font-weight: 800; font-size: 18px;
}
.ndevr-forms .nf-account .nf-who { font-weight: 700; }
.ndevr-forms .nf-account .nf-who small { display: block; color: var(--nd-muted, #9aa3b2); font-weight: 500; font-size: 12.5px; }
.ndevr-forms .nf-row { display: flex; gap: 10px; }
.ndevr-forms .nf-row .nf-btn { flex: 1; }
.ndevr-forms .nf-btn.nf-btn-sec {
  background: var(--nd-field, #1b1e24); color: var(--nd-text, #e8eaed); box-shadow: inset 0 0 0 1px var(--nd-border, #353b46);
}
.ndevr-forms .nf-btn.nf-btn-sec:hover { filter: none; background: var(--nd-hover, #222732); }
.ndevr-forms .nf-btn.nf-btn-danger {
  background: transparent; color: var(--nd-error, #ff7a85); box-shadow: inset 0 0 0 1px var(--nd-danger, rgba(224,88,79,.4));
}
.ndevr-forms .nf-btn.nf-btn-danger:hover { filter: none; background: var(--nd-danger-soft, rgba(224,88,79,.12)); }

/* Account settings: clickable avatar with a camera badge */
.ndevr-forms .nf-avatar.nf-avatar-btn {
  position: relative; padding: 0; border: 0; cursor: pointer; overflow: visible;
}
.ndevr-forms .nf-avatar.nf-avatar-btn img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.ndevr-forms .nf-avatar .nf-avatar-cam {
  position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; color: var(--nd-accent-contrast, #232323);
  background: var(--nd-accent-deep, #f2a900);
  box-shadow: 0 0 0 2px var(--nd-surface-2, #23272f);
}
.ndevr-forms .nf-avatar.nf-avatar-btn:hover { filter: brightness(1.06); }
.ndevr-forms .nf-avatar.is-busy { opacity: .55; pointer-events: none; }

/* Account settings: accordion of setting rows */
.ndevr-forms .nf-settings { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.ndevr-forms .nf-setting {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 46px; padding: 0 14px; border: 0; cursor: pointer; text-align: left;
  font-size: 14.5px; font-weight: 600; color: var(--nd-text, #e8eaed);
  background: var(--nd-field, #1b1e24); border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--nd-border, #353b46);
  transition: background .15s;
}
/* Explicit text color (here + on hover + on the inner span) keeps the label legible against the
   row background in every state. */
.ndevr-forms .nf-setting:hover { background: var(--nd-hover, #222732); color: var(--nd-text, #e8eaed); }
.ndevr-forms .nf-setting > span { color: var(--nd-text, #e8eaed); }
.ndevr-forms .nf-setting .nf-chev { color: var(--nd-muted, #9aa3b2); transition: transform .18s; flex: none; }
.ndevr-forms .nf-setting.is-open { box-shadow: inset 0 0 0 1px var(--nd-accent-deep, #f2a900); }
.ndevr-forms .nf-setting.is-open .nf-chev { transform: rotate(90deg); color: var(--nd-accent-deep, #f2a900); }
.ndevr-forms .nf-setting-form { padding: 4px 2px 6px; }

/* ---- OWL data view (ndevr-owl-data.js) ------------------------------------------------------ */
/* The data browser is a wide surface (grid/table), not a narrow form — let it fill its container up
   to a generous cap, and override the 420px form-card width it would otherwise inherit. */
/* overflow-x:hidden so the widget can NEVER push the page wider than the screen. On mobile, any
   horizontal overflow (e.g. a long breadcrumb / the selection bar in a narrow column) expands the
   LAYOUT VIEWPORT, and then every position:fixed popup sizes to that wider viewport and overflows
   to the right. Clipping the widget here keeps the page — and the popups — at device width. */
.ndevr-forms .owl-data { width: 100%; max-width: 1040px; margin: 0 auto; overflow-x: hidden; }
.ndevr-forms .owl-data > .nf-card { overflow-x: hidden; }
.ndevr-forms .owl-data .nf-card { max-width: none; }
/* Signed-out library view: center the inline sign-in card at its natural width. */
.ndevr-forms .owl-signin { width: 100%; max-width: 420px; margin: 24px auto; }
.ndevr-forms .owl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.ndevr-forms .owl-head .owl-title { font-size: 18px; font-weight: 700; }
/* Standalone-page brand chrome (data-brand). Desktop: the "NDEVR OWL" title sits far-left of the
   .owl-head row (margin-right:auto) while the tools + account/hamburger cluster ride the same row at
   the right. The site nav cluster (account button + burger) is filled into .owl-head-nav by
   ndevr-nav-auth.js, which also tags it .ndevr-nav-cluster for its own flex styling. */
.ndevr-forms .owl-brand { order: 0; margin-right: auto; white-space: nowrap; color: var(--nd-text, #e8eaed);
  font: 600 18px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.ndevr-forms .owl-brand .gold { color: var(--nd-accent-deep, #f2a900); }
.ndevr-forms .owl-head .owl-tools { order: 1; }
.ndevr-forms .owl-head-nav { order: 2; display: inline-flex; align-items: center; }
/* The upload progress bar is flex-basis:100% — keep it ordered last so it always drops to its own
   row beneath the title/tools/nav (brand and non-brand mounts alike). */
.ndevr-forms .owl-head .owl-progress { order: 3; }
/* Standalone bar for the transient states (loading / signed-out / unavailable) that have no tools row. */
.ndevr-forms .owl-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 1040px; margin: 0 auto 14px; }
.ndevr-forms .owl-pagehead .owl-brand { margin-right: 0; }
/* Mobile: the brand + nav cluster take their own top line (brand left, account/burger right), and the
   tools wrap to the next line full-width — matching the chat page's stacked header on phones. */
@media (max-width: 700px) {
  .ndevr-forms .owl-brand { order: 0; flex: 1 1 auto; margin-right: 0; font-size: 17px; }
  .ndevr-forms .owl-head-nav { order: 1; flex: 0 0 auto; }
  .ndevr-forms .owl-head .owl-tools { order: 2; flex: 1 1 100%; width: 100%; justify-content: flex-end; }
}
/* Refresh (text) button — box model locked across states so :hover/:focus never resize it. */
.ndevr-forms .owl-head .owl-refresh,
.ndevr-forms .owl-head .owl-refresh:hover,
.ndevr-forms .owl-head .owl-refresh:focus,
.ndevr-forms .owl-head .owl-refresh:active {
  background: transparent; color: var(--nd-muted, #9aa3b2); cursor: pointer;
  margin: 0; padding: 2px 4px; border: 0; border-radius: 6px;
  font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-transform: none; text-decoration: none; white-space: nowrap;
  width: auto; height: auto; min-width: 0; min-height: 0;
  display: inline-flex; align-items: center; gap: 5px;
  transform: none; box-shadow: none; outline: none;
  -webkit-appearance: none; appearance: none;
}
.ndevr-forms .owl-head .owl-refresh:hover,
.ndevr-forms .owl-head .owl-refresh:focus { color: var(--nd-text, #e8eaed); }
.ndevr-forms .owl-list { display: flex; flex-direction: column; gap: 8px; }
/* Sticky controls: bound the card to the visible viewport (dvh) and scroll ONLY the file list inside
   it, so the title/tabs/breadcrumb/New-folder/search-filter stay put while the contents scroll —
   desktop AND mobile. A short library shrinks to fit (no internal scroll); a tall one caps and the
   list scrolls. (The "competes with the next section" issue was the old one-giant-tile bug, fixed by
   the ≥2-column grid below — not the bounding itself.) */
.ndevr-forms .owl-data > .nf-card { display: flex; flex-direction: column; max-height: 85vh; max-height: 85dvh; }
/* On phones fill the visible viewport so a full library covers the screen and the NEXT page section
   ("Get Updates…") doesn't peek through the bottom while you scroll the file list. Sparse folders
   still shrink to fit (it's a max). dvh tracks the address-bar-adjusted visible height. */
@media (max-width: 560px) { .ndevr-forms .owl-data > .nf-card { max-height: 100vh; max-height: 100dvh; } }
.ndevr-forms .owl-data .owl-head, .ndevr-forms .owl-data .nf-tabs { flex: 0 0 auto; }
.ndevr-forms .owl-data .owl-list { flex: 1 1 auto; min-height: 0; }
.ndevr-forms .owl-data .owl-folder-nav, .ndevr-forms .owl-data .owl-toolbar { flex: 0 0 auto; }
/* The toolbar slot is layout-transparent: when empty it adds no flex gap; when it holds the toolbar,
   the toolbar itself becomes the flex child (so the flex/collapse rules above still apply directly). */
.ndevr-forms .owl-data .owl-toolbar-slot { display: contents; }
.ndevr-forms .owl-data .owl-list-area { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.ndevr-forms .owl-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--nd-field, #1b1e24); border: 1px solid var(--nd-border, #353b46); border-radius: 10px;
}
.ndevr-forms .owl-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(242,169,0,.12); color: var(--nd-accent-deep, #f2a900); font-size: 16px;
}
.ndevr-forms .owl-main { flex: 1 1 auto; min-width: 0; }
.ndevr-forms .owl-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndevr-forms .owl-meta { color: var(--nd-muted, #9aa3b2); font-size: 12.5px; margin-top: 2px; }
.ndevr-forms .owl-meta span + span::before { content: "·"; margin: 0 7px; opacity: .6; }
.ndevr-forms .owl-badge {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--nd-tint-1, rgba(255,255,255,.06)); color: var(--nd-muted, #9aa3b2); text-transform: uppercase; letter-spacing: .03em;
}
.ndevr-forms .owl-badge.ok { background: rgba(94,224,138,.12); color: var(--nd-ok, #5ee08a); }
.ndevr-forms .owl-badge.warn { background: rgba(232,161,58,.14); color: #e8a13a; }
.ndevr-forms .owl-empty { color: var(--nd-muted, #9aa3b2); font-size: 13.5px; padding: 18px 4px; text-align: center; }
/* Initial-load spinner for the library (reuses the nf-spin keyframes). Shown while the metadata-only
   listing is fetched; thumbnails then stream into the tiles afterward. */
.ndevr-forms .owl-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 56px 24px; min-height: 220px; }
.ndevr-forms .owl-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--nd-border, #353b46); border-top-color: var(--nd-accent-deep, #f2a900); animation: nf-spin .8s linear infinite; }
.ndevr-forms .owl-loading-label { color: var(--nd-muted, #9aa3b2); font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .ndevr-forms .owl-spinner { animation-duration: 1.6s; } }
/* Server-unavailable notice (data browser) — calm centered card with a retry. */
.ndevr-forms .owl-unavailable { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 48px 24px; min-height: 240px; }
.ndevr-forms .owl-unavailable-icon { font-size: 38px; opacity: .9; }
.ndevr-forms .owl-unavailable-title { font-size: 18px; font-weight: 700; color: var(--nd-text, #e8eaed); }
.ndevr-forms .owl-unavailable-msg { color: var(--nd-muted, #9aa3b2); font-size: 14px; line-height: 1.5; max-width: 360px; }
.ndevr-forms .owl-retry-btn { margin-top: 6px; }
.ndevr-forms .owl-locks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ndevr-forms .owl-lock { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 5px; background: var(--nd-tint-1, rgba(255,255,255,.06)); color: var(--nd-muted, #9aa3b2); }

/* Licenses tab: "My licenses" vs "Licenses you've issued" sections (+ per-recipient grouping). */
.ndevr-forms .owl-section { display: flex; flex-direction: column; gap: 8px; }
.ndevr-forms .owl-section + .owl-section { margin-top: 18px; }
.ndevr-forms .owl-section-head {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--nd-text, #e8eaed); display: flex; align-items: center; gap: 8px;
}
.ndevr-forms .owl-section-count {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: rgba(242,169,0,.14); color: var(--nd-accent-deep, #f2a900); letter-spacing: 0;
}
.ndevr-forms .owl-section-note { color: var(--nd-muted, #9aa3b2); font-size: 12px; margin: -2px 0 4px; }
.ndevr-forms .owl-empty-sm { padding: 10px 4px; font-size: 12.5px; }
/* One recipient's issued licenses: a header naming who holds them, then their license rows. */
.ndevr-forms .owl-recipient { display: flex; flex-direction: column; gap: 8px; }
.ndevr-forms .owl-recipient + .owl-recipient { margin-top: 10px; }
.ndevr-forms .owl-recipient-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  padding: 2px 2px 4px; border-bottom: 1px solid var(--nd-border, #353b46);
}
.ndevr-forms .owl-recipient-who { font-weight: 700; }
.ndevr-forms .owl-recipient-email { color: var(--nd-muted, #9aa3b2); font-size: 12.5px; }
.ndevr-forms .owl-recipient-count { margin-left: auto; color: var(--nd-muted, #9aa3b2); font-size: 11.5px; }

/* View toggle (icon/table) */
.ndevr-forms .owl-tools { display: flex; align-items: center; gap: 10px; }
.ndevr-forms .owl-view { display: flex; background: var(--nd-field, #1b1e24); border: 1px solid var(--nd-border, #353b46); border-radius: 8px; padding: 2px; }
/* Grid/table view toggle. Box model + typography are locked across every state so
   :hover/:focus/:active can't change the size and cause a jarring resize — only the color
   (and the active pill background) change. */
.ndevr-forms .owl-vbtn,
.ndevr-forms .owl-vbtn:hover,
.ndevr-forms .owl-vbtn:focus,
.ndevr-forms .owl-vbtn:active {
  background: transparent; color: var(--nd-muted, #9aa3b2); cursor: pointer;
  margin: 0; padding: 3px 9px;
  border: 0; border-radius: 6px;
  font: 400 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-transform: none; text-decoration: none;
  transform: none; outline: none; box-shadow: none;
  width: auto; height: auto; min-width: 0; min-height: 0;
  -webkit-appearance: none; appearance: none;
  transition: color .15s, background .15s;
}
.ndevr-forms .owl-vbtn:hover,
.ndevr-forms .owl-vbtn:focus { color: var(--nd-text, #e8eaed); }
.ndevr-forms .owl-vbtn.is-active,
.ndevr-forms .owl-vbtn.is-active:hover,
.ndevr-forms .owl-vbtn.is-active:focus { background: var(--nd-surface-2, #23272f); color: var(--nd-text, #e8eaed); }

/* Thumbnails (image or emoji fallback) */
.ndevr-forms .owl-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.ndevr-forms .owl-ico.sm { width: 28px; height: 28px; font-size: 15px; border-radius: 6px; overflow: hidden; flex: 0 0 auto; }

/* Grid (icon) view */
/* min(150px, 47%) keeps the minimum column ≤ 47% of the container, so at least TWO columns always
   fit — even inside a narrow phone/embedded column where a flat 150px min would drop to one giant
   tile. Wider containers still pack 3+ columns at 150px. */
.ndevr-forms .owl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 47%), 1fr)); gap: 12px; }
.ndevr-forms .owl-tile { background: var(--nd-field, #1b1e24); border: 1px solid var(--nd-border, #353b46); border-radius: 10px; padding: 10px; transition: border-color .15s; }
.ndevr-forms .owl-tile:hover { border-color: var(--nd-accent-deep, #f2a900); }
.ndevr-forms .owl-tile-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; background: rgba(242,169,0,.08); display: grid; place-items: center; overflow: hidden; margin-bottom: 8px; }
.ndevr-forms .owl-tile-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ndevr-forms .owl-tile-emoji { font-size: 34px; }
.ndevr-forms .owl-tile-badge { position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; }
.ndevr-forms .owl-tile-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndevr-forms .owl-tile-sub { color: var(--nd-muted, #9aa3b2); font-size: 12px; margin-top: 2px; }

/* Table view */
.ndevr-forms .owl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ndevr-forms .owl-table th { text-align: left; color: var(--nd-muted, #9aa3b2); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px; border-bottom: 1px solid var(--nd-border, #353b46); }
.ndevr-forms .owl-table td { padding: 8px 10px; border-bottom: 1px solid var(--nd-border, #353b46); vertical-align: middle; color: var(--nd-muted, #9aa3b2); }
.ndevr-forms .owl-td-name { display: flex; align-items: center; gap: 9px; }
.ndevr-forms .owl-td-label { font-weight: 600; color: var(--nd-text, #e8eaed); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.ndevr-forms .owl-td-act { text-align: right; width: 1%; white-space: nowrap; }

/* Search + type-filter toolbar (shown above a file list once it passes the entry threshold).
   display + alignment are set explicitly so the flex row can't collapse. */
.ndevr-forms .owl-toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
/* Search box: a flex row holding the icon + a transparent borderless input. They are SIBLINGS,
   not layered, so the icon can never overlap the text. min-width:0 lets the input shrink (and the
   placeholder clip) instead of overflowing the box/toolbar on a narrow phone. */
.ndevr-forms .owl-search-box {
  display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0;
  height: 38px; padding: 0 12px; border-radius: 8px; cursor: text;
  background: var(--nd-field, #1b1e24); border: 1px solid var(--nd-border, #353b46);
  transition: border-color .15s, box-shadow .15s;
}
.ndevr-forms .owl-search-box:focus-within { border-color: var(--nd-accent-deep, #f2a900); box-shadow: 0 0 0 3px rgba(242,169,0,.15); }
.ndevr-forms .owl-search-ico { flex: 0 0 auto; width: 15px; height: 15px; color: var(--nd-muted, #9aa3b2); }
.ndevr-forms .owl-search {
  flex: 1 1 auto; min-width: 0;
  /* explicit input box reset (border/padding/height/bg) so the field can't fatten and
     break the toolbar row. */
  width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; background: transparent; box-shadow: none;
  color: var(--nd-text, #e8eaed);
  font: 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; outline: none;
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
}
.ndevr-forms .owl-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Keep a wide table from overflowing the page on mobile: it scrolls within the card instead. */
.ndevr-forms .owl-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Keep value columns on one line — if the table still can't fit, the wrap scrolls horizontally
   (cleaner than squeezing "5.0 MB" onto two lines). */
.ndevr-forms .owl-table th, .ndevr-forms .owl-table td { white-space: nowrap; }
@media (max-width: 560px) {
  .ndevr-forms .owl-col-mod, .ndevr-forms .owl-col-ver { display: none; } /* drop Modified + Ver on small screens */
  .ndevr-forms .owl-table td, .ndevr-forms .owl-table th { padding: 8px 6px; } /* tighter cells so Name+Size+actions fit */
  .ndevr-forms .owl-td-label { max-width: 26vw; }
  .ndevr-forms .owl-toolbar { gap: 8px; }
}
/* Type-filter + sort selects. flex:0 0 auto + width:auto size each select to its content so they sit
   in one row (a `select { width: 100% }` default would make each fill the row and force the flex
   toolbar to wrap onto separate lines); the box styling is set explicitly so it stays consistent. */
.ndevr-forms .owl-filter {
  flex: 0 0 auto; width: auto; min-width: 130px; max-width: 100%;
  height: 38px; margin: 0; padding: 0 34px 0 12px;
  border-radius: 8px; cursor: pointer; box-shadow: none;
  background-color: var(--nd-field, #1b1e24); border: 1px solid var(--nd-border, #353b46);
  color: var(--nd-text, #e8eaed); font-size: 14px; line-height: normal;
  outline: none; transition: border-color .15s;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%239aa3b2' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}
.ndevr-forms .owl-filter:focus { border-color: var(--nd-accent-deep, #f2a900); }
.ndevr-forms .owl-filter option { background: var(--nd-surface-2, #23272f); color: var(--nd-text, #e8eaed); }

/* ---- Collapsible search + type/sort toolbar (an optional line behind a magnifier button) ----------
   At every width the toolbar starts collapsed; the magnifier button in the folder-nav expands it. On
   desktop it opens as the normal inline row (search + All types + sort); on a phone it additionally
   stacks full-width AND the breadcrumb/toolbar slide away while scrolling DOWN the file list
   (scroll-to-hide), returning on scroll up. */
/* The magnifier toggle button — a compact icon button matching the New-folder height. Box model locked
   so :hover/:focus/:active can't fatten or restyle it. */
/* Compact icon buttons (search toggle · New folder · Refresh). One shared 40×32 chrome so they line
   up wherever they sit — the folder-nav cluster and the head tools row alike. Box model locked across
   states so :hover/:focus/:active only change the colour/border, never the size. */
.ndevr-forms .owl-search-toggle,
.ndevr-forms .owl-iconbtn,
.ndevr-forms .owl-search-toggle:hover,
.ndevr-forms .owl-iconbtn:hover,
.ndevr-forms .owl-search-toggle:focus,
.ndevr-forms .owl-iconbtn:focus,
.ndevr-forms .owl-search-toggle:active,
.ndevr-forms .owl-iconbtn:active {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  display: inline-grid; place-items: center;
  width: 40px; height: 32px; min-height: 32px; flex: 0 0 auto;
  margin: 0; padding: 0; border-radius: 8px;
  background: var(--nd-field, #1b1e24); border: 1px solid var(--nd-border, #353b46);
  color: var(--nd-text, #e8eaed); cursor: pointer; box-shadow: none;
  transition: border-color .15s, background .15s, color .15s;
}
.ndevr-forms .owl-search-toggle svg, .ndevr-forms .owl-iconbtn svg { width: 16px; height: 16px; display: block; }
.ndevr-forms .owl-iconbtn:hover, .ndevr-forms .owl-iconbtn:focus {
  border-color: var(--nd-accent-deep, #f2a900); color: var(--nd-accent-deep, #f2a900);
}
.ndevr-forms .owl-search-toggle.is-active {
  border-color: var(--nd-accent-deep, #f2a900); background: rgba(242,169,0,.12); color: var(--nd-accent-deep, #f2a900);
}
/* Toolbar collapses to max-height 0 until .is-open (animated). Applies at all widths. */
.ndevr-forms .owl-data .owl-toolbar {
  max-height: 0; opacity: 0; margin: 0; overflow: hidden; pointer-events: none;
  transition: max-height .28s ease, opacity .2s ease, margin .28s ease;
}
.ndevr-forms .owl-data .owl-toolbar.is-open {
  max-height: 220px; opacity: 1; margin: 0 0 14px; pointer-events: auto;
}
@media (max-width: 560px) {
  /* Phone: the open toolbar stacks full-width (search + All types + sort)... */
  .ndevr-forms .owl-data .owl-toolbar { flex-direction: column; align-items: stretch; gap: 8px; flex-wrap: nowrap; }
  .ndevr-forms .owl-data .owl-toolbar.is-open .owl-search-box { flex: 0 0 auto; width: 100%; }
  .ndevr-forms .owl-data .owl-toolbar.is-open .owl-filter { width: 100%; min-width: 0; flex: 0 0 auto; }
  /* ...and scroll-to-hide reclaims vertical space: while scrolling down the list, collapse the
     breadcrumb row and the toolbar (mobile-only — desktop keeps the controls pinned). */
  .ndevr-forms .owl-data .owl-folder-nav {
    /* Fits the wrapped two-row phone layout (scope toggle on row 1, breadcrumbs + search/New-folder
       buttons on row 2) — 72px clipped the buttons' bottom edge. Collapses to 0 for scroll-to-hide. */
    overflow: hidden; max-height: 104px;
    transition: max-height .28s ease, opacity .2s ease, margin .28s ease;
  }
  .ndevr-forms .owl-data [data-panel].owl-hide-controls .owl-folder-nav {
    max-height: 0; min-height: 0; opacity: 0; margin: 0; pointer-events: none;
  }
  .ndevr-forms .owl-data [data-panel].owl-hide-controls .owl-toolbar {
    max-height: 0; opacity: 0; margin: 0; pointer-events: none;
  }
}

/* Action buttons (open / preview / download / links / move). One shared circular icon-button shape;
   each class then sets its OWN background colour below so the cluster is scannable at a glance. Box
   model + typography locked across every state so :hover/:focus/:active can't fatten or restyle
   them. The SVG glyph inherits `color` as its stroke (consistent line icons). */
.ndevr-forms .owl-act,
.ndevr-forms .owl-act:hover, .ndevr-forms .owl-act:focus, .ndevr-forms .owl-act:active {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 32px; height: 32px; min-width: 0; min-height: 0; max-width: 32px;
  flex: 0 0 auto; /* never shrink inside a flex cell (table act column is width:1% + display:flex) */
  padding: 0; margin: 0; border: 0; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 0/0 a; /* no text glyph — collapse any inline-text box */
  letter-spacing: normal; text-transform: none; text-decoration: none; text-indent: 0;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  cursor: pointer; transition: filter .15s, transform .05s;
}
.ndevr-forms .owl-act svg { width: 17px; height: 17px; display: block; pointer-events: none; }
.ndevr-forms .owl-act:hover { filter: brightness(1.12); }
.ndevr-forms .owl-act:active { transform: scale(.92); }
.ndevr-forms .owl-act[disabled] { filter: grayscale(.4) brightness(.8); cursor: default; }

/* Per-button colours. The open/preview button keeps the brand gold (with a dark glyph for contrast)
   so it stays the visual primary; the rest get distinct hues. */
.ndevr-forms .owl-preview   { background: var(--nd-accent-deep, #f2a900); color: var(--nd-accent-contrast, #232323); } /* gold */
.ndevr-forms .owl-links-btn { background: #10b981; position: relative; overflow: visible; } /* green (no theme token — kept literal) */
.ndevr-forms .owl-move      { background: var(--nd-muted, #6b7280); } /* slate */
.ndevr-forms .owl-chat-btn  { background: #0ea5a5; position: relative; overflow: visible; } /* teal (no theme token — kept literal) */
/* Unread-count badge on the chat button — a touch larger than a plain dot so a number fits. The
   font override beats .owl-act's `font:0/0 a` (which collapses button text). */
.ndevr-forms .owl-chat-badge, .ndevr-forms .owl-links-badge {
  position: absolute; top: -6px; right: -6px; box-sizing: border-box;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--nd-accent-deep, #f2a900); color: var(--nd-accent-contrast, #232323);
  font: 700 11px/18px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center; letter-spacing: 0; box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); pointer-events: none;
}
.ndevr-forms .owl-chat-badge[hidden], .ndevr-forms .owl-links-badge[hidden] { display: none; }
.ndevr-forms .owl-chat-badge.is-dot { min-width: 12px; width: 12px; height: 12px; padding: 0; border-radius: 50%; }
.ndevr-forms .owl-links-badge.is-add { background: var(--nd-muted, #6b7280); color: var(--nd-accent-contrast, #232323); box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); }
/* Grid tiles hide their action cluster until hover; reveal it when this dataset has unread chat so the
   badge is visible at a glance (graceful no-op on browsers without :has()). */
.ndevr-forms .owl-tile-acts:has(.owl-chat-badge:not([hidden])) { opacity: 1; }

/* Tile action cluster revealed on hover as a single centred row across the bottom of the thumbnail,
   on a soft gradient scrim so the buttons read against any image. One row reads far cleaner than the
   old bottom-right wrap-pile. The buttons are shrunk a touch here (vs the 32px table/folder default)
   so they all fit one row even at the narrowest tile width. */
.ndevr-forms .owl-tile-acts {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  padding: 12px 6px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  opacity: 0; transition: opacity .15s;
}
.ndevr-forms .owl-tile-acts .owl-act,
.ndevr-forms .owl-tile-acts .owl-act:hover,
.ndevr-forms .owl-tile-acts .owl-act:focus,
.ndevr-forms .owl-tile-acts .owl-act:active {
  width: 28px; height: 28px; max-width: 28px;
}
.ndevr-forms .owl-tile-acts .owl-act svg { width: 15px; height: 15px; }
.ndevr-forms .owl-tile:hover .owl-tile-acts, .ndevr-forms .owl-tile-acts:focus-within { opacity: 1; }
/* Touch devices can't hover, so the action buttons would only appear on a long-press. Always show
   them there (the hover-reveal is a pointer-only nicety). Triggered by no-hover / coarse pointer AND
   by narrow width, so it fires even on devices that misreport their pointer capability. */
@media (hover: none), (pointer: coarse), (max-width: 560px) { .ndevr-forms .owl-tile-acts { opacity: 1; } }
/* Table action column: keep it a normal (auto-sizing) table cell — display:flex here collapsed the
   width:1% cell so the buttons jammed. Lay the icon buttons out inline, right-aligned, with a gap. */
.ndevr-forms .owl-td-act .owl-act { display: inline-grid; vertical-align: middle; margin-left: 6px; }
.ndevr-forms .owl-td-act .owl-act:first-child { margin-left: 0; }

/* Folders: clickable tile/row that navigates into the folder. */
.ndevr-forms .owl-tile-folder { cursor: pointer; }
.ndevr-forms .owl-tile-folder .owl-tile-emoji { color: var(--nd-accent-deep, #f2a900); }
.ndevr-forms .owl-row-folder { cursor: pointer; }
.ndevr-forms .owl-row-folder .owl-td-label { font-weight: 600; }

/* My-files/Shared toggle · breadcrumb · New-folder / selection bar — the second persistent header row.
   Fixed min-height + nowrap so the row never changes size whether it shows New-folder or the selection
   controls (no layout shift). The .owl-scope toggle is fixed-width on the left; the breadcrumb fills the
   middle; the right cluster (New folder / selection / search) hugs the right. */
.ndevr-forms .owl-folder-nav { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin: 2px 0 10px; min-height: 36px; }
.ndevr-forms .owl-scope { flex: 0 0 auto; }
.ndevr-forms .owl-folder-right { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
/* Breadcrumb grows to fill the row and shrinks (with ellipsis) when space is tight, so the right-side
   button cluster stays compact and pinned right — never pushed off the card edge. */
.ndevr-forms .owl-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* Box model fully locked across states so :hover/:focus/:active can't add a border / change
   font-weight / pad it — which would grow the crumb on hover and shift the list below it. */
.ndevr-forms .owl-crumb,
.ndevr-forms .owl-crumb:hover, .ndevr-forms .owl-crumb:focus, .ndevr-forms .owl-crumb:active {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  border: 0; margin: 0; min-height: 28px; height: 28px;
  padding: 0 8px; border-radius: 6px; cursor: pointer; background: transparent;
  color: var(--nd-accent-deep, #f2a900);
  font: 600 13px/28px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-transform: none; text-decoration: none;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.ndevr-forms .owl-crumb:hover { background: var(--nd-tint-1, rgba(255, 255, 255, .08)); } /* color/bg only — never size */
.ndevr-forms .owl-crumb[disabled] { color: var(--nd-muted, #9aa3b2); cursor: default; background: transparent; }
.ndevr-forms .owl-crumb-sep { color: var(--nd-muted, #9aa3b2); font-size: 12px; flex: 0 0 auto; }
/* Inline selection controls (occupy the New-folder slot when a selection exists). */
.ndevr-forms .owl-selinfo { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
/* The New-folder + selection buttons are .nf-btn, whose base is a full-width (width:100%) 50px-tall
   form button. In this compact toolbar row that made them fight for width (overflowing the row) and
   tall (resizing it). Force them to compact, auto-width, fixed-height inline buttons instead. */
.ndevr-forms .owl-newfolder, .ndevr-forms .owl-selbtn {
  width: auto; height: 32px; min-height: 32px;
  padding: 0 12px; border-radius: 8px;
  font-size: 13px; flex: 0 0 auto; box-shadow: none;
}
/* Destructive (Delete) selection button: red label on the dark secondary button. */
.ndevr-forms .owl-seldanger { color: var(--nd-error, #ff7a85); }
.ndevr-forms .owl-seldanger:hover { background: var(--nd-danger-soft, rgba(214, 77, 77, .16)); }

/* Multi-select + drag-to-folder. Owned tiles/rows are draggable, but the PRIMARY action is a CLICK
   (a folder opens; a file shows its details popup) and selection is the corner checkbox — so every
   item shows the normal pointer (select) cursor at rest, NOT a grab cursor. The browser still shows
   its own move cursor while an actual drag is in progress. The [draggable] attribute selector below
   out-specifies the .owl-*-folder pointer rules above, so folders need it too (was the bug: owned
   folders alone kept cursor:grab). */
.ndevr-forms .owl-tile[draggable="true"], .ndevr-forms tr.owl-row[draggable="true"],
.ndevr-forms .owl-tile-folder[draggable="true"], .ndevr-forms tr.owl-row-folder[draggable="true"],
.ndevr-forms .owl-tile[data-id], .ndevr-forms tr.owl-row[data-id] { cursor: pointer; }
/* Corner select checkbox (tiles: top-left over the thumbnail; rows: leading the name cell). Hidden
   until hover, but always visible while checked / while ANY selection is active (.owl-has-sel on the
   mount, so building a multi-selection reads at a glance) and on touch devices. */
.ndevr-forms .owl-selbox {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  width: 22px; height: 22px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 6px;
  /* Frosted, lightly-tinted backing instead of the old near-black box — reads as a subtle checkbox on
     both dark tiles and light thumbnails without looking like a heavy black square. */
  background: rgba(120, 130, 145, .28); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  color: transparent;
  cursor: pointer; opacity: 0; transition: opacity .12s, background .12s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.ndevr-forms .owl-selbox svg { width: 13px; height: 13px; display: block; }
.ndevr-forms .owl-tile:hover .owl-selbox, .ndevr-forms tr.owl-row:hover .owl-selbox, .ndevr-forms tr.owl-row-folder:hover .owl-selbox,
.ndevr-forms .owl-selbox:focus-visible, .ndevr-forms .owl-selbox.is-checked,
.ndevr-forms.owl-has-sel .owl-selbox, .ndevr-forms .owl-has-sel .owl-selbox { opacity: 1; }
.ndevr-forms .owl-selbox.is-checked { background: var(--nd-accent-deep, #f2a900); border-color: var(--nd-accent-deep, #f2a900); color: #232323; }
/* Rows (files AND folders): the checkbox flows inline at the start of the name cell (no thumbnail to
   overlay). Without this the absolutely-positioned default escapes the row to the page's top-left. */
.ndevr-forms tr.owl-row .owl-selbox, .ndevr-forms tr.owl-row-folder .owl-selbox { position: static; flex: 0 0 auto; }
@media (hover: none), (pointer: coarse), (max-width: 560px) { .ndevr-forms .owl-selbox { opacity: 1; } }
.ndevr-forms .owl-tile.is-selected { outline: 2px solid var(--nd-accent-deep, #f2a900); outline-offset: -2px; border-radius: 10px; }
.ndevr-forms tr.owl-row.is-selected > td { background: rgba(242, 169, 0, .14); }
.ndevr-forms .owl-tile.dragging, .ndevr-forms tr.owl-row.dragging, .ndevr-forms .owl-tile-folder.dragging { opacity: .45; }
/* Hidden items (only visible when "Show hidden" is on) read as dimmed + italic/muted so they're clearly distinct from normal items. */
.ndevr-forms .owl-tile.is-hidden, .ndevr-forms tr.owl-row.is-hidden > td, .ndevr-forms tr.owl-row-folder.is-hidden > td { opacity: .55; }
.ndevr-forms .owl-tile.is-hidden .owl-tile-name, .ndevr-forms tr.owl-row.is-hidden .owl-td-label, .ndevr-forms tr.owl-row-folder.is-hidden .owl-td-label { font-style: italic; font-weight: 500; color: var(--nd-muted, #9aa3b2); }
/* Active drop target (a folder tile/row or a breadcrumb crumb). */
.ndevr-forms .drag-over { outline: 2px dashed var(--nd-accent-deep, #f2a900); outline-offset: -3px; background: rgba(242, 169, 0, .10); border-radius: 10px; }
.ndevr-forms tr.drag-over > td { background: rgba(242, 169, 0, .14); }
.ndevr-forms .owl-crumb.drag-over { background: rgba(242, 169, 0, .22); outline: none; }
/* Move/Copy destination picker: a collapsible folder tree (current path pre-expanded). */
.ndevr-forms .owl-tree { max-height: 46vh; overflow-y: auto; margin: 0; padding: 4px; border: 1px solid var(--nd-border, rgba(255,255,255,.10)); border-radius: 10px; background: var(--nd-surface-1, rgba(0,0,0,.12)); }
.ndevr-forms .owl-tree ul.owl-tkids { list-style: none; margin: 0; padding-left: 18px; }
.ndevr-forms .owl-tree ul.owl-tkids.owl-tcollapsed { display: none; }
.ndevr-forms .owl-trow { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: 0; background: transparent; color: var(--nd-text, #e8eaed); text-align: left; font-size: 14px; border-radius: 8px; cursor: pointer; }
.ndevr-forms .owl-trow:hover { background: var(--nd-tint-1, rgba(255,255,255,.06)); }
.ndevr-forms .owl-trow.is-selected { background: rgba(242, 169, 0, .18); color: var(--nd-accent-deep, #f2a900); font-weight: 600; }
.ndevr-forms .owl-tcaret { flex: 0 0 auto; width: 16px; text-align: center; color: var(--nd-muted, #9aa3b2); font-size: 11px; user-select: none; }
.ndevr-forms .owl-tcaret[data-ttoggle] { cursor: pointer; }
.ndevr-forms .owl-tlabel { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndevr-forms .owl-selbar-count { font-weight: 700; color: var(--nd-accent-deep, #f2a900); white-space: nowrap; }
/* External (OS) file drag-and-drop: while files hover over the library, dim the card and frame it with a
   dashed gold border + prompt so it reads as a drop zone. The class lives on the stable mount root, the
   overlay on the .owl-data card inside it; pointer-events:none keeps the drag events reaching the root. */
.ndevr-forms.owl-dropping .owl-data { position: relative; }
.ndevr-forms.owl-dropping .owl-data::after {
  content: "⬆  Drop files or folders here to upload";
  position: absolute; inset: 0; z-index: 60; pointer-events: none;
  display: grid; place-items: center; text-align: center; padding: 16px;
  font: 700 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--nd-accent-deep, #f2a900); background: rgba(27, 30, 36, .82);
  border: 2px dashed var(--nd-accent-deep, #f2a900); border-radius: 14px;
}

/* Upload button + progress bar */
.ndevr-forms .owl-upload,
.ndevr-forms .owl-upload:hover,
.ndevr-forms .owl-upload:focus {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  border: 0; margin: 0; min-height: 0; cursor: pointer;
  padding: 6px 12px; border-radius: 8px; white-space: nowrap;
  font: 700 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-transform: none; text-decoration: none;
  color: var(--nd-accent-contrast, #232323); background: var(--nd-accent-deep, #f2a900);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 8px rgba(242,169,0,.2);
  transition: filter .15s;
}
.ndevr-forms .owl-upload:hover { filter: brightness(1.07); }
.ndevr-forms .owl-upload[disabled] { filter: grayscale(.4) brightness(.85); cursor: default; }
.ndevr-forms .owl-progress { flex-basis: 100%; position: relative; height: 22px; margin-top: 4px; border-radius: 6px; background: var(--nd-field, #1b1e24); overflow: hidden; border: 1px solid var(--nd-border, #353b46); }
.ndevr-forms .owl-progress-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: linear-gradient(180deg, var(--nd-accent-deep, #f2a900), var(--nd-accent-down, #c98a00)); transition: width .15s; }
.ndevr-forms .owl-progress-label { position: relative; display: block; text-align: center; font-size: 11.5px; line-height: 22px; color: var(--nd-text, #e8eaed); }

/* Upload form panel (file → asset name → version detection) */
.ndevr-forms .owl-up { max-width: 460px; }
.ndevr-forms .owl-up-file { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--nd-field, #1b1e24); border: 1px solid var(--nd-border, #353b46); border-radius: 10px; margin-bottom: 16px; }
.ndevr-forms .owl-up-ico { font-size: 20px; flex: 0 0 auto; }
.ndevr-forms .owl-up-fname { font-weight: 600; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndevr-forms .owl-up-fsize { color: var(--nd-muted, #9aa3b2); font-size: 12.5px; flex: 0 0 auto; }
.ndevr-forms .owl-up-status { font-size: 13px; margin: -4px 2px 14px; min-height: 18px; color: var(--nd-muted, #9aa3b2); }
.ndevr-forms .owl-up-status.fresh { color: var(--nd-ok, #5ee08a); }
.ndevr-forms .owl-up-status.version { color: var(--nd-accent-deep, #f2a900); }
/* "Upload in the background, then ask to share": the upload runs while we prompt for a link. */
.ndevr-forms .owl-up-uploading { font-size: 14.5px; font-weight: 600; color: var(--nd-accent-deep, #f2a900); margin-bottom: 12px; }
.ndevr-forms .owl-sh-prompt { font-size: 15px; font-weight: 700; margin: 16px 2px 10px; }
.ndevr-forms .owl-up-shareopts-d { margin-bottom: 6px; }
.ndevr-forms .owl-up-shareopts-d > summary { cursor: pointer; font-size: 13.5px; color: var(--nd-muted, #9aa3b2); padding: 6px 0; user-select: none; }
.ndevr-forms .owl-up-shareopts-d[open] > summary { color: var(--nd-text, #e8eaed); }

/* Share panel (access level + options → OWL link + QR code) */
.ndevr-forms .owl-share-form, .ndevr-forms .owl-share-result { max-width: 460px; }
.ndevr-forms .owl-sh-group { margin-bottom: 14px; }
.ndevr-forms .owl-sh-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--nd-muted, #9aa3b2); margin-bottom: 8px; }
.ndevr-forms .owl-sh-radio, .ndevr-forms .owl-sh-check { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 14px; color: var(--nd-text, #e8eaed); cursor: pointer; }
.ndevr-forms .owl-sh-radio input, .ndevr-forms .owl-sh-check input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--nd-accent-deep, #f2a900); cursor: pointer; }
.ndevr-forms .owl-sh-perms { padding: 10px 12px; background: var(--nd-field, #1b1e24); border: 1px solid var(--nd-border, #353b46); border-radius: 10px; }
.ndevr-forms .owl-sh-perms .owl-sh-check { padding: 3px 0; }
/* On desktop the read-only sub-options sit to the RIGHT of the access-level radios; when the card
   is too narrow (mobile) flex-wrap drops them below. When a non-read level is picked the perms box
   is display:none and the radios sit alone on the left. */
.ndevr-forms .owl-sh-access { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.ndevr-forms .owl-sh-access > .owl-sh-group { margin-bottom: 0; }
.ndevr-forms .owl-sh-access > .owl-sh-levelgroup { flex: 0 0 auto; }
.ndevr-forms .owl-sh-access > .owl-sh-perms { flex: 1 1 220px; min-width: 180px; align-self: stretch; }
.ndevr-forms .owl-share-err { color: var(--nd-error, #ff7a85); font-size: 13px; min-height: 16px; margin: 4px 2px; }
.ndevr-forms .owl-share-link { display: flex; gap: 8px; align-items: stretch; margin: 8px 0 16px; }
.ndevr-forms .owl-share-link input {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--nd-border, #353b46);
  background: var(--nd-field, #1b1e24); color: var(--nd-text, #e8eaed);
  font: 12.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis;
}
/* Copy button sits beside the link: compact, not the full-width .nf-btn default. */
.ndevr-forms .owl-share-link button { flex: 0 0 auto; width: auto; min-width: 0; height: auto; padding: 0 16px; white-space: nowrap; }
/* White QR card: shrink-wrap to the QR (not full-width) and center it above the copy/link. */
.ndevr-forms .owl-share-qr { width: fit-content; max-width: 100%; margin: 0 auto 16px; padding: 16px; background: #fff; border-radius: 12px; }
.ndevr-forms .owl-share-qr svg { width: 220px; height: 220px; max-width: 100%; display: block; }
.ndevr-forms .owl-qr-missing { color: #555; font-size: 13px; padding: 24px; text-align: center; }
.ndevr-forms .owl-sh-ok { color: var(--nd-ok, #5ee08a); font-weight: 700; font-size: 15.5px; margin-bottom: 14px; }

/* Share panel wrapper (distinct from the circular .owl-links-btn so it isn't clamped to 30px). */
.ndevr-forms .owl-share-panel { display: block; width: 100%; }

/* ---- Email-card style picker (the 📧 "Copy email card" chooser) ------------------------------- */
.ndevr-forms .owl-ecards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.ndevr-forms .owl-ecard { border: 1px solid var(--nd-border, #353b46); border-radius: 12px; overflow: hidden; background: var(--nd-field, #1b1e24); }
.ndevr-forms .owl-ecard-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ndevr-forms .owl-ecard-meta { flex: 1 1 auto; min-width: 0; }
.ndevr-forms .owl-ecard-name { font-weight: 700; font-size: 14px; color: var(--nd-text, #e8eaed); }
.ndevr-forms .owl-ecard-hint { font-size: 12px; color: var(--nd-muted, #9aa3b2); margin-top: 2px; }
/* Compact copy button (the base .nf-btn is full-width 50px — override like .owl-share-link button). */
.ndevr-forms .owl-ecard-copy { flex: 0 0 auto; width: auto; min-width: 0; height: auto; padding: 8px 14px; font-size: 13px; white-space: nowrap; border-radius: 8px; }
.ndevr-forms .owl-ecard-prev { border-top: 1px solid var(--nd-border, #353b46); background: #f4f5f7; }
.ndevr-forms .owl-ecard-prev iframe { display: block; width: 100%; border: 0; background: #f4f5f7; }
.ndevr-forms .owl-ecard-loading, .ndevr-forms .owl-ecard-err { padding: 22px 14px; text-align: center; font-size: 13px; color: var(--nd-muted, #9aa3b2); }
.ndevr-forms .owl-ecard-err { color: #e8a13a; }

/* ---- Bottom flyup sheet (overlay for upload / share / links panels) -------------------------- */
/* Overlay is appended to <body> with .ndevr-forms so the vars + form styles apply and a transformed
   host ancestor can't clip the fixed positioning. The sheet slides up; the backdrop fades in. */
/* height:100dvh (not inset:0's bottom, which anchors to the LAYOUT viewport — below the mobile
   address bar) so a bottom-anchored sheet's buttons land within the VISIBLE viewport. */
.ndevr-forms.owl-flyup-overlay { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100vh; height: 100dvh; box-sizing: border-box; overflow-x: hidden; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ndevr-forms .owl-flyup-sheet, .ndevr-forms .owl-flyup-content { box-sizing: border-box; max-width: 100%; }
.ndevr-forms .owl-flyup-backdrop { position: absolute; inset: 0; background: var(--nd-overlay, rgba(0, 0, 0, .55)); opacity: 0; transition: opacity .3s ease; }
.ndevr-forms.owl-flyup-overlay.is-open .owl-flyup-backdrop { opacity: 1; }
/* Centered modal: floats in the middle of the screen, fades + lifts in slightly. */
.ndevr-forms .owl-flyup-sheet {
  position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 560px;
  max-height: 88vh; max-height: 88dvh; /* dvh = visible viewport (excludes the mobile browser bar) */
  display: flex; flex-direction: column;
  background: var(--nd-surface-2, #23272f); border: 1px solid var(--nd-border, #353b46);
  border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(28px) scale(.985);
  transition: opacity .26s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
}
.ndevr-forms.owl-flyup-overlay.is-open .owl-flyup-sheet { opacity: 1; transform: translateY(0) scale(1); }
.ndevr-forms .owl-flyup-grip { flex: 0 0 auto; width: 42px; height: 4px; border-radius: 2px; background: var(--nd-border, #353b46); margin: 10px auto 2px; cursor: grab; touch-action: none; }
.ndevr-forms .owl-flyup-content { box-sizing: border-box; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 22px 24px; }
/* Close ✕ — box locked across states so :hover/:focus/:active can't resize it. */
.ndevr-forms .owl-flyup-x,
.ndevr-forms .owl-flyup-x:hover,
.ndevr-forms .owl-flyup-x:focus,
.ndevr-forms .owl-flyup-x:active {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 30px; height: 30px; min-width: 0; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-transform: none; text-decoration: none;
  background: var(--nd-field, #1b1e24); color: var(--nd-muted, #9aa3b2);
  box-shadow: none; transform: none; outline: none;
  cursor: pointer; -webkit-appearance: none; appearance: none; transition: color .15s, background .15s;
}
.ndevr-forms .owl-flyup-x:hover, .ndevr-forms .owl-flyup-x:focus { color: var(--nd-text, #e8eaed); background: var(--nd-line, #2a2f39); }
@media (max-width: 560px) {
  .ndevr-forms .owl-flyup-content { padding: 8px 16px 22px; }
  /* Bottom sheet on phones: full-width, anchored to the bottom, capped to the VISIBLE viewport (dvh)
     so the action buttons are always reachable — vh would hide them behind the browser's address bar. */
  .ndevr-forms.owl-flyup-overlay { align-items: flex-end; padding: 0; }
  .ndevr-forms .owl-flyup-sheet {
    width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh;
    border-radius: 18px 18px 0 0;
  }
  /* Phone header rows: the Owned/Shared toggle gets its own centered row, then the breadcrumb +
     right-side controls (search · New folder, or the selection bar) share the next row. flex-wrap lets
     them drop to a second line instead of being clipped by the card's overflow-x:hidden, and the
     controls cluster is flex:0 0 auto so it never shrinks/clips off the menu area. */
  .ndevr-forms .owl-folder-nav { flex-wrap: wrap; row-gap: 8px; }
  .ndevr-forms .owl-scope { flex: 1 1 100%; display: flex; justify-content: center; }
  .ndevr-forms .owl-crumbs { flex: 1 1 auto; min-width: 0; order: 1; }
  .ndevr-forms .owl-folder-right { flex: 0 0 auto; order: 2; justify-content: flex-end; }
}

/* Links manager — list of active share links for an object (view / delete / add) */
.ndevr-forms .owl-links-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.ndevr-forms .owl-link-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--nd-field, #1b1e24); border: 1px solid var(--nd-border, #353b46);
}
.ndevr-forms .owl-link-main { flex: 1 1 auto; min-width: 0; }
.ndevr-forms .owl-link-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndevr-forms .owl-link-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.ndevr-forms .owl-link-badge {
  font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 999px;
  background: var(--nd-tint-1, rgba(255,255,255,.08)); color: var(--nd-muted, #9aa3b2); white-space: nowrap;
}
.ndevr-forms .owl-link-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.ndevr-forms .owl-link-view,
.ndevr-forms .owl-link-view:hover,
.ndevr-forms .owl-link-view:focus {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  border: 0; margin: 0; min-height: 0; cursor: pointer;
  padding: 6px 12px; border-radius: 8px;
  font: 700 12.5px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-transform: none;
  color: var(--nd-accent-contrast, #232323); background: var(--nd-accent-deep, #f2a900);
}
.ndevr-forms .owl-link-view:hover { filter: brightness(1.07); }
.ndevr-forms .owl-link-del,
.ndevr-forms .owl-link-del:hover,
.ndevr-forms .owl-link-del:focus {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 30px; height: 30px; min-width: 0; max-width: 30px;
  padding: 0; margin: 0; border: 0; border-radius: 8px;
  display: inline-grid; place-items: center;
  font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #ff9aa3; background: rgba(255,122,133,.12); cursor: pointer;
}
.ndevr-forms .owl-link-del:hover { background: rgba(255,122,133,.22); }
.ndevr-forms .owl-link-view[disabled], .ndevr-forms .owl-link-del[disabled] { filter: grayscale(.3) brightness(.85); cursor: default; }

/* Sharing options folded into the upload panel (OWLExportDialog-style "export + share" in one step) */
.ndevr-forms .owl-up-sharetoggle { margin: 6px 2px 12px; color: var(--nd-text, #e8eaed); font-weight: 600; }
.ndevr-forms .owl-up-shareopts { border-top: 1px solid var(--nd-border, #353b46); padding-top: 14px; margin-top: 4px; }

/* ============================================================================================
   Standalone-page "Log In / account" control (ndevr-nav-auth.js) — the nav cluster on the chat /
   owl-library / admin pages. NOT scoped under .ndevr-forms; selectors are deliberately specific so
   they don't leak. site.css owns the in-header (.site-header) variant of the same button.
   ============================================================================================ */
/* Self-styled "clean" button: native NDEVR look — gold "Log In" pill when logged-out, quiet ghost
   pill when logged-in (.ndevr-auth-in), plus the icon + caret + the centered ndevrAuth modal. */
a.ndevr-auth-btn,
a.ndevr-auth-btn:link,
a.ndevr-auth-btn:visited,
a.ndevr-auth-btn:hover,
a.ndevr-auth-btn:focus,
a.ndevr-auth-btn:active {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: auto; min-width: 0; max-width: none; height: auto;
  padding: 8px 15px; margin: 0;
  border: 0; border-radius: 9px; outline: none;
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-transform: none; text-decoration: none;
  text-indent: 0; text-shadow: none; white-space: nowrap;
  color: var(--nd-accent-contrast, #232323); background: var(--nd-accent-deep, #f2a900); background-image: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer; transition: filter .15s, transform .05s, background .15s;
}
a.ndevr-auth-btn:hover { filter: brightness(1.06); }
a.ndevr-auth-btn:active { transform: scale(.97); }
/* Children never receive pointer events → every click lands on the <a> (fixes "only the corner works"). */
a.ndevr-auth-btn * { pointer-events: none; }
a.ndevr-auth-btn .ndevr-auth-ico,
a.ndevr-auth-btn .ndevr-auth-caret { display: inline-flex; align-items: center; flex: 0 0 auto; }
a.ndevr-auth-btn .ndevr-auth-caret { opacity: .7; }
/* Profile photo shown in place of the person glyph once the signed-in user has one. */
a.ndevr-auth-btn .ndevr-auth-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; display: block; margin: -3px 0;
  box-shadow: inset 0 0 0 1px var(--nd-tint-2, rgba(255, 255, 255, .25));
}
a.ndevr-auth-btn .ndevr-auth-label {
  display: inline-block; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 22ch; vertical-align: middle;
}
/* Logged-in reads as a quiet menu trigger (ghost pill), not a gold CTA. */
a.ndevr-auth-btn.ndevr-auth-in,
a.ndevr-auth-btn.ndevr-auth-in:link,
a.ndevr-auth-btn.ndevr-auth-in:visited,
a.ndevr-auth-btn.ndevr-auth-in:hover,
a.ndevr-auth-btn.ndevr-auth-in:focus,
a.ndevr-auth-btn.ndevr-auth-in:active {
  color: var(--nd-text, #e8eaed); background: var(--nd-tint-2, rgba(255, 255, 255, .10));
  box-shadow: inset 0 0 0 1px var(--nd-tint-2, rgba(255, 255, 255, .22));
}
a.ndevr-auth-btn.ndevr-auth-in:hover { background: var(--nd-tint-2, rgba(255, 255, 255, .17)); }
/* Ribbon-match: on the standalone app shells (owl-library / chat / admin / kanban) the account control
   is the SAME shared nav-auth widget as the site-header ribbon (e.g. /calibration/), just mounted in a
   .ndevr-nav-cluster host instead of .site-header. site.css gives the .site-header button the quiet
   in-ribbon look (rounded-square avatar, transparent ghost trigger) but site.css isn't loaded on these
   Vue pages, so the default forms.css look (round avatar + filled tint pill) leaks through and the menu
   reads as a different widget. Mirror the ribbon rules here, scoped to .ndevr-nav-cluster, so the user
   menu is byte-for-byte identical everywhere. Keep these in lockstep with site.css's .site-header rules. */
.ndevr-nav-cluster a.ndevr-auth-btn.ndevr-auth-in,
.ndevr-nav-cluster a.ndevr-auth-btn.ndevr-auth-in:link,
.ndevr-nav-cluster a.ndevr-auth-btn.ndevr-auth-in:visited,
.ndevr-nav-cluster a.ndevr-auth-btn.ndevr-auth-in:focus,
.ndevr-nav-cluster a.ndevr-auth-btn.ndevr-auth-in:active {
  gap: 8px; padding: 6px 11px; border-radius: 10px;
  background: transparent; border: 1px solid transparent; box-shadow: none;
  color: var(--ndevr-ink-soft, var(--nd-text, #e8eaed)); font: 600 .95rem/1 var(--ndevr-font, system-ui);
}
.ndevr-nav-cluster a.ndevr-auth-btn.ndevr-auth-in:hover {
  background: var(--nd-hover, #222732); border-color: var(--ndevr-line, rgba(255, 255, 255, .18));
  color: var(--nd-text-strong, #fff);
}
.ndevr-nav-cluster a.ndevr-auth-btn .ndevr-auth-avatar {
  width: 28px; height: 28px; border-radius: 6px; margin: 0;
  box-shadow: inset 0 0 0 1px var(--nd-tint-2, rgba(255, 255, 255, .16));
}
.ndevr-nav-cluster a.ndevr-auth-btn .ndevr-auth-caret { opacity: .55; }
/* The standalone cluster wraps the icon/label/caret in an .ndevr-auth-content span (the
   site-header ribbon has no wrapper — nav-auth paints them as direct <a> children). That wrapper is
   display:block, so the <a>'s flex gap never reaches the children and the 28px avatar collides with the
   username. Make the wrapper the flex row so the 8px gap applies exactly like the ribbon's direct flex. */
.ndevr-nav-cluster a.ndevr-auth-btn .ndevr-auth-content {
  display: inline-flex; align-items: center; gap: 8px;
}
/* Mobile (standalone nav cluster only — chat / owl-library / admin pages): collapse the account
   button to just its icon. The "[icon] username" pill is wide enough to force the brand row onto two
   lines on narrow screens; icon-only keeps it on the title line. The full name still shows in the
   dropdown the button opens. */
@media (max-width: 700px) {
  .ndevr-nav-cluster a.ndevr-auth-btn .ndevr-auth-label,
  .ndevr-nav-cluster a.ndevr-auth-btn .ndevr-auth-caret { display: none; }
  .ndevr-nav-cluster a.ndevr-auth-btn { padding: 9px 11px; gap: 0; }
}

/* Standalone-page header cluster: the account button + site hamburger, pinned to the page's top bar
   (chat / server-admin pages). The account button styles itself via a.ndevr-auth-btn above. */
/* align-items:stretch makes the burger match the account button's exact height in every state
   (logged-out pill vs taller logged-in avatar pill) so the two controls always look the same size. */
.ndevr-nav-cluster { display: inline-flex; align-items: stretch; gap: 8px; flex: 0 0 auto; }
button.ndevr-nav-burger,
button.ndevr-nav-burger:hover,
button.ndevr-nav-burger:focus,
button.ndevr-nav-burger:active {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; min-width: 0; max-width: none;
  padding: 0 11px; margin: 0; border: 0; border-radius: 9px; outline: none;
  color: var(--nd-text, #e8eaed); background: var(--nd-tint-2, rgba(255, 255, 255, .10)); background-image: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  cursor: pointer; transition: background .15s, transform .05s;
}
button.ndevr-nav-burger * { pointer-events: none; }
button.ndevr-nav-burger svg { width: 18px; height: 18px; display: block; }
button.ndevr-nav-burger:hover { background: rgba(255, 255, 255, .17); }
button.ndevr-nav-burger:active { transform: scale(.95); }
/* The SHARED site-menu button widget (site.js NDEVRSiteMenu, styled in /shared/css/site.css) when it
   mounts inside the cluster instead of the legacy burger: stretch to the account button's height and
   take on the cluster's pill look so the pair reads as one control group. */
.ndevr-nav-cluster .nd-menu-btn {
  width: auto; height: auto; padding: 0 11px; border: 0; border-radius: 9px;
  background: var(--nd-tint-2, rgba(255, 255, 255, .10));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.ndevr-nav-cluster .nd-menu-btn:hover { background: rgba(255, 255, 255, .17); }

html.ndevr-auth-noscroll, html.ndevr-auth-noscroll body { overflow: hidden; }

/* ---- modal (logged-out sign in / create) -------------------------------------------------- */
.ndevr-auth-modal { position: fixed; inset: 0; z-index: 2147483000; display: none; }
.ndevr-auth-modal.is-open { display: block; }
.ndevr-auth-modal .ndevr-auth-backdrop { position: absolute; inset: 0; background: var(--nd-overlay, rgba(6, 8, 12, .62)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ndevr-auth-modal .ndevr-auth-dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ndevr-auth-modal .ndevr-auth-dialog .nf-card { max-width: none; margin: 0; }
/* Pin the card's typography to one system font stack so headings/inputs render consistently. */
.ndevr-auth-modal .nf-card,
.ndevr-auth-modal .nf-card input,
.ndevr-auth-modal .nf-card button,
.ndevr-auth-modal .nf-card label { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Close button: hard-locked to a 34px circle so theme button rules can't stretch it into an ellipse. */
.ndevr-auth-modal .ndevr-auth-close,
.ndevr-auth-modal .ndevr-auth-close:hover,
.ndevr-auth-modal .ndevr-auth-close:focus,
.ndevr-auth-modal .ndevr-auth-close:active {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 34px; height: 34px; min-width: 0; min-height: 0; max-width: 34px;
  padding: 0; margin: 0; border: 0; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 300 22px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-transform: none; text-indent: 0;
  color: var(--nd-text, #e8eaed); background: var(--nd-tint-2, rgba(255, 255, 255, .10));
  box-shadow: none; cursor: pointer; transition: background .15s;
}
.ndevr-auth-modal .ndevr-auth-close:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 480px) { .ndevr-auth-modal .ndevr-auth-dialog { width: calc(100vw - 20px); } }

/* ---- dropdown (logged-in account menu) ---------------------------------------------------- */
/* Fully self-styled, with an explicit font, so the menu items render consistently. */
.ndevr-auth-menu {
  position: fixed; z-index: 2147483000; display: none;
  min-width: 220px; max-width: calc(100vw - 16px);
  padding: 6px; margin: 0; border-radius: 12px;
  background: var(--nd-surface-2, #23272f); border: 1px solid var(--nd-border, #353b46);
  box-shadow: var(--nd-shadow-2, 0 18px 50px rgba(0, 0, 0, .45));
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--nd-text, #e8eaed);
}
.ndevr-auth-menu.is-open { display: block; }
.ndevr-auth-menu .ndevr-auth-menu-head {
  padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--nd-border, #353b46);
  display: flex; flex-direction: column; gap: 1px;
}
.ndevr-auth-menu .ndevr-auth-menu-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndevr-auth-menu .ndevr-auth-menu-head small { color: var(--nd-muted, #9aa3b2); font-size: 11.5px; }
.ndevr-auth-menu .ndevr-auth-menu-item,
.ndevr-auth-menu .ndevr-auth-menu-item:hover,
.ndevr-auth-menu .ndevr-auth-menu-item:focus,
.ndevr-auth-menu .ndevr-auth-menu-item:visited {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; margin: 0; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer;
  font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--nd-text, #e8eaed); text-decoration: none; text-transform: none; letter-spacing: normal;
}
.ndevr-auth-menu .ndevr-auth-menu-item:hover { background: var(--nd-tint-1, rgba(255, 255, 255, .07)); }
.ndevr-auth-menu .ndevr-auth-menu-danger { color: var(--nd-error, #ff7a85); }
/* "Tours" collapsible submenu (populated from window.ndevrTour.tours()). */
.ndevr-auth-menu .ndevr-auth-tours { display: block; }
.ndevr-auth-menu .ndevr-auth-tours-toggle,
.ndevr-auth-menu .ndevr-auth-tours-toggle:hover,
.ndevr-auth-menu .ndevr-auth-tours-toggle:focus { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ndevr-auth-menu .ndevr-auth-tours-chev { transition: transform .15s ease; color: var(--nd-muted, #9aa3b2); font-size: 16px; line-height: 1; }
.ndevr-auth-menu .ndevr-auth-tours.is-open .ndevr-auth-tours-chev { transform: rotate(90deg); }
.ndevr-auth-menu .ndevr-auth-submenu { display: none; margin: 2px 0; padding-left: 6px; border-left: 2px solid var(--nd-border, #353b46); }
.ndevr-auth-menu .ndevr-auth-tours.is-open .ndevr-auth-submenu { display: block; }
.ndevr-auth-menu .ndevr-auth-subitem { padding-left: 18px; font-size: 13.5px; color: var(--nd-muted, #9aa3b2); }
.ndevr-auth-menu .ndevr-auth-subitem:hover { color: var(--nd-text, #e8eaed); background: var(--nd-tint-1, rgba(255, 255, 255, .07)); }

/* ============================================================================================
   Fullscreen preview + details overlay (ndevr-owl-data.js — the 🔍 button). Appended to <body>
   with .ndevr-forms so the vars + form styles apply and a transformed host ancestor can't clip the
   fixed positioning. The image stage fills most of the dialog; a side panel carries the metadata.
   ============================================================================================ */
.ndevr-forms.owl-pv-overlay { position: fixed; inset: 0; z-index: 2147483400; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ndevr-forms .owl-pv-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .82); opacity: 0; transition: opacity .25s ease; }
.ndevr-forms.owl-pv-overlay.is-open .owl-pv-backdrop { opacity: 1; }
.ndevr-forms .owl-pv-body {
  position: relative; z-index: 1; display: flex;
  width: 100%; max-width: 1100px; max-height: 90vh; overflow: hidden;
  background: var(--nd-surface-2, #23272f); border: 1px solid var(--nd-border, #353b46); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
  opacity: 0; transform: scale(.97); transition: opacity .25s ease, transform .26s cubic-bezier(.2, .8, .2, 1);
}
.ndevr-forms.owl-pv-overlay.is-open .owl-pv-body { opacity: 1; transform: none; }
.ndevr-forms .owl-pv-stage { flex: 1 1 auto; min-width: 0; display: grid; place-items: center; background: var(--nd-bg-deep, #0f1216); padding: 16px; }
.ndevr-forms .owl-pv-img { max-width: 100%; max-height: calc(90vh - 32px); object-fit: contain; border-radius: 8px; }
/* Decoded video plays in the same stage as the image preview. */
.ndevr-forms .owl-pv-video { max-width: 100%; max-height: calc(90vh - 32px); border-radius: 8px; background: #000; }
/* While the bytes download + decrypt, dim the stage and spin a ring over the icon/thumbnail. */
.ndevr-forms .owl-pv-stage.owl-pv-loading { position: relative; }
.ndevr-forms .owl-pv-stage.owl-pv-loading > * { opacity: .4; }
.ndevr-forms .owl-pv-stage.owl-pv-loading::after {
  content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.22); border-top-color: var(--nd-accent-deep, #f2a900);
  animation: nf-spin .7s linear infinite;
}
.ndevr-forms .owl-pv-stage.is-emoji { font-size: 120px; }
.ndevr-forms .owl-pv-info { flex: 0 0 300px; max-width: 320px; padding: 24px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ndevr-forms .owl-pv-title { font-size: 18px; font-weight: 700; margin-bottom: 18px; word-break: break-word; }
.ndevr-forms .owl-pv-meta { margin: 0 0 18px; display: flex; flex-direction: column; gap: 11px; }
.ndevr-forms .owl-pv-row { display: flex; flex-direction: column; gap: 2px; }
.ndevr-forms .owl-pv-row dt { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--nd-muted, #9aa3b2); }
.ndevr-forms .owl-pv-row dd { margin: 0; font-size: 14px; color: var(--nd-text, #e8eaed); word-break: break-word; }
.ndevr-forms .owl-pv-acts { display: flex; flex-direction: column; gap: 10px; }
.ndevr-forms .owl-pv-acts .nf-btn { height: 44px; }
/* Close ✕ — box locked across states so :hover/:focus/:active can't resize it. */
.ndevr-forms .owl-pv-x,
.ndevr-forms .owl-pv-x:hover,
.ndevr-forms .owl-pv-x:focus,
.ndevr-forms .owl-pv-x:active {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 38px; height: 38px; min-width: 0; min-height: 0; max-width: 38px;
  margin: 0; padding: 0; border: 0; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 600 16px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal; text-transform: none; text-decoration: none;
  background: rgba(0, 0, 0, .5); color: #fff;
  box-shadow: none; transform: none; outline: none;
  cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .15s;
}
.ndevr-forms .owl-pv-x:hover, .ndevr-forms .owl-pv-x:focus { background: rgba(0, 0, 0, .72); }
/* Stack the image over the details on a narrow screen. */
@media (max-width: 760px) {
  .ndevr-forms.owl-pv-overlay { padding: 12px; }
  .ndevr-forms .owl-pv-body { flex-direction: column; max-height: 92vh; }
  .ndevr-forms .owl-pv-stage { max-height: 50vh; padding: 12px; }
  .ndevr-forms .owl-pv-img,
  .ndevr-forms .owl-pv-video { max-height: 48vh; }
  .ndevr-forms .owl-pv-stage.is-emoji { font-size: 84px; }
  .ndevr-forms .owl-pv-info { flex: 1 1 auto; max-width: none; padding: 18px 18px 22px; }
  /* Once the preview stacks on top, the info panel is full-width — lay the short metadata fields out two
     across (each still label-over-value) instead of one tall vertical stack, so it reads compactly. */
  .ndevr-forms .owl-pv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  /* The action buttons stay full-width and side by side under the grid. */
  .ndevr-forms .owl-pv-acts { flex-direction: row; }
  .ndevr-forms .owl-pv-acts .nf-btn { flex: 1 1 0; }
}

/* ---- Dropbox import picker (ndevr-dropbox.js). A self-contained modal overlay on document.body. ---- */
.ndbx-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55); padding: 18px;
}
.ndbx-modal {
  width: min(560px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--nd-surface-2, #23272f); color: var(--nd-text, #e8eaed);
  border: 1px solid var(--nd-border, #353b46); border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5); overflow: hidden;
}
.ndbx-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--nd-border, #353b46); }
.ndbx-title { font-weight: 800; font-size: 16px; }
.ndbx-acct { margin-left: 4px; color: var(--nd-muted, #9aa3b2); font-size: 13px; flex: 1 1 auto; }
.ndbx-logout { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; background: none; border: 1px solid var(--nd-border, #353b46); color: var(--nd-muted, #9aa3b2); cursor: pointer; flex: 0 0 auto; }
.ndbx-logout:hover { color: var(--nd-text, #e8eaed); border-color: var(--nd-muted, #9aa3b2); background: var(--nd-hover, #222732); }
.ndbx-x { background: none; border: none; color: var(--nd-muted, #9aa3b2); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; flex: 0 0 auto; }
.ndbx-x:hover { color: var(--nd-text, #e8eaed); }
.ndbx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 10px 16px; border-bottom: 1px solid var(--nd-border, #353b46); font-size: 13px; }
.ndbx-crumb { background: none; border: none; color: var(--nd-accent-deep, #f2a900); cursor: pointer; padding: 2px 4px; font: inherit; }
.ndbx-crumb:hover { text-decoration: underline; }
.ndbx-crumb:last-of-type { color: var(--nd-text, #e8eaed); cursor: default; }
.ndbx-crumb-sep { color: var(--nd-muted, #9aa3b2); padding: 0 2px; }
.ndbx-list { flex: 1 1 auto; overflow-y: auto; padding: 6px 0; min-height: 180px; }
.ndbx-loading { padding: 30px 16px; text-align: center; color: var(--nd-muted, #9aa3b2); }
.ndbx-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; cursor: pointer; }
.ndbx-row:hover { background: var(--nd-hover, #222732); }
.ndbx-row.is-sel { background: color-mix(in srgb, var(--nd-accent-deep, #f2a900) 14%, transparent); }
.ndbx-check { width: 18px; text-align: center; color: var(--nd-accent-deep, #f2a900); }
.ndbx-ico { width: 20px; text-align: center; }
.ndbx-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndbx-size { color: var(--nd-muted, #9aa3b2); font-size: 12px; }
.ndbx-go { color: var(--nd-muted, #9aa3b2); }
/* Inline expand/collapse chevron for the folder tree (a leaf file gets an empty spacer of equal width). */
.ndbx-twist { flex: 0 0 auto; width: 14px; text-align: center; color: var(--nd-muted, #9aa3b2); font-size: 11px; cursor: pointer; }
.ndbx-twist-leaf { cursor: default; }
.ndbx-loading.sm { padding: 8px 16px; text-align: left; font-size: 13px; }
.ndbx-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--nd-border, #353b46); }
.ndbx-foot .nf-btn { min-width: 120px; } /* Cancel + Import the same size */
/* Provider chooser dropdown under the library's "📦 Import" button (mounts on document.body). */
.owl-cloud-menu { z-index: 4001; min-width: 200px; background: var(--nd-surface-2, #23272f); border: 1px solid var(--nd-border, #353b46); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); padding: 6px; }
.owl-cloud-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: none; border: none; color: var(--nd-text, #e8eaed); font: inherit; font-size: 14px; text-align: left; border-radius: 7px; cursor: pointer; }
.owl-cloud-menu-item:hover { background: var(--nd-hover, #222732); }
.owl-cloud-ic { width: 20px; text-align: center; }
/* Right-click context menu on a file/folder tile (reuses .owl-cloud-menu chrome). */
.owl-ctx-menu { min-width: 184px; max-width: 280px; }
.owl-ctx-menu .owl-cloud-ic { display: inline-flex; align-items: center; justify-content: center; }
.owl-ctx-menu .owl-cloud-ic svg { width: 16px; height: 16px; }
.owl-ctx-glyph { font-size: 15px; line-height: 1; }
.owl-ctx-sep { height: 1px; margin: 5px 8px; background: var(--nd-border, #353b46); }
.owl-ctx-menu .owl-ctx-danger { color: var(--nd-danger, #e5534b); }
.owl-ctx-menu .owl-ctx-danger:hover { background: var(--nd-danger-soft, rgba(229, 83, 75, .14)); }
}