/* =============================================================================
   全局主题层（app-theme.css）
   由 static/index.html 直接引入，独立于 Vite 打包产物：改这里不需要重新构建前端，
   也不需要重启后端（web.py 静态托管 /static/，浏览器强刷即可生效）。

   为什么用"覆盖"而不是改组件：机器上没有前端源码，static/js、static/css 下的
   文件都是 Vite 构建产物，重新构建就会被覆盖，所以页面结构一律不动，只在这一层
   做样式覆盖，外加 index.html 里的外壳（顶部栏）。

   关于 `#app` 前缀：各页面的样式是组件里的 <style scoped>，编译后带
   `[data-v-xxxx]` 属性选择器，而且这些 CSS 是随路由 chunk 动态插到 <head> 的，
   比本文件晚——同权重时后者赢，覆盖不住。统一加 `#app`（id 权重最高）就能稳定
   压过所有打包样式，不必满地 !important。页面内容都在 #app 内；顶部栏和导出用的
   离屏容器不在 #app 内，所以那几条不加前缀。

   目录：
     1. 品牌变量 / Element Plus 变量覆盖
     2. 顶部栏外壳
     3. 全局排版、页面容器与响应式断点
     4. 通用控件（按钮、卡片、单选、输入框）
     5. 逐页修正
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 变量 */
:root {
    /* 取自 static/jpg/logo.jpg 的渐变取样：蓝 (13,77,185) → 紫 (114,26,200) */
    --brand-blue: #2f5fd0;
    --brand-blue-dark: #1848a8;
    --brand-purple: #7220c8;
    --brand-grad: linear-gradient(100deg, var(--brand-blue) 0%, var(--brand-purple) 100%);
    --brand-grad-soft: linear-gradient(100deg, #eaeffa 0%, #f2e9fb 100%);

    --bg: #f5f7fb;
    --card: #fff;
    --line: #e6eaf2;
    --line-strong: #d7dded;
    --text: #1f2430;
    --text-2: #5b6474;
    --text-3: #98a1b3;

    --topbar-h: 3.5rem;
    --radius: .75rem;
    --radius-sm: .5rem;
    --shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-2: 0 2px 4px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .08);
    --content-w: 68.75rem;          /* 1100px，桌面端正文最大宽度 */
    --font-cjk: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
                "Source Han Sans SC", Roboto, Helvetica, Arial, sans-serif;

    /* Element Plus 主色（light-3/5/7/8/9 = 主色与白色按 30/50/70/80/90% 混合） */
    --el-color-primary: #2f5fd0;
    --el-color-primary-light-3: #6d8fde;
    --el-color-primary-light-5: #97afe7;
    --el-color-primary-light-7: #c0cff0;
    --el-color-primary-light-8: #d5dff5;
    --el-color-primary-light-9: #eaeffa;
    --el-color-primary-dark-2: #254ca6;
    --el-color-primary-rgb: 47, 95, 208;
    --el-border-radius-base: .5rem;
    --el-border-radius-small: .375rem;
    --el-text-color-primary: #1f2430;
    --el-text-color-regular: #3c4456;
    --el-border-color: #d7dded;
    --el-border-color-light: #e6eaf2;
    --el-fill-color-light: #f5f7fb;
    --el-font-family: var(--font-cjk);
}

/* ------------------------------------------------------------ 2. 顶部栏外壳 */
.app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: .5rem;
    height: var(--topbar-h);
    padding: 0 max(1rem, env(safe-area-inset-left));
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.app-topbar__brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: inherit;
}

.app-topbar__brand img {
    height: 1.75rem;
    width: auto;
    display: block;
}

.app-topbar__name {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.app-topbar__spacer { flex: 1 1 auto; }

.app-topbar__actions { display: flex; align-items: center; gap: .5rem; }

.tb-btn {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .875rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--text-2);
    font-size: .875rem;
    font-family: var(--font-cjk);
    line-height: 1;
    cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s;
}

