.vd-library { --vd-folder-back:#e6a42e; --vd-folder-front:#f5c45d; }
.vd-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:.5rem 0 1.75rem; flex-wrap:wrap; }
.vd-eyebrow { color:var(--muted); font-size:.7rem; font-weight:700; letter-spacing:.16em; }
.vd-header h2 { font-size:1.8rem; letter-spacing:-.04em; margin:.25rem 0; }
.vd-header p { color:var(--muted); margin:0; }
.vd-upload { background:var(--panel); border:1px solid var(--border); border-radius:18px; margin-bottom:1.5rem; overflow:hidden; box-shadow:0 3px 16px #0f172a04; }
.vd-upload summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.4rem; }
.vd-upload summary::-webkit-details-marker { display:none; }
.vd-upload-heading { display:flex; align-items:center; gap:.9rem; }
.vd-upload-heading > span:last-child { display:flex; flex-direction:column; gap:.2rem; }
.vd-upload-heading strong { font-size:.95rem; font-weight:650; }
.vd-upload-heading small { font-size:.76rem; color:var(--muted); }
.vd-upload-heading-icon { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; background:#fff1f2; color:var(--red); font-size:1.5rem; border-radius:12px; }
.vd-upload-summary-end { display:flex; align-items:center; gap:1rem; color:var(--muted); font-size:.75rem; white-space:nowrap; }
.vd-upload-summary-end > span { font-size:1.2rem; transition:transform .15s; }
.vd-upload[open] .vd-upload-summary-end > span { transform:rotate(180deg); }
.vd-upload[open] summary { border-bottom:1px solid var(--border); }
.vd-upload-fields { min-width:0; border:0; padding:0; margin:0; }
.vd-upload-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; padding:1.5rem; }
.vd-upload-step { display:flex; align-items:center; gap:.55rem; margin-bottom:1rem; color:var(--text); font-weight:650; font-size:.83rem; }
.vd-upload-step > span { display:grid; place-items:center; background:var(--bg); border:1px solid var(--border); color:var(--muted); width:24px; height:24px; border-radius:50%; font-size:.7rem; }
.vd-dropzone { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.5rem; min-height:278px; padding:1.5rem 1rem; border:1.5px dashed #cbd5e1; border-radius:14px; background:linear-gradient(145deg,#f8fafc,#f1f5f9); color:var(--text); cursor:pointer; transition:border-color .15s,background .15s; }
.vd-dropzone:hover,.vd-dropzone:focus-within,.vd-dropzone.vd-file-dragover { background:#fff5f5; border-color:var(--red); }
.vd-dropzone:focus-within { outline:3px solid #c1121f22; outline-offset:3px; }
.vd-dropzone > input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.vd-dropzone > svg { width:56px; height:56px; margin-bottom:.8rem; color:#8fa0b6; }
.vd-dropzone > strong { font-size:1rem; font-weight:650; }
.vd-dropzone > span { color:var(--muted); font-size:.8rem; }
.vd-dropzone > span b { color:var(--red); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.vd-dropzone > small { margin-top:.65rem; font-size:.71rem; line-height:1.8; color:var(--muted); }
.vd-dropzone.vd-has-file { min-height:190px; padding:1rem; }
.vd-dropzone.vd-has-file > svg { width:38px; height:38px; margin-bottom:.2rem; }
.vd-upload-selected { display:flex; align-items:center; gap:.75rem; padding:.8rem; margin-top:.9rem; border:1px solid #bbdbc9; background:#f2fbf5; border-radius:12px; }
.vd-upload-selected[hidden] { display:none; }
.vd-upload-file-icon { width:34px; height:40px; flex-shrink:0; color:#548468; }
.vd-upload-file-icon svg { width:100%; height:100%; }
.vd-upload-selected > span:nth-child(2) { display:flex; flex-direction:column; gap:.2rem; min-width:0; flex:1; }
.vd-upload-selected strong { font-size:.8rem; overflow-wrap:anywhere; }
.vd-upload-selected small { font-size:.7rem; color:var(--muted); }
.vd-upload-remove { border:0; border-radius:50%; background:#e4f3e9; color:#527860; font-size:1.3rem; width:30px; height:30px; flex-shrink:0; cursor:pointer; }
.vd-upload-destination .form-label { display:block; margin:0 0 .9rem; }
.vd-upload-destination .form-label > small { display:block; color:var(--muted); font-size:.69rem; font-weight:400; letter-spacing:0; text-transform:none; margin-top:.4rem; }
.vd-upload-optional { margin-left:.35rem; text-transform:none; letter-spacing:0; font-weight:400; color:#94a3b8; }
.vd-upload-target { display:flex; gap:.6rem; align-items:center; background:#f8fafc; border:1px solid var(--border); padding:.8rem; border-radius:10px; }
.vd-upload-target svg { width:30px; height:25px; flex-shrink:0; }
.vd-upload-target > span { min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.vd-upload-target small { color:var(--muted); font-size:.65rem; }
.vd-upload-target strong { font-size:.75rem; line-height:1.5; font-weight:600; overflow-wrap:anywhere; }
.vd-upload-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:1rem 1.5rem; background:#f8fafc; border-top:1px solid var(--border); }
.vd-upload-footer > span { font-size:.75rem; color:var(--muted); }
.vd-upload-footer > div { display:flex; gap:.6rem; flex-shrink:0; }
.vd-upload-error { margin:0 1.5rem 1rem; padding:.8rem 1rem; background:var(--red-light); color:var(--red-dark); font-size:.8rem; border-radius:10px; }
.vd-upload-fields:disabled .vd-dropzone { opacity:.65; }
.vd-upload [aria-busy=true] #vdUploadStatus::before { content:''; display:inline-block; vertical-align:middle; width:12px; height:12px; border:2px solid var(--border); border-top-color:var(--red); border-radius:50%; margin-right:.5rem; animation:vd-upload-spin 1s linear infinite; }
@keyframes vd-upload-spin { to { transform:rotate(360deg); } }
@media(max-width:700px) { .vd-upload-layout { grid-template-columns:1fr; gap:1.5rem; padding:1rem; } .vd-upload summary { padding:1rem; } .vd-upload-summary-end { font-size:0; gap:0; } .vd-upload-heading small { font-size:.68rem; } .vd-dropzone { min-height:210px; padding:1.1rem; } .vd-upload-footer { padding:1rem; } .vd-upload-footer > div { width:100%; } .vd-upload-footer > div > button { flex:1; justify-content:center; } .vd-upload-error { margin:0 1rem 1rem; } }
@media(prefers-reduced-motion:reduce) { .vd-dropzone,.vd-upload-summary-end > span { transition:none; } .vd-upload [aria-busy=true] #vdUploadStatus::before { animation:none; } }
.vd-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
#vdPfad { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; font-size:.9rem; }
#vdPfad > span { color:var(--muted); }
.vd-breadcrumb { display:flex; align-items:center; gap:.5rem; border:0; padding:.4rem 0; background:none; color:var(--muted); font:inherit; cursor:pointer; }
.vd-breadcrumb:hover { color:var(--red); }
.vd-breadcrumb svg { width:25px; height:23px; }
.vd-search { width:min(100%,310px); }
.vd-search .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.vd-summary { margin:1.15rem 0; color:var(--muted); font-size:.8rem; }
.vd-folder-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:1rem; }
.vd-folder { display:flex; flex-direction:column; text-align:left; background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:1.5rem; min-height:217px; color:var(--text); cursor:pointer; font:inherit; transition:transform .18s,border-color .18s,box-shadow .18s; }
.vd-folder:hover { transform:translateY(-3px); border-color:var(--vd-folder-back); box-shadow:var(--shadow-md); }
.vd-folder-art { display:flex; align-items:start; justify-content:space-between; width:100%; margin-bottom:1.1rem; }
.vd-folder-art svg { width:88px; height:70px; filter:drop-shadow(0 6px 6px #0f172a0c); }
.vd-folder-arrow { color:var(--muted); border:1px solid var(--border); border-radius:50%; width:29px; height:29px; display:grid; place-items:center; font-size:1rem; }
.vd-folder strong { font-size:1.02rem; font-weight:650; line-height:1.45; overflow-wrap:anywhere; }
.vd-folder > span:last-child { margin-top:.4rem; color:var(--muted); font-size:.8rem; }
.vd-color-1 { --vd-folder-back:#6787c7; --vd-folder-front:#9bb9ee; }
.vd-color-2 { --vd-folder-back:#b593d2; --vd-folder-front:#d1b8e6; }
.vd-color-3 { --vd-folder-back:#57a590; --vd-folder-front:#8dcbb6; }
.vd-color-4 { --vd-folder-back:#d48b72; --vd-folder-front:#efb39b; }
.vd-color-5 { --vd-folder-back:#788aa5; --vd-folder-front:#a8b8cd; }
.vd-document-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr)); gap:1.15rem; }
.vd-document { min-width:0; overflow:hidden; background:var(--panel); border:1px solid var(--border); border-radius:16px; transition:box-shadow .18s,border-color .18s; }
.vd-document:hover { border-color:#b6c4d5; box-shadow:var(--shadow-md); }
.vd-document-open { width:100%; border:0; background:none; color:var(--text); text-align:left; padding:0; font:inherit; cursor:pointer; }
.vd-preview { display:flex; position:relative; height:218px; align-items:flex-start; justify-content:center; overflow:hidden; background:linear-gradient(135deg,#eaf0f6,#f5f7fa); padding:16px 20px 0; border-bottom:1px solid var(--border); }
.vd-preview > img { width:100%; height:100%; object-fit:contain; object-position:center; padding-bottom:16px; }
.vd-preview > canvas { display:block; width:100%; height:auto; background:white; box-shadow:0 2px 10px #0f172a15; }
.vd-file-type { position:absolute; top:10px; left:10px; font-size:.63rem; letter-spacing:.06em; font-weight:750; padding:4px 7px; border:1px solid #ffffffb0; border-radius:6px; background:#fffffff0; color:#475569; }
.vd-file-placeholder { align-self:center; display:flex; flex-direction:column; align-items:center; gap:7px; color:#879bb5; padding:14px 0 25px; }
.vd-file-placeholder svg { height:77px; width:60px; }
.vd-file-placeholder b { font-size:.75rem; letter-spacing:.08em; }
.vd-file-placeholder small { font-size:.67rem; color:var(--muted); text-align:center; }
.vd-text-preview { display:block; width:100%; min-height:100%; white-space:pre-wrap; overflow-wrap:anywhere; background:white; color:#475569; padding:22px 15px; font:9px/1.8 ui-monospace,monospace; box-shadow:0 2px 10px #0f172a15; text-align:left; }
.vd-document-name { display:block; font-weight:650; line-height:1.45; padding:1rem 1rem .35rem; overflow-wrap:anywhere; }
.vd-document-meta { display:flex; flex-direction:column; gap:4px; padding:0 1rem .9rem; color:var(--muted); font-size:.72rem; }
.vd-document-meta > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vd-document-actions { display:flex; justify-content:space-between; gap:4px; padding:.6rem .7rem; border-top:1px solid var(--border); }
.vd-document-actions .btn-ghost { padding:.35rem .4rem; font-size:.73rem; }
.vd-document-actions .vd-delete { color:var(--muted); }
.vd-document-actions .vd-delete:hover { color:var(--red); }
.vd-empty { grid-column:1/-1; text-align:center; padding:3.5rem 1rem; border:1px dashed var(--border); border-radius:16px; color:var(--muted); }
.vd-empty svg { width:80px; height:66px; margin-bottom:1rem; }
.vd-empty h3 { color:var(--text); margin:0 0 .4rem; }
.vd-library button:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
.vd-header-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.vd-library .btn-secondary,.vd-dialog .btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.55rem .9rem; font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; }
.vd-library .btn-secondary:hover,.vd-dialog .btn-secondary:hover { background:var(--bg); border-color:#bac6d6; }
.vd-library button:disabled,.vd-dialog button:disabled { opacity:.55; cursor:wait; }
.vd-header-actions svg { width:22px; height:19px; }
.vd-header-actions .btn-secondary { display:flex; align-items:center; gap:.5rem; }
.vd-folder-shell { min-width:0; border:1px solid var(--border); border-radius:18px; background:var(--panel); overflow:hidden; }
.vd-folder-shell .vd-folder { width:100%; border:0; border-radius:0; min-height:180px; }
.vd-folder-shell .vd-folder:hover { box-shadow:none; transform:none; background:#fffcf3; }
.vd-folder-actions { display:flex; justify-content:space-between; gap:.4rem; border-top:1px solid var(--border); padding:.45rem .75rem; }
.vd-folder-actions .btn-ghost { font-size:.72rem; padding:.35rem .3rem; color:var(--muted); }
.vd-section-title { color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin:0 0 .8rem; }
.vd-section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.8rem; margin-bottom:.8rem; }
.vd-section-heading .vd-section-title { margin:0; }
.vd-section-heading .btn-ghost { font-size:.75rem; padding:.2rem .5rem; }
.vd-directory > .vd-section-heading:first-child { margin-top:0; }
.vd-breadcrumb { text-align:left; overflow-wrap:anywhere; border-radius:5px; }
.vd-breadcrumb:last-child { color:var(--text); font-weight:650; }
.vd-document { position:relative; }
.vd-select-document { position:absolute; z-index:2; top:10px; right:10px; padding:4px; border-radius:7px; background:#ffffffed; display:flex; cursor:pointer; box-shadow:0 1px 3px #0f172a18; }
.vd-select-document input { width:18px; height:18px; accent-color:var(--red); cursor:pointer; }
.vd-document.vd-selected { border-color:var(--red); box-shadow:0 0 0 2px var(--red-light); }
.vd-selectionbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; padding:.9rem 1rem; margin-top:1rem; border:1px solid #f4c6ca; border-radius:12px; background:#fff5f5; font-size:.85rem; }
.vd-selectionbar[hidden] { display:none; }
.vd-selectionbar > label,.vd-selectionbar > div { display:flex; align-items:center; gap:.6rem; }
.vd-selectionbar input { accent-color:var(--red); width:17px; height:17px; }
.vd-drag-hint { color:var(--muted); font-size:.75rem; margin-top:1.3rem; text-align:center; }
.vd-drop-target { outline:3px dashed var(--red)!important; outline-offset:3px; background:var(--red-light)!important; }
.vd-dialog { --vd-folder-back:#e6a42e; --vd-folder-front:#f5c45d; width:min(580px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); padding:0; border:1px solid var(--border); border-radius:20px; background:var(--panel); color:var(--text); box-shadow:var(--shadow-lg); inset:50% auto auto 50%; translate:-50% -50%; margin:0; overflow:auto; }
.vd-dialog::backdrop { background:#0f172a80; backdrop-filter:blur(5px); }
.vd-dialog header { display:flex; justify-content:space-between; gap:1rem; align-items:start; padding:1.5rem 1.5rem 1rem; border-bottom:1px solid var(--border); }
.vd-dialog h2 { font-size:1.25rem; letter-spacing:-.025em; margin:.3rem 0 0; }
.vd-dialog-close { border:1px solid var(--border); background:var(--bg); color:var(--muted); width:32px; height:32px; border-radius:50%; font-size:1.3rem; cursor:pointer; flex-shrink:0; }
.vd-dialog-content { padding:1.25rem 1.5rem; }
.vd-dialog-content > .form-label { display:block; margin-top:1rem; }
.vd-dialog footer { display:flex; justify-content:flex-end; gap:.6rem; padding:1rem 1.5rem; background:#f8fafc; border-top:1px solid var(--border); position:sticky; bottom:0; }
.vd-dialog-folder { display:flex; align-items:center; gap:1rem; }
.vd-dialog-folder > svg { width:66px; height:55px; flex-shrink:0; }
.vd-dialog-folder strong { font-size:.9rem; }
.vd-dialog-folder p,.vd-dialog-hint { color:var(--muted); font-size:.82rem; line-height:1.6; }
.vd-dialog-hint { margin:0 0 1rem; }
.vd-current-path { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:.65rem .8rem; margin-top:1rem; font-size:.75rem; overflow-wrap:anywhere; color:var(--muted); }
.vd-dialog-error { color:var(--red); background:var(--red-light); padding:.65rem; border-radius:8px; margin-top:1rem; font-size:.8rem; }
.vd-target-list { margin-top:.8rem; max-height:40vh; overflow:auto; border:1px solid var(--border); border-radius:12px; padding:.4rem; }
.vd-target { display:flex; align-items:center; gap:.7rem; padding:.65rem .6rem .65rem calc(.6rem + var(--vd-depth)*14px); border-radius:8px; cursor:pointer; border:1px solid transparent; }
.vd-target:hover { background:var(--bg); }
.vd-target:has(input:checked) { border-color:#f3bcc1; background:#fff5f5; }
.vd-target[hidden] { display:none; }
.vd-target input { accent-color:var(--red); flex-shrink:0; }
.vd-target svg { width:30px; height:25px; flex-shrink:0; }
.vd-target > span { display:flex; flex-direction:column; min-width:0; gap:.1rem; }
.vd-target strong { font-size:.83rem; overflow-wrap:anywhere; }
.vd-target small { color:var(--muted); font-size:.66rem; overflow-wrap:anywhere; }
.vd-no-targets { padding:1rem; color:var(--muted); font-size:.8rem; }
@media(max-width:600px) { .vd-dialog { width:100%!important; max-width:100%!important; max-height:calc(100dvh - 16px)!important; border-radius:20px 20px 0 0; right:0!important; } }
@media(max-width:600px) { .vd-header-actions { width:100%; } .vd-header-actions > button { flex:1; justify-content:center; } .vd-selectionbar > div { width:100%; } .vd-dialog header,.vd-dialog-content { padding:1rem; } .vd-dialog footer { padding:.85rem 1rem; } .vd-drag-hint { display:none; } .vd-folder-shell .vd-folder { padding:1rem; min-height:170px; } }
@media(max-width:600px) { .vd-header h2 { font-size:1.5rem; } .vd-header > button,.vd-search { width:100%; } .vd-folder-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; } .vd-folder { padding:1rem; min-height:192px; } .vd-folder-art svg { width:65px; height:56px; } .vd-folder-arrow { display:none; } .vd-folder strong { font-size:.9rem; } .vd-document-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; } .vd-preview { height:170px; padding:12px 12px 0; } .vd-document-name { font-size:.85rem; padding:.75rem .75rem .35rem; } .vd-document-meta { padding:0 .75rem .7rem; font-size:.65rem; } .vd-document-actions { flex-wrap:wrap; padding:.45rem; } .vd-document-actions .btn-ghost { font-size:.65rem; } }
@media(max-width:360px) { .vd-document-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .vd-folder,.vd-document { transition:none; } .vd-folder:hover { transform:none; } }