.vfa-page { max-width: 1040px; }
.vfa-panel { background: #fff; border: 1px solid #d9e6e2; border-radius: 18px; padding: clamp(1rem, 3vw, 1.5rem); margin-block: 1.25rem; min-width: 0; }
.vfa-panel h2, .vfa-panel h3 { margin-top: 0; }
.vfa-drop { border: 2px dashed #8cbeb2; text-align: center; }
.vfa-drop.is-dragover { background: #eef9f5; border-color: #146b63; }
.vfa-drop label { display: block; font-weight: 700; font-size: 1.15rem; margin-bottom: .5rem; }
.vfa-drop input[type="file"] { display: block; max-width: 100%; margin: 1rem auto; }
.vfa-drop input[type="file"]:focus-visible, .vfa-actions button:focus-visible { outline: 3px solid #0a5fbd; outline-offset: 3px; }
.vfa-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-block: 1rem; }
.vfa-note { color: #485d58; font-size: .93rem; }
.vfa-error { color: #a02022; font-weight: 700; }
.vfa-status { min-height: 1.5em; font-weight: 700; }
.vfa-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.vfa-summary > div { background: #eff8f5; border-radius: 12px; padding: .8rem; min-width: 0; }
.vfa-summary dt { font-size: .88rem; color: #4b5d59; }
.vfa-summary dd { margin: .2rem 0 0; font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 700; overflow-wrap: anywhere; }
.vfa-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.25rem; }
.vfa-details section, .vfa-capacity { min-width: 0; }
.vfa-details dl, .vfa-capacity dl { margin: 0; }
.vfa-details dl > div, .vfa-capacity dl > div { display: grid; grid-template-columns: minmax(8rem, 42%) minmax(0, 1fr); gap: .5rem; border-bottom: 1px solid #e3ece9; padding: .45rem 0; }
.vfa-details dt, .vfa-capacity dt { color: #475c55; }
.vfa-details dd, .vfa-capacity dd { margin: 0; overflow-wrap: anywhere; }
.vfa-capacity { margin-top: 1.2rem; }
@media (max-width: 768px) { .vfa-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vfa-details { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .vfa-summary { grid-template-columns: 1fr; } .vfa-details dl > div, .vfa-capacity dl > div { grid-template-columns: 1fr; gap: .1rem; } }