.tb-btn:hover {
    color: var(--brand-blue);
    border-color: var(--el-color-primary-light-5);
    background: var(--el-color-primary-light-9);
}

/* 登录页没有"返回/退出"的语义，只留品牌；首页是根页面，不显示"返回" */
body[data-route="login"] .app-topbar__actions { display: none; }
body[data-route="home"] .tb-back { display: none; }

/* ------------------------------------------------- 3. 排版 / 容器 / 响应式 */
/* 打包产物里有一段 rem 适配脚本（见 static/js/index-BUek8BY7.js）：设备宽度
   375px 时根字号 16px，之后线性放大，到 515px 就封顶 22px——于是桌面端所有 rem
   尺寸被整体放大了 1.375 倍，这是宽屏显示不正常的根因。这里在 515px 以上把根字号
   钉回 16px（!important 才能压过脚本写在 <html> 上的行内样式）。 */
@media (min-width: 515px) {
    html { font-size: 16px !important; }
}

body {
    font-family: var(--font-cjk);
    color: var(--text);
    background: var(--bg);
    padding-top: var(--topbar-h);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 桌面端：正文限宽居中，避免一行横穿整个宽屏 */
@media (min-width: 768px) {
    #app .login,
    #app .home,
    #app .problem,
    #app .analysis-result,
    #app .uitimate-ideal-solution,
    #app .causal-analysis,
    #app .technical-contradiction,
    #app .physical-contradiction,
    #app .technical-analysis,
    #app .orientation,
    #app .summary-plan,
    #app .procurement-form,
    #app .issues {
        max-width: var(--content-w);
        margin-left: auto;
        margin-right: auto;
    }

    /* 页面底色交给 body，白色留给卡片 */
    #app .issues,
    #app .procurement-form,
    #app .technical-contradiction,
    #app .physical-contradiction { background: transparent; }
}

/* 页面标题：把 1.75rem 的"移动端大字"收敛成正常标题层级 */
#app .problem-title,
#app .orientation-title,
#app .home-title,
#app .login .title,
#app .login .love-title {
    font-family: var(--font-cjk);
    font-weight: 700;
    color: var(--text);
    letter-spacing: .01em;
}

#app .problem-title,
#app .orientation-title {
    font-size: 1.375rem;
    margin: 1rem 0 .25rem;
}

/* 小标题（打包样式里的 .main-title / .main-content） */
#app .main-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: .75rem 0 .5rem;
    padding-left: .625rem;
    border-left: .1875rem solid var(--el-color-primary);
    line-height: 1.3;
}

#app .main-content {
    color: var(--text-2);
    line-height: 1.75;
}

#app .el-breadcrumb-line {
    color: var(--text-3);
    font-size: .875rem;
    letter-spacing: .02em;
}

/* --------------------------------------------------------- 4. 通用控件 */
#app .el-button {
    font-family: var(--font-cjk);
    border-radius: var(--radius-sm);
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s;
}

#app .el-button--primary {
    background-color: var(--el-color-primary);
    border-color: var(--el-color-primary);
    box-shadow: 0 1px 2px rgba(47, 95, 208, .25);
}

#app .el-button--primary:hover,
#app .el-button--primary:focus {
    background-color: var(--el-color-primary-dark-2);
    border-color: var(--el-color-primary-dark-2);
}

#app .el-button--primary:active { transform: translateY(1px); }

/* 各页那批 `width:40%!important` 的胶囊大按钮，统一成常规按钮观感 */
#app .problem .operation-btns .el-button,
#app .analysis-result .analysis-operation-btns .el-button,
#app .uitimate-ideal-solution .uitimate-operation-btns .el-button,
#app .uitimate-ideal-solution .operation-btns .el-button,
#app .causal-analysis .causal-operation-btns .el-button,
#app .technical-contradiction .causal-operation-btns .el-button,
#app .technical-contradiction .operation-btns .el-button,
#app .physical-contradiction .causal-operation-btns .el-button,
#app .physical-contradiction .operation-btns .el-button,
#app .technical-analysis .technical-operation-btns .el-button,
#app .orientation .operation-btns .el-button,
#app .summary-plan .causal-operation-btns .btn > .el-button--primary,
#app .issues .not-btn .el-button {
    width: auto !important;
    min-width: 7.5rem !important;
    height: 2.375rem;
    padding: 0 1.25rem;
    border-radius: var(--radius-sm);
    font-size: .9375rem;
}

