.vf-docs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(0,0,0,0.23);
  border-radius: 4px;
  background: #fff;
  color: #1f93ff;
  font: 500 13px/1 "Plus Jakarta Sans", Roboto, sans-serif;
  cursor: pointer;
}
.vf-docs-btn:hover { background: #e8f4ff; }
.vf-docs-btn-icon {
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/></svg>") center / contain no-repeat;
}
#vf-docs-modal { position: fixed; inset: 0; z-index: 20000; }
.vf-docs-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.vf-docs-shell {
  position: relative;
  z-index: 1;
  margin: 3vh auto;
  width: min(1180px, 96vw);
  height: 90vh;
  background: #f6f8fb;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15,23,42,.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font: 14px/1.45 "Plus Jakarta Sans", Roboto, sans-serif;
  color: #1e293b;
}
.vf-docs-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #fff;
  border-bottom: 1px solid #e6edf5;
}
.vf-docs-brand { display: flex; gap: 12px; align-items: center; }
.vf-docs-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: #1f93ff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/></svg>") center / 22px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/></svg>") center / 22px no-repeat;
  background-color: #1f93ff;
}
.vf-docs-brand p { margin: 0; color: #64748b; font-size: 12px; }
.vf-docs-brand strong { font-size: 16px; }
.vf-docs-close { border: 0; background: transparent; font-size: 28px; cursor: pointer; color: #64748b; }
.vf-docs-main { display: grid; grid-template-columns: 320px 1fr; min-height: 0; flex: 1; }
.vf-docs-rail {
  background: #fff;
  border-right: 1px solid #e6edf5;
  overflow: auto;
  padding: 16px;
}
.vf-docs-chip {
  display: inline-block;
  background: #e8f4ff;
  color: #0b6bcb;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 8px;
}
.vf-docs-meta p { margin: 0 0 4px; font-size: 12px; color: #475569; }
.vf-docs-files { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.vf-docs-none { color: #64748b; font-size: 13px; }
.vf-docs-file {
  display: flex; gap: 10px; align-items: flex-start;
  width: 100%; text-align: left;
  border: 1px solid transparent; background: #f8fafc;
  border-radius: 10px; padding: 10px; cursor: pointer;
}
.vf-docs-file:hover { background: #eef6ff; }
.vf-docs-file.active { background: #e8f4ff; border-color: #b6dbff; }
.vf-file-badge {
  flex: 0 0 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff; letter-spacing: .02em;
}
.vf-file-badge.pdf { background: #e11d48; }
.vf-file-badge.img { background: #2563eb; }
.vf-file-badge.file { background: #64748b; }
.vf-file-copy { min-width: 0; }
.vf-file-copy strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-file-copy small { color: #64748b; font-size: 11px; }
.vf-docs-stage { display: flex; flex-direction: column; min-width: 0; }
.vf-docs-stage-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #e6edf5;
}
.vf-docs-stage-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vf-docs-stage-title small { display: block; color: #64748b; font-size: 12px; }
.vf-docs-actions { display: flex; gap: 8px; }
.vf-docs-action {
  border: 1px solid #d5dee9; background: #fff; color: #0f172a;
  border-radius: 8px; padding: 8px 12px; cursor: pointer; font-weight: 600;
}
.vf-docs-action.primary { background: #1f93ff; border-color: #1f93ff; color: #fff; }
.vf-docs-action:disabled { opacity: .45; cursor: default; }
.vf-docs-preview { flex: 1; min-height: 0; background: #1e293b; }
.vf-docs-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.vf-docs-imagewrap { height: 100%; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 16px; }
.vf-docs-imagewrap img { max-width: 100%; background: #fff; border-radius: 4px; }
.vf-docs-empty { color: #cbd5e1; display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; text-align: center; }
@media (max-width: 900px) {
  .vf-docs-main { grid-template-columns: 1fr; }
  .vf-docs-rail { max-height: 34vh; }
}