/**
 * 超链接卡片样式
 * 4种卡片风格，跟随主题 Dark/Light 模式
 * 全部使用 !important 防止主题样式覆盖
 */

:root {
    --lc-bg: #ffffff;
    --lc-border: #e8e8e8;
    --lc-title: #1a1a1a;
    --lc-desc: #666666;
    --lc-site: #999999;
    --lc-shadow: 0 1px 4px rgba(0,0,0,0.06);
    --lc-shadow-hover: 0 4px 16px rgba(0,0,0,0.10);
    --lc-img-bg: #f5f5f5;
    --lc-radius: 12px;
    --lc-grid-bg: #f6f8fa;
    --lc-grid-border: #d0d7de;
    --lc-grid-title: #1f2328;
    --lc-grid-desc: #656d76;
    --lc-grid-site: #8c959f;
    --lc-small-bg: #f6f8fa;
    --lc-small-border: #d0d7de;
    --lc-small-title: #1f2328;
    --lc-small-site: #656d76;
}

@media (prefers-color-scheme: dark) {
    :root {
        --lc-bg: #161b22;
        --lc-border: #30363d;
        --lc-title: #e6edf3;
        --lc-desc: #8b949e;
        --lc-site: #6e7681;
        --lc-shadow: 0 1px 4px rgba(0,0,0,0.3);
        --lc-shadow-hover: 0 4px 16px rgba(0,0,0,0.5);
        --lc-img-bg: #0d1117;
        --lc-radius: 12px;
        --lc-grid-bg: #161b22;
        --lc-grid-border: #30363d;
        --lc-grid-title: #e6edf3;
        --lc-grid-desc: #8b949e;
        --lc-grid-site: #6e7681;
        --lc-small-bg: #1c2128;
        --lc-small-border: #30363d;
        --lc-small-title: #e6edf3;
        --lc-small-site: #6e7681;
    }
}

/* ========== 基础 ========== */
.link-card {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    background: var(--lc-bg) !important;
}

.link-card__link {
    text-decoration: none !important;
    color: inherit !important;
}

/* ========== 块级-格子卡片 — 图二风格：图片撑满+文字叠加 ========== */
.link-card--grid {
    display: block !important;
    border: 1px solid var(--lc-grid-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 12px 0 !important;
    position: relative !important;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
}

.link-card--grid:hover {
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    transform: translateY(-2px) !important;
}

.link-card--grid .link-card__link {
    display: block !important;
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.link-card--grid .lc-grid-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 0 !important;
    transition: background 0.3s !important;
}

.link-card--grid:hover .lc-grid-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.2) 100%) !important;
}

.link-card--grid .lc-grid-body {
    padding: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.link-card--grid .lc-grid-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}

.link-card--grid .lc-grid-favicon img,
.link-card--grid .lc-grid-favicon svg {
    width: 14px !important;
    height: 14px !important;
}

.link-card--grid .lc-grid-domain {
    font-size: 12px !important;
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500 !important;
}

.link-card--grid .lc-grid-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    margin: 0 0 6px 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

.link-card--grid:hover .lc-grid-title {
    color: #ffffff !important;
}

.link-card--grid .lc-grid-desc {
    font-size: 13px !important;
    color: rgba(255,255,255,0.8) !important;
    line-height: 1.6 !important;
    margin: 0 0 8px 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.link-card--grid .lc-grid-url {
    font-size: 11px !important;
    color: rgba(255,255,255,0.6) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

@media (max-width: 480px) {
    .link-card--grid .link-card__link { aspect-ratio: 4 / 3 !important; }
    .link-card--grid .lc-grid-body { padding: 14px !important; }
    .link-card--grid .lc-grid-title { font-size: 14px !important; }
}
    }
}

