/* =============================================
   外挂标签样式库 (tags.css)  完整版
   类名简短，直接用于管理员留言的 HTML
   使用方法：<div class="note">...</div>
   ============================================= */

/* ---------- 基础提示框 ---------- */
.note, .warn, .tip, .danger, .info {
    padding: 14px 18px;
    margin: 12px 0;
    border-radius: 8px;
    border-left: 5px solid;
    background: var(--reply-bg, #f8f9fa);
    color: var(--text, #333);
}
.note { border-color: #3498db; background: #e8f4fd; }
.warn { border-color: #f39c12; background: #fff8e1; }
.tip  { border-color: #2ecc71; background: #e8f8f0; }
.danger { border-color: #e74c3c; background: #fde8e8; }
.info { border-color: #9b59b6; background: #f3e8f8; }

/* ---------- 内联徽章 ---------- */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}
.badge-blue { background: #3498db; }
.badge-green { background: #2ecc71; }
.badge-red { background: #e74c3c; }
.badge-yellow { background: #f1c40f; color: #333; }
.badge-purple { background: #9b59b6; }

/* ---------- 按钮 ---------- */
.btn-tag {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.2s;
}
.btn-tag.primary { background: #4361ee; color: #fff; }
.btn-tag.primary:hover { background: #3a56d4; }
.btn-tag.success { background: #2ecc71; color: #fff; }
.btn-tag.success:hover { background: #27ae60; }
.btn-tag.danger { background: #e74c3c; color: #fff; }
.btn-tag.danger:hover { background: #c0392b; }
.btn-tag.outline { background: transparent; border: 2px solid #4361ee; color: #4361ee; }
.btn-tag.outline:hover { background: #4361ee; color: #fff; }

/* ---------- 高亮文字 ---------- */
.hl { background: #fff3cd; padding: 0 4px; border-radius: 3px; }
.hl.blue { background: #d4e6ff; }
.hl.green { background: #d5f5e3; }
.hl.red { background: #fadbd8; }

/* ---------- 代码块（增强） ---------- */
.code-block {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 14px 18px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    margin: 12px 0;
}
.code-block .comment { color: #6a9955; }
.code-block .string { color: #ce9178; }
.code-block .keyword { color: #569cd6; }

/* ---------- 卡片 ---------- */
.card-tag {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 16px 20px;
    margin: 12px 0;
    border: 1px solid var(--border, #e9ecef);
}
.card-tag.shadow { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

/* ---------- 网格/弹性布局 ---------- */
.flex { display: flex; gap: 12px; flex-wrap: wrap; }
.flex-center { display: flex; align-items: center; justify-content: center; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ---------- 间距工具 ---------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }

/* ---------- 对齐 ---------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* ---------- 分割线 ---------- */
.divider {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, var(--border, #ddd), transparent);
    margin: 20px 0;
}
.divider.dashed { height: 0; border-top: 2px dashed var(--border, #ddd); background: none; }

/* ---------- 进度条 ---------- */
.progress {
    background: var(--border, #e9ecef);
    border-radius: 20px;
    height: 10px;
    overflow: hidden;
    margin: 8px 0;
}
.progress .bar {
    height: 100%;
    border-radius: 20px;
    background: #4361ee;
    width: 0%;
}
.progress .bar.green { background: #2ecc71; }
.progress .bar.yellow { background: #f1c40f; }
.progress .bar.red { background: #e74c3c; }

/* ---------- 图片圆角 ---------- */
.img-round { border-radius: 50%; }
.img-radius { border-radius: 12px; }

/* ========== 新增标签 ========== */

/* ---------- 折叠面板 ---------- */
.accordion {
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    margin: 12px 0;
    overflow: hidden;
}
.accordion summary {
    padding: 12px 16px;
    font-weight: 600;
    cursor: pointer;
    background: var(--reply-bg, #f8f9fa);
    transition: 0.2s;
    user-select: none;
}
.accordion summary:hover {
    background: var(--border, #e9ecef);
}
.accordion .body {
    padding: 12px 16px;
    background: var(--card-bg, #fff);
}

/* ---------- 时间线 ---------- */
.timeline {
    padding-left: 24px;
    border-left: 3px solid var(--border, #ddd);
    margin: 12px 0;
}
.timeline .item {
    margin-bottom: 16px;
    padding-left: 16px;
    position: relative;
}
.timeline .item::before {
    content: '';
    position: absolute;
    left: -27px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4361ee;
    border: 2px solid var(--card-bg, #fff);
}
.timeline .item .time {
    font-size: 0.75rem;
    color: var(--text-secondary, #888);
    display: block;
}

/* ---------- 状态标签 ---------- */
.status {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
}
.status.success { background: #2ecc71; }
.status.warning { background: #f39c12; }
.status.error { background: #e74c3c; }
.status.info { background: #3498db; }
.status.pending { background: #95a5a6; }

/* ---------- 进度环 ---------- */
.ring {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(#4361ee var(--p, 0%), var(--border, #e9ecef) var(--p, 0%));
    position: relative;
    margin: 8px;
}
.ring::after {
    content: attr(data-label);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    font-weight: 600;
}
.ring.green { background: conic-gradient(#2ecc71 var(--p, 0%), var(--border, #e9ecef) var(--p, 0%)); }
.ring.red { background: conic-gradient(#e74c3c var(--p, 0%), var(--border, #e9ecef) var(--p, 0%)); }

/* ---------- 步骤条 ---------- */
.steps {
    display: flex;
    gap: 8px;
    margin: 12px 0;
    counter-reset: step;
}
.steps .step {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    background: var(--reply-bg, #f8f9fa);
    border-radius: 6px;
    font-size: 0.8rem;
    position: relative;
}
.steps .step::before {
    counter-increment: step;
    content: counter(step);
    display: block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 50%;
    background: var(--border, #ddd);
    color: #fff;
    margin: 0 auto 4px;
    font-weight: 600;
}
.steps .step.active::before {
    background: #4361ee;
}
.steps .step.done::before {
    background: #2ecc71;
}

/* ---------- 引用框 ---------- */
.quote {
    padding: 16px 20px;
    margin: 12px 0;
    border-radius: 8px;
    background: var(--reply-bg, #f8f9fa);
    border-left: 5px solid #4361ee;
    font-style: italic;
    position: relative;
}
.quote::before {
    content: '\201C';
    font-size: 2.5rem;
    color: var(--text-secondary, #aaa);
    position: absolute;
    top: -6px;
    left: 10px;
}
.quote .author {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-weight: 600;
    color: var(--text-secondary, #888);
}

/* ---------- 标签云 ---------- */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}
.tags .tag {
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--reply-bg, #f0f0f0);
    color: var(--text, #333);
    font-size: 0.75rem;
    transition: 0.2s;
}
.tags .tag:hover {
    background: #4361ee;
    color: #fff;
    transform: scale(1.05);
}

/* ---------- 工具提示 ---------- */
.tooltip {
    position: relative;
    cursor: help;
    border-bottom: 1px dashed var(--text-secondary, #888);
}
.tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
}
.tooltip:hover::after {
    opacity: 1;
}

/* ---------- 增强进度条 ---------- */
.progress-bar {
    width: 100%;
    height: 20px;
    background: var(--border, #e9ecef);
    border-radius: 20px;
    overflow: hidden;
    margin: 8px 0;
    position: relative;
}
.progress-bar .fill {
    height: 100%;
    border-radius: 20px;
    background: #4361ee;
    transition: width 0.6s ease;
}
.progress-bar .fill.green { background: #2ecc71; }
.progress-bar .fill.yellow { background: #f1c40f; }
.progress-bar .fill.red { background: #e74c3c; }
.progress-bar .label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    line-height: 20px;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/* ---------- 波浪分割线 ---------- */
.wave-divider {
    text-align: center;
    margin: 24px 0;
    font-size: 1.2rem;
    color: var(--text-secondary, #aaa);
    letter-spacing: 8px;
    user-select: none;
}

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .flex { flex-direction: column; }
}