#vdb-app{
font-family:Inter,Arial,sans-serif;
padding:18px;
background:#f5f7fb;
color:#111827;
}

.vdb-login{
max-width:390px;
margin:50px auto;
background:#fff;
padding:28px;
border-radius:24px;
box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.vdb-chip{
display:inline-flex;
padding:7px 14px;
background:#149c7d;
color:#fff;
border-radius:999px;
font-size:12px;
font-weight:700;
margin-bottom:14px;
}

.vdb-login h2{
font-size:26px;
margin:0 0 8px;
}

.vdb-login p{
font-size:13px;
color:#666;
margin-bottom:18px;
line-height:1.5;
}

.vdb-login input,
.vdb-head input{
width:100%;
padding:14px;
border-radius:14px;
border:1px solid #ddd;
margin-bottom:18px;
font-size:13px;
box-sizing:border-box;
}

.vdb-login button,
#vdb-logout-btn,
.vdb-action{
padding:12px 16px;
border:none;
border-radius:14px;
background:#149c7d;
color:#fff;
font-size:13px;
font-weight:700;
cursor:pointer;
}

.vdb-topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
gap:20px;
flex-wrap:wrap;
}

.vdb-topbar h1{
font-size:24px;
margin:0;
}

.vdb-topbar span{
font-size:13px;
color:#666;
}

.vdb-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:16px;
margin-bottom:20px;
}

.vdb-card{
background:#fff;
padding:20px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.vdb-card span{
font-size:13px;
color:#666;
display:block;
margin-bottom:8px;
}

.vdb-card strong{
font-size:24px;
color:#149c7d;
}

.vdb-panel{
background:#fff;
padding:20px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
margin-bottom:20px;
overflow:auto;
}

.vdb-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
margin-bottom:16px;
flex-wrap:wrap;
}

.vdb-head h3{
font-size:17px;
margin:0;
}

.vdb-table{
width:100%;
border-collapse:collapse;
min-width:850px;
}

.vdb-table th,
.vdb-table td{
padding:14px;
border-bottom:1px solid #f0f0f0;
font-size:13px;
text-align:left;
}

.vdb-status{
padding:6px 10px;
border-radius:999px;
font-size:11px;
font-weight:700;
display:inline-block;
}

.vdb-eligible{
background:#dcfce7;
color:#166534;
}

.vdb-claimed{
background:#dbeafe;
color:#1d4ed8;
}

@media(max-width:768px){
.vdb-card strong{
font-size:22px;
}
}


.vdb-scroll{
overflow:auto;
max-height:520px;
border-radius:18px;
}

.vdb-scroll::-webkit-scrollbar{
height:10px;
width:10px;
}

.vdb-scroll::-webkit-scrollbar-thumb{
background:#cbd5e1;
border-radius:999px;
}

.vdb-close{
width:34px;
height:34px;
border:none;
border-radius:50%;
background:#eef2f7;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:18px;
font-weight:700;
color:#111827;
transition:.2s ease;
}

.vdb-close:hover{
background:#dbe4ee;
}

.vdb-table th{
position:sticky;
top:0;
background:#fff;
z-index:5;
font-size:12px;
letter-spacing:.3px;
}

.vdb-panel{
position:relative;
}

.vdb-status{
white-space:nowrap;
}

.vdb-table td{
vertical-align:middle;
}

.vdb-head input{
max-width:300px;
}

.vdb-card{
min-height:108px;
}

.vdb-action{
white-space:nowrap;
}

@media(max-width:768px){

.vdb-topbar h1{
font-size:20px;
}

.vdb-table th,
.vdb-table td{
padding:12px;
font-size:12px;
}

.vdb-login{
padding:22px;
}

}


.vdb-delete-btn{
width:34px;
height:34px;
border:none;
border-radius:12px;
background:#fee2e2;
color:#dc2626;
font-size:20px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.2s ease;
box-shadow:0 4px 12px rgba(220,38,38,.12);
}

.vdb-delete-btn:hover{
transform:scale(1.06);
background:#fecaca;
}

.vdb-delete-btn:active{
transform:scale(.96);
}

.vdb-actions{
display:flex;
align-items:center;
gap:8px;
margin-top:8px;
}

.vdb-table{
min-width:1000px;
}

.vdb-panel{
padding:18px;
}

.vdb-card{
border:1px solid #edf1f5;
}

.vdb-head h3{
font-weight:700;
}

.vdb-status{
letter-spacing:.2px;
}

.vdb-table td{
line-height:1.45;
}