/**
 * 微草AI元数据查看器 - 前台样式（卡片式）
 */
.amv-container { max-width: 900px; margin: 0 auto; padding: 32px 24px; }
.amv-header { text-align: center; margin-bottom: 28px; }
.amv-title { font-size: 22px; font-weight: 600; margin: 0 0 8px 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.amv-title-icon { font-size: 24px; }
.amv-subtitle { font-size: 13px; color: var(--muted-2-color, #999); margin: 0; }

.amv-preview { text-align: center; margin-bottom: 20px; }
.amv-preview-box { display: inline-block; max-width: 100%; max-height: 360px; border-radius: 4px; overflow: hidden; border: 2px solid #18a058; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.amv-preview-img { display: block; max-width: 100%; max-height: 360px; object-fit: contain; }

.amv-upload-area { margin-bottom: 20px; }
.amv-dropzone { border: 2px dashed #18a058; border-radius: 4px; padding: 40px 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.amv-dropzone:hover, .amv-dropzone.amv-dragover { border-color: var(--focus-color, #18a058); background: rgba(24,160,88,0.04); }
.amv-upload-icon { color: var(--muted-color, #777); margin-bottom: 12px; }
.amv-drop-text { font-size: 15px; color: var(--text-color, #333); margin: 0 0 8px 0; }
.amv-drop-text em { color: var(--focus-color, #18a058); font-style: normal; }
.amv-drop-hint { font-size: 12px; color: var(--muted-2-color, #999); margin: 0; }

.amv-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: var(--muted-2-color, #999); font-size: 14px; }
.amv-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--muted-border-color, rgba(0,0,0,0.1)); border-top-color: var(--focus-color, #18a058); border-radius: 50%; animation: amv-spin 0.8s linear infinite; }
@keyframes amv-spin { to { transform: rotate(360deg); } }

/* ====== 卡片 ====== */
.amv-cards { display: grid; gap: 12px; }
.amv-card { background: var(--main-bg-color, #fff); border-radius: 4px; border: 2px solid #eaeaec; overflow: hidden; }
.amv-card-title { font-size: 13px; font-weight: 600; margin: 0; padding: 10px 16px; background: rgba(0,0,0,0.02); border-bottom: 1px solid var(--muted-border-color, rgba(0,0,0,0.04)); color: var(--text-color, #333); }
.amv-card-body { padding: 12px 16px; }

.amv-kv { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--muted-border-color, rgba(0,0,0,0.03)); font-size: 13px; }
.amv-kv:last-child { border-bottom: none; }
.amv-kv-key { min-width: 80px; font-weight: 500; color: var(--muted-color, #555); white-space: nowrap; flex-shrink: 0; }
.amv-kv-val { color: var(--text-color, #333); word-break: break-word; }

.amv-badge { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; color: #fff; background: var(--focus-color, #18a058); }

.amv-lora-tag { display: inline-block; padding: 2px 8px; margin: 2px 4px; border-radius: 4px; font-size: 12px; background: rgba(24,160,88,0.1); color: var(--focus-color, #18a058); border: 1px solid rgba(24,160,88,0.2); }

.amv-prompt-block { font-family: 'Maple Mono CN', 'Consolas', 'Courier New', monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text-color, #333); max-height: 200px; overflow: auto; padding: 8px; background: rgba(0,0,0,0.02); border-radius: 4px; }

.amv-wf-info { font-size: 13px; color: var(--muted-color, #555); margin-bottom: 8px; }
.amv-details summary { cursor: pointer; font-size: 13px; color: var(--focus-color, #18a058); padding: 4px 0; }
.amv-json-pre { font-family: 'Maple Mono CN', 'Consolas', 'Courier New', monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; max-height: 400px; overflow: auto; margin: 0; padding: 12px; background: rgba(0,0,0,0.02); border-radius: 6px; border: 1px solid var(--muted-border-color, rgba(0,0,0,0.04)); }

.amv-no-meta-hint { color: var(--muted-3-color, #b1b1b1); font-size: 12px; margin: 0; }
.amv-error { color: #f53f3f; font-size: 14px; }

.amv-copy-row { text-align: right; padding: 8px 0; }
.amv-copy-btn { display: inline-block; padding: 6px 16px; border: 2px solid var(--muted-border-color, rgba(0,0,0,0.12)); border-radius: 4px; background: transparent; cursor: pointer; font-size: 13px; color: var(--muted-color, #555); transition: all 0.2s; }
.amv-copy-btn:hover { border-color: var(--focus-color, #18a058); color: var(--focus-color, #18a058); }

/* ====== 底部 ====== */
.amv-footer { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--muted-border-color, rgba(0,0,0,0.03)); text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; }
.amv-footer-version { font-size: 12px; color: var(--muted-3-color, #b1b1b1); margin: 0; font-weight: 500; }
.amv-footer-note { font-size: 12px; color: var(--muted-2-color, #999); margin: 0; }
.amv-footer-credit { font-size: 12px; color: var(--muted-3-color, #b1b1b1); margin: 0; }
.amv-footer-credit a { color: var(--muted-color, #777); text-decoration: none; transition: color 0.2s; }
.amv-footer-credit a:hover { color: var(--focus-color, #f04494); }

/* ====== 重新选择按钮 ====== */
.amv-reset-btn {
    display: block !important;
    margin: 20px auto 0 !important;
    padding: 12px 36px !important;
    border: 2px solid #18a058 !important;
    border-radius: 4px !important;
    background: transparent !important;
    cursor: pointer !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #18a058 !important;
    transition: all 0.2s;
}
.amv-reset-btn:hover {
    background: #18a058 !important;
    color: #fff !important;
    border-color: #18a058 !important;
}

@media (max-width: 640px) { .amv-container { padding: 20px 12px; } .amv-title { font-size: 18px; } .amv-kv-key { width: 60px; font-size: 12px; } .amv-dropzone { padding: 28px 16px; } }