/* ========== YixianPro DIY Extensions ==========
   按钮变体扩展 / 卡片变体扩展 / 通知横幅 / 下划线选项卡
   配合 DIY.md 自定义样式指南使用
   ============================================= */

/* ---- 按钮变体扩展 ---- */

/* 危险按钮 */
.yixian-btn--danger {
    background: var(--yixian-danger, #f87171);
    color: #fff;
    box-shadow: 0 8px 20px rgba(248,113,113,.25);
}
.yixian-btn--danger:hover {
    background: #ef4444;
    box-shadow: 0 12px 26px rgba(248,113,113,.38);
    transform: translateY(-1px);
}

/* 成功按钮 */
.yixian-btn--success {
    background: var(--yixian-success, #34d399);
    color: #064e3b;
    box-shadow: 0 8px 20px rgba(52,211,153,.25);
}
.yixian-btn--success:hover {
    background: #10b981;
    box-shadow: 0 12px 26px rgba(52,211,153,.38);
    transform: translateY(-1px);
}

/* 警告按钮 */
.yixian-btn--warn {
    background: var(--yixian-warn, #fbbf24);
    color: #78350f;
    box-shadow: 0 8px 20px rgba(251,191,36,.25);
}
.yixian-btn--warn:hover {
    background: #f59e0b;
    box-shadow: 0 12px 26px rgba(251,191,36,.38);
    transform: translateY(-1px);
}

/* 图标按钮 */
.yixian-btn--icon {
    width: 40px; height: 40px; padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
}
.yixian-btn--icon.yixian-btn--sm { width: 32px; height: 32px; }
.yixian-btn--icon.yixian-btn--lg { width: 48px; height: 48px; }

/* 文字按钮（无背景无边框） */
.yixian-btn--text {
    background: transparent;
    color: var(--yixian-text-soft, #5a6072);
    padding: 0 8px;
    height: auto;
    box-shadow: none;
}
.yixian-btn--text:hover {
    color: var(--yixian-primary, #ff7eb3);
    background: transparent;
    transform: none;
    box-shadow: none;
}

/* 加载态按钮 */
.yixian-btn.is-loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}
.yixian-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: yixian-spin .6s linear infinite;
}
@keyframes yixian-spin {
    to { transform: rotate(360deg); }
}

/* ---- 卡片变体扩展 ---- */

/* 水平卡片 */
.yixian-card--horizontal {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.yixian-card--horizontal .yixian-card__media {
    width: 240px; flex-shrink: 0;
    min-height: 100%;
}
.yixian-card--horizontal .yixian-card__body {
    flex: 1; display: flex; flex-direction: column;
}
@media (max-width: 640px) {
    .yixian-card--horizontal {
        flex-direction: column;
    }
    .yixian-card--horizontal .yixian-card__media {
        width: 100%; aspect-ratio: 16/10;
    }
}

/* 紧凑卡片 */
.yixian-card--compact .yixian-card__body {
    padding: var(--yixian-sp-3, 12px);
}

/* 无边框卡片 */
.yixian-card--borderless {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}
.yixian-card--borderless:hover {
    background: var(--yixian-bg-soft, #f3f4fb);
    border-radius: var(--yixian-r-lg, 20px);
    transform: none;
    box-shadow: none;
}

/* 高亮卡片（品牌色边框辉光） */
.yixian-card--highlight {
    border-color: var(--yixian-primary, #ff7eb3);
    box-shadow: var(--yixian-shadow-glow);
}

/* ---- 通知横幅 Banner ---- */
.yixian-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--yixian-sp-3, 12px);
    padding: var(--yixian-sp-4, 16px);
    border-radius: var(--yixian-r-md, 14px);
    font-size: var(--yixian-fs-sm, 13px);
    background: var(--yixian-bg-card, #fff);
    border: 1px solid var(--yixian-border-soft, #f3f3f9);
    box-shadow: var(--yixian-shadow-1);
    animation: yixianBannerSlideIn var(--yixian-dur-3, 360ms) var(--yixian-ease-out, cubic-bezier(.22,1,.36,1));
    margin-bottom: var(--yixian-sp-4, 16px);
    line-height: 1.5;
}
@keyframes yixianBannerSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.yixian-banner--success {
    background: color-mix(in srgb, var(--yixian-success, #34d399) 8%, var(--yixian-bg-card, #fff));
    border-color: var(--yixian-success, #34d399);
}
.yixian-banner--warn {
    background: color-mix(in srgb, var(--yixian-warn, #fbbf24) 10%, var(--yixian-bg-card, #fff));
    border-color: var(--yixian-warn, #fbbf24);
}
.yixian-banner--danger {
    background: color-mix(in srgb, var(--yixian-danger, #f87171) 8%, var(--yixian-bg-card, #fff));
    border-color: var(--yixian-danger, #f87171);
}
.yixian-banner--info {
    background: color-mix(in srgb, var(--yixian-link, #60a5fa) 8%, var(--yixian-bg-card, #fff));
    border-color: var(--yixian-link, #60a5fa);
}

.yixian-banner__icon {
    font-size: var(--yixian-fs-xl, 20px);
    flex-shrink: 0;
    line-height: 1;
}
.yixian-banner__content { flex: 1; min-width: 0; }
.yixian-banner__title {
    font-weight: 700; font-size: var(--yixian-fs-md, 14px);
    margin-bottom: 2px; color: var(--yixian-text, #1f2330);
}
.yixian-banner__close {
    padding: 4px 8px;
    border-radius: var(--yixian-r-xs, 6px);
    color: var(--yixian-text-mute, #9aa0b4);
    cursor: pointer;
    font-size: var(--yixian-fs-lg, 16px);
    line-height: 1;
    flex-shrink: 0;
    transition: all var(--yixian-dur-1, 120ms);
    background: none;
    border: none;
}
.yixian-banner__close:hover {
    background: var(--yixian-bg-soft, #f3f4fb);
    color: var(--yixian-text, #1f2330);
}

/* 暗色模式 Banner */
[data-theme="dark"] .yixian-banner--success {
    background: color-mix(in srgb, var(--yixian-success, #34d399) 14%, var(--yixian-bg-card, #181b25));
}
[data-theme="dark"] .yixian-banner--warn {
    background: color-mix(in srgb, var(--yixian-warn, #fbbf24) 16%, var(--yixian-bg-card, #181b25));
}
[data-theme="dark"] .yixian-banner--danger {
    background: color-mix(in srgb, var(--yixian-danger, #f87171) 14%, var(--yixian-bg-card, #181b25));
}
[data-theme="dark"] .yixian-banner--info {
    background: color-mix(in srgb, var(--yixian-link, #60a5fa) 14%, var(--yixian-bg-card, #181b25));
}

/* ---- 下划线式选项卡 ---- */
.yixian-tabs-underline {
    display: flex; gap: 0;
    border-bottom: 2px solid var(--yixian-border-soft, #f3f3f9);
    margin-bottom: var(--yixian-sp-5, 20px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.yixian-tabs-underline button,
.yixian-tabs-underline a {
    padding: var(--yixian-sp-3, 12px) var(--yixian-sp-5, 20px);
    background: transparent;
    color: var(--yixian-text-mute, #9aa0b4);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: var(--yixian-fs-md, 14px);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--yixian-dur-2, 220ms),
                border-color var(--yixian-dur-2, 220ms);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--yixian-sp-1, 4px);
}
.yixian-tabs-underline button:hover,
.yixian-tabs-underline a:hover {
    color: var(--yixian-text, #1f2330);
}
.yixian-tabs-underline button.is-active,
.yixian-tabs-underline a.is-active {
    color: var(--yixian-primary, #ff7eb3);
    border-bottom-color: var(--yixian-primary, #ff7eb3);
    font-weight: 600;
}

/* ---- 占位图增强 ---- */
.yixian-placeholder {
    background: var(--yixian-bg-soft, #f3f4fb);
    border-radius: var(--yixian-r-md, 14px);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: var(--yixian-sp-2, 8px);
    color: var(--yixian-text-mute, #9aa0b4);
    font-size: var(--yixian-fs-sm, 13px);
}
.yixian-placeholder svg {
    width: 48px; height: 48px;
    color: var(--yixian-border, #ececf3);
}