/* 输入类控件 */
#app .el-input__wrapper,
#app .el-select__wrapper {
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 1px var(--line-strong) inset;
}

#app .el-textarea__inner {
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 1px var(--line-strong) inset;
    color: var(--text-2);
    /* rows 写死的高度会把长正文截在半行上（这些页填的都是一整段文字），
       用 field-sizing 让高度跟着内容走；不支持的浏览器会自动忽略这两行，
       退回原来的固定高度 + 滚动。 */
    field-sizing: content;
    min-height: 4rem;
    max-height: 24rem;
    overflow-y: auto;
}

#app .el-textarea__inner:focus,
#app .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}

/* 单选项卡片化（子问题、矛盾候选） */
#app .el-radio {
    height: auto;
    padding: .5rem .75rem;
    margin-right: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color .15s, background-color .15s;
}

#app .el-radio:hover { border-color: var(--el-color-primary-light-5); }

#app .el-radio.is-checked {
    border-color: var(--el-color-primary);
    background: var(--el-color-primary-light-9);
}

#app .el-radio__label { color: var(--text); }

/* 卡片：统一边框 / 圆角 / 阴影 */
#app .summary-plan .summary-content-item,
#app .technical-analysis .stage-item,
#app .procurement-form .form-container,
#app .causal-analysis .causal-dialog {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

/* 固定在底部的操作条：限宽居中 + 半透明毛玻璃 + 圆角 */
#app .uitimate-ideal-solution .operation-btns,
#app .technical-contradiction .operation-btns,
#app .physical-contradiction .operation-btns,
#app .orientation .operation-btns,
#app .technical-analysis .technical-operation-btns,
#app .issues .not-btn {
    left: 50% !important;
    transform: translateX(-50%);
    bottom: .75rem !important;
    width: min(calc(100% - 1.5rem), 62.5rem) !important;
    margin: 0 !important;
    padding: .625rem .75rem !important;
    gap: .75rem !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
}

/* 给底部固定条留出空间，长内容不会被压在按钮下面 */
#app .uitimate-ideal-solution,
#app .technical-contradiction,
#app .physical-contradiction,
#app .orientation,
#app .technical-analysis { padding-bottom: 6rem; }

/* ------------------------------------------------------------ 5. 逐页修正 */

/* --- 登录页 ------------------------------------------------------------ */
/* 高度含 padding（下面那条 padding-top 就是给标题留的位），所以必须 border-box。 */
#app .login {
    height: calc(100vh - var(--topbar-h));
    padding-top: 2rem;
    box-sizing: border-box;
}

#app .login .title,
#app .login .love-title {
    position: static;
    transform: none;
    text-align: center;
}

/* 登录页内容里原本并排两个品牌标题（小号"爱Triz" + 大号"AI TRIZ"），现在两个都改成
   了"AI Triz"，小号就成了重复项，隐藏；页面里只留这一处大字。 */
#app .login .love-title { display: none; }

/* margin-top 会穿过 .login/.app-container/#app 一路折叠到 body 上，把整页顶下来 32px
   （页面因此永远比视口高一点、出现滚动条）。所以这里不用 margin，改由 .login 的
   padding-top 出这个间距。 */
#app .login .title {
    margin-top: 0;
    font-size: 2.25rem;
    font-weight: 700;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#app .login .login-info {
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    border: 1px solid var(--line);
    background: var(--card);
}

#app .login .register-btn,
#app .login .operation-btns .mod-info { color: var(--brand-blue); }

