/* ============================================================
   雅之林®工作站 · 设计系统 (v20260913-1)
   品牌：克莱因蓝 #002FA7 / 金 #C9A24A
   ============================================================ */

:root{
  --brand:#002FA7;
  --brand-dark:#001f6b;
  --brand-soft:#eaf0ff;
  --gold:#C9A24A;
  --gold-soft:#fbf4e3;

  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#1d2433;
  --muted:#6b7280;
  --border:#e6e9f0;
  --line:#eef1f7;

  --ok:#1aa260;
  --ok-soft:#e6f6ee;
  --warn:#e08a00;
  --warn-soft:#fdf2dd;
  --danger:#d83a3a;
  --danger-soft:#fdeaea;
  --info:#2f6fed;
  --info-soft:#e8f0fe;

  --r:12px;
  --r-sm:8px;
  --shadow:0 6px 24px rgba(20,40,90,.08);
  --shadow-sm:0 2px 8px rgba(20,40,90,.06);

  /* 顶栏高度必须与 assets/css/topbar.css 里 .tb-inner 的高度**同步**：
     56px（<900px）/ 64px（≥900px）。侧栏与遮罩都用它算偏移，
     对不上的表现是「抽屉顶部被浮动条压掉一条」。 */
  --topbar-h:56px;
  --sidebar-w:236px;
  --maxw:1180px;
}

/* 只读屏器可见（浮动条里给「新窗口打开」这类补充说明用） */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",
    "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}
