/* ═══════════════════════════════════════════════════
   VIDASA PLATFORM — Frontend CSS v1.0
   Dark cosmic theme · Full-screen app experience
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --bg:      #060e1c;
    --bg2:     #0a1628;
    --bg3:     #0d1e3a;
    --bg4:     #0f2448;
    --card:    #0f2040;
    --border:  #1e3a6e;
    --border2: #2a4a7f;
    --orange:  #f97316;
    --orange2: #fb923c;
    --gold:    #fbbf24;
    --white:   #e8edf5;
    --muted:   #6b7fa0;
    --muted2:  #94a3b8;
    --green:   #22c55e;
    --red:     #ef4444;
    --radius:  14px;
    --topbar-h:60px;
    --sidebar-w:240px;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-display: 'Cinzel', serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* ── AUTH PAGES ─────────────────────────────────────────────────── */
.vp-auth-body {
    background:var(--bg);
    font-family:var(--font-body);
    color:var(--white);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.vp-auth-bg {
    position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}

.vp-zodiac-ring {
    position:absolute;
    width:700px;height:700px;
    border:1px solid rgba(249,115,22,.08);
    border-radius:50%;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    animation:vp-spin 60s linear infinite;
}
.vp-zodiac-ring::before {
    content:'';position:absolute;inset:40px;
    border:1px solid rgba(249,115,22,.05);
    border-radius:50%;
}
.vp-zodiac-ring::after {
    content:'♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓';
    position:absolute;top:-12px;left:50%;
    transform:translateX(-50%);
    font-size:.75rem;letter-spacing:18px;
    color:rgba(249,115,22,.2);white-space:nowrap;
}

.vp-stars {
    position:absolute;inset:0;
    background:
        radial-gradient(1px 1px at 10% 20%, rgba(249,115,22,.4), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(251,191,36,.3), transparent),
        radial-gradient(1px 1px at 70% 10%, rgba(249,115,22,.3), transparent),
        radial-gradient(1px 1px at 80% 80%, rgba(251,191,36,.2), transparent),
        radial-gradient(1px 1px at 50% 40%, rgba(249,115,22,.4), transparent),
        radial-gradient(2px 2px at 20% 80%, rgba(251,191,36,.2), transparent),
        radial-gradient(1px 1px at 90% 50%, rgba(249,115,22,.3), transparent);
}

@keyframes vp-spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}

.vp-auth-wrap {
    position:relative;z-index:1;
    width:100%;max-width:440px;
    padding:20px;
}

.vp-auth-card {
    background:rgba(13,30,58,.85);
    border:1px solid var(--border2);
    border-radius:24px;
    padding:24px;
    backdrop-filter:blur(20px);
    box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(249,115,22,.05);
    animation:vp-card-in .4s ease;
}

@keyframes vp-card-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.vp-auth-logo {
    text-align:center;
    margin-bottom:16px;
}
.vp-auth-logo-icon {
    font-size:3rem;
    display:block;
    margin-bottom:10px;
    filter:drop-shadow(0 0 20px rgba(249,115,22,.5));
    animation:vp-pulse 3s ease-in-out infinite;
}
@keyframes vp-pulse{0%,100%{filter:drop-shadow(0 0 20px rgba(249,115,22,.5))}50%{filter:drop-shadow(0 0 35px rgba(249,115,22,.8))}}

.vp-auth-logo h1 {
    font-family:var(--font-display);
    font-size:1.4rem;
    color:var(--white);
    margin-bottom:6px;
    letter-spacing:.03em;
}
.vp-auth-logo p {
    color:var(--muted2);
    font-size:.85rem;
}

/* ── FORM ELEMENTS ─────────────────────────────────────────────── */
.vp-form-group { margin-bottom:12px; }
.vp-form-group label {
    display:block;
    color:var(--muted2);
    font-size:.8rem;
    font-weight:500;
    margin-bottom:6px;
    letter-spacing:.02em;
}
.vp-input {
    width:100%;
    background:rgba(10,22,40,.8);
    border:1px solid var(--border2);
    border-radius:10px;
    padding:11px 14px;
    color:var(--white);
    font-family:var(--font-body);
    font-size:.93rem;
    transition:border-color .15s,box-shadow .15s;
}
.vp-input:focus {
    outline:none;
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(249,115,22,.12);
}
.vp-input:disabled { opacity:.5;cursor:not-allowed; }
.vp-input-wrap { position:relative; }
.vp-input-wrap .vp-input { padding-right:44px; }
.vp-eye-btn {
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    background:transparent;border:none;cursor:pointer;font-size:1rem;color:var(--muted);
}

.vp-btn-full {
    width:100%;
    background:linear-gradient(135deg,var(--orange),var(--orange2));
    color:#0a1628;
    border:none;
    border-radius:10px;
    padding:13px;
    font-family:var(--font-body);
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    transition:.15s;
    letter-spacing:.02em;
}
.vp-btn-full:hover { filter:brightness(1.1);transform:translateY(-1px); }
.vp-btn-full:active { transform:translateY(0); }
.vp-btn-full:disabled { opacity:.6;cursor:not-allowed;transform:none; }

.vp-btn-full-sm {
    display:block;width:100%;
    background:var(--orange);color:#0a1628;
    border:none;border-radius:8px;padding:9px;
    font-weight:700;font-size:.85rem;cursor:pointer;
    text-align:center;text-decoration:none;transition:.15s;
}
.vp-btn-full-sm:hover { background:var(--orange2);color:#0a1628; }

.vp-divider {
    text-align:center;margin:18px 0;position:relative;
}
.vp-divider::before {
    content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border);
}
.vp-divider span {
    background:rgba(13,30,58,.85);position:relative;padding:0 12px;color:var(--muted);font-size:.82rem;
}

