/* ============================================================
 * style.css — 智屏视界 OTT 效果广告平台
 * 组件增强层：在 theme.css 设计 token 基础上增强组件样式
 * 目标：专业克制可信，参考巨量/腾讯广告后台风格
 * ============================================================ */

/* ---- 全局 ---- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ---- 导航栏样式已移除（2026-08-09 全站统一）----
   原有 .navbar / .navbar-dark / .navbar-nav 整段样式（含深蓝底
   #16233a !important 和一整套白字兜底规则）属旧结构遗留死代码：
   全站模板已改用 <header class="app-topbar">，navbar-dark、
   class="navbar"、navbar-nav 的使用数均为 0，仅 base.html 保留
   一处 .navbar-brand。
   这段深蓝 !important 在 app.css 之后加载，是此前顶栏无法跟随
   客厅之光的直接原因。顶栏样式现统一由 app.css 的 .app-topbar
   系列负责（token 来自 theme.css），此处不再干预。 */

/* ---- Stat Card（Dashboard数据卡片） ---- */
.stat-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none !important;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(var(--lr-shadow-rgb, 120, 90, 40), 0.10);
}
.stat-card-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--tblr-secondary-color, #8C8375);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}
.stat-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tblr-body-color, #2B2620);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}
.stat-card-sub {
    font-size: 0.8rem;
    color: var(--tblr-tertiary-color, #A89E8E);
}
.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-card-icon svg {
    width: 22px;
    height: 22px;
}
.stat-card-icon.bg-primary-lt { color: var(--tblr-primary, #E07B2A); background: var(--tblr-primary-lt, #FFF1E3); }
.stat-card-icon.bg-info-lt { color: var(--tblr-info, #3E6DE0); background: var(--tblr-info-lt, #ECF1FD); }
.stat-card-icon.bg-success-lt { color: var(--tblr-success, #4E8B5A); background: var(--tblr-success-lt, #EAF3EC); }
.stat-card-icon.bg-warning-lt { color: var(--tblr-warning, #C9A227); background: var(--tblr-warning-lt, #FBF5E0); }
.stat-card-icon.bg-danger-lt { color: var(--tblr-danger, #C0473C); background: var(--tblr-danger-lt, #FBEDEB); }

/* ---- 可点击表格行 ---- */
.cursor-pointer {
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.cursor-pointer:hover {
    background-color: var(--tblr-bg-surface-secondary, #FAF7F2);
}

/* ---- 首页 Hero ---- */
/* 客厅之光：暖白渐变底 + 墨色字，橙色仅作光晕与行动色 */
.hero-section {
    background: linear-gradient(180deg, var(--lr-card, #FFFFFF) 0%, var(--lr-orange-soft, #FFF1E3) 100%);
    border: 1px solid var(--lr-line, #EFE7DB);
    border-radius: var(--tblr-border-radius-xl, 20px);
    padding: 3rem 2.5rem;
    color: var(--lr-ink, #2B2620);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 20px 50px rgba(var(--lr-shadow-rgb, 120, 90, 40), 0.10);
}
.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(224, 123, 42, 0.16) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 157, 77, 0.10) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.hero-section .hero-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}
.hero-section .hero-subtitle {
    font-size: 1.1rem;
    color: var(--lr-muted, #8C8375);
    line-height: 1.85;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}
.hero-section .hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}
.hero-section .btn-hero-primary {
    background: var(--lr-orange, #E07B2A);
    color: #fff;
    border: none;
    font-weight: 700;
    padding: 0.85rem 2.25rem;
    border-radius: 14px;
    transition: all 0.2s ease;
    flex: 0 0 auto;
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(224, 123, 42, 0.30);
}
.hero-section .btn-hero-primary:hover {
    background: var(--lr-orange, #E07B2A);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(224, 123, 42, 0.42);
}
.hero-section .btn-hero-secondary {
    background: transparent;
    color: var(--lr-ink, #2B2620);
    border: 1.5px solid var(--lr-line-strong, #E2D9CB);
    font-weight: 500;
    padding: 0.85rem 1.85rem;
    border-radius: 14px;
    transition: all 0.2s ease;
    flex: 0 0 auto;
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.hero-section .btn-hero-secondary:hover {
    background: var(--lr-orange-soft, #FFF1E3);
    border-color: var(--lr-orange, #E07B2A);
    color: var(--lr-orange, #E07B2A);
}

/* ---- 首页能力卡片 ---- */
.feature-card {
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--tblr-border-color, #EFE7DB);
    position: relative;
    overflow: hidden;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(var(--lr-shadow-rgb, 120, 90, 40), 0.13);
    border-color: var(--lr-highlight, #FFD9AE);
}
.feature-card .feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.feature-card .feature-icon svg {
    width: 28px;
    height: 28px;
}
.feature-card .feature-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--tblr-body-color, #2B2620);
}
.feature-card .feature-desc {
    color: var(--tblr-secondary-color, #8C8375);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.feature-card .feature-link {
    color: var(--tblr-primary, #E07B2A);
    font-size: 0.85rem;
    font-weight: 500;
    transition: gap 0.2s ease;
}

/* ---- 平台能力步骤 ---- */
.step-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 8px;
    background: var(--tblr-bg-surface-secondary, #FAF7F2);
    transition: background 0.15s ease;
}
.step-card:hover {
    background: var(--tblr-bg-surface-tertiary, #F4EFE7);
}
.step-card .step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    color: #fff;
}
.step-card .step-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.step-card .step-desc {
    color: var(--tblr-secondary-color, #8C8375);
    font-size: 0.875rem;
}

/* ---- 登录/注册页增强 ---- */
.page-center .card-md {
    box-shadow: 0 4px 24px rgba(23, 43, 77, 0.08);
    border: 1px solid var(--tblr-border-color, #EFE7DB);
}
.page-center .card-md .card-body {
    padding: 2rem;
}

/* ---- 卡片通用增强 ---- */
.card {
    border: 1px solid var(--tblr-border-color, #EFE7DB);
    box-shadow: var(--tblr-box-shadow-card, 0 1px 3px rgba(23, 43, 77, 0.06));
}
.card-header {
    border-bottom: 1px solid var(--tblr-border-color, #EFE7DB);
}

/* ---- 表格增强 ---- */
.table-vcenter > :not(caption) > * > * {
    vertical-align: middle;
    padding: 0.75rem;
}

/* ---- 徽章增强 ---- */
.badge {
    font-weight: 500;
    letter-spacing: 0.3px;
}
/* Fable-5 自审修正：表格内 badge 统一样式，不用 inline style */
.table .badge {
    font-size: 12px;
    padding: 6px 12px;
    font-weight: 600;
}

/* ---- 按钮增强 ---- */
.btn-primary {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ---- 空状态 ---- */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--tblr-tertiary-color, #A89E8E);
}

/* ---- 内测快速切换（首页） ---- */
.border-yellow {
    border: 1px solid rgba(185, 122, 26, 0.3) !important;
}

/* ---- 资源位轮播（首页卡片内） ---- */
.resource-slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--lr-screen, #1F1B16);
}
.slideshow-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: slideshow-fade 12s infinite;
}
.slideshow-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slideshow-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 1.5rem 0.5rem 0.4rem;
    text-align: left;
}
.slideshow-counter {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 10px;
    z-index: 10;
}
@keyframes slideshow-fade {
    0%, 14% { opacity: 1; }
    16.66%, 100% { opacity: 0; }
}

/* ---- 首页卡片内嵌视频预览 ---- */
.feature-video-preview video {
    display: block;
    width: 100%;
    border-radius: 10px;
    background: var(--lr-screen, #1F1B16);
}
.feature-video-preview video::-webkit-media-controls {
    display: none !important;
}

/* ---- CPA流程图示（卡片内迷你版） ---- */
.feature-flow-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: var(--tblr-success-lt, #EAF3EC);
    border-radius: 8px;
}
.flow-mini-step {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--tblr-success, #4E8B5A);
    text-align: center;
    flex: 1;
    line-height: 1.3;
}
.flow-mini-arrow {
    color: var(--tblr-success, #4E8B5A);
    font-size: 0.8rem;
    opacity: 0.6;
    flex-shrink: 0;
}

/* ---- 用户路径图示（卡片内迷你版） ---- */
.feature-journey {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: var(--tblr-info-lt, #ECF1FD);
    border-radius: 8px;
}
.journey-step {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--tblr-info, #3E6DE0);
    font-weight: 500;
}
.journey-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tblr-info, #3E6DE0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ---- 平台标识标签 ---- */
.feature-platform-tags {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.platform-tag {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    background: var(--tblr-warning-lt, #FBF5E0);
    color: var(--tblr-warning, #C9A227);
    border: 1px solid rgba(185, 122, 26, 0.2);
}

/* ---- 详情页视频播放器 ---- */
.detail-video-player {
    width: 100%;
    border-radius: 8px;
    background: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ---- 详情页流程图（大版） ---- */
.detail-flow-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1rem;
    background: var(--tblr-bg-surface-secondary, #FAF7F2);
    border-radius: 8px;
    flex-wrap: wrap;
}

/* ---- 市场地位数据（独家代理卡片内） ---- */
.market-stats {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 0.4rem;
    background: var(--tblr-warning-lt, #FBF5E0);
    border-radius: 8px;
}
.market-stat-item {
    flex: 1;
    text-align: center;
}
.market-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tblr-warning, #C9A227);
    line-height: 1.2;
}
.market-stat-label {
    font-size: 0.6rem;
    color: var(--tblr-tertiary-color, #A89E8E);
    margin-top: 0.15rem;
}

/* ---- 市场地位数据（详情页大版） ---- */
.market-stat-big {
    text-align: center;
    padding: 1.5rem 0.5rem;
    background: var(--tblr-bg-surface-secondary, #FAF7F2);
    border-radius: 12px;
}
.market-stat-big-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--tblr-primary, #E07B2A);
    line-height: 1.2;
}
.market-stat-big-label {
    font-size: 0.85rem;
    color: var(--tblr-secondary-color, #8C8375);
    margin-top: 0.5rem;
}

/* ---- 面包屑导航 ---- */
.breadcrumb-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.breadcrumb-link {
    color: var(--tblr-primary, #E07B2A);
    text-decoration: none;
    transition: color 0.15s ease;
}
.breadcrumb-link:hover {
    color: var(--tblr-primary-darken, #C4611A);
    text-decoration: underline;
}
.breadcrumb-sep {
    color: var(--tblr-tertiary-color, #A89E8E);
}
.breadcrumb-current {
    color: var(--tblr-secondary-color, #8C8375);
    font-weight: 500;
}
.detail-flow-step {
    text-align: center;
    min-width: 100px;
}
.detail-flow-step .step-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
}
.detail-flow-step .step-name {
    font-weight: 600;
    font-size: 0.9rem;
}
.detail-flow-step .step-desc {
    font-size: 0.75rem;
    color: var(--tblr-tertiary-color, #A89E8E);
    margin-top: 0.25rem;
}
.detail-flow-arrow {
    color: var(--tblr-tertiary-color, #A89E8E);
    font-size: 1.5rem;
}

/* ============================================================
 * 移动端适配（< 768px）
 * ============================================================ */

/* ---- Hero区域缩小 ---- */
@media (max-width: 768px) {
    .hero-section {
        padding: 2rem 1.25rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    .hero-section .hero-title {
        font-size: 1.5rem;
    }
    .hero-section .hero-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1rem;
        line-height: 1.5;
    }
    .hero-section .btn-hero-primary,
    .hero-section .btn-hero-secondary {
        padding: 0.5rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* 导航栏品牌区窄屏适配已迁至 app.css（.app-topbar .navbar-brand 一族），
   原先针对旧内联样式的 span[style*=...] 覆盖规则已随品牌区改版失效，故移除。 */
@media (max-width: 768px) {
    .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.3);
    }
    .navbar-toggler-icon {
        filter: invert(1);
    }
    .navbar .btn-sm {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }
}

/* ---- 能力卡片移动端 ---- */
@media (max-width: 768px) {
    .feature-card .feature-title {
        font-size: 1rem;
    }
    .feature-card .feature-desc {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    .feature-card .feature-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 0.5rem;
    }
    .feature-card .feature-icon svg {
        width: 20px;
        height: 20px;
    }
    .feature-video-preview video {
        max-height: 160px;
    }
}

/* ---- 市场数据卡片移动端 ---- */
@media (max-width: 768px) {
    .market-stats {
        padding: 0.4rem 0.3rem;
        gap: 0.3rem;
    }
    .market-stat-value {
        font-size: 0.75rem;
    }
    .market-stat-label {
        font-size: 0.55rem;
    }
}

/* ---- CPA流程图移动端 ---- */
@media (max-width: 768px) {
    .feature-flow-diagram {
        padding: 0.5rem 0.3rem;
        gap: 0.15rem;
    }
    .flow-mini-step {
        font-size: 0.6rem;
    }
    .flow-mini-arrow {
        font-size: 0.7rem;
    }
}

/* ---- 用户路径图移动端 ---- */
@media (max-width: 768px) {
    .feature-journey {
        padding: 0.5rem 0.3rem;
        gap: 0.15rem;
    }
    .journey-step {
        font-size: 0.6rem;
        gap: 0.15rem;
    }
    .journey-dot {
        width: 14px;
        height: 14px;
        font-size: 0.5rem;
    }
}

/* ---- 详情页视频+文字堆叠 ---- */
@media (max-width: 768px) {
    .detail-video-player {
        margin-bottom: 1rem;
    }
}

/* ---- 详情页流程图移动端 ---- */
@media (max-width: 768px) {
    .detail-flow-diagram {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem 0.5rem;
    }
    .detail-flow-arrow {
        transform: rotate(90deg);
        font-size: 1.2rem;
    }
    .detail-flow-step {
        min-width: auto;
    }
    .detail-flow-step .step-icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .detail-flow-step .step-name {
        font-size: 0.8rem;
    }
    .detail-flow-step .step-desc {
        font-size: 0.7rem;
    }
}

/* ---- 市场数据大版移动端 ---- */
@media (max-width: 768px) {
    .market-stat-big {
        padding: 1rem 0.5rem;
        margin-bottom: 0.75rem;
    }
    .market-stat-big-value {
        font-size: 1.5rem;
    }
    .market-stat-big-label {
        font-size: 0.75rem;
    }
}

/* ---- 面包屑移动端 ---- */
@media (max-width: 768px) {
    .breadcrumb-wrap {
        font-size: 0.75rem;
    }
}

/* ---- 页面标题移动端 ---- */
@media (max-width: 768px) {
    .page-title {
        font-size: 1.25rem !important;
    }
    .page-pretitle {
        font-size: 0.75rem !important;
    }
}

/* ---- Dashboard stat card移动端 ---- */
@media (max-width: 768px) {
    .stat-card-value {
        font-size: 1.4rem;
    }
    .stat-card-label {
        font-size: 0.7rem;
    }
    .stat-card-icon {
        width: 36px;
        height: 36px;
    }
    .stat-card-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ---- 表格水平滚动 ---- */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table th,
    .table td {
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 0.5rem;
    }
}

/* ---- 步骤卡片移动端 ---- */
@media (max-width: 768px) {
    .step-card {
        padding: 0.75rem;
    }
    .step-card .step-number {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }
    .step-card .step-title {
        font-size: 0.9rem;
    }
    .step-card .step-desc {
        font-size: 0.8rem;
    }
}

/* ---- 内测快速入口移动端 ---- */
@media (max-width: 768px) {
    .border-yellow .card-body .row g-2 {
        gap: 0.5rem;
    }
}

/* ---- 平台标签移动端 ---- */
@media (max-width: 768px) {
    .platform-tag {
        font-size: 0.65rem;
        padding: 0.15rem 0.5rem;
    }
}

/* ---- 容器内边距移动端 ---- */
@media (max-width: 768px) {
    .container-xl {
        padding-left: 12px;
        padding-right: 12px;
    }
    .card-body {
        padding: 0.875rem;
    }
}

/* ---- 超小屏（< 576px）额外优化 ---- */
@media (max-width: 576px) {
    .hero-section .hero-title {
        font-size: 1.25rem;
    }
    .hero-section .hero-subtitle {
        font-size: 0.8rem;
    }
    .hero-section .hero-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    .hero-section .hero-actions .btn {
        width: 100%;
    }
    .market-stats {
        flex-direction: column;
        gap: 0.25rem;
    }
    .market-stat-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        text-align: left;
    }
    .market-stat-value {
        font-size: 0.85rem;
    }
    .market-stat-label {
        font-size: 0.65rem;
    }
}