.vng{
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
border: 1px solid rgba(0,0,0,.08);
border-radius: 16px;
padding: 18px;
background: #fff;
box-shadow: 0 6px 30px rgba(0,0,0,.06);
max-width: 920px;
}
.vng-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 16px;
margin-bottom: 14px;
}
.vng-title{ margin:0; font-size: 18px; line-height: 1.2; }
.vng-sub{ margin:6px 0 0; color: rgba(0,0,0,.62); font-size: 13px; }
.vng-badge{
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.10);
background: rgba(0,0,0,.03);
color: rgba(0,0,0,.70);
}
.vng-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 12px;
margin-top: 10px;
}
.vng-col-2{ grid-column: span 2; }
.vng-field label{
display:block;
font-size: 12px;
color: rgba(0,0,0,.70);
margin: 0 0 6px;
}
.vng-req{ color: #b00020; font-weight: 600; }
.vng-field input,
.vng-field select{
width:100%;
height: 42px;
border: 1px solid rgba(0,0,0,.12);
border-radius: 12px;
padding: 0 12px;
outline: none;
background:#fff;
transition: box-shadow .15s, border-color .15s;
}
.vng-field input:focus,
.vng-field select:focus{
border-color: rgba(0,0,0,.25);
box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}
.vng-help{
display:block;
margin-top: 6px;
font-size: 12px;
color: rgba(0,0,0,.55);
}
.vng-actions{
display:flex;
align-items:center;
gap: 10px;
flex-wrap: wrap;
margin-top: 4px;
}
.vng-btn{
height: 42px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,.12);
background: #111;
color: #fff;
cursor: pointer;
font-weight: 600;
font-size: 13px;
}
.vng-btn:hover{ filter: brightness(1.05); }
.vng-btn:disabled{ opacity:.6; cursor:not-allowed; }
.vng-btn-ghost{
background: #fff;
color: #111;
}
.vng-status{
font-size: 12px;
color: rgba(0,0,0,.60);
}
.vng-results{
margin-top: 16px;
border-top: 1px solid rgba(0,0,0,.08);
padding-top: 14px;
}
.vng-results-head{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
margin-bottom: 10px;
}
.vng-results-head h4{ margin: 0; font-size: 14px; }
.vng-out{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}
.vng-card{
border: 1px solid rgba(0,0,0,.10);
border-radius: 14px;
padding: 12px;
background: rgba(0,0,0,.02);
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 10px;
}
.vng-name{
font-weight: 700;
font-size: 14px;
margin: 0;
}
.vng-tags{
display:flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}
.vng-tag{
font-size: 11px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.10);
background:#fff;
color: rgba(0,0,0,.72);
}
.vng-copy{
height: 34px;
padding: 0 10px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.12);
background:#fff;
cursor:pointer;
font-size:12px;
font-weight: 600;
}
@media (max-width: 680px){
.vng-grid{ grid-template-columns: 1fr; }
.vng-col-2{ grid-column: span 1; }
.vng-out{ grid-template-columns: 1fr; }
}