#app .login .operation-btns .el-button,
#app .login .operation-btns .el-button.mod-btn {
    width: 100% !important;
    height: 2.625rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
}

#app .login .operation-btns .el-button.mod-btn { width: 48% !important; }

#app .login .login-footer { color: var(--text-3); }

/* 页脚（南京农业大学Triz研究室 / 南京少昊网络科技有限公司）在 PC 上整体上移 5 行。
   .login-footer 自身 line-height 是 1.875rem，5 行 = 9.375rem，加上原本的 bottom .625rem
   正好是 10rem。窗口太矮时不上移，免得压到登录卡片。 */
@media (min-width: 768px) and (min-height: 720px) {
    #app .login .login-footer { bottom: 10rem; }
}

/* --- 首页 -------------------------------------------------------------- */
/* .home 原本没有定位，子元素绝对定位会相对"初始包含块"（视口）定位，加了顶部栏后
   会顶进栏里；这里把它变成有高度的定位容器，百分比偏移就落在页面内部——也正是作者
   写 10%/45%/75% 时预期的那种全屏容器。 */
#app .home {
    position: relative;
    height: calc(100vh - var(--topbar-h));
    background: radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--bg) 60%);
}

#app .home .home-content {
    top: 46%;
    max-width: var(--content-w);
}

#app .home .home-content img {
    height: auto;
    max-height: 20rem;
    width: auto;
    margin: 0 auto;
    padding: .75rem 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

#app .home .home-title {
    position: static;
    transform: none;
    margin-top: 2.5rem;
    font-size: 2.25rem;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#app .home .operation-tag {
    background: var(--brand-grad-soft);
    border: 1px solid var(--el-color-primary-light-7);
    color: var(--brand-purple);
}

#app .home .operation-btns {
    top: auto;
    bottom: 3rem;
    gap: 1.25rem;
    justify-content: center;
    padding: 0 1rem;
}

#app .home .operation-btns .el-button--primary {
    min-width: 11rem !important;
    height: 2.75rem;
    background: var(--brand-grad);
    border: none;
    box-shadow: 0 4px 14px rgba(66, 74, 208, .28);
}

#app .home .quit-btn { display: none; }   /* 退出统一收到顶部栏 */

/* PC 首页：大图一屏内完整显示。
   .home 的排版本来是"子元素全部绝对定位 + 视口百分比偏移"的移动端单屏写法，图片高度被
   钉死在 20rem，于是宽屏上只剩中间一小块。这里在 PC 上把它改回常规流：标题 / 图 / 标签 /
   按钮自上而下排成一列，中间那段弹性高度全给图片，图按比例缩到这段里放得下为止——高度
   永远不超一屏，宽度不够就左右留白。 */
@media (min-width: 768px) {
    #app .home {
        max-width: none;
        height: calc(100vh - var(--topbar-h));
        min-height: 30rem;
        padding: 0;
        overflow: hidden;
    }

    #app .home .home-title {
        flex: 0 0 auto;
        order: -1;                 /* 标题恒定在最前，避免被 flex 顺序影响 */
        margin: 1.5rem 0 .5rem;
    }

    #app .home .home-content {
        position: static;
        transform: none;
        order: 0;
        flex: 1 1 auto;
        min-height: 0;             /* 允许被压缩，否则 max-height 传导不下来 */
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
        padding: .5rem 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #app .home .home-content img {
        display: block;
        flex: 0 1 auto;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        min-height: 0;
        object-fit: contain;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    #app .home .operation-tag {
        position: static;
        transform: none;
        flex: 0 0 auto;
        display: inline-block;
        margin: .75rem 0 0;
    }

    #app .home .operation-btns {
        position: static;
        transform: none;
        order: 2;
        flex: 0 0 auto;
        width: 100%;
        max-width: var(--content-w);
        margin: 1.25rem auto 2rem;
    }
}

/* --- 历史项目列表 ------------------------------------------------------- */
#app .issues { height: calc(100vh - var(--topbar-h)); }

