/*video-localizer/index页面css*/
.allboxs {
background: #f5f7fa;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
padding:10px 0;
}
.copyright{position:fixed;bottom:0;left:0;width:100%;}
.card {
width: 1060px;
background: #ffffff;
border-radius: 1.5rem;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
padding: 20px;
}

h1 {
font-size: 1.5rem;
font-weight: 600;
color: #111;
margin-bottom: 0.3rem;
}

.sub {
color: #6b7280;
font-size: 0.9rem;
margin-bottom: 1.8rem;
}

/* 上传区 */
.drop-zone {
border: 2px dashed #d1d5db;
border-radius: 1rem;
padding: 2.5rem 1.5rem;
text-align: center;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
margin-bottom: 1.5rem;
}

.drop-zone:hover,
.drop-zone.drag {
border-color: #4f46e5;
background: #f9fafb;
}

.drop-zone svg {
width: 40px;
height: 40px;
color: #9ca3af;
margin-bottom: 0.8rem;
display: block;
margin-left: auto;
margin-right: auto;
}

.drop-zone p {
font-size: 0.95rem;
color: #374151;
margin-bottom: 0.3rem;
}

.drop-zone span {
font-size: 0.8rem;
color: #9ca3af;
}

/* 文件预览 */
.file-info {
display: none;
align-items: center;
justify-content: space-between;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 0.8rem;
padding: 0.9rem 1.2rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}

.file-info.show {
display: flex;
}

.file-info .meta {
display: flex;
align-items: center;
min-width: 0;
flex: 1;
}

.file-info .name {
color: #111;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.file-info .size {
color: #9ca3af;
font-size: 0.8rem;
margin-left: 0.8rem;
flex-shrink: 0;
}

.file-info button {
background: none;
border: none;
color: #9ca3af;
font-size: 1.2rem;
cursor: pointer;
padding: 0 0.2rem;
line-height: 1;
transition: color 0.15s;
flex-shrink: 0;
}

.file-info button:hover {
color: #ef4444;
}

/* 语言列表 —— 用 margin 替代 flex gap */
.lang-list {
margin-bottom: 1.8rem;
font-size: 0;
}

.lang-tag {
display: inline-block;
background: #f3f4f6;
color: #4b5563;
font-size: 0.8rem;
padding: 0.4rem 0.9rem;
border-radius: 2rem;
border: 1px solid #e5e7eb;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}

.lang-tag i {
font-style: normal;
color: #4f46e5;
margin: 0 0.15rem;
}

/* 按钮 */
.actions {
text-align: right;
margin-bottom: 0;
}

.actions .btn-wrap {
display: inline-block;
margin-left: 0.8rem;
}

button.primary {
background: #4f46e5;
color: #fff;
border: none;
padding: 0.7rem 1.8rem;
border-radius: 2rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
font-family: inherit;
}

button.primary:hover:not(:disabled) {
background: #4338ca;
}

button.primary:disabled {
background: #c7d2fe;
cursor: not-allowed;
}

button.ghost {
background: transparent;
border: 1px solid #d1d5db;
color: #374151;
padding: 0.7rem 1.5rem;
border-radius: 2rem;
font-size: 0.95rem;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
font-family: inherit;
}

button.ghost:hover {
background: #f9fafb;
border-color: #9ca3af;
}

/* 状态提示 */
.status {
display: none;
align-items: center;
margin-top: 1.5rem;
font-size: 0.9rem;
color: #4b5563;
padding: 0.8rem 1.2rem;
background: #f9fafb;
border-radius: 0.6rem;
}

.status.show {
display: flex;
}

.status .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #4f46e5;
flex-shrink: 0;
margin-right: 0.6rem;
}

.status .dot.pulse {
animation: pulse 1s infinite;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}

.hidden {
display: none;
}

@media (max-width: 550px) {
.card {
padding: 1.5rem;
}
.actions {
text-align: center;
}
.actions .btn-wrap {
display: block;
margin: 0.5rem 0;
}
button.primary, button.ghost {
width: 100%;
text-align: center;
}
}