:root { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; background: #121827; color: #e8eefc; }

.topbar{
  position: sticky; top: 0; z-index: 10;
  background: #121827;
  border-bottom: 1px solid #2a3a66;
  padding: 10px 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.brand{ font-weight: 800; letter-spacing: .3px; }
.tabs{ display:flex; gap:8px; flex-wrap: wrap; }
.tab{
  border-radius: 999px;
  border: 1px solid #3b5bd6;
  background: #151f32;
  color:#e8eefc;
  padding: 8px 12px;
  cursor:pointer;
}
.tab.active{ background:#1e3a8a; }

.container { max-width: none; margin: 0; padding: 16px; }
.card { background: #1a2336; border: 1px solid #2a3a66; border-radius: 14px; padding: 16px; margin-top: 16px; }

.controlLabel{ display:block; margin: 0; }
.controlLabel > input, .controlLabel > select{ margin-top: 8px; }

.belowGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* evenly side-by-side */
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

input, select, textarea {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #33477a;
  background: #151f32;
  color: #e8eefc;
  box-sizing: border-box;
}

button {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #3b5bd6;
  background: #1e3a8a;
  color: #e8eefc;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }

.fieldset { border: 1px dashed #3a5294; border-radius: 12px; padding: 10px; margin-top: 12px; }
.fieldset label { display: inline-flex; gap: 8px; align-items: center; margin-right: 14px; margin-bottom: 8px; }

.out { margin-top: 12px; background: #101827; border: 1px solid #2a3a66; border-radius: 12px; padding: 10px; overflow: auto; max-height: 260px; }
.muted{ opacity:.85; }
.hidden{ display:none !important; }

.dropzone {
  border: 2px dashed #3a5294;
  border-radius: 14px;
  padding: 18px;
  background: #151f32;
  cursor: pointer;
  user-select: none;
  margin-bottom: 12px;
}
.dropzone.dragover { border-color: #7a97ff; filter: brightness(1.08); }
.dropTitle { font-size: 18px; font-weight: 650; }
.dropSub { opacity: 0.85; margin-top: 6px; }
#pdfFile, #containerFiles, #unlockFile { display: none; }

.downloadBtn{
  display:inline-block;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #3b5bd6;
  background: #1e3a8a;
  color:#e8eefc;
  text-decoration:none;
}
.downloadBtn:hover{ filter: brightness(1.1); }

@media (max-width: 900px) {
  .belowGrid { grid-template-columns: 1fr; }
}


.filelist{
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #2a3a66;
  background: #101827;
  border-radius: 12px;
  max-height: 220px;
  overflow: auto;
}
.fileitem{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #111a35;
}
.fileitem:last-child{ border-bottom: none; }
.fileitem .name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fileitem .size{ opacity: .8; font-variant-numeric: tabular-nums; }


.topRight{ margin-left:auto; display:flex; align-items:center; }


.memberPill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #3a5294;
  background:#151f32;
  font-size:12px;
  opacity:.95;
  margin-right:10px;
}

.glowDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#46ff8a;
  box-shadow:0 0 10px rgba(70,255,138,.8), 0 0 18px rgba(70,255,138,.45);
  animation: glowPulse 1.6s ease-in-out infinite;
}

@keyframes glowPulse{
  0%{ transform:scale(0.95); filter:brightness(0.9); }
  50%{ transform:scale(1.1); filter:brightness(1.2); }
  100%{ transform:scale(0.95); filter:brightness(0.9); }
}


.modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 14px;
}

.modalCard{
  width: min(720px, calc(100vw - 24px));
  background: #1a2336;
  border: 1px solid #2a3a66;
  border-radius: 16px;
  box-shadow: 0 18px 70px rgba(0,0,0,0.55);
  overflow: hidden;
}

.modalHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid #2a3a66;
}

.modalTitle{
  font-weight: 850;
  font-size: 18px;
}

.modalX{
  border: 1px solid #3a5294;
  background: #151f32;
  color: #e8eefc;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.modalBody{
  padding: 14px;
}

.modalBlock{
  padding: 10px 12px;
  border: 1px dashed #3a5294;
  background: #151f32;
  border-radius: 12px;
  margin-bottom: 10px;
}

.modalH{
  font-weight: 800;
  margin-bottom: 6px;
}

.modalFooter{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 14px 14px 14px;
  border-top: 1px solid #2a3a66;
}


.billingBadge{
  display:flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #33477a;
  background:#151f32;
  font-size:12px;
  opacity:.95;
  margin-right:10px;
  white-space:nowrap;
}


/* Make Vault Files tab more pronounced */
.tab.vaultTab {
  font-weight: 800;
  letter-spacing: 0.2px;
  border-width: 2px !important;
  transform: translateY(-1px);
}

/* Vault list rows */
.vaultRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  margin-bottom: 10px;
}
.vaultMeta { min-width: 0; }
.vaultName { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62vw; }
.vaultActions { display: flex; gap: 10px; flex-wrap: wrap; }


/* Vault: make click-to-choose bulletproof by overlaying the file input */
#vaultDrop { position: relative; }
#vaultDrop .vaultFileOverlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}


/* Vault picker fix: force the overlay input to be clickable even if other dropzones hide file inputs */
#vaultDrop { position: relative; }
#vaultDrop input.vaultFileOverlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 9999;
  display: block !important;      /* overrides .dropzone input[type=file]{display:none} */
  pointer-events: auto !important;
}


/* Vault picker: label opens file dialog reliably even if dropzone file inputs are hidden globally */
#vaultChooseLabel input[type="file"]{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}


/* Vault breadcrumb */
.vaultBreadcrumb{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.vaultBreadcrumb a{
  font-weight: 700;
  text-decoration: none;
}
.vaultSep{ opacity: 0.55; }


/* Vault UI cleanup */
#vaultDrop { position: relative; }

/* Invisible overlay that opens the file picker when clicking the dropzone */
#vaultDrop .vaultPickOverlay{
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  z-index: 50;
}
#vaultDrop .vaultPickOverlay input[type="file"]{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Hide the big debug box unless we intentionally show it */
#vaultOut.hidden { display: none; }


/* Vault drag-move highlight */
.vaultRow.dragover{
  outline: 2px dashed rgba(120,160,255,0.75);
  outline-offset: 2px;
}
.vaultRow.dragging{
  opacity: 0.6;
}


/* Vault storage meter */
.vaultStorageCard{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.vaultStorageTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.vaultStorageTitle{
  font-weight: 800;
}
.vaultStorageText{
  font-size: 13px;
  opacity: 0.9;
}
.vaultStorageBar{
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow:hidden;
}
.vaultStorageFill{
  height: 100%;
  border-radius: 999px;
  background: rgba(60,110,255,0.85);
  width: 0%;
}
.vaultStorageHint{
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.8;
}


/* Encrypt mini tabs */
.miniTabBar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.miniTab{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  font-weight: 800;
}
.miniPanel{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.miniH{
  font-weight: 900;
  margin-bottom: 6px;
}


/* Encrypt action row */
.encryptActionRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.actionBtn{
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  font-weight: 800;
}
.actionBtn.primary{
  border-color: rgba(120,160,255,0.45);
  background: rgba(60,110,255,0.18);
}
.actionBtn.active{
  border-color: rgba(120,160,255,0.75);
  background: rgba(60,110,255,0.22);
}


/* Encrypt option tabs (below permissions) */
.encryptTabsRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.encryptTab{
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  font-weight: 800;
}
.encryptTab.active{
  border-color: rgba(120,160,255,0.75);
  background: rgba(60,110,255,0.20);
}
.encryptTabPanel{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}


/* Vault action tabs (Sign/Preview/Download/Email/Rename/Delete) */
.vaultActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.vaultActionTab{
  border-radius: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  font-weight: 800;
  font-size: 13px;
}
.vaultActionTab.primary{
  border-color: rgba(120,160,255,0.55);
  background: rgba(60,110,255,0.18);
}
.vaultActionTab:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}


/* Vault preview modal */
.modalCard.modalLarge{
  width: min(1100px, calc(100vw - 28px));
  max-height: min(82vh, 820px);
}
.vaultPreviewBox{
  height: min(62vh, 620px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  overflow: hidden;
}
#vaultPreviewFrame{
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}


/* Any-file previewer */
.vaultPreviewContent{
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,0.92);
}
.vaultPreviewContent iframe,
.vaultPreviewContent embed,
.vaultPreviewContent object{
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
.vaultPreviewContent img{
  max-width: 100%;
  max-height: 100%;
  display:block;
  margin: 0 auto;
}
.vaultPreviewContent video,
.vaultPreviewContent audio{
  width: 100%;
}
.vaultPreviewPre{
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  padding: 12px;
  margin: 0;
}
.vaultPreviewTable{
  width: 100%;
  overflow: auto;
  padding: 10px;
}
.vaultPreviewTable table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.vaultPreviewTable th, .vaultPreviewTable td{
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 8px;
  vertical-align: top;
}
.vaultPreviewNotice{
  padding: 14px;
}
.vaultPreviewNotice .muted{
  opacity: 0.8;
}


/* Prevent native clicks on hidden file inputs (JS opens the picker) */
.pfeFileInputHidden{
  display:none !important;
  pointer-events:none !important;
}

body.modalOpen{
  overflow: hidden;
}

#memberConfirmModal{
  backdrop-filter: blur(4px);
}

.confirmModalCard{
  width: min(560px, calc(100vw - 24px));
  border-radius: 20px;
}

.confirmModalBody{
  color: #dbe7ff;
  line-height: 1.6;
}

.confirmLead{
  font-size: 20px;
  font-weight: 850;
  color: #ffffff;
  margin-bottom: 8px;
}

.confirmSub{
  font-size: 15px;
  opacity: .95;
}

.confirmNote{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #33477a;
  background: #101827;
  color: #c7d7ff;
  font-size: 14px;
}

.confirmModalFooter{
  gap: 12px;
}

.btnGhost{
  background: #151f32;
  border: 1px solid #3a5294;
  color: #e8eefc;
}

.btnDanger{
  background: linear-gradient(180deg, #dc2626, #b91c1c);
  border: 1px solid #ef4444;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.28);
}

.btnDanger:hover{
  filter: brightness(1.07);
}

.unlockVaultImportCard{
  width:min(780px, calc(100vw - 24px));
}

.unlockVaultImportLead{
  margin-bottom:10px;
  color:#d9e4ff;
  font-size:14px;
}

.unlockVaultImportDrop{
  margin-top:4px;
}

.unlockVaultImportList{
  display:grid;
  gap:10px;
  max-height:360px;
  overflow:auto;
  padding-right:2px;
}

.unlockVaultImportRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid rgba(124, 145, 182, 0.28);
  border-radius:16px;
  background:rgba(18, 25, 41, 0.92);
}

.unlockVaultImportMeta{
  min-width:0;
  flex:1 1 auto;
}

.unlockVaultImportName{
  font-weight:800;
  color:#ffffff;
  word-break:break-word;
}

.unlockVaultImportSub{
  margin-top:4px;
  font-size:12px;
  color:#9fb0d7;
}

.unlockVaultImportActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.unlockVaultImportActions button{
  white-space:nowrap;
}

.unlockVaultImportEmpty{
  padding:18px;
  border:1px dashed rgba(124, 145, 182, 0.28);
  border-radius:16px;
  color:#b7c7ea;
  background:rgba(18, 25, 41, 0.55);
}

#unlockVaultImportStatus{
  min-height:20px;
}