/* ========== GLOBAL STYLES ========== */
* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.dpp-wrapper {
    background: #0b0e14;
    background-image: radial-gradient(circle at 20% 30%, rgba(30, 60, 114, 0.25) 0%, transparent 40%),
                      radial-gradient(circle at 80% 70%, rgba(80, 40, 120, 0.2) 0%, transparent 50%);
    min-height: 100vh;
    padding: 20px;
    margin: -20px -20px 0 -20px;
}

.dpp-glass {
    background: rgba(22, 27, 34, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    border-radius: 16px;
}

.dpp-glass-card {
    background: rgba(26, 32, 44, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    border-radius: 16px;
    padding: 20px;
}

.dpp-glass-card:hover {
    transform: translateY(-3px);
    border-color: rgba(120, 160, 255, 0.2);
    box-shadow: 0 12px 40px -8px rgba(70, 130, 255, 0.15);
}

/* ========== SIDEBAR ========== */
.dpp-sidebar {
    width: 280px;
    background: rgba(12, 16, 24, 0.9);
    backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255,255,255,0.05);
    position: fixed;
    top: 32px;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 999;
    transition: transform 0.3s ease;
}

.dpp-sidebar .nav-item {
    display: block;
    padding: 10px 16px;
    color: #c0c7d9;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    font-size: 14px;
}

.dpp-sidebar .nav-item:hover {
    background: rgba(255,255,255,0.04);
    border-left-color: #6b8cff;
    color: #fff;
}

.dpp-sidebar .nav-item.active {
    background: rgba(79, 123, 255, 0.08);
    border-left-color: #4f7bff;
    color: #fff;
}

.dpp-sidebar .nav-item i {
    width: 20px;
    margin-right: 12px;
}

.dpp-sidebar .badge-new {
    background: linear-gradient(135deg, #f472b6, #8b5cf6);
    font-size: 0.6rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    color: white;
    font-weight: 600;
    margin-left: auto;
}

.dpp-sidebar .sub-menu {
    padding-left: 20px;
}

.dpp-sidebar .sub-menu .nav-item {
    font-size: 13px;
    padding: 6px 16px;
}

/* ========== HEADER ========== */
.dpp-header {
    background: rgba(12, 16, 24, 0.6);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 12px 24px;
    position: sticky;
    top: 32px;
    z-index: 998;
}

/* ========== STAT CARDS ========== */
.dpp-stat-card {
    background: rgba(26, 32, 44, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.dpp-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.dpp-stat-card .icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.dpp-stat-card .icon-blue { background: linear-gradient(135deg, #4f7bff, #8b5cf6); }
.dpp-stat-card .icon-green { background: linear-gradient(135deg, #10b981, #06b6d4); }
.dpp-stat-card .icon-amber { background: linear-gradient(135deg, #f59e0b, #ec4899); }
.dpp-stat-card .icon-pink { background: linear-gradient(135deg, #f472b6, #8b5cf6); }

/* ========== BUTTONS ========== */
.dpp-btn-primary {
    background: linear-gradient(135deg, #4f7bff, #8b5cf6);
    border: none;
    color: #fff;
    padding: 10px 24px;
    border-radius: 12px;
    transition: all 0.2s ease;
    font-weight: 600;
}

.dpp-btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(79, 123, 255, 0.3);
    color: #fff;
}

.dpp-btn-recharge {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    border: none;
    color: #fff;
}

/* ========== MODAL ========== */
.dpp-modal .modal-content {
    background: rgba(22, 27, 34, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    color: #fff;
}

.dpp-modal .modal-header {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(135deg, #337ab7, #2e6da4);
    border-radius: 20px 20px 0 0;
}

.dpp-modal .close {
    color: #fff;
    opacity: 0.8;
}

/* ========== PLAN CARDS ========== */
.dpp-plan-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    min-width: 250px;
}

.dpp-plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.dpp-plan-card .plan-header {
    padding: 12px;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
}

.dpp-plan-card .plan-body {
    padding: 15px;
    color: #333;
}

.dpp-plan-card .plan-body ul {
    list-style: none;
    padding: 0;
}

.dpp-plan-card .plan-body ul li {
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
    display: flex;
    align-items: center;
}

.dpp-plan-card .plan-body ul li i {
    margin-right: 10px;
    color: #555;
}

/* ========== QR CODE ========== */
.dpp-qr-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    display: inline-block;
}

.dpp-countdown {
    font-weight: 700;
    color: #d9534f;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .dpp-sidebar {
        transform: translateX(-100%);
    }
    
    .dpp-sidebar.open {
        transform: translateX(0);
    }
    
    .dpp-wrapper {
        padding: 10px;
        margin: -10px;
    }
    
    .dpp-header {
        padding: 10px 16px;
        top: 0;
    }
}

/* Frontend shortcode portal */
.dpp-frontend {
    background: #0b0e14;
    color: #dbe3f4;
    min-height: 70vh;
    padding: 24px;
    border-radius: 16px;
}
.dpp-frontend .dpp-glass-card { margin-bottom: 24px; }
.dpp-frontend label, .dpp-frontend h2, .dpp-frontend h3 { color: #fff; }
.dpp-frontend input[type="text"], .dpp-frontend input[type="password"], .dpp-frontend input[type="email"] {
    width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #46506a;
}
.dpp-portal-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.dpp-balance { color: #fff; font-size: 38px; font-weight: 700; }
.dpp-frontend .dpp-plan-card { margin-bottom: 24px; }
.dpp-frontend .dpp-plan-card .plan-header { background: linear-gradient(135deg, #4f7bff, #8b5cf6); }
.dpp-frontend .table { color: #e7ecf7; }
@media (max-width: 600px) { .dpp-frontend { padding: 14px; } .dpp-portal-head { align-items: flex-start; } }

.dpp-payment-qr {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto 15px;
}

/* v2.3 frontend */
.dpp-auth-shell,.dpp-app{position:fixed!important;inset:0!important;width:100vw!important;max-width:none!important;height:100vh!important;min-height:100vh!important;margin:0!important;border-radius:0!important;z-index:2147483000!important;overflow:hidden!important}
.dpp-app-main{height:100vh;overflow-y:auto;overflow-x:hidden}.dpp-app-side{height:100vh;overflow-y:auto}.dpp-auth-panel,.dpp-auth-art{min-height:100vh}.dpp-auth-panel{overflow-y:auto}
.dpp-auth-shell,.dpp-app{--ink:#111827;--muted:#697386;--violet:#6558f5;--paper:#f6f8fc;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;box-sizing:border-box}.dpp-auth-shell *,.dpp-app *{box-sizing:border-box}
.dpp-auth-shell{max-width:1120px;min-height:680px;margin:30px auto;display:grid;grid-template-columns:1.08fr .92fr;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 30px 90px rgba(30,42,78,.18)}
.dpp-auth-art{position:relative;padding:70px;color:#fff;background:radial-gradient(circle at 85% 15%,rgba(0,229,255,.34),transparent 25%),radial-gradient(circle at 15% 90%,rgba(166,88,255,.45),transparent 34%),linear-gradient(145deg,#111936,#212660 55%,#4d37a8);overflow:hidden}.dpp-auth-art:after{content:"";position:absolute;width:420px;height:420px;right:-210px;bottom:-80px;border:1px solid rgba(255,255,255,.12);border-radius:50%}
.dpp-brand-mark{width:62px;height:62px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(135deg,#00d5e8,#7868ff);font-size:27px;margin-bottom:90px;box-shadow:0 14px 35px rgba(0,207,226,.28)}.dpp-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;color:#8d82ff;margin-bottom:10px}.dpp-auth-art .dpp-kicker{color:#7eeaff}.dpp-auth-art h1{font-size:54px;line-height:1.03;letter-spacing:-.045em;margin:0 0 24px;color:#fff}.dpp-auth-art h1 em,.dpp-hero h1 em{font-style:normal;color:#7eeaff}.dpp-auth-art p{font-size:17px;line-height:1.7;color:#cbd5f5}.dpp-auth-pills{position:absolute;left:70px;bottom:55px;display:flex;gap:12px}.dpp-auth-pills span{padding:9px 13px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);border-radius:999px;font-size:12px}.dpp-auth-pills i{color:#73e5f4;margin-right:6px}
.dpp-auth-panel{padding:78px 68px;align-self:center;color:var(--ink)}.dpp-auth-panel h2{font-size:34px;color:var(--ink);margin:0 0 8px}.dpp-muted{color:var(--muted)!important}.dpp-auth-panel form{margin-top:32px}.dpp-auth-panel label{display:block;color:#28324a!important;font-weight:700;font-size:13px;margin:16px 0 7px}.dpp-auth-panel input[type=text],.dpp-auth-panel input[type=email],.dpp-auth-panel input[type=password]{display:block!important;width:100%!important;height:52px!important;background:#f5f7fb!important;color:#111827!important;-webkit-text-fill-color:#111827!important;border:1px solid #d8deea!important;border-radius:12px!important;padding:0 15px!important;font-size:15px!important;box-shadow:none!important;outline:none!important}.dpp-auth-panel input:focus{background:#fff!important;border-color:#6558f5!important;box-shadow:0 0 0 4px rgba(101,88,245,.12)!important}.dpp-auth-panel small{display:block;color:#778198;margin-top:7px}.dpp-auth-panel .login-remember label{display:flex;gap:8px;align-items:center;font-weight:500}.dpp-auth-panel #wp-submit,.dpp-primary{display:inline-flex!important;align-items:center;justify-content:center;gap:9px;border:0!important;border-radius:12px!important;background:linear-gradient(135deg,#6658f5,#8a4df0)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:800!important;min-height:48px;padding:0 22px!important;cursor:pointer;box-shadow:0 12px 25px rgba(101,88,245,.25);transition:.2s}.dpp-auth-panel #wp-submit{width:100%!important}.dpp-auth-panel #wp-submit:hover,.dpp-primary:hover{transform:translateY(-2px)}.dpp-auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:20px;font-size:13px}.dpp-auth-links a,.dpp-back{color:#6558f5;font-weight:700;text-decoration:none}.dpp-back{display:block;margin-bottom:34px}.dpp-alert{padding:12px 15px;border-radius:10px;margin-bottom:20px}.dpp-alert.error{background:#fff0f3;color:#b4233c}
.dpp-app{max-width:1500px;min-height:850px;margin:24px auto;background:var(--paper);display:grid;grid-template-columns:268px 1fr;border-radius:26px;overflow:hidden;box-shadow:0 25px 80px rgba(29,38,68,.14);color:var(--ink)}.dpp-app-side{position:relative;padding:26px 16px;background:#111936;color:#fff}.dpp-app-logo{display:flex;align-items:center;gap:12px;padding:0 10px 28px;font-size:19px}.dpp-app-logo>i{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#00d4df,#7868ff)}.dpp-app-logo strong{color:#7eeaff}.dpp-app-side nav{display:flex;flex-direction:column;gap:4px}.dpp-app-side nav button,.dpp-app-side nav a{width:100%;border:0;text-align:left;display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;background:transparent;color:#aeb9d8!important;font-size:13px;text-decoration:none;cursor:pointer}.dpp-app-side nav button:hover,.dpp-app-side nav a:hover,.dpp-app-side nav button.active{background:linear-gradient(90deg,rgba(101,88,245,.32),rgba(0,213,232,.08));color:#fff!important}.dpp-app-side nav i{width:20px;text-align:center;color:#7885ac}.dpp-nav-label{font-size:9px;font-weight:800;letter-spacing:.18em;color:#657094;padding:20px 13px 7px}.dpp-side-close{display:none}
.dpp-app-main{min-width:0;padding:0 38px 45px}.dpp-app-main>header{height:94px;display:flex;align-items:center;gap:17px;border-bottom:1px solid #e4e9f2;margin-bottom:34px}.dpp-app-main>header h2{font-size:22px;color:var(--ink);margin:0}.dpp-menu-toggle{display:none}.dpp-user-chip{margin-left:auto;display:flex;align-items:center;gap:10px}.dpp-user-chip>span{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#00cbd7,#7462f7);color:#fff;font-weight:800}.dpp-user-chip div{display:flex;flex-direction:column}.dpp-user-chip small{color:var(--muted)}
.dpp-section{display:none}.dpp-section.active{display:block;animation:dppRise .3s ease}@keyframes dppRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.dpp-section>h1{font-size:35px;color:var(--ink);margin:0 0 8px}.dpp-section>h3{color:var(--ink);margin:34px 0 17px}.dpp-hero{min-height:270px;padding:42px 48px;border-radius:24px;display:flex;align-items:center;justify-content:space-between;background:radial-gradient(circle at 75% 20%,rgba(0,218,229,.28),transparent 28%),linear-gradient(135deg,#1c2452,#493894);color:#fff}.dpp-hero h1{font-size:38px;line-height:1.1;color:#fff;margin:0 0 14px}.dpp-hero p{color:#cfd7f4}.dpp-orbit{width:150px;height:150px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;font-size:45px;color:#7eeaff;box-shadow:0 0 0 24px rgba(255,255,255,.04)}
.dpp-metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:20px}.dpp-metric-grid article{background:#fff;padding:22px;border-radius:17px;border:1px solid #e8ecf3;display:grid;grid-template-columns:50px 1fr;gap:5px 14px}.dpp-metric-grid i{grid-row:1/3;width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#eef0ff;color:#6558f5}.dpp-metric-grid span{color:var(--muted);font-size:12px}.dpp-metric-grid strong{font-size:24px}.dpp-service-grid,.dpp-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.dpp-service-grid button,.dpp-tools-grid article{display:flex;flex-direction:column;gap:11px;text-align:left;background:#fff;border:1px solid #e4e9f2;border-radius:17px;padding:20px}.dpp-service-grid button{cursor:pointer;transition:.2s}.dpp-service-grid button:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 30px rgba(40,50,90,.09)}.dpp-service-grid>button>i{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#f0efff;color:var(--accent)}.dpp-service-grid button span,.dpp-tools-grid span{color:var(--muted);font-size:12px}
.dpp-price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:28px}.dpp-price-grid article{background:#fff;border:1px solid #e3e8f1;border-radius:19px;padding:24px}.dpp-price-grid article>span{font-size:11px;font-weight:800;color:#6558f5}.dpp-price-grid h2{font-size:34px;color:var(--ink)}.dpp-price-grid ul{list-style:none;padding:0}.dpp-price-grid li{font-size:12px;color:var(--muted);padding:7px 0}.dpp-price-grid li:before{content:"✓";color:#00a88f;margin-right:7px}.dpp-wallet-banner{padding:28px;border-radius:18px;background:linear-gradient(135deg,#00b9c7,#147ea8);color:#fff;display:flex;justify-content:space-between;align-items:center;margin:25px 0}.dpp-wallet-banner strong{font-size:34px}.dpp-table-wrap{overflow:auto;background:#fff;border:1px solid #e4e9f2;border-radius:18px}.dpp-table-wrap table{width:100%;border-collapse:collapse}.dpp-table-wrap th,.dpp-table-wrap td{padding:15px;text-align:left;border-bottom:1px solid #edf0f5;white-space:nowrap;color:#263047}.dpp-status{padding:5px 9px;border-radius:999px;background:#fff3d4;color:#9a6800;font-size:11px}.dpp-status.approved{background:#dff8f0;color:#087a63}.dpp-status.rejected{background:#ffe8ec;color:#a92e43}.dpp-tools-grid{margin:25px 0}.dpp-tools-grid article>i{color:var(--accent,#6558f5);font-size:22px}.dpp-integration-note{display:flex;gap:15px;padding:20px;border:1px solid #ffdba0;background:#fff9ed;border-radius:15px;color:#734d00}.dpp-integration-note p{margin:5px 0 0;color:#806633}
@media(min-width:1450px){.dpp-app{grid-template-columns:290px 1fr}.dpp-app-main{padding-left:52px;padding-right:52px}.dpp-service-grid,.dpp-tools-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.dpp-hero{min-height:300px}.dpp-hero h1{font-size:46px}}
@media(max-width:1050px){.dpp-price-grid{grid-template-columns:repeat(2,1fr)}.dpp-service-grid,.dpp-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.dpp-auth-shell{grid-template-columns:1fr}.dpp-auth-art{display:none}.dpp-auth-panel{padding:45px 28px}.dpp-app{display:block}.dpp-app-side{position:fixed;z-index:2147483100;left:0;top:0;bottom:0;width:270px;transform:translateX(-105%);transition:.25s;overflow:auto}.dpp-app.side-open .dpp-app-side{transform:none}.dpp-side-close{display:block;position:absolute;right:12px;top:12px;border:0;background:transparent;color:#fff}.dpp-app-main{padding:0 18px 35px}.dpp-app-main>header{height:78px}.dpp-menu-toggle{display:block;border:0;background:#fff;border-radius:10px;width:40px;height:40px}.dpp-user-chip div{display:none}.dpp-hero{padding:30px}.dpp-orbit{display:none}.dpp-metric-grid,.dpp-service-grid,.dpp-tools-grid,.dpp-price-grid{grid-template-columns:1fr}}