#app .issues .issues-title {
    height: auto;
    line-height: 1.4;
    padding: 1.5rem 1rem .75rem;
    background: transparent;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: left;
    color: var(--text);
}

#app .issues .issues-content {
    background: transparent;
    padding: .25rem 1rem 5rem;
}

#app .issues .content {
    margin-bottom: 0;
    border-bottom: none;
    padding: .875rem 1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

@media (min-width: 768px) {
    /* 桌面端：历史项目排成 2~3 列卡片 */
    #app .issues .issues-content {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
        gap: 1rem;
        align-content: start;
    }

    #app .issues .content:hover {
        background: var(--card);
        border-color: var(--el-color-primary-light-5);
        box-shadow: var(--shadow-2);
    }
}

@media (max-width: 767px) {
    #app .issues .content { margin-bottom: .75rem; }
}

#app .issues .content-title {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--text);
}

#app .issues .content-title .main-issue {
    color: var(--text-2);
    font-weight: 400;
    -webkit-line-clamp: 2;
    margin-top: .25rem;
}

#app .issues .content-operation {
    color: var(--brand-blue);
    font-size: .9375rem;
    line-height: 2;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--line);
}

#app .issues .content-operation > span { cursor: pointer; }
#app .issues .content-operation > span:hover { color: var(--brand-purple); }

#app .issues .not-data {
    position: static;
    transform: none;
    color: var(--text-3);
    font-size: 1rem;
    padding: 3rem 0;
}

/* --- 新建项目（问题描述）----------------------------------------------- */
#app .problem { padding: 1rem; }

#app .problem .problem-title { font-size: 1.25rem; margin-top: .5rem; }

#app .problem .operation-btns {
    gap: .75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

#app .problem .el-form-item { margin: .75rem 0; }

#app .problem .el-form-item__label,
#app .procurement-form .el-form-item__label { color: var(--text-2); }

/* --- 问题分解 / 结果类页面 --------------------------------------------- */
#app .analysis-result { padding: 1rem 1rem 4rem; }

#app .analysis-result .analysis-content .question-content {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    padding: .875rem 1rem;
    margin-bottom: .75rem;
}

#app .uitimate-ideal-solution,
#app .causal-analysis,
#app .technical-contradiction,
#app .physical-contradiction,
#app .technical-analysis {
    padding: 1rem 1rem 6rem;
    text-align: left;
}

/* 这些页的每段正文标签（设计的目的 / 设想的最终理想解 …）做成小节标题的观感，
   和上面的"主要问题"标题统一 */
#app .uitimate-ideal-solution .el-form-item__label,
#app .technical-contradiction .el-form-item__label,
#app .physical-contradiction .el-form-item__label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    padding-left: .625rem;
    border-left: .1875rem solid var(--el-color-primary);
}

#app .uitimate-ideal-solution .el-textarea__inner,
#app .technical-contradiction .el-textarea__inner,
#app .physical-contradiction .el-textarea__inner {
    background: var(--card);
    line-height: 1.75;
}

#app .technical-contradiction .contradiction-content,
#app .physical-contradiction .contradiction-content {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .875rem 1rem;
    box-shadow: var(--shadow-1);
    line-height: 1.8;
}

#app .causal-analysis .chain-content {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    box-shadow: var(--shadow-1);
}

#app .causal-analysis .chain-content > span {
    color: var(--text-2);
    font-size: .9375rem;
}

#app .causal-analysis .problem-title,
#app .technical-analysis .problem-title,
#app .uitimate-ideal-solution .problem-title {
    font-size: 1.25rem;
    margin-top: .5rem;
}

#app .technical-analysis .result-ul { padding: 0 .25rem; }

/* 技术预测的"生命周期"正文：桌面端双栏，避免长行 */
#app .technical-analysis .life-cycle-container {
    padding: .5rem .25rem;
    line-height: 1.75;
}

