:root {
    --vp-c-brand: #10b981;
    --vp-c-brand-light: #34d399;
    --vp-c-brand-dark: #059669;
    --vp-c-bg: #ffffff;
    --vp-c-bg-soft: #f6f6f7;
    --vp-c-bg-mute: #ebebec;
    --vp-c-text-1: #213547;
    --vp-c-text-2: #476582;
    --vp-c-text-3: #90a4ae;
    --vp-c-divider: #e2e2e3;
    --vp-c-green-soft: rgba(16,185,129,.14);
    --vp-c-red-soft: rgba(239,68,68,.14);
    --vp-c-yellow-soft: rgba(245,158,11,.14);
    --vp-c-blue-soft: rgba(59,130,246,.14);
    --vp-nav-height: 64px;
    --vp-sidebar-width: 256px;
    --vp-content-width: 752px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--vp-nav-height) + 20px); }
body {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    color:var(--vp-c-text-1); background:var(--vp-c-bg);
    line-height:1.7; -webkit-font-smoothing:antialiased;
}
a { color:var(--vp-c-brand); text-decoration:none; transition:color .2s; }
a:hover { text-decoration:underline; }

/* NAV */
.vp-nav {
    position:fixed; top:0; left:0; right:0; height:var(--vp-nav-height);
    background:rgba(255,255,255,.85); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--vp-c-divider); z-index:100;
}
.vp-nav-inner {
    max-width:1440px; margin:0 auto; padding:0 32px; height:100%;
    display:flex; align-items:center; gap:32px;
}
.vp-logo {
    display:flex; align-items:center; gap:10px;
    font-size:16px; font-weight:700; color:var(--vp-c-text-1);
    text-decoration:none;
}
.vp-logo svg { color:var(--vp-c-brand); }
.vp-nav-links { display:flex; gap:4px; }
.vp-nav-links a {
    padding:0 12px; height:var(--vp-nav-height); line-height:var(--vp-nav-height);
    font-size:14px; font-weight:500; color:var(--vp-c-text-2);
    transition:color .25s; border-bottom:2px solid transparent;
}
.vp-nav-links a:hover { color:var(--vp-c-text-1); text-decoration:none; }
.vp-nav-links a.active { color:var(--vp-c-brand); border-bottom-color:var(--vp-c-brand); }
.vp-nav-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.vp-icon-link {
    display:flex; align-items:center; color:var(--vp-c-text-2);
    transition:color .25s;
}
.vp-icon-link:hover { color:var(--vp-c-text-1); text-decoration:none; }
.vp-btn-small {
    padding:6px 16px; border-radius:8px; font-size:13px; font-weight:600;
    background:var(--vp-c-brand); color:#fff; transition:background .25s;
}
.vp-btn-small:hover { background:var(--vp-c-brand-dark); text-decoration:none; }
.vp-mobile-menu {
    display:none; background:none; border:none; cursor:pointer;
    color:var(--vp-c-text-1); padding:8px; border-radius:8px; transition:background .2s;
}
.vp-mobile-menu:hover { background:var(--vp-c-bg-soft); }

/* LAYOUT */
.vp-layout { display:flex; padding-top:var(--vp-nav-height); min-height:100vh; }

/* SIDEBAR */
.vp-sidebar {
    position:fixed; top:var(--vp-nav-height); left:0; bottom:0;
    width:var(--vp-sidebar-width); overflow-y:auto;
    border-right:1px solid var(--vp-c-divider); background:var(--vp-c-bg);
    padding:24px 0;
}
.vp-sidebar-inner { }
.vp-sidebar-group { margin-bottom:20px; }
.vp-sidebar-heading {
    padding:0 24px; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em; color:var(--vp-c-text-3);
    margin-bottom:8px;
}
.vp-sidebar-link {
    display:block; padding:6px 24px; font-size:14px;
    color:var(--vp-c-text-2); border-left:2px solid transparent;
    transition:all .25s; text-decoration:none;
}
.vp-sidebar-link:hover { color:var(--vp-c-text-1); background:var(--vp-c-bg-soft); text-decoration:none; }
.vp-sidebar-link.active {
    color:var(--vp-c-brand); border-left-color:var(--vp-c-brand);
    background:var(--vp-c-green-soft); font-weight:600;
}

