/* e-OCI Wallet — Document Vault (PRO+) */
#vaultScreen{
  position:fixed; inset:0; z-index:9260; display:none; flex-direction:column;
  background:radial-gradient(1200px 700px at 50% -12%, #0d2043 0%, transparent 60%), var(--app-bg,#060F22);
  font-family:"Space Grotesk",system-ui,sans-serif; color:var(--txt,#EAF0FA);
}
body.vault-open #vaultScreen{ display:flex; }
body.vault-open .app{ filter:blur(3px); pointer-events:none; }

.v-top{ display:flex; align-items:center; gap:10px; padding:calc(env(safe-area-inset-top) + 16px) 16px 12px;
  position:sticky; top:0; z-index:2; background:linear-gradient(180deg, rgba(8,17,38,.96) 62%, rgba(8,17,38,0)); backdrop-filter:blur(8px); }
.v-top .v-back{ display:flex; align-items:center; gap:7px; font-size:15px; font-weight:500; padding:9px 13px 9px 10px; border-radius:12px;
  background:var(--surface,rgba(255,255,255,.06)); border:1px solid var(--line,rgba(255,255,255,.1)); }
.v-top .v-title{ flex:1; font-size:18px; font-weight:600; }
.v-top .v-add{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#241200;
  background:linear-gradient(135deg,var(--saffron-soft,#FFB865),var(--saffron,#FF9933)); border:none; }
.v-top .v-add svg{ width:22px; height:22px; }
.v-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 18px 40px; }

.v-list{ display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.v-doc{ display:flex; align-items:center; gap:14px; padding:15px 16px; border-radius:18px; cursor:pointer;
  background:var(--panel,#0C1A34); border:1px solid var(--line,rgba(255,255,255,.1)); transition:.16s var(--ease); text-align:left; width:100%; }
.v-doc:hover{ transform:translateY(-2px); border-color:var(--line-strong,rgba(255,255,255,.18)); }
.v-doc .v-ic{ width:46px; height:46px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(135deg,rgba(255,153,51,.16),rgba(255,153,51,.05)); border:1px solid rgba(255,153,51,.24); color:var(--saffron,#FF9933); }
.v-doc .v-ic svg{ width:24px; height:24px; }
.v-doc .v-ic img{ width:100%; height:100%; object-fit:cover; }
.v-doc .v-meta{ flex:1; min-width:0; }
.v-doc .v-meta b{ display:block; font-size:15.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-doc .v-meta span{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted,#7C8BA5); }
.v-doc .v-exp{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; padding:4px 9px; border-radius:999px; flex:0 0 auto;
  color:#B7F0B0; border:1px solid rgba(120,220,110,.4); background:rgba(19,136,8,.14); }
.v-doc .v-exp.warn{ color:var(--saffron-soft,#FFB865); border-color:rgba(255,153,51,.4); background:rgba(255,153,51,.14); }

.v-empty{ text-align:center; padding:64px 24px; color:var(--muted,#7C8BA5); }
.v-empty svg{ width:64px; height:64px; opacity:.4; margin-bottom:16px; }
.v-empty h3{ color:var(--txt,#EAF0FA); font-weight:600; margin:0 0 8px; }
.v-empty p{ font-size:14px; line-height:1.55; margin:0 auto; max-width:280px; }

/* detail */
.v-files{ display:flex; flex-direction:column; gap:14px; margin:14px 0 20px; }
.v-file{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--panel); }
.v-file img{ width:100%; display:block; }
.v-file .v-pdf{ display:flex; align-items:center; gap:12px; padding:16px; }
.v-file .v-pdf .lbl{ flex:1; font-size:14px; }
.v-detail-head{ display:flex; flex-direction:column; gap:3px; margin:6px 0 4px; }
.v-detail-head h2{ font-size:22px; margin:0; }
.v-detail-head .sub{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted); }
.v-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; }
.v-row .k{ color:var(--muted); } .v-row:last-child{ border-bottom:none; }
.v-actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.v-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:13px; font-size:14px; font-weight:600; flex:1; min-width:120px;
  background:var(--surface); border:1px solid var(--line); color:var(--txt); cursor:pointer; }
.v-btn svg{ width:17px; height:17px; }
.v-btn.primary{ background:linear-gradient(135deg,var(--saffron-soft),var(--saffron)); color:#241200; border:none; }
.v-btn.danger{ color:var(--danger-soft,#F16A6E); }

/* form */
.v-field{ margin-bottom:14px; }
.v-field label{ display:block; font-size:12px; color:var(--head,#B9C7E0); margin:0 0 7px 3px; }
.v-field input,.v-field select{ width:100%; padding:13px 14px; border-radius:13px; font-size:16px; color:var(--txt);
  background:var(--surface); border:1px solid var(--line); }
.v-field input:focus,.v-field select:focus{ outline:none; border-color:var(--saffron); }
.v-seg{ display:flex; gap:8px; flex-wrap:wrap; }
.v-seg button{ padding:9px 13px; border-radius:11px; font-size:13.5px; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); }
.v-seg button.on{ color:#fff; background:linear-gradient(135deg,#0E3A73,#0A2A54); border-color:var(--saffron); }
.v-drop{ border:1.5px dashed var(--line-strong,rgba(255,255,255,.22)); border-radius:14px; padding:22px; text-align:center; color:var(--muted); font-size:14px; cursor:pointer; }
.v-drop:hover{ border-color:var(--saffron); }
.v-thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.v-thumb{ position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.v-thumb img{ width:100%; height:100%; object-fit:cover; }
.v-thumb .pdf{ display:grid; place-items:center; height:100%; font-family:"IBM Plex Mono"; font-size:10px; color:var(--muted); }
.v-thumb .rm{ position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:13px; display:grid; place-items:center; }
.v-err{ min-height:17px; font-size:13px; color:var(--danger-soft,#F16A6E); margin-top:8px; text-align:center; }
.v-err.ok{ color:#8fdc86; }
.v-busy{ text-align:center; color:var(--muted); padding:50px; }