/* 众泰云统一品牌规范 CSS（Phase 5）
 * 用途：定义品牌专属变量和组件样式（tiance- 前缀），供 PC/移动端模板共用。
 * 依赖: tokens.css（全局设计令牌）
 *
 * 注意: 全局重置、基础排版由 base.css 负责，此处仅定义品牌特有内容。
 */

:root {
    /* 品牌色 - 与 tokens.css 互补，用于特定品牌场景 */
    --tiance-primary:       #0E7C7B;
    --tiance-primary-dark:  #4338ca;
    --tiance-accent:        #059669;
    --tiance-accent-light:  #10b981;
    --tiance-warn:          #f59e0b;
    --tiance-danger:        #ef4444;

    /* 品牌中性色 */
    --tiance-bg:            #f8fafc;
    --tiance-bg-white:      #ffffff;
    --tiance-text:          #1e293b;
    --tiance-text-sec:      #475569;
    --tiance-text-muted:    #94a3b8;
    --tiance-border:        #e2e8f0;
    --tiance-border-light:  #f1f5f9;

    /* 品牌间距 */
    --tiance-gap-xs:  4px;
    --tiance-gap-sm:  8px;
    --tiance-gap-md:  16px;
    --tiance-gap-lg:  24px;
    --tiance-gap-xl:  40px;

    /* 品牌圆角 */
    --tiance-radius-sm: 8px;
    --tiance-radius-md: 12px;
    --tiance-radius-lg: 18px;

    /* 品牌阴影 */
    --tiance-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --tiance-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --tiance-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);

    /* 品牌字体 */
    --tiance-font:      "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    --tiance-font-mono: "SF Mono", "Fira Code", monospace;

    /* 品牌布局 */
    --tiance-nav-h:      56px;
    --tiance-max-w:      1200px;
    --tiance-sidebar-w:  240px;
}

/* ----------------------------------------------------------
   品牌按钮 - tiance-btn
   ---------------------------------------------------------- */
.tiance-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tiance-gap-sm);
    padding: 10px 20px;
    border: none;
    border-radius: var(--tiance-radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-normal, var(--duration-normal)) var(--ease-default),
                color var(--duration-normal, var(--duration-normal)) var(--ease-default),
                border-color var(--duration-normal, var(--duration-normal)) var(--ease-default);
    text-decoration: none;
}

.tiance-btn--primary {
    background: var(--tiance-primary);
    color: #fff;
}

.tiance-btn--primary:hover {
    background: var(--tiance-primary-dark);
}

.tiance-btn--accent {
    background: var(--tiance-accent);
    color: #fff;
}

.tiance-btn--accent:hover {
    background: #047857;
}

.tiance-btn--ghost {
    background: transparent;
    color: var(--tiance-primary);
    border: 1px solid var(--tiance-border);
}

.tiance-btn--sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* ----------------------------------------------------------
   品牌卡片 - tiance-card
   ---------------------------------------------------------- */
.tiance-card {
    background: var(--tiance-bg-white);
    border-radius: var(--tiance-radius-lg);
    box-shadow: var(--tiance-shadow-sm);
    padding: var(--tiance-gap-lg);
    transition: box-shadow var(--duration-normal, var(--duration-normal)) var(--ease-out);
}

.tiance-card:hover {
    box-shadow: var(--tiance-shadow-md);
}

/* ----------------------------------------------------------
   品牌输入框 - tiance-input
   ---------------------------------------------------------- */
.tiance-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--tiance-border);
    border-radius: var(--tiance-radius-md);
    font-size: 0.9rem;
    background: var(--tiance-bg-white);
    outline: none;
    transition: border-color var(--duration-normal, var(--duration-normal)) var(--ease-default);
}

.tiance-input:focus {
    border-color: var(--tiance-primary);
}

/* ----------------------------------------------------------
   品牌导航栏 - tiance-nav
   ---------------------------------------------------------- */
.tiance-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    height: var(--tiance-nav-h);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tiance-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--tiance-gap-lg);
}

.tiance-nav__logo {
    font-weight: 700;
    color: var(--tiance-primary);
    text-decoration: none;
    font-size: 1.1rem;
}