/* CONTENT */
.vp-content { margin-left:var(--vp-sidebar-width); flex:1; min-width:0; }
.vp-doc { max-width:var(--vp-content-width); margin:0 auto; padding:32px 48px 96px; }

/* TYPOGRAPHY */
h1 { font-size:32px; font-weight:700; letter-spacing:-.02em; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--vp-c-divider); }
h2 { font-size:24px; font-weight:600; margin:40px 0 16px; letter-spacing:-.01em; }
h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
p { margin-bottom:16px; color:var(--vp-c-text-2); }
.vp-lead { font-size:18px; color:var(--vp-c-text-1); line-height:1.8; }
strong { color:var(--vp-c-text-1); }
code {
    font-family:'JetBrains Mono',Menlo,Monaco,monospace;
    background:var(--vp-c-bg-soft); padding:2px 6px; border-radius:4px;
    font-size:13px; color:var(--vp-c-brand-dark);
}
ul,ol { padding-left:24px; margin-bottom:16px; color:var(--vp-c-text-2); }
li { margin-bottom:6px; }

/* CODE BLOCK */
.vp-code-block {
    background:#1e293b; border-radius:12px; overflow:hidden; margin-bottom:16px;
}
.vp-code-label {
    padding:8px 16px; font-size:12px; font-weight:600; color:#94a3b8;
    border-bottom:1px solid #334155;
}
.vp-code-block pre { padding:16px; margin:0; overflow-x:auto; }
.vp-code-block code { background:none; color:#e2e8f0; padding:0; font-size:13px; line-height:1.6; }

/* TABLE */
.vp-table {
    width:100%; border-collapse:collapse; margin-bottom:16px; font-size:14px;
}
.vp-table th,.vp-table td {
    padding:12px 16px; text-align:left; border:1px solid var(--vp-c-divider);
}
.vp-table th { background:var(--vp-c-bg-soft); font-weight:600; }
.vp-table td { color:var(--vp-c-text-2); }

/* TIP / DANGER / WARNING */
.vp-tip {
    padding:12px 16px; border-radius:8px; margin-bottom:16px;
    border-left:4px solid var(--vp-c-brand); background:var(--vp-c-green-soft);
}
.vp-tip p { margin:0; color:var(--vp-c-text-1); font-size:14px; }
.vp-tip-title { font-weight:700; font-size:13px; text-transform:uppercase; color:var(--vp-c-brand-dark); margin-bottom:4px; }
.vp-danger {
    padding:16px; border-radius:8px; margin-bottom:12px;
    border:1px solid #fecaca; background:var(--vp-c-red-soft);
}
.vp-danger h3 { color:#dc2626; margin-bottom:4px; }
.vp-danger p { margin-bottom:6px; font-size:14px; color:var(--vp-c-text-1); }
.vp-solution {
    padding:8px 12px; border-radius:6px; background:var(--vp-c-green-soft);
    color:var(--vp-c-brand-dark); font-size:13px; font-weight:500; margin:0;
}
.vp-warning {
    padding:12px 16px; border-radius:8px; margin-bottom:16px;
    border-left:4px solid #f59e0b; background:var(--vp-c-yellow-soft);
}
.vp-warning p { margin:0; color:var(--vp-c-text-1); font-size:14px; }

/* FEATURES */
.vp-features { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:16px; }
.vp-feature {
    padding:20px; border:1px solid var(--vp-c-divider); border-radius:12px;
    transition:border-color .25s,box-shadow .25s,transform .25s;
}
.vp-feature:hover { border-color:var(--vp-c-brand); box-shadow:0 4px 16px rgba(16,185,129,.1); transform:translateY(-2px); }
.vp-feature-icon { font-size:28px; margin-bottom:8px; }
.vp-feature h3 { margin-bottom:6px; }
.vp-feature p { margin:0; font-size:14px; }

/* VERSION CARDS */
.vp-version-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:16px; }
.vp-version-card {
    padding:24px; border:1px solid var(--vp-c-divider); border-radius:12px;
    position:relative; transition:transform .3s,box-shadow .3s,border-color .3s;
}
.vp-version-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.08); }
.vp-version-card h3 { margin-bottom:4px; }
.vp-price { font-size:32px; font-weight:700; margin:8px 0 4px; }
.vp-version-desc { font-size:14px; color:var(--vp-c-text-3); margin-bottom:12px; }
.vp-version-card hr { border:none; border-top:1px solid var(--vp-c-divider); margin:12px 0; }
.vp-version-card ul { list-style:none; padding:0; margin-bottom:16px; }
.vp-version-card li { padding:4px 0; font-size:14px; color:var(--vp-c-text-2); }
.vp-featured { border-color:var(--vp-c-brand); background:var(--vp-c-green-soft); }
.vp-badge {
    position:absolute; top:-10px; right:16px;
    background:var(--vp-c-brand); color:#fff; padding:2px 12px;
    border-radius:12px; font-size:12px; font-weight:700;
}
.vp-btn {
    display:block; text-align:center; padding:10px; border-radius:8px;
    font-size:14px; font-weight:600; border:1px solid var(--vp-c-divider);
    color:var(--vp-c-text-1); transition:all .25s ease;
}
.vp-btn:hover { background:var(--vp-c-bg-soft); text-decoration:none; transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.vp-btn-brand { background:var(--vp-c-brand); color:#fff!important; border-color:var(--vp-c-brand)!important; }
.vp-btn-brand:hover { background:var(--vp-c-brand-dark); transform:translateY(-1px); box-shadow:0 4px 16px rgba(16,185,129,.3); }
.vp-btn-block { width:100%; }

/* FAQ */
details {
    border:1px solid var(--vp-c-divider); border-radius:8px; margin-bottom:8px;
    transition:border-color .25s;
}
details summary {
    padding:14px 16px; font-weight:500; cursor:pointer;
    background:var(--vp-c-bg-soft); font-size:15px; list-style:none;
    transition:background .25s;
}
details summary:hover { background:var(--vp-c-bg-mute); }
details summary::-webkit-details-marker { display:none; }
details summary::before { content:'›'; display:inline-block; margin-right:8px; transition:transform .2s; color:var(--vp-c-text-3); }
details[open] summary::before { transform:rotate(90deg); }
details[open] { border-color:var(--vp-c-brand); }
details p { padding:0 16px 16px; font-size:14px; }

/* MODAL OVERLAY */
.modal-overlay {
    position:fixed; inset:0; z-index:1000;
    background:rgba(0,0,0,.5); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
}
.modal-overlay.active { display:flex; }

/* MOBILE SIDEBAR OVERLAY */
.vp-sidebar-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.4);
    backdrop-filter:blur(4px); z-index:98;
}
.vp-sidebar-overlay.open { display:block; }

/* LOADING ANIMATION */
@keyframes fadeSlideUp {
    from { opacity:0; transform:translateY(30px); }
    to { opacity:1; transform:translateY(0); }
}

/* RESPONSIVE */
@media (max-width:768px) {
    .vp-nav-links,.vp-nav-actions { display:none; }
    .vp-mobile-menu { display:block; margin-left:auto; }
    .vp-sidebar {
        position:fixed; top:var(--vp-nav-height); left:0; bottom:0;
        display:none; z-index:99; width:280px;
        background:#fff; box-shadow:4px 0 24px rgba(0,0,0,.1);
    }
    .vp-sidebar.open { display:block; }
    .vp-content { margin-left:0; }
    .vp-doc { padding:24px 20px 60px; }
    .vp-features { grid-template-columns:1fr; }
    .vp-version-grid { grid-template-columns:1fr; }
    .vp-version-card { padding:20px; }
    h1 { font-size:26px; }
    h2 { font-size:20px; margin:32px 0 12px; }
    .vp-table { font-size:13px; }
    .vp-table th,.vp-table td { padding:10px 12px; }
}