:root{
	--bg:#f8f8f0;
	--surface:#ffffff;
	--ink:#101820;
	--muted:#5a6472;
	--navy:#002858;
	--navy-deep:#002048;
	--accent:#4898d8;
	--line:#e3e0d8;
	--radius:16px;
	--shadow:0 10px 30px rgba(0,40,88,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
html:lang(fr) .en{display:none !important}
html:lang(en) .fr{display:none !important}
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}
img{max-width:100%;display:block}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(248,248,240,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.8rem;padding-bottom:.8rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.brand img{height:2rem}
.nav-links{display:flex;align-items:center;gap:1.4rem}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.95rem;font-weight:600}
.nav-links a:hover{color:var(--navy)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:10px;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep);box-shadow:0 8px 20px rgba(0,40,88,.25)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:#3a86c4;box-shadow:0 8px 20px rgba(72,152,216,.3)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:rgba(0,40,88,.06)}
.btn-lg{padding:1rem 1.8rem;font-size:1.05rem}
.btn-block{width:100%}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;max-width:1100px;margin:0 auto;padding:4rem 1.5rem}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(72,152,216,.12);color:var(--navy);border:1px solid rgba(72,152,216,.35);padding:.35rem .9rem;border-radius:999px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1.2rem}
.hero h1{font-size:3rem;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.1;margin-bottom:1rem}
.hero p.lead{font-size:1.2rem;color:var(--muted);margin-bottom:2rem;max-width:30rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.4rem}
.hero-points{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;color:var(--muted);font-size:.9rem}
.hero-points li{display:flex;align-items:center;gap:.5rem;list-style:none}
.hero-points li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);flex-shrink:0}
.hero-art{display:flex;justify-content:center}
.hero-art img{width:100%;max-width:520px;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}

/* Sections */
.section{padding:3.5rem 1.5rem}
.section.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{text-align:center;max-width:42rem;margin:0 auto 2.5rem}
.section-head h2{font-size:2.1rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:.6rem}
.section-head p{color:var(--muted);font-size:1.05rem}