a{color:var(--brand);text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.hidden{display:none !important;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#cdd5e6;border-radius:8px;}

/* ---------- 通用组件 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--border);background:#fff;color:var(--text);
  padding:9px 16px;border-radius:var(--r-sm);font-size:14px;font-weight:600;
  transition:.15s;
}
.btn:hover{filter:brightness(.98);border-color:#cfd6e6;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#fff;}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted);}
.btn-ghost:hover{background:var(--brand-soft);color:var(--brand);}
.btn-sm{padding:6px 12px;font-size:13px;}
.btn-block{width:100%;}
.btn-wechat{background:#07c160;border-color:#07c160;color:#fff;}
.btn-wechat:hover{background:#06ad56;border-color:#06ad56;}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:18px;
}
.card-title{font-size:15px;font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:8px;}
.card-title .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);}

.tag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;}
.tag-ok{background:var(--ok-soft);color:var(--ok);}
.tag-warn{background:var(--warn-soft);color:var(--warn);}
.tag-info{background:var(--info-soft);color:var(--info);}
.tag-gold{background:var(--gold-soft);color:#9a7416;}
.tag-mut{background:#eef1f7;color:var(--muted);}
.tag-danger{background:var(--danger-soft);color:var(--danger);}

.badge-num{display:inline-flex;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--danger);color:#fff;font-size:11px;font-weight:700;align-items:center;justify-content:center;}

.field{display:block;margin-bottom:12px;}
.field>span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:14px;background:#fff;color:var(--text);outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);}

.section-gap{margin-bottom:18px;}
.row{display:flex;gap:14px;flex-wrap:wrap;}
.muted{color:var(--muted);}
.spacer{flex:1;}

/* ---------- 登录层 ---------- */
.login-layer{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand-dark),var(--brand) 55%,#1b4fd0);
  padding:20px;
}
.login-card{
  width:100%;max-width:420px;background:#fff;border-radius:18px;padding:28px 26px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.login-brand{text-align:center;margin-bottom:6px;}
.login-logo{font-size:30px;font-weight:800;color:var(--brand);letter-spacing:1px;}
.login-sub{font-size:13px;color:var(--muted);margin-top:4px;}
.login-tip{text-align:center;color:var(--muted);font-size:13px;margin:14px 0 16px;}
.role-pick{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.role-opt{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  border:1.5px solid var(--border);background:#fafbff;border-radius:12px;padding:12px 14px;
  transition:.15s;
}
.role-opt .role-ico{font-size:20px;}
.role-opt .role-name{font-weight:700;font-size:15px;margin-top:2px;}
.role-opt .role-desc{font-size:12px;color:var(--muted);margin-top:2px;}
.role-opt.active{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(0,47,167,.12);}
.login-foot{text-align:center;color:#aab;font-size:11px;margin-top:16px;}
.login-hint{font-size:12px;color:#8a93a6;line-height:1.6;margin-top:14px;text-align:left;
  background:#f6f8fc;border:1px dashed #d8e0ee;border-radius:10px;padding:10px 12px;}
.picker-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;}
.picker-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--border);background:#fafbff;border-radius:10px;padding:11px 14px;
  text-align:left;transition:.15s;cursor:pointer;}
.picker-item:hover{border-color:var(--brand);background:var(--brand-soft);}
.pi-name{font-weight:700;font-size:15px;}

/* ---------- 顶栏：透白浮动条 .tb ----------
   2026-09-13：顶栏由「深蓝实心条(.topbar)」换成与主站 7 站 29 页、
   以及「伙伴打卡站」**同一份**的透白浮动条。
   🔒 皮肤**不在这里定义** —— 唯一源是 ai-advisor/deploy/shared/topbar.css
      （部署时同步到 assets/css/topbar.css）。
      本文件只补工作站独有的四件小事：
        ① 抽屉触发按钮 ② 「伙伴打卡站」互跳胶囊 ③ 角色徽章 ④ 会员号展示
      改 .tb / .tb-inner / .tb-logo / .tb-right 的皮肤请改那一份，
      不要在这里加规则 —— 两个系统各抄一份皮肤，就是「格式不统一」的起点。 */
.tb .hamburger{
  display:none;flex:0 0 auto;                 /* 只在 ≤768px 出现，见文件末尾响应式块 */
  background:transparent;border:none;cursor:pointer;
  color:#001a63;font-size:19px;line-height:1;padding:3px 5px;border-radius:8px;
}
.tb .hamburger:hover{background:rgba(0,47,167,.08);}
.tb .hamburger:focus-visible{outline:3px solid var(--brand);outline-offset:1px;}
/* 「伙伴打卡站」互跳胶囊：与打卡站那枚 .work-link **同色同尺寸**，
   两站互为镜像。白底条上不能直接用金色写字（对比不够），
   所以金色只当**填充**，字仍用深蓝 —— 与打卡站同一套做法。 */
.tb .topbar-cross{
  display:inline-flex;align-items:center;gap:4px;text-decoration:none;
  font-size:11px;font-weight:800;letter-spacing:.3px;
  color:#001A63;background:#D0AB57;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.tb .topbar-cross .go{opacity:.7;}
.tb .topbar-cross:hover{background:#c89f45;}
.tb .topbar-cross:focus-visible{outline:3px solid var(--brand);outline-offset:2px;}
.tb .role-badge{
  font-size:12px;font-weight:700;white-space:nowrap;
  background:rgba(0,47,167,.08);color:var(--brand);
  padding:3px 10px;border-radius:999px;
}
.tb .topbar-user{font-size:13px;color:#5A6580;white-space:nowrap;}
/* 退出按钮沿用 .btn-ghost（浅底深字），在白底浮动条上本来就能读，无需覆盖；
   焦点环沿用 style.css 既有定义即可，.tb :focus-visible 也已在下方统一兜底。 */
.tb :focus-visible{outline-color:var(--brand);}

/* ---------- 布局 ---------- */
.layout{display:flex;min-height:calc(100vh - var(--topbar-h));}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:#fff;border-right:1px solid var(--border);
  padding:14px 10px;position:sticky;top:var(--topbar-h);align-self:flex-start;height:calc(100vh - var(--topbar-h));
  overflow-y:auto;
}
.menu{display:flex;flex-direction:column;gap:2px;}
.menu-group{font-size:11px;color:#9aa3b5;padding:12px 12px 4px;font-weight:700;letter-spacing:.5px;}
.menu-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);
  color:var(--text);font-size:14px;font-weight:500;transition:.12s;cursor:pointer;border:none;background:none;width:100%;text-align:left;
}
.menu-item:hover{background:var(--brand-soft);}
.menu-item.active{background:var(--brand);color:#fff;font-weight:600;}
.menu-item .mi-ico{width:20px;text-align:center;font-size:16px;}
.menu-item .mi-badge{margin-left:auto;}
.sidebar-mask{display:none;}

.view{flex:1;padding:20px;max-width:var(--maxw);width:100%;margin:0 auto;}
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.page-head h1{font-size:20px;margin:0;font-weight:800;}
.page-head .ph-sub{color:var(--muted);font-size:13px;}

/* 统计卡 */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
.stat{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--shadow-sm);
}
.stat .s-label{font-size:13px;color:var(--muted);}
.stat .s-val{font-size:26px;font-weight:800;color:var(--brand);margin-top:6px;line-height:1.1;}
.stat .s-val.gold{color:var(--gold);}
.stat .s-foot{font-size:12px;color:var(--muted);margin-top:6px;}

/* 列表/表格 */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.search{flex:1;min-width:180px;position:relative;}
.search input{width:100%;padding:9px 12px 9px 32px;border:1px solid var(--border);border-radius:999px;background:#fff;}
.search::before{content:"🔍";position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.6;}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);}
.table th,.table td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:13px;}
.table th{background:#f7f9fd;color:var(--muted);font-weight:700;font-size:12px;white-space:nowrap;}
.table tr:last-child td{border-bottom:none;}
.table tr:hover td{background:#fafbff;}
.table .td-strong{font-weight:600;}

.list{display:flex;flex-direction:column;gap:12px;}
.list-item{
  background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow-sm);
  display:flex;gap:14px;align-items:flex-start;
}
.list-item .li-main{flex:1;min-width:0;}
.list-item .li-title{font-weight:700;font-size:15px;}
.list-item .li-meta{color:var(--muted);font-size:12px;margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;}
.list-item .li-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}

/* 看板 */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.board-col{background:#f7f9fd;border:1px solid var(--border);border-radius:var(--r);padding:12px;min-height:200px;}
.board-col h4{margin:0 0 10px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;}
.board-col .bc-count{background:#e6e9f0;border-radius:999px;padding:1px 8px;font-size:12px;}
.kcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);padding:11px;margin-bottom:10px;box-shadow:var(--shadow-sm);}
.kcard .k-title{font-weight:600;font-size:13px;}
.kcard .k-meta{font-size:11px;color:var(--muted);margin-top:6px;}

/* 月历 */
.cal{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);}
.cal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f7f9fd;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.cal-cell{padding:8px;height:84px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;}
.cal-cell .dc{color:var(--muted);}
.cal-cell.today{background:var(--brand-soft);}
.cal-cell .ev{margin-top:4px;background:var(--info-soft);color:var(--info);border-radius:6px;padding:2px 5px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-cell .ev.gold{background:var(--gold-soft);color:#9a7416;}
.cal-cell .ev.ok{background:var(--ok-soft);color:var(--ok);}

/* 资料库分类 */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:18px;}
.cat{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:16px;text-align:center;box-shadow:var(--shadow-sm);transition:.12s;}
.cat:hover{border-color:var(--brand);background:var(--brand-soft);}
.cat .c-ico{font-size:26px;}
.cat .c-name{font-weight:700;margin-top:6px;}
.cat .c-num{font-size:12px;color:var(--muted);margin-top:2px;}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(15,25,50,.45);z-index:60;display:flex;align-items:center;justify-content:center;padding:18px;}
.modal{background:#fff;border-radius:16px;width:100%;max-width:560px;max-height:88vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.3);}
.modal-lg{max-width:760px;}
.modal-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1;}
.modal-head h3{margin:0;font-size:16px;font-weight:800;}
.modal-head .x{margin-left:auto;background:none;border:none;font-size:22px;color:var(--muted);line-height:1;}
.modal-body{padding:18px 20px;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;}
.announce-banner{background:var(--gold-soft);border:1px solid #ecd9a3;border-radius:var(--r);padding:14px 16px;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start;}
.announce-banner .ab-ico{font-size:20px;}

/* toast */
.toast-root{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{background:rgba(20,30,55,.92);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:toastIn .2s ease;}
@keyframes toastIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* 空态 */
.empty{text-align:center;color:var(--muted);padding:40px 0;}

/* 进度条 */
.bar{height:8px;background:#eef1f7;border-radius:999px;overflow:hidden;}
.bar>i{display:block;height:100%;background:var(--brand);border-radius:999px;}

/* 首页快捷入口 */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.quick-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:18px 14px;text-align:center;
  box-shadow:var(--shadow-sm);cursor:pointer;transition:.14s;display:flex;flex-direction:column;gap:8px;align-items:center;
}
.quick-card:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-2px);}
.quick-card .qc-ico{font-size:28px;}
.quick-card .qc-name{font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px;}