@media (min-width: 1024px) {
    #app .technical-analysis .life-cycle-container {
        columns: 2;
        column-gap: 2rem;
    }

    #app .technical-analysis .stage-item { break-inside: avoid; }
}

#app .technical-analysis .stage-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-blue-dark);
    border-left: .1875rem solid var(--el-color-primary);
    padding-left: .625rem;
    margin-bottom: .75rem;
}

#app .technical-analysis .law-name { color: var(--text); }
#app .technical-analysis .law-content,
#app .technical-analysis .law-list,
#app .technical-analysis .law-nested,
#app .technical-analysis .sub-content { color: var(--text-2); }

/* --- 方案汇总 ---------------------------------------------------------- */
#app .summary-plan { padding: 1rem; text-align: left; }

#app .summary-plan .summary-content-item {
    padding: .875rem 1rem;
    margin-bottom: .875rem;
}

#app .summary-plan .content-item-title {
    font-weight: 600;
    color: var(--text);
    margin-bottom: .5rem;
}

#app .summary-plan .content-item-intro { color: var(--text-2); }

/* 方案卡片：DOM 是 .summary-content > ul > li.summary-content-item */
#app .summary-plan .summary-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#app .summary-plan .summary-content > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
}

/* 保存 / 导出这两个按钮其实写在 <ul> 里面（v-for 之后），会变成网格项；
   让它们横跨整行并居中，同时收回行内的 width:45% */
#app .summary-plan .summary-content > ul > .el-button {
    grid-column: 1 / -1;
    justify-self: center;
    width: auto !important;
    min-width: 7.5rem;
    margin: .25rem .375rem !important;
}

@media (max-width: 767px) {
    #app .summary-plan .summary-content > ul { grid-template-columns: 1fr; }
}

#app .summary-plan .causal-operation-btns {
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

#app .summary-plan .causal-operation-btns .btn { width: auto !important; }

/* 导出用的离屏容器（不在 #app 内，由导出逻辑挂到 body）：保持原样，
   这里只是防止上面的卡片规则误伤——宽 1000px、白底、无圆角阴影。 */
.tree-container,
.dialog-container {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    padding: 1.875rem 1.875rem 18.75rem !important;
}

/* --- 采购表单 ---------------------------------------------------------- */
#app .procurement-form {
    padding: 1rem 1.25rem 3rem;
    background: transparent;
    min-height: calc(100vh - var(--topbar-h));
}

#app .procurement-form .page-header {
    margin: .75rem 0 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

#app .procurement-form .page-header .page-title {
    font-size: 1.125rem;
    color: var(--text);
}

#app .procurement-form .page-header .return-btn {
    border: 1px solid var(--el-color-primary-light-5);
    color: var(--brand-blue);
    background: #fff;
}

#app .procurement-form .page-header .return-btn:hover {
    background: var(--el-color-primary-light-9);
    border-color: var(--el-color-primary);
    color: var(--brand-blue-dark);
}

#app .procurement-form .tab-container { gap: .5rem; }

#app .procurement-form .tab-container .tab-item .tab-bg,
#app .procurement-form .tab-container .tab-item:not(.active) .tab-bg {
    clip-path: none;
    min-width: 7.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    margin-right: 0;
    background: #fff;
}

#app .procurement-form .tab-container .tab-item.active .tab-bg {
    clip-path: none;
    background: var(--brand-grad);
    border: none;
    box-shadow: 0 3px 10px rgba(66, 74, 208, .25);
}

#app .procurement-form .tab-container .tab-item:not(.active) .tab-bg:hover {
    background: var(--el-color-primary-light-9);
    border-color: var(--el-color-primary-light-5);
}

#app .procurement-form .form-container {
    margin-top: 1.25rem;
    padding: 1.25rem;
    min-height: 20rem;
}

#app .procurement-form .form-actions {
    gap: .75rem;
    margin-top: 1.5rem;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--line);
}

#app .procurement-form .form-actions .el-button {
    min-width: 6.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
}