/* Features */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease}
.feature:hover{transform:translateY(-3px);border-color:var(--accent)}
.feature .icon{width:2.6rem;height:2.6rem;border-radius:10px;background:rgba(72,152,216,.14);color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.feature .icon svg{width:1.35rem;height:1.35rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature h3{font-size:1.05rem;color:var(--navy);margin-bottom:.4rem}
.feature p{font-size:.92rem;color:var(--muted)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.step{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.step .num{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:1rem}
.step h3{font-size:1.05rem;color:var(--navy);margin-bottom:.4rem}
.step p{font-size:.92rem;color:var(--muted)}

/* Create card */
.create-wrap{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow)}
.card h2{font-size:1.6rem;color:var(--navy);margin-bottom:.5rem}
.card .card-sub{color:var(--muted);font-size:.95rem;margin-bottom:1.6rem}
.field-label{display:block;color:var(--navy);font-size:.85rem;font-weight:700;margin-bottom:.5rem}
.input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;color:var(--ink);font-size:1rem;outline:none;transition:border-color .15s ease}
.input:focus{border-color:var(--accent)}
.input:invalid{border-color:#c0392b}
.card .hint{margin-top:.5rem}
.card .error{min-height:1.2rem}

/* Recent */
.recent{margin-top:1.5rem}
.recent h3{font-size:.85rem;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.8rem}
.recent-item{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.recent-item a{flex:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-decoration:none;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7rem 1rem;transition:border-color .15s ease}
.recent-item a:hover{border-color:var(--accent)}
.recent .name{font-weight:700;color:var(--navy)}
.recent .url{color:var(--muted);font-size:.75rem}
.recent-del{flex-shrink:0;width:1.7rem;height:1.7rem;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:1.05rem;line-height:1;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.recent-del:hover{border-color:#c0392b;color:#c0392b}

/* Modal */
.vd-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:1rem}
.vd-modal:not([hidden]){display:flex}
.vd-modal-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;max-width:380px;width:100%;box-shadow:0 20px 50px rgba(0,40,88,.25)}
.vd-modal-box h3{font-size:1.15rem;color:var(--navy);margin-bottom:.5rem}
.vd-modal-box .proj{color:var(--navy);font-weight:700}
.vd-modal-box .muted{color:var(--muted);font-size:.9rem}
.vd-modal .row{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.4rem}

/* Footer */
.site-footer{background:var(--navy-deep);color:#cbd5e1;padding:2rem 1.5rem;text-align:center;font-size:.9rem}
.site-footer a{color:var(--accent);text-decoration:none}

/* Install (subdomain first-run) */
.install{display:none;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;min-height:100vh;padding:2rem}
.install:not([hidden]){display:flex}
.install img{height:6rem}
.install p{color:var(--muted);font-size:1rem}
.spinner{width:2rem;height:2rem;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:vdspin 1s linear infinite}
@keyframes vdspin{to{transform:rotate(360deg)}}

/* Hide landing on subdomains */
.vd-sub #landing{display:none}

@media (max-width:900px){
	.hero{grid-template-columns:1fr;padding-top:2.5rem;text-align:center}
	.hero p.lead{margin-left:auto;margin-right:auto}
	.hero-actions,.hero-points{justify-content:center}
	.hero-points{flex-direction:column;align-items:center;gap:.4rem}
	.hero-art{order:-1}
	.steps{grid-template-columns:1fr}
	.create-wrap{grid-template-columns:1fr}
	.nav-links{display:none}
}

/* FAQ */
.footer-nav{display:flex;justify-content:center;gap:1.4rem;margin-bottom:.8rem}
.footer-nav a{color:var(--accent);text-decoration:none;font-weight:600}
.footer-nav a:hover{text-decoration:underline}
.faq-page{max-width:860px;margin:0 auto;padding:3rem 1.5rem}
.faq-page h1{font-size:2.1rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:.6rem;text-align:center}
.faq-page .faq-sub{color:var(--muted);font-size:1.05rem;text-align:center;margin-bottom:2.5rem}
.faq-list{display:flex;flex-direction:column;gap:1rem}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:1.25rem 1.5rem;font-weight:700;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--accent);transition:transform .2s ease;flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .answer{padding:0 1.5rem 1.25rem;color:var(--muted);line-height:1.7}
.faq-item .answer a{color:var(--accent)}
.faq-item .answer li{margin-left:1.2rem;margin-bottom:.3rem}

/* Legal */
.legal-page{max-width:860px;margin:0 auto;padding:3rem 1.5rem}
.legal-page h1{font-size:2.1rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:.6rem;text-align:center}
.legal-page .legal-sub{color:var(--muted);font-size:1.05rem;text-align:center;margin-bottom:2rem}
.legal-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:2rem}
.legal-nav a{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;color:var(--navy);text-decoration:none;font-size:.9rem;font-weight:600;box-shadow:var(--shadow)}
.legal-nav a:hover{border-color:var(--accent)}
.legal-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;margin-bottom:1.5rem}
.legal-section h2{font-size:1.5rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--line)}
.legal-section h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin:1.2rem 0 .4rem}
.legal-section p{color:var(--muted);line-height:1.7;margin-bottom:.8rem}
.legal-section ul{color:var(--muted);line-height:1.7;padding-left:1.2rem;margin-bottom:.8rem}
.legal-section li{margin-bottom:.3rem}
.legal-section .updated{font-size:.85rem;font-style:italic}

