/**
 * GST combiner styles. Extends the shared .it- design language from
 * frontend.css. Only styles GST-specific pieces (multi-file list, hero
 * accent, dropzone label) so the two tools stay visually consistent.
 */

.it-hero--gst .it-hero__title {
    /* Slightly different accent hue so users can distinguish the two tools. */
}

.it-hero--gst .it-hero__accent {
    color: #059669;
}

.it-gst-files {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.it-gst-file {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    font-size: 14px;
}

.it-gst-file__name {
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.it-gst-file__size {
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.it-gst-file__status {
    color: #059669;
    font-weight: 600;
}

.it-gst-file__spin {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #d1d5db;
    border-top-color: #059669;
    border-radius: 50%;
    animation: it-gst-spin 0.7s linear infinite;
}

@keyframes it-gst-spin {
    to { transform: rotate(360deg); }
}

.it-gst-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.it-dropzone.is-dragover {
    border-color: #059669;
    background: rgba(16, 185, 129, 0.04);
}