.vp-btn-whatsapp {
    display:block;
    background:#25D366;color:#fff;
    border:none;border-radius:10px;padding:12px;
    text-align:center;text-decoration:none;
    font-weight:600;font-size:.93rem;transition:.15s;
}
.vp-btn-whatsapp:hover { background:#20bd5a; }

.vp-auth-switch {
    text-align:center;margin-top:22px;color:var(--muted);font-size:.85rem;
}
.vp-auth-switch a { color:var(--orange);text-decoration:none;font-weight:600; }
.vp-auth-switch a:hover { color:var(--orange2); }

.vp-link-sm { color:var(--muted2);font-size:.82rem;text-decoration:none; }
.vp-link-sm:hover { color:var(--orange); }
.vp-link { color:var(--orange);text-decoration:none; }

.vp-checkbox-row {
    display:flex;align-items:flex-start;gap:10px;cursor:pointer;
    color:var(--muted2);font-size:.85rem;
}
.vp-checkbox-row input { margin-top:2px; }

.vp-alert {
    padding:12px 15px;border-radius:10px;
    font-size:.85rem;margin-bottom:16px;
}
.vp-alert-error { background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#fca5a5; }
.vp-alert-success { background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#86efac; }

/* ── APP LAYOUT (Dashboard) ─────────────────────────────────────── */
.vp-app-body {
    background:var(--bg);
    font-family:var(--font-body);
    color:var(--white);
    height:100vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

/* TOP BAR */
.vp-topbar {
    min-height:var(--topbar-h);
    height:auto;
    background:var(--bg3);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    padding:0;
    flex-shrink:0;
    z-index:100;
    position:relative;
}
.vp-topbar::after {
    content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--orange),transparent);
    opacity:.3;
}
.vp-topbar-left {
    display:flex;align-items:center;
    justify-content:space-between;
    height:var(--topbar-h);flex-shrink:0;
    width:var(--sidebar-w);
    padding:0 12px 0 16px;
    box-sizing:border-box;
}
.vp-topbar-right { display:flex;align-items:center;gap:10px;height:var(--topbar-h);flex-shrink:0;padding:0 16px;margin-left:auto; }
.vp-topbar-center { flex:1;min-width:80px;margin:0 4px;height:var(--topbar-h);display:flex;align-items:center; }

.vp-topbar-brand {
    display:flex;align-items:center;gap:10px;
    text-decoration:none;color:var(--white);
}
.vp-brand-icon { font-size:1.5rem;filter:drop-shadow(0 0 10px rgba(249,115,22,.4)); }
.vp-brand-name {
    font-family:var(--font-display);
    font-size:.95rem;letter-spacing:.05em;
    background:linear-gradient(135deg,var(--gold),var(--orange));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

.vp-sidebar-toggle {
    background:transparent;border:none;color:var(--muted2);
    font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:6px;
}
.vp-sidebar-toggle:hover { color:var(--orange); }

.vp-search-bar {
    display:flex;align-items:center;gap:8px;
    background:var(--bg2);border:1px solid var(--border);
    border-radius:30px;padding:9px 18px;width:100%;
    box-sizing:border-box;
}
.vp-search-bar input {
    background:transparent;border:none;color:var(--white);
    font-family:var(--font-body);font-size:.87rem;width:100%;outline:none;
}
.vp-search-bar input::placeholder { color:var(--muted); }

.vp-upgrade-pill {
    background:linear-gradient(135deg,var(--orange),#e05a00);
    color:#fff;padding:6px 16px;border-radius:20px;
    font-size:.8rem;font-weight:700;text-decoration:none;
    animation:vp-glow-pill 2s ease-in-out infinite;
}
@keyframes vp-glow-pill{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.4)}50%{box-shadow:0 0 12px 3px rgba(249,115,22,.2)}}

/* Avatar & dropdown */
.vp-user-menu { position:relative; }
.vp-avatar {
    width:38px;height:38px;background:var(--bg4);
    border:2px solid var(--orange);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:.85rem;cursor:pointer;
    color:var(--orange);transition:.15s;
}
.vp-avatar:hover { background:rgba(249,115,22,.1); }

.vp-dropdown {
    position:absolute;right:0;top:calc(100% + 10px);
    background:var(--bg3);border:1px solid var(--border2);
    border-radius:14px;min-width:200px;
    box-shadow:0 20px 50px rgba(0,0,0,.5);
    display:none;z-index:500;overflow:hidden;
}
.vp-dropdown.open { display:block;animation:vp-card-in .15s ease; }
.vp-dropdown-header {
    padding:14px 16px;border-bottom:1px solid var(--border);
    display:flex;flex-direction:column;gap:4px;
}
.vp-dropdown-header strong { font-size:.9rem;color:var(--white); }
.vp-dropdown-item {
    display:flex;align-items:center;gap:8px;
    padding:11px 16px;color:var(--muted2);font-size:.87rem;
    text-decoration:none;transition:.1s;cursor:pointer;
    background:transparent;border:none;width:100%;text-align:left;
    font-family:var(--font-body);
}
.vp-dropdown-item:hover { background:rgba(249,115,22,.08);color:var(--white); }
.vp-dropdown-divider { height:1px;background:var(--border);margin:4px 0; }

.vp-plan-chip {
    font-size:.72rem;padding:2px 8px;border-radius:10px;font-weight:600;
}
.vp-plan-free { background:rgba(34,197,94,.15);color:#22c55e; }
.vp-plan-pro  { background:rgba(249,115,22,.15);color:#f97316; }
.vp-plan-lifetime { background:rgba(251,191,36,.15);color:#fbbf24; }

/* APP SHELL */
.vp-app-shell {
    display:flex;flex:1;overflow:hidden;
}

/* SIDEBAR */
.vp-sidebar {
    width:var(--sidebar-w);
    background:var(--bg3);
    border-right:1px solid var(--border);
    display:flex;flex-direction:column;
    flex-shrink:0;
    overflow-y:auto;
    transition:width .2s ease;
}
.vp-sidebar.collapsed { width:60px; }
.vp-sidebar.collapsed .vp-nav-label,
.vp-sidebar.collapsed .vp-sidebar-section-label,
.vp-sidebar.collapsed .vp-sidebar-upgrade,
.vp-sidebar.collapsed .vp-sidebar-plan-badge { display:none; }
.vp-sidebar-inner { flex:1;padding:32px 0; }

.vp-sidebar-section-label {
    padding:6px 16px;
    font-size:.68rem;font-weight:700;letter-spacing:.1em;
    color:var(--muted);text-transform:uppercase;
    margin-top:8px;
}
.vp-nav-item {
    display:flex;align-items:center;gap:12px;
    padding:11px 16px;color:var(--muted2);
    border-left:3px solid transparent;
    text-decoration:none;font-size:.88rem;font-weight:500;
    cursor:pointer;background:transparent;border-right:none;border-top:none;border-bottom:none;
    width:100%;text-align:left;font-family:var(--font-body);
    transition:.1s;
}
.vp-nav-item:hover { background:rgba(249,115,22,.06);color:var(--white); }
.vp-nav-item.active {
    background:rgba(249,115,22,.1);
    border-left-color:var(--orange);
    color:var(--orange);
}
.vp-nav-icon { font-size:1.1rem;width:22px;text-align:center;flex-shrink:0; }
.vp-nav-logout { color:var(--muted); }
.vp-nav-logout:hover { color:var(--red);background:rgba(239,68,68,.06); }
.vp-sidebar-divider { height:1px;background:var(--border);margin:10px 12px; }

.vp-sidebar-upgrade {
    margin:12px;padding:14px;background:linear-gradient(145deg,rgba(249,115,22,.1),rgba(249,115,22,.05));
    border:1px solid rgba(249,115,22,.2);border-radius:12px;text-align:center;
}
.vp-sidebar-upgrade p { color:var(--muted2);font-size:.78rem;margin-bottom:8px; }
.vp-sidebar-plan-badge {
    margin:12px;padding:10px;background:rgba(249,115,22,.1);
    border-radius:10px;text-align:center;color:var(--orange);font-size:.8rem;font-weight:600;
}

/* MAIN CONTENT */
.vp-main {
    flex:1;overflow-y:auto;
    padding:24px;
    background:var(--bg);
}

/* PLUGIN VIEW (when launched) */
.vp-plugin-view {
    position:absolute;inset:0;background:var(--bg);z-index:50;
    display:flex;flex-direction:column;
}
.vp-plugin-view-bar {
    background:var(--bg3);border-bottom:1px solid var(--border);
    padding:12px 20px;display:flex;align-items:center;gap:16px;flex-shrink:0;
}
.vp-back-btn {
    background:transparent;border:1px solid var(--border2);color:var(--muted2);
    padding:6px 14px;border-radius:20px;cursor:pointer;font-size:.85rem;transition:.15s;
}
.vp-back-btn:hover { border-color:var(--orange);color:var(--orange); }
#vp-plugin-view-title { font-weight:600;color:var(--white); }
.vp-plugin-view-content {
    flex:1;overflow:auto;
    display:flex;align-items:flex-start;justify-content:center;
    padding:24px;
}
.vp-plugin-view-content.mode-left { justify-content:flex-start; }
.vp-plugin-view-content.mode-full { padding:0;align-items:stretch; }

/* TRUE FULLSCREEN — mode-full makes plugin view cover entire viewport */
.vp-plugin-view.is-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    width: 100vw !important;
    height: 100vh !important;
}
.vp-plugin-view.is-fullscreen .vp-plugin-view-content {
    padding: 0 !important;
    height: calc(100vh - 52px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
}
.vp-plugin-view.is-fullscreen iframe {
    width: 100% !important;
    height: calc(100vh - 52px) !important;
    min-height: unset !important;
    border: none !important;
    display: block !important;
}
/* Scrollbar inside fullscreen — matches dashboard style */
.vp-plugin-view.is-fullscreen .vp-plugin-view-content::-webkit-scrollbar {
    width: 6px;
}
.vp-plugin-view.is-fullscreen .vp-plugin-view-content::-webkit-scrollbar-track {
    background: var(--bg2);
}
.vp-plugin-view.is-fullscreen .vp-plugin-view-content::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 3px;
}
.vp-plugin-view.is-fullscreen .vp-plugin-view-content::-webkit-scrollbar-thumb:hover {
    background: var(--orange);
}
.vp-plugin-view-content iframe { width:100%;height:100%;border:none; }

/* WELCOME BANNER */
.vp-welcome-banner {
    background:linear-gradient(145deg,var(--bg3),var(--bg4));
    border:1px solid var(--border2);border-radius:20px;
    padding:24px 28px;margin-bottom:24px;
    display:flex;justify-content:space-between;align-items:center;
    position:relative;overflow:hidden;
}
.vp-welcome-banner::before {
    content:'🪐';position:absolute;right:80px;top:50%;
    transform:translateY(-50%);font-size:5rem;opacity:.05;
    filter:blur(2px);
}
.vp-welcome-left h1 { font-size:1.5rem;font-weight:700;margin-bottom:6px; }
.vp-welcome-left h1 span { color:var(--orange); }
.vp-welcome-left p { color:var(--muted2);font-size:.88rem; }
.vp-welcome-right { display:flex;gap:20px; }
.vp-welcome-stat { text-align:center; }
.vp-welcome-stat-num {
    display:block;font-size:1.8rem;font-weight:700;
    color:var(--orange);line-height:1;margin-bottom:4px;
}
.vp-welcome-stat span:last-child { color:var(--muted);font-size:.75rem; }

/* CATEGORY TABS */
.vp-cat-tabs {
    display:flex;gap:8px;margin-bottom:20px;
    flex-wrap:wrap;
}
.vp-cat-tab {
    background:var(--bg3);border:1px solid var(--border);color:var(--muted2);
    padding:7px 16px;border-radius:20px;cursor:pointer;
    font-size:.83rem;font-weight:500;transition:.15s;
    font-family:var(--font-body);
}
.vp-cat-tab:hover { border-color:var(--orange);color:var(--white); }
.vp-cat-tab.active { background:rgba(249,115,22,.12);border-color:var(--orange);color:var(--orange); }

/* PLUGIN GRID */
.vp-plugin-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:28px;
}

.vp-plugin-card {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;padding:22px;
    cursor:default;transition:border-color .2s,box-shadow .2s;
    position:relative;overflow:hidden;
    display:flex;flex-direction:column;
}
.vp-plugin-card::before {
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(249,115,22,.04),transparent);
    opacity:0;transition:.2s;
}
.vp-plugin-card:hover {
    border-color:var(--border);
    box-shadow:none;
}
.vp-plugin-card:hover::before { opacity:0; }

.vp-plugin-badge {
    position:absolute;top:14px;right:14px;
    background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.3);
    color:var(--gold);padding:3px 9px;border-radius:10px;font-size:.68rem;font-weight:700;
}
.vp-pro-chip {
    display:inline-block;
    background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.2);
    color:var(--orange);padding:2px 8px;border-radius:8px;
    font-size:.68rem;font-weight:600;margin-bottom:8px;
}
.vp-plugin-icon {
    width:54px;height:54px;background:rgba(249,115,22,.1);
    border:1px solid rgba(249,115,22,.2);border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.7rem;margin:0 auto 14px auto;transition:.2s;
}
.vp-plugin-card:hover .vp-plugin-icon {
    background:rgba(249,115,22,.1);
    box-shadow:none;
}
.vp-plugin-card h3 { font-size:1rem;font-weight:600;margin-bottom:7px;color:var(--white);text-align:center; }
.vp-plugin-card p { color:var(--muted2);font-size:.82rem;line-height:1.5;min-height:38px; }
.vp-plugin-footer {
    display:flex;justify-content:space-between;align-items:center;
    margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
}
.vp-plugin-cat {
    font-size:.72rem;color:var(--muted);background:var(--bg3);
    padding:3px 9px;border-radius:8px;
}
.vp-launch-btn {
    background:transparent;
    color:#f97316;
    border:2px solid #f97316;
    border-radius:20px;padding:7px 16px;
    font-weight:700;font-size:.82rem;cursor:pointer;
    font-family:var(--font-body);transition:.15s;
    letter-spacing:.03em;
}
.vp-launch-btn:hover {
    background:#f97316;
    color:#0a1628;
    transform:scale(1.04);
    box-shadow:0 0 14px rgba(249,115,22,.4);
    cursor:pointer;
}