/* Proxy */
.proxy-page{max-width:900px;margin:0 auto;padding:3rem 1.5rem}
.proxy-page h1{font-size:2.1rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:.6rem;text-align:center}
.proxy-page .proxy-sub{color:var(--muted);font-size:1.05rem;text-align:center;margin-bottom:2rem}
.proxy-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;margin-bottom:1.5rem}
.proxy-section h2{font-size:1.5rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--line)}
.proxy-section h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin:1.2rem 0 .4rem}
.proxy-section p{color:var(--muted);line-height:1.7;margin-bottom:.8rem}
.proxy-section ul,.proxy-section ol{color:var(--muted);line-height:1.7;padding-left:1.2rem;margin-bottom:.8rem}
.proxy-section li{margin-bottom:.3rem}
.proxy-section code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:.1rem .35rem;font-family:ui-monospace,Consolas,monospace;font-size:.85em;color:var(--navy)}
.proxy-flow{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;margin:1.2rem 0;color:var(--navy);font-weight:700}
.proxy-flow .step{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.5rem 1rem;font-size:.9rem;color:var(--muted);font-weight:500}
.proxy-flow .arrow{color:var(--accent);font-size:1.2rem;line-height:1}
.code-block{background:#0a0a0a;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;overflow:auto;max-height:620px;font-family:ui-monospace,Consolas,monospace;font-size:.8rem;line-height:1.5;color:#e0e0e0;white-space:pre;tab-size:4}

/* Compare */
.compare-page{max-width:1100px;margin:0 auto;padding:3rem 1.5rem}
.compare-page h1{font-size:2.3rem;font-weight:800;color:var(--navy);letter-spacing:-.03em;text-align:center;line-height:1.15;margin-bottom:.8rem}
.compare-page .compare-sub{color:var(--muted);font-size:1.1rem;text-align:center;max-width:46rem;margin:0 auto 2.6rem}
.compare-legend{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:1.2rem}
.compare-legend strong{color:var(--navy)}
.compare-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface);-webkit-overflow-scrolling:touch}
table.compare{width:100%;border-collapse:collapse;min-width:900px;font-size:.83rem}
.compare th,.compare td{border:1px solid var(--line);padding:.7rem .8rem;text-align:left;vertical-align:top}
.compare thead th{background:var(--navy);color:#fff;font-weight:700;font-size:.9rem;line-height:1.3}
.compare thead th .cmp-sub{display:block;font-weight:500;font-size:.7rem;color:#cbd5e1;margin-top:.2rem}
.compare th.crit,.compare td.crit{background:var(--bg);font-weight:700;color:var(--navy);white-space:nowrap;font-size:.82rem}
.compare th.vd,.compare td.vd{background:#eaf2fb;border-color:rgba(72,152,216,.45)}
.compare thead th.vd{background:var(--navy-deep)}
.compare .vd-tag{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .5rem;font-weight:700;margin-bottom:.15rem}
.compare td.vd{font-weight:600;color:var(--navy)}
.compare-note{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin:1.6rem 0 3rem;font-size:.85rem;color:var(--muted)}
.compare-note span{display:inline-flex;align-items:center;gap:.4rem}
.diff-list{display:grid;gap:1rem;max-width:52rem;margin:0 auto 3rem}
.diff{display:flex;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.diff .icon{flex:none;width:2.4rem;height:2.4rem;border-radius:10px;background:rgba(72,152,216,.14);color:var(--navy);display:flex;align-items:center;justify-content:center}
.diff .icon svg{width:1.2rem;height:1.2rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.diff strong{color:var(--navy);display:block;margin-bottom:.15rem}
.diff p{color:var(--muted);font-size:.92rem}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;margin-bottom:3rem}
.pick{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.pick h3{font-size:1.05rem;color:var(--navy);margin-bottom:.2rem}
.pick .pick-role{font-size:.78rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem}
.pick ul{list-style:none;margin:0 0 .9rem}
.pick li{color:var(--muted);font-size:.88rem;padding-left:1.1rem;position:relative;margin-bottom:.35rem}
.pick li::before{content:"";position:absolute;left:0;top:.45em;width:.4rem;height:.4rem;border-radius:50%;background:var(--accent)}
.pick .pick-alt{font-size:.8rem;color:var(--navy);background:var(--bg);border-left:3px solid var(--accent);padding:.5rem .7rem;border-radius:6px}
.pick.vd{background:var(--navy);border-color:var(--navy);box-shadow:0 14px 34px rgba(0,40,88,.3)}
.pick.vd h3{color:#fff}
.pick.vd .pick-role{color:var(--accent)}
.pick.vd li{color:#dbe6f2}
.pick.vd li::before{background:var(--accent)}
.pick.vd .pick-alt{color:#fff;background:rgba(72,152,216,.18);border-left-color:var(--accent)}
.compare-cta{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2.6rem 2rem;box-shadow:var(--shadow)}
.compare-cta h2{font-size:1.7rem;color:var(--navy);margin-bottom:.5rem}
.compare-cta p{color:var(--muted);margin-bottom:1.6rem}
@media (max-width:720px){
	.compare-page h1{font-size:1.8rem}
	.compare th.crit,.compare td.crit{position:sticky;left:0;z-index:2;box-shadow:2px 0 0 var(--line)}
	.compare thead th.crit{background:var(--navy);color:#fff}
	.diff{flex-direction:column}
}

/* Wireframe SVG Icons (CSS Mask) */
.vd-icon {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex-shrink: 0;
}
.vd-icon-dashboard {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
}
.vd-icon-requests {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}
.vd-icon-iaPlan, .vd-icon-plan, .vd-icon-ia-plan {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h6'/%3E%3C/svg%3E");
}
.vd-icon-logs {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E");
}
.vd-icon-opfs, .vd-icon-folder {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.vd-icon-db, .vd-icon-database {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E");
}
.vd-icon-telemetry, .vd-icon-chart {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
}
.vd-icon-config, .vd-icon-settings {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
.vd-icon-reset, .vd-icon-refresh {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'/%3E%3Cpolyline points='23 20 23 14 17 14'/%3E%3Cpath d='M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'/%3E%3Cpolyline points='23 20 23 14 17 14'/%3E%3Cpath d='M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15'/%3E%3C/svg%3E");
}
.vd-icon-menu {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}
.vd-icon-chevron-left, .vd-icon-chevronLeft {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
.vd-icon-chevron-right, .vd-icon-chevronRight {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.vd-icon-rocket {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
}
.vd-icon-arrow-right, .vd-icon-arrowRight {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}
.vd-icon-plus {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.vd-icon-check {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.vd-icon-cross, .vd-icon-close {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.vd-icon-info {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}
.vd-icon-home {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}
.vd-icon-code {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}
.vd-icon-bug {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='6' width='8' height='14' rx='4'/%3E%3Cpath d='M19 7l-3 2'/%3E%3Cpath d='M5 7l3 2'/%3E%3Cpath d='M19 19l-3-2'/%3E%3Cpath d='M5 19l3-2'/%3E%3Cpath d='M20 13h-4'/%3E%3Cpath d='M4 13h4'/%3E%3Cpath d='M10 4a2 2 0 0 1 4 0'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='6' width='8' height='14' rx='4'/%3E%3Cpath d='M19 7l-3 2'/%3E%3Cpath d='M5 7l3 2'/%3E%3Cpath d='M19 19l-3-2'/%3E%3Cpath d='M5 19l3-2'/%3E%3Cpath d='M20 13h-4'/%3E%3Cpath d='M4 13h4'/%3E%3Cpath d='M10 4a2 2 0 0 1 4 0'/%3E%3C/svg%3E");
}
.vd-icon-trash {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
}
.vd-icon-download {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}
.vd-icon-upload {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
}
.vd-icon-copy {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}
.vd-icon-search {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.vd-icon-eye {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.vd-icon-play {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
}

/* Readonly ergonomic styling */
input.vd-input-readonly, .vd-input-readonly {
	background: rgba(0, 40, 88, 0.04) !important;
	border: 1px dashed var(--line, #e3e0d8) !important;
	color: var(--navy, #002858) !important;
	font-weight: 600 !important;
	cursor: default !important;
	user-select: all !important;
}
input.vd-input-readonly:focus, .vd-input-readonly:focus {
	outline: none !important;
	border-color: var(--accent, #4898d8) !important;
	box-shadow: none !important;
}

.vd-recent-list {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.vd-recent-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	background: var(--bg, #f8f8f0);
	color: var(--ink, #101820);
	text-decoration: none;
	border: 1px solid var(--line, #e3e0d8);
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.85rem;
	cursor: pointer;
}
.vd-recent-row:hover {
	background: rgba(0, 40, 88, 0.05);
	border-color: var(--accent, #4898d8);
}

/* Application Layout & Sidebar */
.vd-layout { display: flex; min-height: 100vh; width: 100%; position: relative; }
.vd-sidebar { width: 230px; min-width: 230px; background: var(--navy, #002858); color: #fff; display: flex; flex-direction: column; border-right: 1px solid rgba(255, 255, 255, 0.08); transition: width 0.2s ease, transform 0.2s ease; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 100; user-select: none; box-sizing: border-box; }
.vd-sidebar.collapsed { width: 56px; min-width: 56px; }
.vd-sidebar-header { padding: 0.9rem 0.85rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.08); gap: 0.5rem; }
.vd-sidebar-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: #fff; font-weight: 800; font-size: 1.05rem; overflow: hidden; white-space: nowrap; }
.vd-sidebar-brand img { width: 1.6rem; height: 1.6rem; flex-shrink: 0; object-fit: contain; }
.vd-sidebar-toggle { background: rgba(255, 255, 255, 0.08); border: none; border-radius: 6px; width: 1.8rem; height: 1.8rem; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: background 0.15s; }
.vd-sidebar-toggle:hover { background: rgba(255, 255, 255, 0.16); }
.vd-sidebar-section { padding: 0.7rem 0.75rem 0.25rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-sidebar.collapsed .vd-sidebar-section { display: none; }
.vd-sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.35rem 0.5rem; }
.vd-sidebar-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.65rem; border-radius: 8px; color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 0.88rem; font-weight: 500; transition: all 0.15s ease; white-space: nowrap; position: relative; }
.vd-sidebar-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.vd-sidebar-link.active { background: rgba(72, 152, 216, 0.25); color: #fff; font-weight: 700; border-left: 3px solid var(--accent, #4898d8); }
.vd-sidebar.collapsed .vd-sidebar-link { justify-content: center; padding: 0.55rem 0; border-left: none; }
.vd-sidebar.collapsed .vd-sidebar-link.active { background: rgba(72, 152, 216, 0.3); box-shadow: inset 0 0 0 2px var(--accent, #4898d8); }
.vd-sidebar.collapsed .vd-sidebar-label { display: none; }
.vd-sidebar.collapsed .vd-sidebar-badge { display: none; }
.vd-sidebar-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.vd-sidebar-icon svg { width: 1.2rem; height: 1.2rem; }
.vd-sidebar-badge { margin-left: auto; font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.15); color: #fff; }
.vd-sidebar-footer { margin-top: auto; padding: 0.75rem 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); }
.vd-sidebar.collapsed .vd-sidebar-footer { display: none; }
.vd-burger-btn { display: none; position: fixed; bottom: 1.2rem; left: 1.2rem; z-index: 1001; background: var(--navy, #002858); color: #fff; border: none; border-radius: 50%; width: 3.2rem; height: 3.2rem; box-shadow: 0 8px 20px rgba(0, 40, 88, 0.3); cursor: pointer; align-items: center; justify-content: center; font-size: 1.3rem; transition: transform 0.15s ease; }
.vd-burger-btn svg { width: 1.4rem; height: 1.4rem; }
.vd-burger-btn:active { transform: scale(0.95); }
.vd-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); z-index: 99; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }

/* Surface & Topbar */
.vd-app-surface { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg, #f8f8f0); min-height: 100vh; box-sizing: border-box; }
.vd-app-topbar { position: sticky; top: 0; z-index: 10; background: rgba(248, 248, 240, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line, #e3e0d8); padding: 0.5rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; overflow-x: auto; }
.vd-app-topbar-title { font-size: 0.82rem; font-weight: 700; color: var(--navy, #002858); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.25rem; }
.vd-app-tab { color: var(--muted, #5a6472); text-decoration: none; padding: 0.35rem 0.75rem; border-radius: 8px; font-size: 0.88rem; font-weight: 600; transition: all 0.15s ease; white-space: nowrap; }
.vd-app-tab:hover { background: rgba(0, 40, 88, 0.05); color: var(--navy, #002858); }
.vd-app-tab.active { background: var(--surface, #fff); color: var(--navy, #002858); box-shadow: 0 2px 8px rgba(0, 40, 88, 0.08); border: 1px solid var(--line, #e3e0d8); }

/* Application Containers, Cards & Elements */
.vd-container { max-width: 1100px; width: 100%; margin: 0 auto; padding: 1.25rem; box-sizing: border-box; }
.vd-card { background: var(--surface, #fff); border: 1px solid var(--line, #e3e0d8); border-radius: var(--radius, 16px); padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 10px 30px rgba(0, 40, 88, 0.08); }
.vd-card h1 { font-size: 1.4rem; margin-bottom: 1rem; color: var(--navy, #002858); }
.vd-card h2 { font-size: 1.1rem; margin: 0 0 0.75rem; color: var(--navy, #002858); }
.vd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.vd-stat { background: var(--bg, #f8f8f0); border: 1px solid var(--line, #e3e0d8); border-radius: 8px; padding: 0.75rem; }
.vd-stat b { display: block; font-size: 1.3rem; color: var(--ink, #101820); }
.vd-stat span { color: var(--muted, #5a6472); font-size: 0.8rem; }

/* Form Controls & Tables */
label { display: block; color: var(--muted, #5a6472); font-size: 0.85rem; margin: 0.5rem 0 0.25rem; }
input, select, textarea { width: 100%; box-sizing: border-box; background: var(--surface, #fff); border: 1px solid var(--line, #e3e0d8); border-radius: 6px; padding: 0.6rem; color: var(--ink, #101820); font-size: 0.95rem; margin-bottom: 0.25rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent, #4898d8); }
button { background: var(--navy, #002858); border: none; border-radius: 6px; padding: 0.6rem 1rem; color: #fff; font-size: 0.9rem; font-weight: 600; cursor: pointer; margin: 0.25rem; transition: background 0.15s ease; }
button:hover { background: var(--navy-deep, #002048); }
button.danger { background: #e5534b; }
button.danger:hover { background: #c92a2a; }
button.ghost { background: transparent; border: 1px solid var(--line, #e3e0d8); color: var(--muted, #5a6472); }
button.ghost:hover { background: rgba(0, 40, 88, 0.06); border-color: var(--accent, #4898d8); }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--line, #e3e0d8); vertical-align: top; }
th { color: var(--muted, #5a6472); font-size: 0.8rem; text-transform: uppercase; }
tr:hover { background: rgba(0, 40, 88, 0.03); }

/* Badges & Helpers */
.badge { padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; white-space: nowrap; }
.b-green { background: #e6f7ec; color: #1a7f37; }
.b-yellow { background: #fff6e0; color: #9a6700; }
.b-red { background: #ffe9e9; color: #c62828; }
.b-gray { background: #eef0f3; color: #5a6472; }
.b-blue { background: #e8f2fb; color: #002858; }
.muted { color: var(--muted, #5a6472); font-size: 0.8rem; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
pre { background: var(--bg, #f8f8f0); border: 1px solid var(--line, #e3e0d8); border-radius: 6px; padding: 0.75rem; overflow: auto; font-size: 0.8rem; max-height: 500px; white-space: pre-wrap; word-break: break-word; }
.hint { color: var(--muted, #5a6472); font-size: 0.75rem; margin-top: 0.25rem; }
.error { color: #c62828; font-size: 0.85rem; margin-top: 0.5rem; }
.ok { color: #1a7f37; font-size: 0.85rem; margin-top: 0.5rem; }
.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filters label { min-width: 140px; }
.vd-field { display: block; margin-bottom: 1rem; }
.row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
a.link { color: var(--accent, #4898d8); cursor: pointer; text-decoration: underline; }
.tree { margin: 0; padding: 0; list-style: none; }
.tree li { padding: 0.15rem 0; }
.tree a { color: var(--accent, #4898d8); cursor: pointer; text-decoration: none; }
.tree a:hover { text-decoration: underline; }
.pathcrumb { display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; font-size: 0.85rem; margin-bottom: 0.5rem; }
.pathcrumb a { color: var(--accent, #4898d8); cursor: pointer; text-decoration: none; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line, #e3e0d8); margin-left: 0.5rem; padding-left: 1rem; }
.timeline li { padding: 0.5rem 0; border-bottom: 1px solid var(--bg, #f8f8f0); }
svg text { fill: var(--muted, #5a6472); font-size: 10px; }

/* Timeline & Diffs */
.vd-tm-container { margin-top: 1.5rem; border-top: 1px solid var(--line, #e3e0d8); padding-top: 1.25rem; }
.vd-tm-track-wrap { position: relative; margin: 1rem 0; padding: 0.25rem 0; }
.vd-tm-track { display: flex; align-items: flex-start; gap: 1.25rem; overflow-x: auto; padding: 0.5rem 0.25rem 1rem; scroll-behavior: smooth; position: relative; }
.vd-tm-track::-webkit-scrollbar { height: 6px; }
.vd-tm-track::-webkit-scrollbar-thumb { background: var(--line, #e3e0d8); border-radius: 4px; }
.vd-tm-track::before { content: ""; position: absolute; top: 1.35rem; left: 1.5rem; right: 1.5rem; height: 3px; background: var(--line, #e3e0d8); z-index: 0; }
.vd-tm-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 130px; max-width: 160px; cursor: pointer; text-align: center; transition: transform 0.15s ease; }
.vd-tm-node:hover { transform: translateY(-2px); }
.vd-tm-dot { width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--surface, #fff); border: 3px solid var(--accent, #4898d8); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.78rem; color: var(--navy, #002858); box-shadow: 0 2px 8px rgba(0, 40, 88, 0.12); transition: all 0.2s ease; margin-bottom: 0.4rem; }
.vd-tm-node.active .vd-tm-dot { background: var(--accent, #4898d8); color: #fff; border-color: var(--navy, #002858); box-shadow: 0 0 0 3px rgba(72, 152, 216, 0.35); }
.vd-tm-node.selected .vd-tm-dot { background: var(--navy, #002858); color: #fff; border-color: var(--accent, #4898d8); box-shadow: 0 0 0 4px rgba(0, 40, 88, 0.25); }
.vd-tm-label { font-size: 0.8rem; font-weight: 700; color: var(--navy, #002858); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vd-tm-time { font-size: 0.7rem; color: var(--muted, #5a6472); margin-top: 0.15rem; }
.vd-tm-badge { font-size: 0.65rem; padding: 0.1rem 0.45rem; border-radius: 999px; margin-top: 0.2rem; font-weight: 600; }
.vd-tm-detail { background: var(--bg, #f8f8f0); border: 1px solid var(--line, #e3e0d8); border-radius: 12px; padding: 1.15rem; margin-top: 1rem; }
.vd-tm-detail-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.85rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--line, #e3e0d8); }
.vd-tm-detail-title { font-size: 1.05rem; font-weight: 800; color: var(--navy, #002858); display: flex; align-items: center; gap: 0.5rem; }
.vd-tm-file-tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.4rem; margin-bottom: 0.65rem; }
.vd-tm-file-tab { padding: 0.3rem 0.65rem; border-radius: 8px; font-size: 0.8rem; font-weight: 600; background: var(--surface, #fff); border: 1px solid var(--line, #e3e0d8); color: var(--navy, #002858); cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; transition: all 0.15s; }
.vd-tm-file-tab.active { background: var(--navy, #002858); color: #fff; border-color: var(--navy, #002858); }
.vd-diff-view { background: #fff; border: 1px solid var(--line, #e3e0d8); border-radius: 8px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.82rem; max-height: 420px; overflow-y: auto; }
.vd-diff-table { width: 100%; border-collapse: collapse; }
.vd-diff-table td { padding: 0.15rem 0.45rem; vertical-align: top; white-space: pre-wrap; word-break: break-all; font-size: 0.8rem; }
.vd-diff-num { width: 2.8rem; min-width: 2.8rem; text-align: right; color: #999; user-select: none; font-size: 0.72rem; padding-right: 0.6rem !important; border-right: 1px solid #eee; }
.vd-diff-add { background: rgba(46, 160, 67, 0.15); color: #1a7f37; }
.vd-diff-del { background: rgba(209, 36, 47, 0.12); color: #cf222e; }
.vd-diff-eq { color: #333; }
.vd-diff-meta { font-size: 0.75rem; padding: 0.3rem 0.6rem; background: #f6f8fa; color: #666; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }

@media (max-width: 768px) {
  .vd-burger-btn { display: flex; }
  .vd-sidebar { position: fixed; top: 0; bottom: 0; left: 0; height: 100vh; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25); }
  .vd-sidebar.open { transform: translateX(0); }
  .vd-sidebar-backdrop.open { display: block; opacity: 1; pointer-events: auto; }
  .vd-grid { grid-template-columns: 1fr; }
  th, td { padding: 0.35rem; }
}