.tiance-nav__links {
    display: flex;
    gap: var(--tiance-gap-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tiance-nav__links a {
    color: var(--tiance-text-sec);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--duration-fast);
}

.tiance-nav__links a:hover {
    color: var(--tiance-primary);
}

/* ----------------------------------------------------------
   品牌容器 - tiance-container / tiance-page
   ---------------------------------------------------------- */
.tiance-container {
    max-width: var(--tiance-max-w);
    margin: 0 auto;
    padding: var(--tiance-gap-lg);
}

.tiance-page {
    padding-top: calc(var(--tiance-nav-h) + var(--tiance-gap-lg));
}

/* ----------------------------------------------------------
   移动端适配
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .tiance-nav__links {
        display: none;
    }

    .tiance-container {
        padding: var(--tiance-gap-md);
    }

    .tiance-page {
        padding-top: calc(var(--tiance-nav-h) + var(--tiance-gap-md));
    }
}

/* ============================================================
   幽灵类补全（2026-08-15，UI 落地闭环第一刀）
   ------------------------------------------------------------
   根因：模板大量使用 tiance-* 类，但全站 CSS 从未定义这些类，
   导致浏览器按默认样式渲染（"看起来没设计"）。本区块为高频
   幽灵类补全定义，属于纯增益（此前零定义），不触碰任何模板。
   可回滚：git checkout 本文件即可还原。
   ============================================================ */

/* ---- 设计令牌当类用（工具类） ---- */
.tiance-primary { color: var(--tiance-primary); }
.tiance-text    { color: var(--tiance-text); }
.tiance-bg      { background: var(--tiance-bg); }
.tiance-danger  { color: var(--tiance-danger); }
.tiance-warn    { color: var(--tiance-warn); }
.tiance-accent  { color: var(--tiance-accent); }
.tiance-success { color: var(--tiance-accent); }
.tiance-error   { color: var(--tiance-danger); }
.tiance-radius-sm { border-radius: var(--tiance-radius-sm); }
.tiance-radius-md { border-radius: var(--tiance-radius-md); }
.tiance-font-mono { font-family: var(--tiance-font-mono); }

/* ---- 徽章 tiance-badge（药丸形状态标签） ---- */
.tiance-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    background: var(--tiance-border-light);
    color: var(--tiance-text-sec);
}
.tiance-badge-success, .tiance-badge--success { background: rgba(5, 150, 105, 0.12); color: #047857; }
.tiance-badge-danger,  .tiance-badge--danger  { background: rgba(239, 68, 68, 0.12);  color: #b91c1c; }
.tiance-badge-warning, .tiance-badge--warning { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.tiance-badge-info,    .tiance-badge--info    { background: rgba(14, 124, 123, 0.12); color: var(--tiance-primary-dark); }
.tiance-badge-error    { background: rgba(239, 68, 68, 0.12);  color: #b91c1c; }

/* ---- 按钮补充分支 ---- */
/* 模板用单横线（tiance-btn-primary），CSS 原定义用双横线（-- ）修饰，补齐单横线别名 */
.tiance-btn-primary { background: var(--tiance-primary); color: #fff; }
.tiance-btn-primary:hover { background: var(--tiance-primary-dark); }
.tiance-btn-outline { background: transparent; color: var(--tiance-primary); border: 1px solid var(--tiance-border); }
.tiance-btn-danger, .tiance-btn--danger { background: var(--tiance-danger); color: #fff; }
.tiance-btn-danger:hover, .tiance-btn--danger:hover { background: #dc2626; }
.tiance-btn--secondary { background: var(--tiance-bg); color: var(--tiance-text-sec); border: 1px solid var(--tiance-border); }
.tiance-btn--secondary:hover { background: var(--tiance-border-light); }
.tiance-btn-sm { padding: 6px 12px; font-size: 0.8rem; }

/* ---- 进度条 tiance-progress（轨道；子元素用 .h-100 + 内联宽/色） ---- */
.tiance-progress {
    position: relative;
    overflow: hidden;
    border-radius: var(--tiance-radius-md);
    background: var(--tiance-border-light);
}
.tiance-progress .h-100 { height: 100%; }

/* ---- 卡片标题 / 面包屑 ---- */
.tiance-card-header {
    padding-bottom: var(--tiance-gap-md);
    margin-bottom: var(--tiance-gap-md);
    border-bottom: 1px solid var(--tiance-border-light);
    font-weight: 600;
    color: var(--tiance-text);
}
.tiance-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--tiance-gap-xs);
    font-size: 0.85rem;
    color: var(--tiance-text-muted);
    list-style: none;
    margin: 0;
    padding: 0;
}
.tiance-breadcrumb a { color: var(--tiance-text-sec); text-decoration: none; }
.tiance-breadcrumb a:hover { color: var(--tiance-primary); }
.tiance-breadcrumb li + li::before { content: "/"; margin: 0 var(--tiance-gap-xs); color: var(--tiance-border); }