/* Header buttons */
  .header-actions { display:flex; align-items:center; gap:8px; }
  .add-store-btn { padding:7px 16px; border:none; border-radius:var(--radius-sm); background:var(--brand); color:#fff; cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap; transition:all 0.2s; display:inline-flex; align-items:center; gap:5px; box-shadow:0 2px 6px rgba(37,99,235,0.25); }
  .add-store-btn:hover { background:var(--brand-hover); transform:translateY(-1px); box-shadow:0 4px 10px rgba(37,99,235,0.35); }
  .edit-store-btn { padding:7px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text-muted); cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap; transition:all 0.2s; display:inline-flex; align-items:center; gap:5px; }
  .edit-store-btn:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-bg); }
  .gen-link-btn { padding:7px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text-muted); cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap; transition:all 0.2s; display:inline-flex; align-items:center; gap:5px; }
  .gen-link-btn:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-bg); }
  /* Progress summary */
  .progress-summary { display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
  .ps-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 20px; flex:1; min-width:140px; box-shadow:var(--shadow-card); }
  .ps-label { font-size:12px; color:var(--text-subtle); margin-bottom:4px; }
  .ps-value { font-size:24px; font-weight:700; }
  .ps-value .small { font-size:14px; color:var(--text-subtle); font-weight:400; }
  /* 六张进度卡各自的主色：total=品牌蓝（卡片底色/边框也跟品牌色，不用中性灰）、
     week/month 沿用清单里已有的周期色，ok/warn 沿用语义色，与徽章/状态标签同源。 */
  .ps-card.total { background:var(--brand-bg); border-color:var(--brand-bd); }
  .ps-card.total .ps-value { color:var(--brand); }
  .ps-card.week .ps-value { color:var(--week); }
  .ps-card.month .ps-value { color:var(--month); }
  .ps-card.ok .ps-value { color:var(--ok); }
  .ps-card.warn { border-color:var(--warn-bd); }
  .ps-card.warn .ps-value { color:var(--warn); }
  .ps-sub { font-size:11px; color:var(--text-subtle); margin-top:4px; font-variant-numeric:tabular-nums; }
  .ps-bar { height:4px; border-radius:2px; background:var(--track); overflow:hidden; margin-top:8px; }
  .ps-bar i { display:block; height:100%; border-radius:2px; transition:width 0.5s; }
  .ps-card.total .ps-bar i { background:var(--brand); }
  .ps-card.week .ps-bar i { background:var(--week); }
  .ps-card.month .ps-bar i { background:var(--month); }
  /* 分段切换（运营 SOP 目录 / 每周工作 / 每月工作 / 新品操作）连同模块卡片网格
     一起搬到了 css/task-list.css——本文件已到 300 行上限，见那边的头注释。 */
  /* 命中计数 */
  .task-hit-count { font-size:12px; color:var(--text-subtle); font-variant-numeric:tabular-nums; margin-bottom:10px; }
  /* Filter bar */
  .filter-bar { display:flex; gap:8px; margin-bottom:14px; align-items:center; flex-wrap:wrap; }
  .filter-chip { padding:5px 14px; border:1px solid var(--border); border-radius:16px; background:var(--surface); cursor:pointer; font-size:13px; color:var(--text-muted); transition:all 0.2s; }
  .filter-chip:hover { border-color:var(--brand); color:var(--brand); }
  .filter-chip.active { background:var(--brand); color:#fff; border-color:var(--brand); }
  .filter-bar .search-box { flex:1; min-width:180px; padding:6px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; outline:none; }
  /* Module sections */
  .module-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; box-shadow:var(--shadow-card); }
  .module-header { padding:12px 16px; background:linear-gradient(90deg,var(--brand-bg),var(--surface)); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
  .module-header h3 { font-size:15px; color:var(--brand); }
  .module-header .module-stats { font-size:12px; color:var(--text-muted); }
  .module-header .module-stats b { color:var(--brand); }
  .module-bar { width:120px; height:5px; background:var(--track); border-radius:3px; overflow:hidden; margin-left:12px; }
  .module-bar-fill { height:100%; border-radius:3px; background:var(--brand); transition:width 0.5s; }
  /* 折叠指示：转 -90deg 收成 ▶ 的视觉效果，同 .module-items.collapsed 一起切换 */
  .module-toggle { font-size:12px; color:var(--text-subtle); margin-left:8px; transition:transform 0.2s; display:inline-block; }
  .module-toggle.collapsed { transform:rotate(-90deg); }
  .module-items { padding:4px 0; }
  .module-items.collapsed { display:none; }

  .task-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid #f5f5f5; transition:background 0.15s; }
  .task-row:last-child { border-bottom:none; }
  .task-row:hover { background:var(--brand-bg); }
  .task-check { width:20px; height:20px; border:2px solid #ddd; border-radius:var(--radius-sm); cursor:pointer; flex-shrink:0; position:relative; transition:all 0.2s; }
  .task-check:hover { border-color:var(--brand); }
  .task-check.done { background:var(--ok); border-color:var(--ok); }
  .task-check.done::after { content:'\2713'; color:#fff; font-size:13px; font-weight:700; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
  .task-id { font-size:11px; color:#ccc; font-family:monospace; width:36px; flex-shrink:0; }
  .task-priority { font-size:10px; padding:1px 7px; border-radius:var(--radius-sm); flex-shrink:0; }
  .tp-high { background:var(--bad-bg); color:var(--bad); }
  .tp-mid { background:var(--warn-bg); color:var(--warn); }
  .tp-low { background:var(--ok-bg); color:var(--ok); }
  .task-title { font-size:13px; flex:1; }
  .task-title.done { text-decoration:line-through; color:var(--text-subtle); }
  .task-freq { font-size:10px; padding:1px 7px; border-radius:var(--radius-sm); flex-shrink:0; }
  .tf-daily { background:var(--brand-bg); color:var(--brand); }
  .tf-weekly { background:var(--week-bg); color:var(--week); }
  .tf-monthly { background:var(--month-bg); color:var(--month); }
  /* 靛蓝挪到中性 --once：原来的靛蓝色值与新品牌蓝几乎同色，且「一次」是 63 条里
     最常见的标签，本就不该抢眼 */
  .tf-once { background:var(--once-bg); color:var(--once); }
  .tf-fixed { background:var(--once-bg); color:var(--once); }
  .task-note-btn { font-size:11px; padding:3px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); cursor:pointer; color:var(--text-muted); flex-shrink:0; }
  .task-note-btn:hover { border-color:var(--brand); color:var(--brand); }
  .task-note-btn.has-note { border-color:var(--brand); color:var(--brand); background:var(--brand-bg); }
  .task-date { font-size:10px; color:var(--text-subtle); flex-shrink:0; width:80px; text-align:right; }
  /* Task lock */
  .task-check.locked { background:var(--ok); border-color:var(--ok); cursor:not-allowed; }
  .task-check.locked::after { content:'\\1F512'; color:#fff; font-size:10px; font-weight:700; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
  .task-lock-badge { font-size:10px; padding:1px 6px; border-radius:var(--radius-sm); background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-bd); flex-shrink:0; display:inline-flex; align-items:center; gap:2px; }
  .task-lock-badge.locked { background:var(--ok-bg); color:var(--ok); }
  /* 待处理徽章：旧版借用品牌橙兼职"警告"语义，品牌换蓝后不能再兼职，改用真正的
     --warn（原本 zs-ai 没定义警告色，这套 token 就是为此补的） */
  .task-lock-badge.pending { background:var(--warn-bg); color:var(--warn); border-color:var(--warn-bd); }
  .task-status-badge.pending { background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
  /* Progress Window (legacy, replaced by bs- classes) */
  /* 7-day trend */
  .bs-trend { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
  .bs-trend-bars { display:flex; align-items:flex-end; gap:12px; height:120px; padding-top:10px; }
  .bs-trend-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
  .bs-trend-bar { width:100%; max-width:40px; border-radius:var(--radius-sm) var(--radius-sm) 0 0; transition:height 0.5s; position:relative; min-height:4px; }
  .bs-trend-bar.locked { background:linear-gradient(180deg,var(--ok),#73d13d); }
  .bs-trend-bar.logs { background:linear-gradient(180deg,var(--brand),#69c0ff); }
  .bs-trend-bar-val { font-size:10px; font-weight:700; position:absolute; top:-18px; left:50%; transform:translateX(-50%); }
  .bs-trend-date { font-size:10px; color:var(--text-subtle); }
  /* Generate link button */
  .gen-link-btn { padding:6px 16px; border:none; border-radius:var(--radius-sm); background:var(--ok); color:#fff; cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap; transition:all 0.2s; }
  .gen-link-btn:hover { background:#73d13d; transform:translateY(-1px); }
  .gen-link-btn:disabled { background:#ccc; cursor:not-allowed; transform:none; }
  /* Link modal */
  .link-modal { width:520px; max-width:90vw; }
  .link-modal .link-info-box { background:var(--ok-bg); border:1px solid var(--ok-bd); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:14px; font-size:13px; line-height:1.8; }
  .link-modal .link-info-box b { color:var(--ok); }
  .link-modal .link-url-box { display:flex; gap:8px; margin-bottom:14px; }
  .link-modal .link-url-input { flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; background:#f5f5f5; color:var(--text-muted); outline:none; font-family:monospace; }
  .link-modal .link-copy-btn { padding:10px 20px; border:none; border-radius:var(--radius-sm); background:var(--brand); color:#fff; cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap; }
  .link-modal .link-copy-btn:hover { background:#40a9ff; }
  .link-modal .link-tip { font-size:12px; color:var(--text-subtle); margin-top:10px; line-height:1.6; }
  .link-modal .link-actions { display:flex; gap:10px; margin-top:16px; }
  .link-modal .link-action-btn { flex:1; padding:10px; border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:14px; font-weight:600; }
  .link-modal .link-action-btn.copy { background:var(--ok); color:#fff; }
  .link-modal .link-action-btn.copy:hover { background:#73d13d; }
  .link-modal .link-action-btn.close { background:#f5f5f5; color:var(--text-muted); border:1px solid var(--border); }
  .link-modal .link-action-btn.open { background:var(--brand); color:#fff; }
  .link-modal .link-action-btn.open:hover { background:#40a9ff; }
  /* Operator link cards */
  .op-link-card { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:10px; cursor:pointer; transition:all 0.2s; background:var(--surface); }
  .op-link-card:hover { border-color:var(--brand); box-shadow:0 2px 8px rgba(37,99,235,0.15); }
  .op-link-avatar { width:42px; height:42px; border-radius:50%; background:var(--brand-bg); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; flex-shrink:0; }
  .op-link-info { flex:1; min-width:0; }
  .op-link-name { font-size:15px; font-weight:600; color:var(--text); }
  .op-link-stores { font-size:12px; color:var(--text-subtle); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .op-link-count { font-size:11px; padding:2px 8px; border-radius:var(--radius-sm); background:var(--brand-bg); color:var(--brand); font-weight:600; white-space:nowrap; }
  /* Operator mode (via link) */
  .operator-banner { display:flex; align-items:center; gap:10px; padding:10px 16px; background:linear-gradient(90deg,var(--brand-bg),var(--ok-bg)); border:1px solid var(--brand-bd); border-radius:var(--radius-sm); margin-bottom:12px; font-size:13px; }
  .operator-banner .op-store-name { font-weight:700; color:var(--brand); }
  .operator-banner .op-hint { color:var(--text-muted); font-size:12px; }
  /* Modal */
  .modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:1000; justify-content:center; align-items:center; }
  .modal-overlay.show { display:flex; }
  .modal { background:var(--surface); border-radius:var(--radius); padding:24px; width:420px; max-width:90vw; box-shadow:var(--shadow-card); }
  .modal h2 { font-size:18px; margin-bottom:16px; color:var(--brand); }
  .modal-close { float:right; cursor:pointer; font-size:20px; color:var(--text-subtle); }
  .modal .form-group { margin-bottom:12px; }
  .modal label { display:block; font-size:13px; color:var(--text-muted); margin-bottom:4px; }
  .modal input, .modal select { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; outline:none; }
  /* select 单独补 padding-right：上面那条的 padding 会把 css/base.css 全局
     select 规则留给自定义箭头的 30px 右内边距吃掉。 */
  .modal select { padding-right:30px; }
  .modal input:focus, .modal select:focus { border-color:var(--brand); }
  .modal-btn { padding:8px 24px; border-radius:var(--radius-sm); border:none; cursor:pointer; font-size:14px; font-weight:600; }
  .modal-btn-save { background:var(--brand); color:#fff; }
  .modal-btn-save:disabled { opacity:.5; cursor:not-allowed; }
  .modal-btn-cancel { background:#f5f5f5; color:var(--text-muted); border:1px solid var(--border); }
  /* Note popover */
  .note-popover { display:none; position:fixed; z-index:999; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; box-shadow:0 4px 20px rgba(0,0,0,0.12); width:280px; }
  .note-popover.show { display:block; }
  .note-popover textarea { width:100%; min-height:50px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px; font-size:12px; outline:none; resize:vertical; }
  .note-popover .note-save { margin-top:6px; padding:4px 14px; background:var(--brand); color:#fff; border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:12px; }
  /* Upload proof */
  .task-upload-btn { font-size:11px; padding:3px 8px; border:1px solid var(--brand); border-radius:var(--radius-sm); background:var(--brand-bg); cursor:pointer; color:var(--brand); flex-shrink:0; transition:all 0.2s; position:relative; }
  .task-upload-btn:hover { background:var(--brand); color:#fff; }
  .task-upload-btn.has-proof { border-color:var(--ok); background:var(--ok-bg); color:var(--ok); }
  .task-upload-btn .proof-badge { display:inline-block; min-width:16px; height:16px; line-height:16px; text-align:center; background:var(--ok); color:#fff; border-radius:var(--radius-sm); font-size:10px; margin-left:2px; padding:0 4px; }
  .task-proof-area { padding:6px 16px 10px 52px; display:flex; gap:8px; flex-wrap:wrap; }
  .proof-thumb-wrap { position:relative; width:64px; height:64px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); cursor:pointer; }
  .proof-thumb-wrap img { width:100%; height:100%; object-fit:cover; }
  .proof-thumb-del { position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:rgba(245,34,45,0.9); color:#fff; border:none; cursor:pointer; font-size:10px; line-height:16px; text-align:center; opacity:0; transition:opacity 0.2s; }
  .proof-thumb-wrap:hover .proof-thumb-del { opacity:1; }
  .proof-uploading { width:64px; height:64px; border-radius:var(--radius-sm); border:1px dashed var(--brand); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--brand); }
  /* Proof preview modal（三段式：顶部信息条 / 中部看图台 / 底部缩略图轨道） */
  .proof-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.88); z-index:5300; flex-direction:column; }
  .proof-overlay.show { display:flex; }
  .proof-topbar { display:flex; align-items:flex-start; gap:16px; padding:16px 22px; flex-wrap:wrap; }
  /* min-width:0 让 flex 子项可以收缩到内容以下，overflow-wrap 兜住不含空格的
     长文件名——否则单个超长 token 会把顶栏顶宽、把来源信息挤出视口（窄屏尤甚）*/
  .proof-meta { min-width:0; }
  .proof-src { font-size:15px; font-weight:700; color:#fff; overflow-wrap:anywhere; }
  .proof-sub { font-size:12px; color:rgba(255,255,255,0.66); margin-top:4px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .proof-acts { margin-left:auto; display:flex; gap:8px; flex-shrink:0; }
  .proof-act { padding:6px 14px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,0.26); background:rgba(255,255,255,0.1); color:#fff; font-size:13px; cursor:pointer; font-family:inherit; }
  .proof-act:hover { background:rgba(255,255,255,0.22); }
  .proof-del-in-preview { border-color:rgba(245,34,45,.5); background:rgba(245,34,45,.22); }
  .proof-del-in-preview:hover { background:var(--bad); }
  .proof-stage { flex:1; display:flex; align-items:center; justify-content:center; gap:14px; min-height:0; padding:0 16px; }
  /* .proof-overlay img 会命中层内所有 img（含底部缩略图轨道），改用 id 选择器
     只圈住看图台里的大图，否则缩略图也会被这条规则的 max-width:90vw 撑爆 */
  #proofPreviewImg { max-width:88vw; max-height:calc(100vh - 210px); object-fit:contain; cursor:zoom-in; border-radius:var(--radius-sm); box-shadow:0 8px 40px rgba(0,0,0,0.5); }
  /* min-* 只在适应模式给：放大态要靠 flex item 的 min-width:auto 才不会被压回容器宽度，
     写死 min-width 会让原尺寸横向失效（图被 flex-shrink 压扁，怎么拖都看不到右边） */
  .proof-stage:not(.zoomed) #proofPreviewImg { min-width:120px; min-height:120px; }
  /* safe center：flex 居中 + overflow 时，溢出内容会跑到容器起始侧的负坐标，
     scrollLeft/Top 到 0 也够不着。safe 在溢出时自动退化成 start 对齐 */
  .proof-stage.zoomed { overflow:auto; justify-content:safe center; align-items:safe center; }
  .proof-stage.zoomed #proofPreviewImg { max-width:none; max-height:none; width:auto; cursor:zoom-out; }
  /* 绝对定位到 overlay（而不是留在 .proof-stage 的流里）：放大态下 stage 是滚动容器，
     箭头若是它的 flex 子项就会被推到图的另一端，2400px 宽的图要拖到最右才够得着翻页 */
  .proof-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:1; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.12); color:#fff; border:none; cursor:pointer; font-size:24px; display:flex; align-items:center; justify-content:center; }
  .proof-nav.prev { left:24px; }
  .proof-nav.next { right:24px; }
  .proof-nav:hover { background:rgba(255,255,255,0.25); }
  .proof-strip { display:flex; gap:8px; padding:12px 22px 18px; overflow-x:auto; justify-content:safe center; }
  .proof-th { width:56px; height:40px; border-radius:var(--radius-sm); overflow:hidden; border:2px solid transparent; opacity:.55; cursor:pointer; flex-shrink:0; }
  .proof-th:hover { opacity:.85; }
  .proof-th img { width:100%; height:100%; object-fit:cover; display:block; }
  .proof-th.on { border-color:var(--brand); opacity:1; }
  .task-check.readonly { cursor:default; }
  .task-check.readonly:hover { border-color:#ddd; }
  .task-status-badge { font-size:11px; padding:2px 8px; border-radius:var(--radius-sm); font-weight:600; flex-shrink:0; }
  .task-status-badge.done { background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-bd); }
  .task-status-badge.undone { background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-bd); }
  /* 待补做（决策 9 变更）：复用既有 --warn 语义色，不新造颜色，见 CLAUDE.md 工程约定 */
  .task-status-badge.overdue { background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
  .task-note-readonly { font-size:11px; color:var(--text-muted); padding:3px 8px; background:#fafafa; border:1px solid var(--border); border-radius:var(--radius-sm); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:0; }
  /* 管理端日志凭证缩略图 */
  .log-proofs { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .log-proof-thumb { width:70px; height:70px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border);
    cursor:pointer; transition:all .18s; background:#fafafa; }
  .log-proof-thumb:hover { border-color:var(--brand); transform:translateY(-2px); box-shadow:0 4px 10px rgba(37,99,235,.2); }
  .log-proof-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .log-proof-missing { font-size:12px; color:var(--bad); background:var(--bad-bg); border:1px solid var(--bad-bd);
    padding:5px 10px; border-radius:var(--radius-sm); display:inline-block; }

  /* ===== 用户中心：胶囊 + 下拉面板（js/ui/user-menu.js） ===== */
  .user-chip { padding:4px 9px 4px 4px; border:1px solid var(--border); border-radius:20px; background:#fff;
    display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap;
    transition:border-color .15s, background .15s; font-family:inherit; }
  .user-chip:hover { border-color:var(--brand); background:var(--brand-bg); }
  .user-chip:focus-visible { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
  .user-avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-hover));
    color:#fff; font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .user-panel-head .user-avatar { width:38px; height:38px; font-size:16px; }
  .user-chip-name { font-size:12.5px; font-weight:600; color:var(--text); }
  /* 三档都是职级标识而非状态（对/错、成功/警告），所以不借用 --ok/--warn/--bad
     那三个语义色——各自取一个中性、不冲突的品牌色变体。 */
  .user-role-badge { font-size:10.5px; padding:1px 7px; border-radius:var(--radius-sm); font-weight:600; }
  .user-role-badge.admin { background:var(--once-bg); color:var(--once); }
  .user-role-badge.specialist { background:var(--brand-bg); color:var(--brand-hover); }
  .user-role-badge.assistant { background:var(--week-bg); color:var(--week); }

  .user-panel { position:fixed; width:262px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm);
    box-shadow:0 6px 24px rgba(0,0,0,.12); z-index:900; overflow:hidden;
    opacity:0; transform:translateY(-4px); transition:opacity .15s ease-out, transform .15s ease-out; }
  .user-panel.on { opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion:reduce) { .user-panel { transition:opacity .15s ease-out; transform:none; } }
  .user-panel-head { padding:14px 15px 12px; border-bottom:1px solid #f2f2f2; display:flex; gap:11px; align-items:center; }
  .user-panel-name { font-size:14.5px; font-weight:700; color:var(--text); line-height:1.3; }
  .user-panel-sub { font-size:11.5px; color:var(--text-subtle); margin-top:2px; }
  .user-panel-facts { padding:10px 15px; border-bottom:1px solid #f2f2f2; }
  .user-fact { display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:3px 0; }
  .user-fact span:first-child { color:var(--text-subtle); }
  .user-badge { font-size:10.5px; padding:1px 8px; border-radius:var(--radius-sm); font-weight:600; }
  .user-badge.ok { background:#f0f9eb; color:var(--ok); }
  .user-badge.warn { background:var(--warn-bg); color:var(--warn); }
  .user-badge.link { background:var(--brand-bg); color:var(--brand); }
  .user-panel-acts { padding:6px; }
  .user-menu-item { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--radius-sm); font-size:13px;
    color:var(--text); width:100%; border:none; background:none; cursor:pointer; text-align:left; font-family:inherit; }
  .user-menu-item:hover { background:var(--brand-bg); color:var(--brand); }
  .user-menu-item.danger { color:var(--bad); }
  .user-menu-item.danger:hover { background:var(--bad-bg); }
  .user-menu-icon { width:15px; text-align:center; flex-shrink:0; opacity:.75; }
  .user-menu-divider { height:1px; background:#f2f2f2; margin:5px 8px; }

  @media (max-width: 768px) {
    /* 胶囊窄屏只留头像，姓名/角色徽章收起，省下的横向空间给标签页 */
    .user-chip { padding:3px; gap:0; }
    .user-chip-name, .user-role-badge { display:none; }
    .user-menu-item { min-height:44px; } /* 触控目标下限，同 css/mobile.css 其它交互控件的口径 */
    .user-panel { width:min(262px, calc(100vw - 24px)); }
  }

  /* ===== 店铺卡骨架（js/views/store-card.js 生成）：侧栏（sidebar.js，showBar:true）
     与管理大屏（dashboard.js，showBar:false，自己另画进度环）共用同一份头部结构，
     样式统一写在这里，两处不用各调各的颜色。 */
  /* 只装店名+百分比这一行——两者共用一行宽度，与下面元信息/服务期/徽章三行
     的可用宽度无关（见 views/store-card.js renderStoreCardHead 头部注释）。 */
  .sc-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
  .sc-name { min-width:0; flex:1; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sc-meta { font-size:10.5px; color:var(--text-subtle); margin-top:2px; }
  .sc-meta span:not(:last-child)::after { content:' · '; }
  .sc-rows { display:grid; grid-template-columns:auto 1fr; column-gap:6px; row-gap:2px; margin-top:6px; font-size:11px; }
  .sc-rows dt { color:var(--text-subtle); }
  .sc-rows dd { color:var(--text-muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sc-rows dd.period { font-variant-numeric:tabular-nums; }
  .sc-rows dd.period .to { margin:0 4px; color:var(--text-subtle); }
  .sc-rows dd.muted { color:var(--text-subtle); font-weight:400; }
  /* 运营行按职级分色：颜色只是辅助，职级本身以文字（dt 短标签）呈现 */
  .sc-rows dt.jt-admin { color:var(--once); font-weight:600; }
  .sc-rows dt.jt-specialist { color:var(--brand-hover); font-weight:600; }
  .sc-rows dt.jt-assistant { color:var(--week); font-weight:600; }
  .sc-rows dd.names { color:var(--text); font-weight:600; }
  /* 固定 min-height：有无徽章时卡片高度一致，列表不跳动 */
  .sc-badges { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:6px; min-height:18px; }
  .sc-badge { font-size:10.5px; padding:1px 6px; border-radius:6px; font-weight:600; line-height:1.5; white-space:nowrap; }
  .sc-badge.warn { background:var(--warn-bg); color:var(--warn); }
  .sc-badge.bad { background:var(--bad-bg); color:var(--bad); }
  .sc-badge.ok { background:var(--ok-bg); color:var(--ok); }
  .sc-badge.brand { background:var(--brand-bg); color:var(--brand-hover); }
  .sc-badge.muted { background:none; padding:0; font-weight:400; color:var(--text-subtle); }
  .sc-pct { flex-shrink:0; font-size:13px; font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums; }
  .sc-bar { height:4px; background:var(--track); border-radius:2px; overflow:hidden; margin-top:8px; }
  .sc-bar i { display:block; height:100%; background:var(--brand); border-radius:2px; transition:width 0.5s; }