.vp-empty-state {
    grid-column:1/-1;text-align:center;
    padding:60px 20px;color:var(--muted);
}
.vp-empty-state h3 { color:var(--white);margin-bottom:8px; }

/* ACTIVITY FEED */
.vp-section { margin-top:28px; }
.vp-section-title { font-size:1rem;font-weight:600;color:var(--gold);margin-bottom:14px; }
.vp-activity-feed {
    background:var(--bg3);border:1px solid var(--border);
    border-radius:16px;overflow:hidden;
}
.vp-activity-item {
    display:flex;align-items:center;gap:14px;
    padding:13px 18px;border-bottom:1px solid var(--border);
    transition:.1s;
}
.vp-activity-item:last-child { border-bottom:none; }
.vp-activity-item:hover { background:rgba(249,115,22,.04); }
.vp-activity-icon {
    width:34px;height:34px;background:var(--bg4);border-radius:10px;
    display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;
}
.vp-activity-body { flex:1;font-size:.85rem;color:var(--muted2); }
.vp-activity-body strong { color:var(--white); }
.vp-activity-time { color:var(--muted);font-size:.75rem;white-space:nowrap; }

/* GATE (pro feature block) */
.vp-gate {
    display:flex;align-items:center;justify-content:center;
    padding:40px 20px;
}
.vp-gate-inner {
    text-align:center;max-width:380px;
    background:var(--bg3);border:1px solid rgba(249,115,22,.2);
    border-radius:20px;padding:36px 28px;
}
.vp-gate-icon { font-size:2.5rem;margin-bottom:14px; }
.vp-gate-title { font-size:1.2rem;font-weight:700;color:var(--white);margin-bottom:10px; }
.vp-gate-desc { color:var(--muted2);font-size:.9rem;margin-bottom:6px; }
.vp-gate-price { color:var(--orange);font-weight:700;font-size:1rem;margin-bottom:20px; }
.vp-gate-btn {
    display:inline-block;background:var(--orange);color:#0a1628;
    padding:11px 28px;border-radius:30px;text-decoration:none;
    font-weight:700;font-size:.92rem;transition:.15s;
}
.vp-gate-btn:hover { background:var(--orange2);color:#0a1628; }
.vp-gate-free { color:var(--muted);font-size:.75rem;margin-top:14px; }

/* SUBSCRIPTION PAGE */
.vp-sub-body { height:auto;overflow:auto; }
.vp-sub-wrap { max-width:1100px;margin:0 auto;padding:40px 20px; }
.vp-sub-header { text-align:center;margin-bottom:40px; }
.vp-sub-header h1 {
    font-family:var(--font-display);font-size:2.2rem;
    background:linear-gradient(135deg,var(--gold),var(--orange));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    margin-bottom:10px;
}
.vp-sub-header p { color:var(--muted2); }

.vp-plans-grid {
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:20px;margin-bottom:50px;
}
.vp-plans-grid-free {
    margin-bottom:24px;
}
.vp-plans-grid-paid {
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:20px;margin-bottom:50px;
}
.vp-plan-box {
    background:var(--bg3);border:1px solid var(--border);
    border-radius:20px;padding:28px;position:relative;transition:.2s;
}
.vp-plan-box:hover { transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.3); }
.vp-plan-popular {
    border-color:var(--orange);
    box-shadow:0 0 0 1px rgba(249,115,22,.2);
}
.vp-plan-current { border-color:var(--green); }
.vp-popular-tag,.vp-current-tag {
    position:absolute;top:-12px;left:50%;transform:translateX(-50%);
    background:var(--orange);color:#0a1628;
    padding:4px 14px;border-radius:10px;font-size:.72rem;font-weight:700;white-space:nowrap;
}
.vp-current-tag { background:var(--green); }
.vp-plan-box-icon { font-size:2.2rem;margin-bottom:12px;text-align:center;display:block;width:100%; }
.vp-plan-box-name { font-size:1.3rem;font-weight:700;margin-bottom:12px;color:var(--white);text-align:center; }
.vp-plan-box-price { display:flex;align-items:baseline;gap:4px;margin-bottom:14px;justify-content:center; }
.vp-price-amount { font-size:2rem;font-weight:700;color:var(--orange); }
.vp-price-period { color:var(--muted);font-size:.85rem; }
.vp-plan-box-desc { color:var(--muted2);font-size:.85rem;line-height:1.5;margin-bottom:14px;text-align:center; }
.vp-plan-trial { color:var(--green);font-size:.82rem;margin-bottom:16px;text-align:center; }
.vp-plan-btn {
    width:100%;padding:12px;border-radius:10px;font-weight:700;
    font-size:.92rem;cursor:pointer;transition:.15s;font-family:var(--font-body);
    border:none;
}
.vp-plan-btn-upgrade { background:var(--orange);color:#0a1628; }
.vp-plan-btn-upgrade:hover { background:var(--orange2); }
.vp-plan-btn-free { background:var(--bg4);color:var(--white);border:1px solid var(--border2); }
.vp-plan-btn-current { background:rgba(34,197,94,.1);color:var(--green);border:1px solid rgba(34,197,94,.2); }

.vp-feature-compare { max-width:800px;margin:0 auto;text-align:center; }
.vp-feature-compare h2 { color:var(--gold);margin-bottom:20px; }
.vp-compare-table { width:100%;border-collapse:collapse; }
.vp-compare-table th { background:var(--bg4);color:var(--orange);padding:12px 16px;text-align:center; }
.vp-compare-table th:first-child { text-align:left; }
.vp-compare-table td { padding:11px 16px;border-bottom:1px solid var(--border);color:var(--muted2);text-align:center; }
.vp-compare-table td:first-child { text-align:left;color:var(--white); }

/* PAYMENT MODAL */
.vp-modal {
    position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9999;
    display:flex;align-items:center;justify-content:center;
    padding:12px;
}
.vp-modal-box {
    background:var(--bg3);border:1px solid var(--border2);
    border-radius:16px;width:100%;max-width:480px;
    max-height:92vh;overflow-y:auto;
    animation:vp-card-in .2s ease;
}
.vp-modal-header {
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 18px;border-bottom:1px solid var(--border);
    position:sticky;top:0;background:var(--bg3);z-index:1;border-radius:16px 16px 0 0;
}
.vp-modal-header h3 { color:var(--gold);margin:0;font-size:.92rem; }
.vp-modal-close-btn {
    background:transparent;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;flex-shrink:0;
}
.vp-modal-body { padding:16px; }
@media(max-width:480px){
    .vp-modal-box { border-radius:12px;max-height:95vh; }
    .vp-modal-header { padding:12px 14px; }
    .vp-modal-body { padding:12px; }
    .vp-modal-footer { padding:12px 14px; }
    .vp-ref-code { font-size:1.1rem!important;letter-spacing:2px!important; }
    .vp-bank-cards { grid-template-columns:1fr!important; }
}
.vp-pay-methods { display:flex;flex-direction:column;gap:12px; }
.vp-pay-btn {
    background:var(--bg4);border:1px solid var(--border2);color:var(--white);
    padding:13px;border-radius:10px;font-size:.95rem;font-weight:600;
    cursor:pointer;transition:.15s;font-family:var(--font-body);text-align:left;
}
.vp-pay-btn:hover { border-color:var(--orange);color:var(--orange); }

/* PROFILE PAGE */
.vp-profile-wrap { max-width:900px;margin:0 auto;padding:30px 20px; }
.vp-profile-header {
    display:flex;align-items:center;gap:20px;
    background:var(--bg3);border:1px solid var(--border);
    border-radius:20px;padding:24px;margin-bottom:24px;
}
.vp-profile-avatar {
    width:72px;height:72px;background:linear-gradient(135deg,var(--orange),#e05a00);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;font-weight:700;color:#0a1628;flex-shrink:0;
}
.vp-profile-header h1 { font-size:1.4rem;margin-bottom:4px; }
.vp-profile-header p { color:var(--muted2);font-size:.85rem;margin-bottom:8px; }

.vp-profile-grid {
    display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.vp-profile-card {
    background:var(--bg3);border:1px solid var(--border);
    border-radius:16px;padding:22px;
}
.vp-profile-card h2 { color:var(--gold);font-size:.95rem;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border); }

.vp-sub-info { margin-bottom:10px; }
.vp-sub-info-row {
    display:flex;justify-content:space-between;
    padding:9px 0;border-bottom:1px solid var(--border);font-size:.88rem;
}
.vp-sub-info-row:last-child { border-bottom:none; }
.vp-sub-info-row span:first-child { color:var(--muted2); }

.vp-stats-row-mini { display:flex;gap:16px; }
.vp-mini-stat {
    flex:1;background:var(--bg4);border-radius:12px;padding:16px;text-align:center;
}
.vp-mini-stat h3 { font-size:1.5rem;color:var(--orange);margin-bottom:4px; }
.vp-mini-stat p { color:var(--muted);font-size:.75rem; }

.vp-back-link { color:var(--muted2);font-size:.85rem;text-decoration:none;transition:.1s; }
.vp-back-link:hover { color:var(--orange); }

/* SCROLLBAR */
::-webkit-scrollbar { width:5px;height:5px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--border2);border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--orange); }