/* ========== 行内卡片 ========== */
.link-card--inline {
    display: flex !important;
    align-items: stretch !important;
    border: 1px solid var(--lc-border) !important;
    border-radius: var(--lc-radius) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    margin: 8px 0 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.link-card--inline .link-card__link {
    display: flex !important;
    align-items: stretch !important;
    text-decoration: none !important;
    color: inherit !important;
}

.link-card--inline:hover {
    border-color: #8c959f !important;
    box-shadow: var(--lc-shadow-hover) !important;
}

.link-card--inline .lc-inline-img {
    width: 120px !important;
    height: 80px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    background: var(--lc-img-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.link-card--inline .lc-inline-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.link-card--inline .lc-inline-img svg {
    width: 32px !important;
    height: 32px !important;
    color: var(--lc-site) !important;
}

.link-card--inline .lc-inline-body {
    flex: 1 !important;
    padding: 10px 14px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
}

.link-card--inline .lc-inline-meta {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.link-card--inline .lc-inline-favicon img,
.link-card--inline .lc-inline-favicon svg {
    width: 14px !important;
    height: 14px !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
}

.link-card--inline .lc-inline-domain {
    font-size: 11px !important;
    color: var(--lc-site) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.link-card--inline .lc-inline-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--lc-title) !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.link-card--inline .lc-inline-url {
    font-size: 10px !important;
    color: var(--lc-site) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 400px) {
    .link-card--inline .lc-inline-img { width: 80px !important; height: 60px !important; }
    .link-card--inline .lc-inline-title { font-size: 12px !important; }
}

/* ========== 块级-小卡片 ========== */
.link-card--small {
    background: var(--lc-small-bg) !important;
    border: 1px solid var(--lc-small-border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 8px 0 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.link-card--small:hover {
    border-color: #8c959f !important;
    box-shadow: var(--lc-shadow-hover) !important;
}

.link-card--small .link-card__link {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    gap: 8px !important;
}

.link-card--small .lc-small-favicon img,
.link-card--small .lc-small-favicon svg {
    width: 16px !important;
    height: 16px !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
}

.link-card--small .lc-small-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--lc-small-title) !important;
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.link-card--small .lc-small-domain {
    font-size: 11px !important;
    color: var(--lc-small-site) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.link-card--small .lc-small-arrow {
    color: var(--lc-small-site) !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s !important;
}

.link-card--small:hover .lc-small-arrow {
    transform: translateX(3px) !important;
}

.link-card--small:hover .lc-small-title {
    color: var(--lc-title) !important;
}

/* ========== 块级-标准卡片 ========== */
.link-card--regular {
    border: 1px solid var(--lc-border) !important;
    border-radius: var(--lc-radius) !important;
    box-shadow: var(--lc-shadow) !important;
    overflow: hidden !important;
    margin: 12px 0 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.link-card--regular:hover {
    border-color: #8c959f !important;
    box-shadow: var(--lc-shadow-hover) !important;
}

.link-card--regular .link-card__link {
    display: flex !important;
    flex-direction: column !important;
}

.link-card--regular .lc-regular-img {
    width: 100% !important;
    height: 140px !important;
    overflow: hidden !important;
    background: var(--lc-img-bg) !important;
}

.link-card--regular .lc-regular-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s !important;
}

.link-card--regular:hover .lc-regular-img img {
    transform: scale(1.04) !important;
}

.link-card--regular .lc-regular-img--empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--lc-img-bg) !important;
    color: var(--lc-site) !important;
}

.link-card--regular .lc-regular-img--empty svg {
    width: 48px !important;
    height: 48px !important;
}

.link-card--regular .lc-regular-body {
    padding: 10px 14px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.link-card--regular .lc-regular-meta {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.link-card--regular .lc-regular-favicon img,
.link-card--regular .lc-regular-favicon svg {
    width: 14px !important;
    height: 14px !important;
}

.link-card--regular .lc-regular-domain {
    font-size: 11px !important;
    color: var(--lc-site) !important;
}

.link-card--regular .lc-regular-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--lc-title) !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin: 0 !important;
}

.link-card--regular:hover .lc-regular-title {
    color: #2563eb !important;
}

.link-card--regular .lc-regular-desc {
    font-size: 13px !important;
    color: var(--lc-desc) !important;
    line-height: 1.6 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    margin: 0 !important;
}

.link-card--regular .lc-regular-url {
    font-size: 11px !important;
    color: var(--lc-site) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ========== 错误状态 ========== */
.link-card--error {
    display: block !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    color: #dc2626 !important;
    margin: 8px 0 !important;
}

@media (prefers-color-scheme: dark) {
    .link-card--error {
        background: #2d1515 !important;
        border-color: #7f1d1d !important;
        color: #fca5a5 !important;
    }
}

/* ========== 调试信息 ========== */
.link-card-debug {
    margin-top: 6px !important;
    font-size: 11px !important;
    color: var(--lc-site) !important;
}

.link-card-debug summary {
    cursor: pointer !important;
    user-select: none !important;
}

.link-card-debug pre {
    margin: 4px 0 0 !important;
    padding: 8px !important;
    background: var(--lc-bg) !important;
    border: 1px solid var(--lc-border) !important;
    border-radius: 4px !important;
    overflow: auto !important;
    max-height: 200px !important;
    font-size: 11px !important;
    color: var(--lc-desc) !important;
}