.virtual-avatars { margin-bottom: 24px; padding: 26px; border: 1px solid #383124; border-radius: 12px; background: #111216; color: #f4eee1; }
.virtual-avatars [hidden] { display: none !important; }
.va-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.va-header h3 { margin: 0 0 8px; font-size: 21px; }
.virtual-avatars p { color: #b1aba0; line-height: 1.65; margin: 0; }
.va-tabs { display: flex; gap: 6px; flex-shrink: 0; padding: 4px; background: #090a0c; border-radius: 9px; }
.virtual-avatars button { cursor: pointer; font: inherit; min-height: 44px; }
.va-tab { border: 0; border-radius: 6px; padding: 9px 17px; color: #b1aba0; background: transparent; }
.va-tab[aria-selected=true] { background: #342b19; color: #f2ce76; }
.va-layout { display: grid; grid-template-columns: minmax(0, 1fr) 228px; gap: 28px; }
.va-presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.virtual-avatars .va-preset { padding: 0; border: 2px solid transparent; background: #18191f; color: #dfd9cf; text-align: left; border-radius: 9px; overflow: hidden; }
.va-preset[aria-pressed=true] { border-color: #dfb64c; }
.va-preset img { display: block; width: 100%; aspect-ratio: 9/14; object-fit: cover; }
.va-preset span { display: block; padding: 10px 7px; font-size: 12px; }
.va-preset small { display: block; color: #ada79e; font-size: 11px; margin-top: 5px; }
.va-preview { width: 100%; max-height: 315px; aspect-ratio: 9/16; object-fit: contain; border-radius: 8px; background: #090a0c; }
.va-field { display: block; color: #d0c8ba; font-size: 14px; margin: 16px 0 8px; }
.virtual-avatars input, .virtual-avatars textarea, .virtual-avatars select { display: block; box-sizing: border-box; width: 100%; padding: 12px; border: 1px solid #484135; border-radius: 8px; background: #0b0c0f; color: #f4eee1; font: inherit; }
.virtual-avatars textarea { min-height: 180px; resize: vertical; line-height: 1.7; }
.va-primary, .va-secondary { width: 100%; border-radius: 8px; border: 1px solid #dfb64c; padding: 11px 14px; margin-top: 12px; }
.va-primary { background: #dfb64c; color: #19150b; font-weight: 600 !important; }
.va-secondary { background: transparent; color: #e7c571; border-color: #625132; }
.virtual-avatars button:disabled { opacity: .55; cursor: default; }
.virtual-avatars button:focus-visible, .virtual-avatars input:focus-visible, .virtual-avatars textarea:focus-visible, .virtual-avatars select:focus-visible { outline: 2px solid #f0cf80; outline-offset: 3px; }
.va-spec { padding: 14px 0 4px; color: #aba397; font-size: 13px; }
.va-status { padding: 14px 0 0; color: #d8c28e; line-height: 1.6; min-height: 24px; }
.va-status.is-error { color: #efad9f; }
.va-more { margin-top: 12px; background: transparent; border: 0; color: #dfc890; }
.va-history { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid #302c25; margin-top: 22px; padding-top: 16px; }
.va-history:empty { display: none; }
.va-history button { border: 1px solid #4b4030; border-radius: 8px; padding: 8px 12px; color: #d6c5a3; background: transparent; font-size: 13px; }
.va-history .va-history-title { width: 100%; color: #b3aa9c; margin-bottom: 4px; font-size: 13px; }
@media (max-width: 1400px) { .va-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .virtual-avatars { padding: 18px; } .va-header { flex-direction: column; } .va-layout { grid-template-columns: 1fr; } .va-preview { max-height: 300px; } .va-preview-panel { border-top: 1px solid #302c25; padding-top: 18px; } }