/* MOBILE */
@media(max-width:768px){
    .vp-sidebar { position:fixed;left:0;top:var(--topbar-h);bottom:0;z-index:90;transform:translateX(-100%);transition:.25s; }
    .vp-sidebar.open { transform:translateX(0); }
    .vp-topbar { justify-content:space-between; }
    .vp-topbar-left { width:auto; }
    .vp-topbar-center { display:flex; flex:1; min-width:0; margin:0 8px; }
    .vp-topbar-right { margin-left:0; }
    .vp-plugin-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .vp-welcome-right { display:none; }
    .vp-profile-grid { grid-template-columns:1fr; }
    .vp-plans-grid, .vp-plans-grid-paid { grid-template-columns:1fr 1fr; gap:12px; }
    /* Mobile compact card — hide description, category, badges, show only icon+name+launch */
    .vp-plugin-card p { display:none; }
    .vp-plugin-cat { display:none; }
    .vp-pro-chip { display:none; }
    .vp-plugin-badge { display:none; }
    .vp-plugin-card { padding:14px 10px; border-radius:14px; }
    .vp-plugin-icon { width:44px;height:44px;font-size:1.4rem;margin:0 auto 8px auto; }
    .vp-plugin-card h3 { font-size:.76rem;margin-bottom:6px;text-align:center;line-height:1.3; }
    .vp-plugin-footer { flex-direction:column;gap:8px;align-items:center;margin-top:8px;padding-top:8px; }
    .vp-launch-btn { width:100%;text-align:center;padding:6px 10px;font-size:.78rem; }
}
@media(max-width:480px){
    .vp-plugin-grid { grid-template-columns:1fr 1fr; gap:8px; }
    .vp-auth-card { padding:20px 16px; }
    .vp-plans-grid, .vp-plans-grid-paid { grid-template-columns:1fr 1fr; gap:8px; }
    .vp-plan-box { padding:12px 10px; }
    .vp-plan-box-icon { font-size:1.5rem; margin-bottom:6px; }
    .vp-plan-box-name { font-size:.85rem; margin-bottom:6px; }
    .vp-price-amount { font-size:1.2rem; }
    .vp-price-period { font-size:.7rem; }
    .vp-plan-box-desc { font-size:.72rem; margin-bottom:8px; line-height:1.3; }
    .vp-plan-btn { padding:8px; font-size:.75rem; }
    .vp-popular-tag, .vp-current-tag { font-size:.65rem; padding:3px 8px; }
}

