/* ==========================================================================
   PC 端界面（>=900px）
   --------------------------------------------------------------------------
   手机端样式全部在 app.css，本文件只做宽屏覆盖，且所有覆盖都包在
   @media (min-width:900px) 里 —— 手机上打开必须和以前一模一样。

   视觉取向：深色固定侧栏 + 白色顶栏 + 浅灰画布 + 白卡内容。
   深色侧栏是这一版最大的变化：它把"手机 App 放大"和"桌面后台"区分开，
   也让白卡、浅灰底有对比可依，页面才有层次。

   断点：
     900px  侧栏出现
     1100px 工作台左右分栏
   ========================================================================== */

/* 侧栏专用的三块（品牌 / 新建 / 分组标题）、登录页品牌板：
   手机上必须完全不存在，所以默认 display:none 放在媒体查询外面 */
.side-hd, .side-ft, .side-sec, .side-tools, .auth-art { display: none; }
/* .side-new 是 <button>，app.css 里 `.tabbar button{display:flex}` 的特异性比
   `.side-new` 高，只写类名盖不住 —— 手机上底栏上方会多出一行"新建用章申请"。 */
.tabbar button.side-new { display: none; }

@media (min-width: 900px) {

  :root {
    --side-w: 256px;
    --pc-bg: #f4f6f9;
    --pc-line: #e6eaf1;
    --pc-line-2: #eef1f6;
    --pc-ink: #101828;
    --pc-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
    --pc-shadow-hi: 0 12px 28px -10px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .04);
    --pc-radius: 14px;
  }

  /* ---------- 画布 ---------- */
  body { background: var(--pc-bg); }
  .root { max-width: none; background: transparent; }
  .app { padding-left: var(--side-w); min-height: 100vh; }

  /* ---------- 顶栏 ---------- */
  /* 白底 + 轻微毛玻璃：滚动时内容从下面掠过，边界始终清楚 */
  .hd {
    height: 68px;
    padding: 0 40px;
    gap: 14px;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    backdrop-filter: saturate(1.5) blur(16px);
    border-bottom: 1px solid var(--pc-line);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
  }
  .hd.greet { height: 92px; padding-bottom: 0; }
  .hd h1 {
    font-size: 19px; font-weight: 600; letter-spacing: -.3px; color: var(--pc-ink);
  }
  .hd .sub { font-size: 12.5px; margin-top: 2px; color: #8b94a3; }
  .hd.greet h1 { font-size: 27px; letter-spacing: -.8px; }
  .hd.greet .sub { font-size: 13px; margin-top: 4px; }

  .back {
    width: 36px; height: 36px; margin-left: -10px; border-radius: 9px;
    border: 1px solid transparent;
  }
  .back svg { width: 20px; height: 20px; }
  .hd .icobtn {
    width: 36px; height: 36px; border-radius: 9px;
    border: 1px solid var(--pc-line); background: #fff; color: var(--ink2);
    transition: color .16s, border-color .16s, background .16s;
  }
  .hd .icobtn svg { width: 18px; height: 18px; }

  /* ---------- 内容区 ---------- */
  .main {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 40px 80px;
  }
  .app.detail .main { max-width: 900px; }
  .app.narrow .main { max-width: 820px; }
  /* 「我的」页在宽屏是两栏（账号 | 菜单），需要多一点宽度 */
  .app.narrow .main:has(.me-wrap) { max-width: 960px; }

  /* 纯表单页（申请用章 / 新建项目）桌面端做成一张浮起的白卡：
     手机上没有任何 .card 直接子元素，用 :has 区分；不支持 :has 的浏览器
     只是维持窄列排版，不影响使用 */
  .app.narrow .main:not(:has(> .card)):not(:has(> .me-wrap)) {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--pc-line);
    border-radius: 18px;
    box-shadow: 0 18px 44px -24px rgba(16, 24, 40, .22);
    padding: 34px 40px 36px;
    margin: 30px auto 72px;
  }
  .app.narrow .main:not(:has(> .card)):not(:has(> .me-wrap)) .field { margin-bottom: 20px; }
  .app.narrow .main:not(:has(> .card)):not(:has(> .me-wrap)) .field label {
    font-size: 12.5px; margin-bottom: 8px; letter-spacing: .01em;
  }
  .app.narrow .main:not(:has(> .card)):not(:has(> .me-wrap)) .input { height: 46px; font-size: 14.5px; }
  .app.narrow .main:not(:has(> .card)):not(:has(> .me-wrap)) > .btn { margin-top: 10px; }
  .app.narrow .main > .btn[data-act="submit-seal"],
  .app.narrow .main > .btn[data-act="submit-project"] { height: 46px; }

  /* ---------- 侧栏 ---------- */
  /* 详情 / 表单页在手机上藏起底栏，宽屏要把侧栏放回来 */
  .app.notab .tabbar { display: flex; }
  .tabbar {
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--side-w); max-width: none; margin: 0;
    flex-direction: column; align-items: stretch;
    background: linear-gradient(180deg, #121c2e 0%, #0b1220 100%);
    border-top: 0; border-right: 0;
    padding: 0 14px 16px;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .05);
  }

  /* 品牌区 */
  .side-hd { display: block; padding: 24px 10px 22px; }
  .side-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .sb-ico {
    width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    display: grid; place-items: center;
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .9);
  }
  .sb-ico svg {
    width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .sb-tx { min-width: 0; }
  .sb-tx b {
    display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.1px;
    line-height: 1.3; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sb-tx i {
    display: block; font-style: normal; margin-top: 3px;
    font-size: 9.5px; letter-spacing: .16em; color: rgba(255, 255, 255, .32);
  }

  /* 侧栏主行动按钮：整个后台唯一的常驻主按钮 */
  .side-new {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 42px; margin: 0 0 26px;
    border-radius: 10px;
    background: linear-gradient(180deg, #2f6fed 0%, #1d4ed8 100%);
    color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
    box-shadow: 0 10px 22px -12px rgba(37, 99, 235, 1), inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: filter .16s, transform .1s;
  }
  .side-new:active { transform: translateY(1px); }

  /* 分组标题 */
  .side-sec {
    display: block; padding: 0 12px 9px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
    color: rgba(255, 255, 255, .28); text-transform: uppercase;
  }
  .side-sec-2 { margin-top: 26px; }

  /* 侧栏第二组（管理类入口）：视觉上比主 tab 轻一档 */
  .side-tools { display: flex; flex-direction: column; gap: 2px; }
  .tabbar .tb-tool {
    position: relative; width: 100%; height: 38px;
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    padding: 0 12px; border-radius: 9px;
    font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .48);
    transition: background .15s, color .15s;
  }
  .tabbar .tb-tool svg { width: 16px; height: 16px; opacity: .9; }

  /* 导航：把底部 tab 竖过来 */
  .tabbar .tb-items {
    display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto;
  }
  .tabbar button {
    position: relative;
    flex: 0 0 auto; width: 100%; height: 43px;
    flex-direction: row; justify-content: flex-start; gap: 11px;
    padding: 0 12px; border-radius: 9px;
    font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .62);
    transition: background .15s, color .15s;
  }
  .tabbar button svg { width: 18px; height: 18px; opacity: .95; }
  .tabbar button.on {
    background: rgba(255, 255, 255, .10);
    color: #fff; font-weight: 600;
  }
  /* 选中态的左亮条：比整块高亮更克制，也更容易一眼定位 */
  .tabbar button.on::before {
    content: ""; position: absolute; left: -14px; top: 11px; bottom: 11px;
    width: 3px; border-radius: 0 3px 3px 0; background: #3b82f6;
  }
  .tabbar .dot {
    position: static; margin-left: auto; top: auto; right: auto;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    font-size: 10.5px; line-height: 18px;
    background: #ef4444; color: #fff;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .14);
  }

  /* 侧栏底部：当前登录人 */
  .side-ft {
    display: flex; align-items: center; gap: 10px;
    margin-top: auto; padding: 14px 8px 2px;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
  .side-ft .sf-n {
    font-size: 13px; font-weight: 500; line-height: 1.3; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .side-ft .sf-r {
    font-size: 11px; margin-top: 2px; color: rgba(255, 255, 255, .4);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .side-ft .sf-out {
    flex: 0 0 auto; width: auto; height: 28px; padding: 0 10px;
    border-radius: 7px; font-size: 11.5px;
    color: rgba(255, 255, 255, .58);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: color .15s, border-color .15s, background .15s;
  }

  /* ---------- 卡片 ---------- */
  .card {
    border-radius: var(--pc-radius);
    border-color: var(--pc-line);
    box-shadow: var(--pc-shadow);
    padding: 20px 22px;
    margin-bottom: 16px;
  }
  .acard {
    border-radius: var(--pc-radius);
    border-color: var(--pc-line);
    box-shadow: var(--pc-shadow);
    padding: 17px 20px 16px;
    margin-bottom: 0;
    transition: box-shadow .18s, transform .18s, border-color .18s;
  }
  .acard .ttl { font-size: 15.5px; letter-spacing: -.15px; }
  .acard .meta { font-size: 12.5px; gap: 5px 14px; margin-top: 2px; }
  .acard .flag { width: 3px; }

  /* 列表：能并排就并排。400px 下限在 1440 屏是 3 列，1280 屏 2 列 */
  .cards {
    display: grid;
    /* min(100%, 400px) 而不是 400px：右栏只有 330px 时，
       固定 400px 会把卡片顶出容器，产生横向滚动条 */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
    gap: 16px;
  }
  .cards > .acard,
  .cards > .card { margin-bottom: 0; height: 100%; }

  /* 列表页（用章 / 项目）：卡片排成单列宽行。
     手机上 .cards.list 没有任何样式，仍是原来的竖排卡片 ——
     这一条只是让宽屏从「一堆卡片」变成「一张清单」。 */
  .cards.list {
    display: flex; flex-direction: column;
    grid-template-columns: none; gap: 10px;
  }
  .cards.list .acard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "ttl meta badge" "track track track";
    column-gap: 28px; row-gap: 13px;
    align-items: center;
    padding: 19px 24px 20px;
    height: auto;
  }
  /* 把 .top 摊平，标题、右侧元信息、状态徽章形成三列，
     一眼扫下来就是「是什么 / 谁的 / 到哪一步了」 */
  .cards.list .acard .top { display: contents; }
  .cards.list .acard .ttl { grid-area: ttl; -webkit-line-clamp: 1; }
  .cards.list .acard .top .badge { grid-area: badge; justify-self: end; }
  .cards.list .acard .meta {
    grid-area: meta; justify-content: flex-end;
    flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
    gap: 0 14px;
  }
  /* 项目卡带九段进度：限制宽度，拉满整行会像一条装饰线 */
  .cards.list .acard .track { grid-area: track; margin: 0; max-width: 460px; gap: 3px; }
  /* 九段进度在小尺寸下会糊成一条线，宽屏有空间，把段与段分开 */
  .cards.list .acard .track .st { height: 5px; border-radius: 2px; }
  .cards.list .acard .flag { top: 15px; bottom: 15px; border-radius: 2px; }
  /* 没有进度条的单据行只占一行，避免多出 grid 空行造成的底部空隙 */
  .cards.list .acard:not(:has(.track)) {
    grid-template-areas: "ttl meta badge";
    row-gap: 0;
  }

  /* ---------- 区块标题 ---------- */
  .sec-title {
    margin: 30px 2px 13px;
    font-size: 14px; font-weight: 600; letter-spacing: -.1px; color: var(--pc-ink);
  }
  .sec-title .n { font-size: 12.5px; }
  .home-l > .sec-title:first-child,
  .home-r > .sec-title:first-child { margin-top: 4px; }

  /* ---------- 工作台：左右分栏 ---------- */
  .home-l, .home-r { min-width: 0; }
  .home-r > .entries:first-child { margin-top: 0; }

  /* 待办盒：页面唯一"需要动手"的区块，做得比普通卡更实 */
  .todo {
    border-radius: 16px;
    border-color: var(--pc-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -18px rgba(16, 24, 40, .3);
    margin-bottom: 22px;
  }
  .todo-hd { padding: 17px 22px; gap: 9px; }
  .todo-hd .pip { width: 7px; height: 7px; border-radius: 4px; }
  .todo-hd .t { font-size: 15px; letter-spacing: -.15px; }
  .todo-hd .cnt {
    margin-left: auto; font-size: 12px; color: var(--ink2);
    background: #f2f4f8; border-radius: 999px; padding: 3px 11px;
  }
  .td { padding: 17px 22px; transition: background .14s; }
  .td .ttl { font-size: 15px; letter-spacing: -.1px; }
  .td .meta { font-size: 12.5px; margin-top: 4px; }
  .td .acts { margin-top: 12px; gap: 9px; }
  .td .reason { margin-top: 9px; font-size: 12.5px; padding: 7px 11px; border-radius: 7px; }
  .td-more { padding: 13px; font-size: 12.5px; }

  /* 状态指标 → KPI 卡：数字是主角 */
  .entries {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    max-width: none; margin-bottom: 22px;
  }
  .entry {
    height: auto; min-height: 96px;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 3px; padding: 18px 20px;
    border-radius: var(--pc-radius); border-color: var(--pc-line);
    box-shadow: var(--pc-shadow);
    transition: box-shadow .18s, transform .18s, border-color .18s;
  }
  .entry .ev {
    font-size: 33px; font-weight: 600; letter-spacing: -1.4px; line-height: 1.05;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
  .entry .et { font-size: 12.5px; color: var(--ink3); }
  .entry.zero .ev { color: #c4cad4; }

  .quick { gap: 12px; margin-bottom: 6px; }
  .quick .btn { height: 44px; font-size: 14px; }

  /* ---------- 按钮 ---------- */
  .btn {
    height: 46px; border-radius: 10px; font-size: 14.5px;
    background: linear-gradient(180deg, #2f6fed 0%, #1d4ed8 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    transition: filter .15s, box-shadow .15s, background .15s, border-color .15s;
  }
  .btn.ghost {
    background: #fff; border-color: var(--pc-line); color: var(--ink);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  }
  .btn.sm { height: 36px; font-size: 13px; padding: 0 14px; border-radius: 8px; }
  .btn.xs { height: 32px; font-size: 12.5px; padding: 0 16px; border-radius: 8px; }
  .btn.danger { background: var(--danger); box-shadow: none; }
  .btn.ok { background: var(--ok); box-shadow: none; }

  /* ---------- 筛选条 ---------- */
  /* 手机上横向滚动省地方；PC 上让它换行铺开，不要出现半截滚动条 */
  .chips {
    flex-wrap: wrap; overflow: visible; gap: 9px;
    padding: 0 0 18px; margin-bottom: 2px;
  }
  .chip {
    height: 34px; padding: 0 15px; border-radius: 9px;
    font-size: 13px; border-color: var(--pc-line); color: var(--ink2);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
    transition: border-color .15s, color .15s, background .15s;
  }
  .chip.on {
    background: #111a2b; border-color: #111a2b; color: #fff; font-weight: 500;
    box-shadow: 0 6px 16px -10px rgba(17, 26, 43, .9);
  }

  /* ---------- 表单页的细节 ---------- */
  /* 照片上传框在手机上按 4 宫格铺满，PC 上不要跟着变大 */
  .app.narrow .main .photos { grid-template-columns: repeat(auto-fill, 116px); gap: 10px; }
  /* 提交按钮不再通栏：桌面表单的主操作放右下才是常规位置 */
  .app.narrow .main > .btn[data-act="submit-seal"],
  .app.narrow .main > .btn[data-act="submit-project"] {
    display: flex; width: 190px; margin-left: auto; margin-top: 10px;
  }

  /* ---------- 表单页的细节 ---------- */
  /* 照片上传框在手机上按 4 宫格铺满，PC 上不要跟着变大 */
  .app.narrow .main .photos { grid-template-columns: repeat(auto-fill, 116px); gap: 10px; }
  /* 提交按钮不再通栏：桌面表单的主操作放右下才是常规位置 */
  .app.narrow .main > .btn[data-act="submit-seal"],
  .app.narrow .main > .btn[data-act="submit-project"] {
    display: flex; width: 190px; margin-left: auto; margin-top: 10px;
  }

  /* ---------- 详情页 ---------- */
  /* 手机上"标签靠左、值靠右"是为省宽度；宽屏两端顶到边，读一行要横跨半屏 */
  .app.detail .kv .v { text-align: left; }
  .app.detail .kv { padding: 10px 0; font-size: 13.5px; }
  .app.detail .kv .k { flex: 0 0 92px; }
  .app.detail .photos { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  /* 详情页的操作按钮靠右排，通栏会让"驳回"看起来和"通过"一样重 */
  .app.detail .btn-row { justify-content: flex-end; }
  .app.detail .btn-row .btn { flex: 0 0 auto; min-width: 132px; }
  .app.detail .main > .btn {
    display: flex; max-width: 210px; margin-left: auto;
  }
  .app.detail .tl { padding-left: 26px; }
  .app.detail .tl-item .t { font-size: 13.5px; }
  .app.detail .tl-item .d { font-size: 12.5px; }
  /* 详情页的操作按钮靠右排，通栏会让"驳回"看起来和"通过"一样重 */
  .app.detail .btn-row { justify-content: flex-end; }
  .app.detail .btn-row .btn { flex: 0 0 auto; min-width: 132px; }
  .app.detail .main > .btn {
    display: flex; max-width: 210px; margin-left: auto;
  }
  .app.detail .tl { padding-left: 26px; }
  .app.detail .tl-item .t { font-size: 13.5px; }
  .app.detail .tl-item .d { font-size: 12.5px; }

  /* ---------- 弹层：底部抽屉 → 居中对话框 ---------- */
  .sheet-wrap {
    align-items: center; padding: 24px;
    background: rgba(16, 24, 40, .45);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .sheet {
    max-width: 480px; border-radius: 18px;
    padding: 26px 26px 22px;
    box-shadow: 0 32px 80px -20px rgba(16, 24, 40, .38);
    animation: sheet-pop .16s ease-out;
  }
  .sheet h3 { font-size: 17px; }
  .sheet .sh-sub { font-size: 12.5px; }
  @keyframes sheet-pop {
    from { transform: scale(.97) translateY(6px); opacity: .6; }
    to   { transform: none; opacity: 1; }
  }

  /* ---------- 提示条：挪到顶部，不挡按钮 ---------- */
  .toast {
    bottom: auto; top: 24px;
    font-size: 13.5px; padding: 11px 20px; border-radius: 10px;
    box-shadow: 0 16px 40px -16px rgba(16, 24, 40, .6);
    animation: toast-in .18s ease-out;
  }
  @keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }

  /* ---------- 空态 ---------- */
  .empty { padding: 56px 16px; font-size: 13.5px; }
  .empty svg { width: 40px; height: 40px; }

  /* ---------- 浮动主按钮 → 右下角 ---------- */
  /* 这两颗按钮的定位写在行内 style 里，必须 !important 才盖得住；
     选择器限定 .main 的直接子元素，避免误伤 header 里的按钮 */
  .main > .btn[data-act="new-seal"],
  .main > .btn[data-act="new-project"] {
    left: auto !important;
    right: 40px !important;
    bottom: 40px !important;
    transform: none !important;
    padding: 0 22px !important;
    height: 46px !important;
    box-shadow: 0 16px 32px -12px rgba(29, 78, 216, .6), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  }

  /* ---------- A4 审批单 ---------- */
  /* 这一页顶层是 .doc-wrap，不经过 shell()，既没有侧栏也没有 .app */
  .doc-wrap {
    padding: 30px 24px 48px;
    background: var(--pc-bg);
    overflow-x: auto;
  }
  .doc-bar { margin-bottom: 16px; }
  .doc {
    box-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 24px 60px -32px rgba(16, 24, 40, .4);
  }

  /* ---------- 登录 / 绑定 / 完善信息 ---------- */
  /* 左品牌板 + 右表单：手机上是普通竖排，完全没有这两栏 */
  .root:has(> .auth-wrap) { display: block; max-width: none; min-height: 100vh; }
  .auth-wrap { display: grid; grid-template-columns: minmax(460px, 1.02fr) minmax(460px, .98fr); min-height: 100vh; }

  .auth-art {
    display: flex; flex-direction: column;
    padding: 48px 56px;
    background:
      radial-gradient(760px 480px at 4% -6%, rgba(59, 130, 246, .22) 0%, rgba(59, 130, 246, 0) 58%),
      radial-gradient(620px 420px at 96% 104%, rgba(29, 78, 216, .20) 0%, rgba(29, 78, 216, 0) 58%),
      linear-gradient(158deg, #0d1727 0%, #070d17 100%);
    background-color: #0b1220;
    color: #fff;
    position: relative; overflow: hidden;
  }
  /* 一条极细的网格纹理，让大面积深色不死板 */
  .auth-art::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(80% 60% at 30% 30%, #000 0%, transparent 78%);
    mask-image: radial-gradient(80% 60% at 30% 30%, #000 0%, transparent 78%);
  }
  .auth-art > * { position: relative; z-index: 1; }
  .aa-brand { display: flex; align-items: center; gap: 11px; }
  .aa-ico {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 10px 24px -10px rgba(59, 130, 246, .95);
  }
  .aa-ico svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round; }
  .aa-nm { font-size: 14.5px; font-weight: 600; letter-spacing: -.1px; }
  .aa-mid { margin-top: auto; }
  .aa-eyebrow {
    font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
    color: rgba(255, 255, 255, .34); margin-bottom: 18px;
  }
  .aa-mid h2 {
    margin: 0 0 26px; font-size: 38px; line-height: 1.32; font-weight: 600;
    letter-spacing: -1.2px;
  }
  .aa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
  .aa-list li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .72);
  }
  .aa-list svg {
    width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px;
    stroke: #60a5fa; fill: none; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .aa-foot {
    margin-top: auto; padding-top: 40px;
    font-size: 11.5px; color: rgba(255, 255, 255, .3);
  }

  .auth-wrap .login {
    align-self: center; justify-self: center;
    width: 100%; max-width: 388px;
    margin: 0; padding: 8px 0;
    background: transparent; border: 0; box-shadow: none;
  }
  .auth-wrap .login .logo { display: none; }   /* 左边已经有 logo 了 */
  .auth-wrap .login h2 { font-size: 26px; letter-spacing: -.7px; }
  .auth-wrap .login p.desc { font-size: 13.5px; line-height: 1.7; margin-bottom: 30px; color: var(--ink2); }
  .auth-wrap .login .field { margin-bottom: 18px; }
  .auth-wrap .login .field label { font-size: 12.5px; margin-bottom: 8px; }
  .auth-wrap .login .input { height: 46px; font-size: 14.5px; }
  .auth-wrap .login .btn { height: 46px; }
  .auth-wrap .login .code-row .btn { height: 46px; font-size: 13px; padding: 0 16px; }
  .auth-wrap .login .or { margin: 24px 0 16px; }
  .auth-wrap .login .oauth .btn { height: 44px; font-size: 13.5px; }
  .auth-wrap .login .legal { font-size: 11.5px; margin-top: 24px; }

  /* ---------- 「我的」页：窄列卡片更精致 ---------- */
  .app.narrow .main > .card {
    padding: 18px 20px;
    box-shadow: var(--pc-shadow);
    border-radius: var(--pc-radius);
  }

  /* 两栏：左边是「我是谁」，右边是「能做什么」。
     nth-child 定位而不是改 DOM 顺序，手机上的阅读顺序保持不变 */
  .me-wrap {
    display: grid;
    grid-template-columns: 304px minmax(0, 1fr);
    grid-template-areas: "user menu" "about menu";
    gap: 18px;
    align-items: start;
  }
  .me-wrap > .card { margin-bottom: 0; }
  .me-wrap > .card:nth-child(1) { grid-area: user; }
  .me-wrap > .card:nth-child(2) { grid-area: menu; }
  .me-wrap > .card:nth-child(3) { grid-area: about; }

  .me-wrap > .card:nth-child(1) {
    flex-direction: column; align-items: flex-start;
    gap: 16px !important;
    padding: 30px 26px 26px;
  }
  /* 头像在左栏放大一档，姓名与身份用更明确的层级 */
  .me-wrap > .card:nth-child(1) > .grow > div:first-child {
    font-size: 19px !important; letter-spacing: -.3px;
  }
  .me-wrap > .card:nth-child(1) > .grow > .small { font-size: 12.5px; line-height: 1.7; }

  .me-wrap > .card:nth-child(2) { padding: 6px 24px; }
  .me-wrap > .card:nth-child(2) .kv {
    padding: 17px 0; font-size: 14px;
  }
  .me-wrap > .card:nth-child(2) .kv:hover { background: #fafbfd; }
  .me-wrap > .card:nth-child(3) { padding: 16px 20px; }
  .me-wrap > .card:nth-child(3) .small { font-size: 12.5px; line-height: 1.75; }

  /* ---------- 鼠标悬停 ---------- */
  .acard:hover, .td:hover, .entry:hover, .card.tap:hover,
  .tabbar button:hover, .hd .icobtn:hover, .back:hover { cursor: pointer; }
}

@media (min-width: 900px) and (hover: hover) {
  .acard:hover {
    box-shadow: var(--pc-shadow-hi);
    transform: translateY(-2px);
    border-color: #dbe2ec;
  }
  .td:hover { background: #f8fafc; }
  .entry:hover {
    box-shadow: var(--pc-shadow-hi);
    transform: translateY(-2px);
    border-color: #dbe2ec;
  }
  .card.tap:hover, .app.narrow .main > .card.tap:hover { background: #fbfcfe; }
  .tabbar button:not(.on):hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .hd .icobtn:hover { border-color: #d5dbe5; color: var(--pc-ink); background: #fbfcfe; }
  .back:hover { background: #f2f4f8; }
  .chip:hover { border-color: #cfd6e2; color: var(--pc-ink); }
  .btn:hover { filter: brightness(1.06); }
  .btn.ghost:hover { background: #f8fafc; filter: none; border-color: #d5dbe5; }
  .btn.ok:hover, .btn.danger:hover { filter: brightness(1.05); }
  .side-new:hover { filter: brightness(1.1); }
  .side-ft .sf-out:hover {
    color: #fff; border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .06);
  }
  .acard:hover .ttl, .td:hover .ttl {
    text-decoration: underline; text-decoration-color: #c9ced8; text-underline-offset: 2px;
  }
}

/* 工作台左右分栏只在真正够宽时才开，否则右栏的 KPI 会被压成一条细缝 */
@media (min-width: 1100px) {
  .home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(330px, 1fr);
    gap: 0 26px;
    align-items: start;
  }
}

/* 打印：把给屏幕留的边距全部清掉。
   纸张宽度通常 < 900px 使上面的规则本就不生效，但 A3 / 横向打印会超 900，
   那时侧栏宽度会变成一张纸的白边 —— !important 兜住 */
@media print {
  .doc-wrap {
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }
}