/* 工作台式外观 v3（设计稿「乐达伙伴 Web 版优化原型」）：
   外框圆角画布 + 浅灰侧栏（白卡激活态）+ 顶栏描边 + 胶囊页签 + 16px 卡片 + 飞书式数据表 + 深色批量条。
   只改外观，不改路由、数据与授权；颜色一律走 lota-tokens。 */
:root{--wb-canvas:rgb(233 236 241);--wb-frame-line:rgb(225 229 236);--wb-rail:rgb(249 250 251);--wb-chip-on:rgb(240 242 246);--wb-row-line:rgb(238 240 245)}

/* —— 外框画布 —— */
@media(min-width:881px){
  body:has(#app[style*="block"]){background:var(--wb-canvas)}
  #app{padding:16px;background:var(--wb-canvas)}
  #app .shell{min-height:calc(100vh - 32px);border:1px solid var(--wb-frame-line);border-radius:22px;background:var(--paper);overflow:clip}
  #app .rail{top:16px;height:calc(100vh - 32px)}
}

/* —— 侧栏 —— */
#app .rail{background:var(--wb-rail);border-right:1px solid var(--line);padding:18px 14px;gap:4px}
#app .brand{padding:2px 6px 12px}
#app .brand .wm{font-size:var(--t-md);letter-spacing:.02em}
#app .workspace-switch{height:auto;padding:3px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:var(--sh-1);margin:0 0 6px}
#app .workspace-switch button{height:34px;border-radius:10px;font-size:var(--t-sm);color:var(--ink-2)}
#app .workspace-switch button[aria-pressed="true"]{background:var(--sunk);color:var(--ink);font-weight:600;box-shadow:none}
#app:not(.team-active) #nav::before{content:"工作台";display:block;padding:10px 10px 6px;font-size:var(--t-xs);color:var(--ink-3)}
#app .nav-sec{padding:14px 10px 6px;font-size:var(--t-xs);font-weight:500;letter-spacing:0;color:var(--ink-3)}
#app .nav-item{height:38px;min-height:38px;padding:0 10px;gap:10px;border-radius:10px;font-size:var(--t-base);color:rgb(58 65 82)}
#app .nav-item:hover{background:rgb(238 240 244);color:var(--ink)}
#app .nav-item.on,#app.team-active .shell .nav-item.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgb(31 36 51/.06),0 0 0 1px rgb(227 230 237)}
#app .nav-item.on svg{color:var(--primary)}
#app .nav-item .badge{background:var(--primary);min-width:20px;height:20px;font-size:var(--t-2xs)}
#app .rail-foot{gap:8px;padding-top:8px;border-top:1px solid var(--line)}
#app .rail-foot .me-line{background:transparent;border-radius:12px;padding:0}
#app .rail-foot .me-row{padding:8px 6px;border:0;background:transparent}
#app .rail-foot .me-row:hover{background:rgb(238 240 244)}

/* —— 顶栏 —— */
#app .main{padding:0;gap:0;background:var(--paper)}
#app .topbar{position:sticky;top:0;z-index:var(--z-topbar);min-height:0;height:auto;padding:18px 28px;align-items:center;gap:10px;background:rgb(245 246 248/.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#prototypePageTitle{font-size:var(--t-xl);line-height:1.3}
#prototypePageSubtitle{margin:2px 0 0;font-size:var(--t-xs)}
#app .topbar .rail-search{width:240px;height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);font-size:var(--t-sm);color:var(--ink-3)}
#app .topbar .rail-search kbd{padding:1px 6px;border-radius:6px;background:var(--sunk);font-size:var(--t-3xs);color:var(--ink-2)}
#app .topbar .icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line-2);background:var(--surface)}
#app .topbar .btn{height:38px;padding:0 14px;border-radius:11px;font-size:var(--t-sm)}
#app .topbar .btn-ghost{border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
#app .topbar .btn-primary{box-shadow:var(--sh-btn)}

/* —— 页签：胶囊式（灰底激活），不再下划线 —— */
#app .pw-tabs{height:auto;min-height:0;margin:0;padding:12px 28px 0;gap:4px;border:0;background:transparent;align-items:center;overflow-x:auto}
#app .pw-tabs:empty{display:none}
#app .pw-tabs a,#app .pw-tabs button{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:0;border-radius:9px;color:var(--ink-2);font-size:var(--t-sm);line-height:1;white-space:nowrap}
#app .pw-tabs a:hover,#app .pw-tabs button:hover{background:rgb(238 240 244);color:var(--ink)}
#app .pw-tabs a[aria-current="page"],#app .pw-tabs button[aria-current="page"],#app.team-active .shell .pw-tabs a[aria-current="page"]{background:var(--wb-chip-on);color:var(--ink);font-weight:600;border:0}

/* —— 内容区 —— */
#app .content,#app.team-active .shell .content,#app.team-active .shell .content.wide{padding:22px 28px 40px}
#app .pw-settings-shell>.pw-tabs{margin:22px 0 0 28px;padding:6px}
#app .pw-settings-shell>.pw-tabs a{height:38px;justify-content:flex-start}
#app .pw-settings-shell>.content{padding-left:20px}

/* —— 卡片 / 面板 —— */
#app .card,#app .pw-card,#app .pw-section,#app .pw-panel,#app .pw-list-card,#app .panel,#app .tblcard{border:1px solid rgb(232 235 242);border-radius:16px;box-shadow:none;background:var(--surface)}

/* —— 数据表（飞书式）：灰表头、56px 行、分组行 —— */
#app .lota-customer-table{border-color:rgb(232 235 242);border-radius:16px}
#app .lota-customer-table th,#app .tbl-head,#app table.tbl th,#app .tbl th{background:rgb(248 249 252);color:var(--ink-2);font-weight:500;font-size:var(--t-xs)}
#app .lota-customer-table td{height:56px;border-bottom-color:var(--wb-row-line)}
#app .tbl-row{border-bottom-color:var(--wb-row-line)}
#app .tbl-grp,#app .lct-group-row td{background:rgb(244 246 250);color:var(--ink-2);font-size:var(--t-xs)}
#app .lota-customer-table tbody tr:hover,#app .tbl-row:hover{background:var(--row-hover)}

/* —— 徽标 / 标签：全圆胶囊 —— */
#app .lct-badge,#app .tag{border-radius:var(--r-pill);font-weight:500}

/* —— 输入 / 按钮几何统一 —— */
#app .content .btn{border-radius:11px}
#app .content input[type="search"],#app .content input[type="text"],#app .content select{border-radius:10px}

/* —— 深色批量操作条（「我的客户」/ 企业池 / 名单详情共用口径） —— */
#app .bulkbar{border-radius:14px;padding:8px 10px 8px 16px;box-shadow:0 16px 44px rgb(31 36 51/.28)}

@media(max-width:880px){
  #app .topbar{padding:12px 16px;background:var(--surface)}
  #app .pw-tabs{padding:8px 16px 0;background:var(--surface)}
  #app .content,#app.team-active .shell .content,#app.team-active .shell .content.wide{padding:16px 16px 120px}
  #app .pw-settings-shell>.pw-tabs{margin:0;padding:8px 16px 0}
  #app .pw-settings-shell>.content{padding-left:16px}
  #app .rail{background:var(--surface)}
}
/* 企业空间顶栏：prototype-shell.css 的 team-active 规则把底色置透明，吸顶后正文会透出，这里与个人空间对齐 */
@media(min-width:881px){#app.team-active .shell .topbar{padding:18px 28px;background:rgb(245 246 248/.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}}
@media(min-width:881px) and (max-width:1180px){#app .topbar,#app.team-active .shell .topbar{padding:16px 22px}#app .pw-tabs{padding:12px 22px 0}#app .content,#app.team-active .shell .content,#app.team-active .shell .content.wide{padding:20px 22px 36px}#app .topbar .rail-search{width:200px}}

/* —— 四格概览（首页 / 伙伴共用）：只放真实计数 —— */
#app .wb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 0 18px;background:var(--surface);border:1px solid rgb(232 235 242);border-radius:16px;overflow:hidden}
#app .wb-kpi{display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px 20px;border-right:1px solid var(--wb-row-line)}
#app .wb-kpi:last-child{border-right:0}
#app .wb-kpi-h{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--ink-2)}
#app .wb-kpi-i{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:8px}
#app .wb-kpi-v{font-size:var(--t-num);font-weight:600;line-height:1.1;color:var(--ink)}
#app .wb-kpi-s{font-size:var(--t-xs);color:var(--ink-3)}
#app .wb-tone-blue{background:var(--teal-bg);color:var(--primary)}
#app .wb-tone-green{background:var(--ok-bg);color:rgb(11 122 65)}
#app .wb-tone-amber{background:var(--amber-bg);color:rgb(194 112 0)}
#app .wb-tone-teal{background:rgb(227 246 244);color:rgb(14 116 105)}
#app .wb-tone-red{background:rgb(253 236 239);color:rgb(180 49 75)}
#app .wb-tone-violet{background:var(--violet-bg);color:var(--violet)}
@media(max-width:880px){#app .wb-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}#app .wb-kpi{border-bottom:1px solid var(--wb-row-line)}#app .wb-kpi:nth-child(2n){border-right:0}#app .wb-kpi-v{font-size:var(--t-2xl)}}

/* —— 数据表卡头 / 胶囊页签 / 待确认卡 —— */
#app .wb-table-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 10px}
#app .wb-table-head h2{margin:0;font-size:var(--t-md);font-weight:600}
#app .wb-count{padding:2px 8px;border-radius:7px;background:var(--sunk);color:var(--ink-2);font-size:var(--t-xs)}
#app .wb-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px}
#app .wb-tab{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--ink-2);font:inherit;font-size:var(--t-sm);cursor:pointer}
#app .wb-tab b{font-weight:500;font-size:var(--t-xs);color:var(--ink-3)}
#app .wb-tab:hover{background:rgb(238 240 244);color:var(--ink)}
#app .wb-tab.on{background:var(--wb-chip-on);color:var(--ink);font-weight:600}
#app .wb-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:500;white-space:nowrap}
#app .wb-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
#app .wb-pill-amber{background:var(--amber-bg);color:rgb(143 84 0)}
#app .wb-ask-card{margin:0 0 18px;overflow:hidden}
#app .wb-ask-card>div:not(.wb-ask-head){background:rgb(255 251 244)}
#app .wb-ask-head{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:var(--t-sm);font-weight:600;color:var(--ink)}

/* —— 页内分段页签（.seg）统一为胶囊页签 —— */
#app .seg{gap:4px;padding:0;background:transparent;border-radius:0}
#app .seg button{height:32px;padding:0 12px;border-radius:9px;color:var(--ink-2)}
#app .seg button:hover{background:rgb(238 240 244);color:var(--ink)}
#app .seg button.on{background:var(--wb-chip-on);color:var(--ink);font-weight:600;box-shadow:none}

/* —— 信息流卡（情报等）：一张卡内逐条分隔 —— */
#app .wb-feed{padding:0;overflow:hidden}
#app .wb-feed-item{padding:16px 20px;border-bottom:1px solid var(--wb-row-line)}
#app .wb-feed-item:last-child{border-bottom:0}
#app .wb-feed-item:hover{background:var(--row-hover)}

/* —— 消息页「会话 / 通知」页签：胶囊式 —— */
#app .pn-message-tabs{gap:4px;border-bottom:0;margin-bottom:14px}
#app .pn-message-tabs button{min-height:36px;height:36px;padding:0 12px;border:0;border-radius:9px;color:var(--ink-2);font-size:var(--t-sm)}
#app .pn-message-tabs button:hover{background:rgb(238 240 244);color:var(--ink)}
#app .pn-message-tabs button[aria-selected="true"]{background:var(--wb-chip-on);color:var(--ink);font-weight:600;border:0}
#app .wb-tone-gray{background:var(--sunk);color:var(--ink-2)}

/* —— 企业工作台总览（enterprise-bi）对齐工作台外观：16px 卡、32px 数字、胶囊方向切换 —— */
#app .bi-network,#app .bi-resource,#app .bi-metrics,#app .bi-panel{border-color:rgb(232 235 242);border-radius:16px}
#app .bi-metric .bi-number strong,#app .bi-network .bi-number strong{font-size:var(--t-num);font-weight:600;letter-spacing:0}
#app .bi-direction{padding:0;gap:4px;background:transparent}
#app .bi-direction button{height:32px;padding:0 12px;border-radius:9px;color:var(--ink-2)}
#app .bi-direction button[aria-pressed="true"]{background:var(--wb-chip-on);color:var(--ink);font-weight:600;box-shadow:none}
#app .bi-panel table th{background:rgb(248 249 252);color:var(--ink-2);font-weight:500}

/* —— 企业空间：合作企业分组、重叠匹配方向与工作台胶囊页签同口径 —— */
#app.team-active .partner-sub-tabs{gap:4px}
#app.team-active .partner-sub-tabs .btn{height:32px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--ink-2);box-shadow:none;font-size:var(--t-sm)}
#app.team-active .partner-sub-tabs .btn:hover{background:rgb(238 240 244);color:var(--ink)}
#app.team-active .partner-sub-tabs .btn.primary{background:var(--wb-chip-on);color:var(--ink);font-weight:600}
#app.team-active .partner-sub-tabs .partner-tab-count{background:transparent;color:var(--ink-3);font-weight:500}
#app.team-active .em.em-collaboration .em-direction-chips{gap:4px}
#app.team-active .em.em-collaboration .em-direction-chips button{height:32px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--ink-2)}
#app.team-active .em.em-collaboration .em-direction-chips button:hover{background:rgb(238 240 244);color:var(--ink)}
#app.team-active .em.em-collaboration .em-direction-chips [aria-pressed=true]{background:var(--wb-chip-on);color:var(--ink);font-weight:600}
#app .card.pe-invite-card{padding:0}