/* ── SHORTCODE MODE (.vp-sc-wrap) ───────────────────────────────── */
/* When platform is embedded via shortcode inside a normal WP page */
.vp-sc-wrap {
    background: var(--bg);
    color: var(--white);
    font-family: var(--font-body);
    padding: 20px 0;
    min-height: 400px;
}
.vp-sc-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 20px;
    margin-bottom: 4px;
}
.vp-sc-dashboard .vp-plugin-view {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   VIDASA PLATFORM v2 — UI FIXES & NEW FEATURES
═══════════════════════════════════════════════════ */

/* ── Text color fixes — always white/yellow/orange, never dark ── */
body, p, span, div, td, th, li, label { color: inherit; }
.vp-app-body, .vp-auth-body { color: var(--white); }

/* ── Plugin icon — centered inside square ── */
.vp-plugin-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    line-height: 1;
}

/* ── Plugin page display — centered ── */
.vp-plugin-view-content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 20px;
}
.vp-plugin-view-content > * {
    width: 100%;
    max-width: 1100px;
}

/* ── Subscription page — bank details ── */
.vp-bank-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 20px 0;
}
.vp-bank-card {
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 14px;
    padding: 20px;
}
.vp-bank-card h3 { color: var(--gold); font-size: .95rem; margin-bottom: 12px; }
.vp-bank-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .87rem; }
.vp-bank-row:last-child { border-bottom: none; }
.vp-bank-row span:first-child { color: var(--muted2); }
.vp-bank-row span:last-child { color: var(--white); font-weight: 600; }

/* ── Payment reference box ── */
.vp-ref-box {
    background: rgba(249,115,22,.08);
    border: 1px solid rgba(249,115,22,.3);
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
    margin: 20px 0;
}
.vp-ref-box p { color: var(--muted2); font-size: .83rem; margin-bottom: 6px; }
.vp-ref-code { font-size: 1.4rem; font-weight: 700; color: var(--gold); letter-spacing: .1em; }

