:root {
  --primary-color: #3a6ea5;
  --secondary-color: #f0f7ff;
}

.navbar {
  background: linear-gradient(135deg, var(--primary-color), #2c5282);
}

.timeline { position: relative; padding-left: 3rem; }
.timeline::before { content: ''; position: absolute; left: 1rem; top: 0; bottom: 0; width: 2px; background: #dee2e6; }
.timeline-item { position: relative; margin-bottom: 2rem; }
.timeline-item::before { content: ''; position: absolute; left: -2.5rem; top: 0.5rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; border: 3px solid #dee2e6; }
.timeline-item.completed::before { border-color: #198754; background: #198754; }
.timeline-item.processing::before { border-color: #ffc107; background: #ffc107; animation: pulse 1.5s infinite; }
.timeline-item.failed::before { border-color: #dc3545; background: #dc3545; }

@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }

.content-box { background:#f8f9fa; border-left:4px solid var(--primary-color); padding:1rem; border-radius:0 0.375rem 0.375rem 0; }
.stt-fulltext { height:300px; overflow-y:auto; white-space:pre-wrap; font-family:'Consolas','Monaco','Lucida Console', monospace; font-size:14px; line-height:1.5; }

.info-card { background: linear-gradient(135deg, var(--secondary-color), #e6f3ff); border:none; }

/* STT 服务选择 */
.service-option { cursor:pointer; transition:all .3s ease; border:2px solid transparent; }
.service-option:hover { box-shadow:0 4px 15px rgba(0,0,0,.1); transform: translateY(-2px); }
.service-option.selected { border-color: var(--primary-color); box-shadow: 0 4px 20px rgba(58,110,165,.3); }
.service-option .form-check-input:checked + .form-check-label { color: var(--primary-color); font-weight:600; }

/* STT 状态卡片 */
.stt-status-card { border-left:5px solid #6c757d; transition: all .3s ease; }
.stt-status-card.status-processing { border-left-color:#ffc107; background:linear-gradient(135deg, #fff8e1, #ffecb3); animation: statusPulse 2s infinite; }
.stt-status-card.status-completed { border-left-color:#198754; background:linear-gradient(135deg, #e8f5e8, #d4edda); }
.stt-status-card.status-failed { border-left-color:#dc3545; background:linear-gradient(135deg, #ffeaea, #f8d7da); }
.stt-status-card.status-pending { border-left-color:#6c757d; background:linear-gradient(135deg, #f8f9fa, #e9ecef); }
@keyframes statusPulse { 0%,100%{ box-shadow:0 0 10px rgba(255,193,7,.3); transform:scale(1)} 50%{ box-shadow:0 0 20px rgba(255,193,7,.6); transform:scale(1.01)} }

.stt-status-indicator { display:inline-flex; align-items:center; padding:8px 16px; border-radius:25px; font-weight:600; font-size:.9rem; margin-bottom:15px; }
.stt-status-indicator.processing { background:linear-gradient(135deg,#fff3cd,#ffeaa7); color:#856404; border:2px solid #ffc107; animation: indicatorPulse 1.5s infinite; }
.stt-status-indicator.completed { background:linear-gradient(135deg,#d1eddf,#b3d9c4); color:#155724; border:2px solid #28a745; }
.stt-status-indicator.failed { background:linear-gradient(135deg,#f5c6cb,#f1b0b7); color:#721c24; border:2px solid #dc3545; }
.stt-status-indicator.pending { background:linear-gradient(135deg,#e2e3e5,#d1d3d7); color:#383d41; border:2px solid #6c757d; }
@keyframes indicatorPulse { 0%,100%{ box-shadow:0 0 15px rgba(255,193,7,.4)} 50%{ box-shadow:0 0 25px rgba(255,193,7,.7)} }

/* 标签自动联想（旧） */
.tag-suggestions { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #dee2e6; border-top:none; border-radius:0 0 .375rem .375rem; box-shadow:0 2px 10px rgba(0,0,0,.1); max-height:200px; overflow-y:auto; z-index:1000; display:none; }
.tag-suggestion-item { padding:8px 12px; cursor:pointer; border-bottom:1px solid #f8f9fa; transition: background-color .2s; }
.tag-suggestion-item:hover, .tag-suggestion-item.active { background-color:#e3f2fd; }
.tag-suggestion-item:last-child { border-bottom:none; }
.tag-suggestion-item .suggestion-text { font-weight:500; }
.tag-suggestion-item .suggestion-count { font-size:.85em; color:#6c757d; float:right; }

/* 标签输入容器 */
.tags-input-container { position: relative; }
.tags-suggestions { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #ddd; border-top:none; border-radius:0 0 4px 4px; max-height:200px; overflow-y:auto; z-index:1000; box-shadow:0 2px 4px rgba(0,0,0,.1); }
.tags-suggestion-item { padding:8px 12px; cursor:pointer; border-bottom:1px solid #f0f0f0; }
.tags-suggestion-item:hover, .tags-suggestion-item.active { background-color:#f8f9fa; }
.tags-suggestion-item:last-child { border-bottom:none; }

/* 标签徽章 */
.tag-item { display:inline-block; margin:2px 4px 2px 0; }
.tag-item .badge { font-size:12px; padding:4px 8px; }
.tag-item .remove-tag { background:none; border:none; color:rgba(255,255,255,.7); margin-left:4px; cursor:pointer; font-size:10px; }
.tag-item .remove-tag:hover { color:#fff; }