/* 资料库分类 chips */
.cat-chip{cursor:pointer;user-select:none;border:1px solid var(--border);background:#fff;color:var(--text);}
.cat-chip:hover{border-color:var(--brand);}
.cat-chip.active{background:var(--brand);border-color:var(--brand);color:#fff;}
.toolbar .cat-chip{margin-right:2px;}

/* 后台管理 tabs */
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px;border-bottom:1px solid var(--border);padding-bottom:10px;}
.admin-tab{
  border:1px solid var(--border);background:#fff;color:var(--text);padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:600;cursor:pointer;transition:.12s;
}
.admin-tab:hover{border-color:var(--brand);color:var(--brand);}
.admin-tab.active{background:var(--brand);border-color:var(--brand);color:#fff;}

/* 登录日志统计小条 */
.minibar{display:flex;gap:4px;align-items:flex-end;height:60px;}
.minibar .mb{flex:1;background:var(--brand-soft);border-radius:4px 4px 0 0;position:relative;}
.minibar .mb>i{position:absolute;bottom:0;left:0;right:0;background:var(--brand);border-radius:4px 4px 0 0;}

/* ---------- 响应式：H5 / 手机端 ---------- */
/* ≥900px 时 .tb-inner 长到 64px（见 assets/css/topbar.css），
   --topbar-h 必须跟着长，否则侧栏与遮罩会短 8px、顶部露一条缝。 */
@media (min-width:900px){
  :root{--topbar-h:64px;}
}
@media (max-width:768px){
  .tb .hamburger{display:block;}
  .sidebar{
    position:fixed;top:var(--topbar-h);left:0;bottom:0;z-index:40;width:78%;max-width:300px;
    transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.2);
  }
  .sidebar.open{transform:none;}
  .sidebar-mask{display:block;position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(0,0,0,.3);z-index:35;display:none;}
  .sidebar-mask.show{display:block;}
  .view{padding:14px;}
  .board{grid-template-columns:1fr;}
  /* 「姓名 · 会员号」在手机上让位：浮动条上还要放抽屉按钮 + 互跳胶囊 + 退出，
     三样都是**功能**，这一样是**信息**，功能优先。信息没丢 ——
     侧栏菜单与「我的」页里都能看到。 */
  .tb .topbar-user{display:none;}
  .page-head h1{font-size:18px;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .table{font-size:12px;}
  .table th,.table td{padding:9px 8px;}
}
/* 窄机（iPhone SE 一代 320px 等）：角色徽章也收起来，
   否则「☰ + 雅之林® YAZHILIN + 互跳胶囊 + 徽章 + 退出」会把浮动条挤爆。 */
@media (max-width:560px){
  .tb .role-badge{display:none;}
}
/* 窄机（iPhone 12 mini 375 / iPhone 12~15 390 / Android 384~414 都落在这里）：
   浮动条上同时要有「☰ + 雅之林® YAZHILIN + 伙伴打卡站胶囊 + 退出」四样，
   实测在 421px 时只剩 46px 余量、381px 时只剩 6px —— 必须收掉一样。
   收哪个：☰/胶囊/退出都是**功能**（少一样就用不了），
   只有 logo 的英文副标是**装饰**（「雅之林®」已经把品牌说清楚了）。
   2026-09-13 定：≤420px 收起 .en，胶囊文案与配色一律不改
   —— 文案属于用户既定内容，不许为了排版去改字。 */
@media (max-width:420px){
  .tb-logo .en{display:none;}
}
@media (max-width:380px){
  .stat-grid{grid-template-columns:1fr 1fr;}
}