/* ── Countdown timer ── */
.vp-countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(249,115,22,.1);
    border: 1px solid rgba(249,115,22,.2);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: .8rem;
    color: var(--orange);
    font-weight: 600;
}
.vp-countdown.expiring { color: var(--red); background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.2); }

/* ── Notification bell badge ── */
.vp-notif-wrap { position: relative; cursor: pointer; }
.vp-notif-badge {
    position: absolute; top: -5px; right: -5px;
    background: var(--red); color: #fff;
    width: 16px; height: 16px; border-radius: 50%;
    font-size: .65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ── Slip upload area ── */
.vp-upload-area {
    border: 2px dashed var(--border2);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: .15s;
    color: var(--muted2);
}
.vp-upload-area:hover { border-color: var(--orange); color: var(--orange); }
.vp-upload-area.dragging { border-color: var(--orange); background: rgba(249,115,22,.05); }

/* ── Coupon input row ── */
.vp-coupon-row { display: flex; gap: 10px; margin-bottom: 16px; }
.vp-coupon-row .vp-input { flex: 1; }
.vp-coupon-msg { font-size: .82rem; margin-top: 4px; }
.vp-coupon-msg.success { color: var(--green); }
.vp-coupon-msg.error { color: var(--red); }

/* ── Referral section ── */
.vp-ref-link-box {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vp-ref-link-box input { flex: 1; background: var(--bg2); border: 1px solid var(--border2); color: var(--white); padding: 8px 12px; border-radius: 8px; font-size: .85rem; }
.vp-copy-btn { background: var(--orange); color: #0a1628; border: none; padding: 8px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: .82rem; white-space: nowrap; }

/* ── Admin alerts in frontend ── */
.vp-alert { padding: 12px 15px; border-radius: 10px; font-size: .85rem; color: var(--white); }
.vp-alert-success { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); color: #86efac; }
.vp-alert-error   { background: rgba(239,68,68,.12);  border: 1px solid rgba(239,68,68,.3);  color: #fca5a5; }
.vp-alert-warning { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); color: #fde68a; }

/* ── WordPress page embed fix — plugin shows centered ── */
body.page .entry-content > *,
body.page .wp-block-group > *,
body.page .site-content > * {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
body.vp-app-page .entry-content,
body.vp-app-page .site-content,
body.vp-app-page .wp-site-blocks {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* ── Sidebar section label fix → APPS ── */
.vp-sidebar-section-label { color: var(--muted); }

/* ── Mobile payment ── */
@media(max-width:600px){
    .vp-bank-cards { grid-template-columns: 1fr; }
}

/* ── Trial banner ── */
.vp-trial-banner {
    background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(249,115,22,.08));
    border: 1px solid rgba(251,191,36,.3);
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.vp-trial-banner-left { display: flex; align-items: center; gap: 12px; }
.vp-trial-banner-icon { font-size: 1.5rem; }
.vp-trial-banner-text strong { color: var(--gold); font-size: .95rem; display: block; }
.vp-trial-banner-text span   { color: var(--muted2); font-size: .82rem; }
.vp-trial-banner-days {
    background: rgba(251,191,36,.15);
    border: 1px solid rgba(251,191,36,.3);
    border-radius: 20px;
    padding: 4px 14px;
    color: var(--gold);
    font-weight: 700;
    font-size: .88rem;
    white-space: nowrap;
}
.vp-trial-banner-days.urgent { color: var(--red); background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); }

/* ── Upgrade popup (shown when pro feature clicked without plan) ── */
.vp-upgrade-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: vp-card-in .2s ease;
}
.vp-upgrade-popup-box {
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 24px;
    width: 100%;
    max-width: 520px;
    overflow: hidden;
}
.vp-upgrade-popup-header {
    background: linear-gradient(135deg, rgba(249,115,22,.15), rgba(251,191,36,.08));
    padding: 24px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.vp-upgrade-popup-header h2 { color: var(--gold); font-size: 1.3rem; margin-bottom: 6px; }
.vp-upgrade-popup-header p  { color: var(--muted2); font-size: .88rem; }
.vp-upgrade-popup-plans { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; }
.vp-upgrade-popup-plan {
    background: var(--bg4);
    border: 1px solid var(--border2);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    transition: .15s;
    text-decoration: none;
    display: block;
}
.vp-upgrade-popup-plan:hover { border-color: var(--orange); background: rgba(249,115,22,.08); }
.vp-upgrade-popup-plan .plan-name { color: var(--white); font-weight: 600; font-size: .88rem; margin-bottom: 4px; }
.vp-upgrade-popup-plan .plan-price { color: var(--orange); font-weight: 700; font-size: 1rem; }
.vp-upgrade-popup-footer { padding: 0 20px 20px; text-align: center; }
.vp-upgrade-popup-close { background: transparent; border: 1px solid var(--border2); color: var(--muted2); padding: 8px 20px; border-radius: 20px; cursor: pointer; font-size: .85rem; transition: .15s; }
.vp-upgrade-popup-close:hover { border-color: var(--orange); color: var(--orange); }

/* ── Gate plan pills ── */
.vp-gate-plans { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
.vp-gate-plan-pill {
    background: var(--bg4);
    border: 1px solid var(--border2);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: .8rem;
    display: flex;
    gap: 8px;
    align-items: center;
}
.vp-gate-plan-pill strong { color: var(--orange); }

/* ── Plans layout: Free at top, Paid 3-per-row ─────────────────── */
.vp-plans-grid-free {
    margin-bottom: 20px;
}
.vp-plans-grid-free .vp-plan-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 100%;
    border-color: rgba(34,197,94,.3);
}
.vp-plans-grid-free .vp-plan-box-icon { font-size: 2rem; }
.vp-plans-grid-free .vp-plan-box-name { margin: 0; font-size: 1.2rem; }
.vp-plans-grid-free .vp-plan-box-price { margin: 0; }
.vp-plans-grid-free .vp-plan-box-desc { margin: 0; flex: 1; min-width: 160px; }
.vp-plans-grid-free .vp-plan-btn { margin-top: 0; white-space: nowrap; }
.vp-plans-grid-paid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 50px; }
.vp-plan-lifetime { border-color: rgba(251,191,36,.35) !important; }

@media(max-width:768px) {
    .vp-plans-grid-paid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .vp-plan-box-icon { font-size: 1.8rem; margin-bottom: 8px; }
    .vp-plan-box-name { font-size: 1rem; margin-bottom: 8px; }
    .vp-price-amount { font-size: 1.6rem; }
    .vp-price-period { font-size: .75rem; }
    .vp-plan-box-desc { font-size: .78rem; margin-bottom: 10px; }
    .vp-plan-btn { padding: 10px; font-size: .82rem; }
    .vp-plans-grid-free .vp-plan-box { flex-direction: column; align-items: flex-start; }
}
@media(max-width:480px) {
    .vp-plans-grid-paid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .vp-plan-box { padding: 12px 10px; }
    .vp-plan-box-icon { font-size: 1.5rem; margin-bottom: 6px; }
    .vp-plan-box-name { font-size: .9rem; margin-bottom: 6px; }
    .vp-price-amount { font-size: 1.3rem; }
    .vp-price-period { font-size: .7rem; }
    .vp-plan-box-desc { font-size: .72rem; margin-bottom: 8px; line-height: 1.4; }
    .vp-plan-btn { padding: 8px; font-size: .75rem; }
    .vp-popular-tag, .vp-current-tag { font-size: .65rem; padding: 3px 8px; }
}

/* ── Countdown Clock ─────────────────────────────────────────── */
.vp-clock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Segoe UI', monospace, sans-serif;
}
.vp-clock-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(249,115,22,.12);
    border: 1px solid rgba(249,115,22,.2);
    border-radius: 8px;
    padding: 4px 8px;
    min-width: 42px;
}
.vp-clock-num {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f97316;
    line-height: 1.1;
}
.vp-clock-lbl {
    font-size: .58rem;
    color: #6b7fa0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vp-clock-sep {
    color: #f97316;
    font-size: 1.1rem;
    font-weight: 700;
    align-self: flex-start;
    padding-top: 4px;
}
.vp-clock-urgent .vp-clock-unit {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.25);
}
.vp-clock-urgent .vp-clock-num { color: #ef4444; }
.vp-clock-urgent .vp-clock-sep { color: #ef4444; }

/* ── Mobile subscription mini-cards ─────────────────────────── */
.vp-mobile-plans {
    display: none;
}
@media(max-width:768px) {
    .vp-mobile-plans {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin: 16px 0;
    }
    .vp-mobile-plan-card {
        background: var(--card, #0f2448);
        border: 1px solid var(--border, #1e3a6e);
        border-radius: 12px;
        padding: 10px 6px;
        text-align: center;
        cursor: pointer;
        transition: .15s;
        text-decoration: none;
        display: block;
    }
    .vp-mobile-plan-card:hover,
    .vp-mobile-plan-card.active {
        border-color: #f97316;
        background: rgba(249,115,22,.08);
    }
    .vp-mobile-plan-card .vp-mpc-icon {
        font-size: 1.2rem;
        margin-bottom: 4px;
    }
    .vp-mobile-plan-card .vp-mpc-dur {
        font-size: .68rem;
        color: #94a3b8;
        margin-bottom: 3px;
        display: block;
    }
    .vp-mobile-plan-card .vp-mpc-price {
        font-size: .78rem;
        font-weight: 700;
        color: #f97316;
    }
    .vp-mobile-plan-card .vp-mpc-price.free { color: #22c55e; }
}
@media(max-width:480px) {
    .vp-mobile-plans { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .vp-mobile-plan-card { padding: 8px 4px; }
    .vp-mobile-plan-card .vp-mpc-price { font-size: .72rem; }
}

/* ── Sub-link launch buttons inside card — 3 per row ─────────── */
.vp-sublink-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    width: 100%;
    margin-top: 2px;
}
.vp-sublink-launch-btn {
    text-align: center;
    font-size: .72rem;
    padding: 6px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--orange, #f97316);
    border: none;
    color: #0a1628;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    transition: .15s;
}
.vp-sublink-launch-btn:hover {
    background: #fb923c;
    transform: scale(1.03);
}

/* ── Sidebar app/sublink rows — outlined style, no orange fill ── */
.vp-nav-app-row.vp-nav-item,
.vp-nav-sl-row.vp-nav-item {
    background: transparent !important;
    border: 1px solid #f97316 !important;
    border-radius: 8px !important;
    color: #e8edf5 !important;
    margin: 3px 8px !important;
    width: calc(100% - 16px) !important;
    padding: 8px 12px !important;
}
.vp-nav-app-row.vp-nav-item:hover,
.vp-nav-sl-row.vp-nav-item:hover {
    background: rgba(249,115,22,.08) !important;
    border-color: #fb923c !important;
    color: #fff !important;
}
.vp-nav-app-row.vp-nav-item.active,
.vp-nav-sl-row.vp-nav-item.active {
    background: rgba(249,115,22,.12) !important;
    border-color: #f97316 !important;
    color: #f97316 !important;
}

/* ── Sidebar: category accordion / app / sub-link ────────────── */
.vp-nav-cat-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .15s;
    user-select: none;
}
.vp-nav-cat-toggle:hover { background: rgba(249,115,22,.05); }
.vp-nav-cat-toggle.vp-cat-open { background: rgba(10,18,40,.4); }
.vp-nav-cat-toggle .vp-nav-icon { font-size: 1rem; flex-shrink: 0; }
.vp-nav-cat-text {
    flex: 1;
    font-size: .9rem;
    font-weight: 700;
    color: #e8edf5;
    letter-spacing: .01em;
}
.vp-cat-chevron {
    font-size: 1rem;
    color: #f97316;
    line-height: 1;
    font-style: normal;
}
.vp-cat-apps-wrap {
    overflow: hidden;
    background: rgba(8,15,32,.5);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
/* App row inside expanded category */
.vp-nav-app-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 20px !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .15s;
}
.vp-nav-app-row:hover { background: rgba(249,115,22,.07); }
.vp-nav-app-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: #f97316;
    border-radius: 2px;
    flex-shrink: 0;
}
.vp-nav-app-icon {
    font-size: .85rem;
    flex-shrink: 0;
    line-height: 1;
}
.vp-nav-app-label {
    font-size: .83rem;
    font-weight: 700;
    color: #e8edf5;
    line-height: 1.3;
    transition: color .15s;
}
.vp-nav-app-row:hover .vp-nav-app-label { color: #f97316; }
/* Sub-link row */
.vp-nav-sl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 32px !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .15s;
}
.vp-nav-sl-row:hover { background: rgba(249,115,22,.05); }
.vp-nav-sl-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: #f97316;
    border-radius: 2px;
    flex-shrink: 0;
}
.vp-nav-sl-label {
    font-size: .79rem;
    font-weight: 600;
    color: #94a3b8;
    transition: color .15s;
    line-height: 1.3;
}
.vp-nav-sl-row:hover .vp-nav-sl-label { color: #f97316; }
.vp-nav-sl-row:hover .vp-nav-sl-dot { background: #fb923c; }

/* Card sub-link buttons — 3 per row, full text */
.vp-sublink-btns {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;
    width: 100%;
    margin-top: 2px;
}
.vp-sublink-launch-btn {
    text-align: center;
    font-size: .68rem;
    padding: 6px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
    border: 2px solid #f97316;
    color: #f97316;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    transition: .15s;
}
.vp-sublink-launch-btn:hover {
    background: #f97316;
    color: #0a1628;
    transform: scale(1.04);
    box-shadow: 0 0 12px rgba(249,115,22,.4);
    cursor: pointer;
}

@media(max-width:768px) {
    .vp-sublink-btns { grid-template-columns: repeat(2,1fr); }
}

/* ── Card launch buttons (fresh class, no conflicts) ──────────── */
.vp-card-launch {
    display: inline-block;
    background: transparent;
    color: #f97316;
    border: 2px solid #f97316;
    border-radius: 20px;
    padding: 7px 16px;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    font-family: var(--font-body, inherit);
    transition: background .15s, color .15s, transform .15s;
    letter-spacing: .03em;
    text-decoration: none;
}
.vp-card-launch:hover {
    background: #f97316;
    color: #0a1628;
    transform: scale(1.04);
    text-decoration: none;
}
.vp-sublink-launch-btn.vp-card-launch {
    font-size: .68rem;
    padding: 6px 8px;
}

/* ── Mobile: translate plugin language bar fix ───────────────────
   Some translate plugins inject a language switcher bar above the
   topbar on mobile. This pushes .vp-sidebar down and clips the
   Dashboard nav item. We offset the sidebar top dynamically so the
   first nav item (Dashboard) is always fully visible.
─────────────────────────────────────────────────────────────────── */
@media(max-width:768px) {
    /* Base fix: ensure sidebar starts right below the topbar */
    .vp-sidebar {
        top: var(--topbar-h);
    }
    /* If a translate bar is present above the topbar, browsers will
       push the topbar down. We compensate by using a safe scroll
       container so the sidebar inner content is always scrollable
       and the first item (Dashboard) is never clipped. */
    .vp-sidebar-inner {
        padding-top: 32px;
    }
    /* Ensure the Dashboard nav item is never hidden behind the topbar */
    .vp-sidebar .vp-nav-item:first-child {
        scroll-margin-top: 8px;
    }
    /* Recalculate sidebar height to fill remaining screen below topbar */
    .vp-sidebar {
        height: calc(100vh - var(--topbar-h));
        max-height: calc(100vh - var(--topbar-h));
        overflow-y: auto;
    }
}

/* ── Subscription countdown clock mobile fix ─────────────────── */
@media(max-width:768px){
    .vp-clock {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .vp-clock-unit {
        min-width: 36px;
        padding: 4px 6px;
    }
    .vp-clock-num { font-size: .95rem; }
}

/* ── Desktop / Laptop: compact auth forms ────────────────────── */
@media(min-width:769px){
    .vp-auth-wrap {
        max-width: 320px;
    }
    .vp-auth-card {
        padding: 22px 22px;
        border-radius: 16px;
    }
    .vp-auth-logo {
        margin-bottom: 16px;
    }
    .vp-auth-logo-icon {
        font-size: 1.8rem;
        margin-bottom: 5px;
    }
    .vp-auth-logo h1 {
        font-size: 1.05rem;
        margin-bottom: 3px;
    }
    .vp-auth-logo p {
        font-size: .75rem;
    }
    .vp-form-group {
        margin-bottom: 10px;
    }
    .vp-form-group label {
        font-size: .75rem;
        margin-bottom: 4px;
    }
    .vp-form-group input,
    .vp-form-group select {
        padding: 8px 10px;
        font-size: .82rem;
    }
    .vp-btn-full {
        padding: 9px 14px;
        font-size: .85rem;
    }
    .vp-auth-switch {
        font-size: .75rem;
        margin-top: 12px;
    }
}

/* ═══════════════════════════════════════════════════════
   TOP NAV BAR — desktop / laptop only (≥1025px)
   Mobile left sidebar is UNTOUCHED
═══════════════════════════════════════════════════════ */

/* Back button in topbar */
.vp-topbar-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(249,115,22,.10);
    border: 1px solid rgba(249,115,22,.30);
    border-radius: 50%;
    color: #f97316;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, border-color .2s;
    line-height: 1;
}
.vp-topbar-back:hover {
    background: rgba(249,115,22,.22);
    border-color: #f97316;
}
.vp-topbar-back.vp-back-visible {
    display: flex;
}

/* Top nav wrapper — hidden by default, shown on desktop */
.vp-topnav {
    display: none !important;
}

/* Inline nav inside topbar — row 2 overflow */
.vp-topnav-inline {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 16px;
    order: 6;
    width: 100%;
    border-top: 1px solid rgba(42,74,127,.3);
}

/* Nav left — starts right at sidebar edge */
.vp-topnav-left {
    display: none;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: var(--topbar-h);
    padding: 0 6px 0 0;
    margin-left: 8px;
}

/* Nav right — sits between search and avatar */
.vp-topnav-right {
    display: none;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: var(--topbar-h);
    padding: 0 0 0 6px;
}

/* Desktop / laptop — show inline topnav */
@media (min-width: 1025px) {
    .vp-topnav-inline { display: flex; }
    .vp-topnav-left   { display: flex; }
    .vp-topnav-right  { display: flex; }
    .vp-topbar-left   { order: 1; }
    .vp-topnav-left   { order: 2; }
    .vp-topbar-center { order: 3; flex:1; }
    .vp-topnav-right  { order: 4; }
    .vp-topbar-right  { order: 5; }
    .vp-topnav-inline { order: 6; }
}

/* Mobile / tablet — completely hidden, sidebar untouched */
@media (max-width: 1024px) {
    .vp-topnav-inline { display: none !important; }
    .vp-topnav-left, .vp-topnav-right { display: none !important; }
    .vp-topbar-back { display: none !important; }
    .vp-topbar-back.vp-back-visible { display: flex !important; }
    .vp-topbar-left { width: auto; }
}

/* ── Nav button — 72×40px, icon top, label below ── */
.vp-topnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 6px;
    text-decoration: none;
    color: #94a3b8;
    cursor: pointer;
    border: 1px solid #f97316;
    border-radius: 8px;
    background: #0d1f3c;
    transition: color .18s, border-color .18s, background .18s;
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 1;
}
.vp-topnav-item:hover {
    color: #f97316;
    border-color: #fb923c;
    background: rgba(249,115,22,.12);
    text-decoration: none;
}
.vp-topnav-item.vp-topnav-active {
    color: #f97316;
    border-color: #f97316;
    background: rgba(249,115,22,.15);
}

/* Icon */
.vp-topnav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform .18s;
}
.vp-topnav-item:hover .vp-topnav-icon {
    transform: scale(1.1);
}
.vp-topnav-item.vp-topnav-active .vp-topnav-icon {
    transform: scale(1.05);
}

/* Label */
.vp-topnav-label {
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.1;
    color: #94a3b8;
}



/* ── Translator bar compatibility ─────────────────────────────── */
body.vt-has-top-bar .vp-topbar {
    margin-top: 38px;
}
body.vt-has-top-bar #vp-fullscreen-portal {
    top: 38px !important;
}