/* 运营中心统一风格 */
.ops-subnav { background:#fff; border-bottom:1px solid #eee; margin-bottom:16px; }
.ops-subnav-inner { max-width:1100px; margin:0 auto; padding:0 16px; display:flex; flex-wrap:wrap; gap:2px; }
.ops-subnav-inner a { display:inline-block; padding:10px 14px; font-size:14px; color:#555; border-bottom:2px solid transparent; }
.ops-subnav-inner a:hover { color:var(--primary); }
.ops-subnav-inner a.active { color:var(--primary); font-weight:bold; border-bottom-color:var(--primary); }

.ops-stats .stat { border-top:3px solid var(--primary); }
.ops-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:16px; }
@media (max-width:760px) { .ops-grid { grid-template-columns:1fr; } }

.ops-table { width:100%; border-collapse:collapse; }
.ops-table th, .ops-table td { text-align:left; padding:10px 12px; border-bottom:1px solid #eee; font-size:14px; vertical-align:middle; }
.ops-table th { background:#fafafa; }
.ops-progress { display:flex; align-items:center; gap:8px; min-width:160px; }
.ops-progress-bar { flex:1; height:8px; background:#eee; border-radius:20px; overflow:hidden; }
.ops-progress-bar i { display:block; height:8px; background:var(--primary); border-radius:20px; }
.ops-progress span { font-size:13px; color:var(--muted); min-width:40px; }

.ops-toolbar-card { padding:14px 20px; }
.ops-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ops-search { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ops-search input, .ops-search select { width:auto; padding:8px 10px; border:1px solid #ccc; border-radius:8px; font-size:14px; }
.ops-search input { min-width:220px; }
.ops-actions { white-space:nowrap; }
.ops-actions .btn { margin-right:6px; }

.ops-form-card { max-width:760px; }
.ops-form-actions { margin-top:16px; display:flex; gap:10px; }
.ops-form-actions .btn { width:auto; }

/* 顶部导航精简与用户菜单 */
.navbar .right .user-menu { position:relative; display:inline-block; }
.navbar .right .user-name { color:#ddd; font-size:14px; cursor:pointer; padding:6px 8px; border-radius:6px; }
.navbar .right .user-name:hover { background:#333; color:#fff; }
.user-dropdown { display:none; position:absolute; right:0; top:100%; background:#fff; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); min-width:160px; z-index:200; padding:8px 0; }
.user-dropdown a { display:block; padding:9px 16px; color:#333; font-size:14px; }
.user-dropdown a:hover { background:#f5f5f5; color:var(--primary); }
.user-menu:hover .user-dropdown { display:block; }

/* 首页与中心入口卡片 */
.home-hero { text-align:center; padding:36px 20px; }
.home-hero h1 { font-size:28px; }
.center-grid { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.center-card { display:block; text-align:center; padding:24px 16px; color:inherit; }
.center-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.12); }
.center-icon { font-size:32px; margin-bottom:8px; }
.center-card .num { font-size:20px; margin-bottom:6px; }

/* 运营中心子导航分组 */
.ops-subnav-inner { align-items:center; }
.ops-nav-label { font-size:12px; color:#999; padding:10px 4px 10px 14px; white-space:nowrap; }
.ops-nav-label:first-child { padding-left:0; }

.approval-entry { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-left:4px solid var(--primary); }
.approval-entry h2 { margin:0; }
.approval-entry p { margin:6px 0 0; }

.brand { display:flex; align-items:center; gap:8px; }
.brand-logo { height:30px; width:30px; object-fit:cover; border-radius:6px; display:block; }

.message-bell { position:relative; display:inline-flex; align-items:center; color:#ddd; padding:6px 8px; border-radius:6px; font-size:18px; }
.message-bell:hover { background:#333; color:#fff; }
.bell-badge { position:absolute; top:-2px; right:-2px; background:var(--primary); color:#fff; font-size:11px; line-height:1; padding:3px 5px; border-radius:10px; min-width:16px; text-align:center; }

.popup-toast-container { position:fixed; top:70px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.popup-toast { width:320px; max-width:90vw; background:#fff; border-left:4px solid var(--primary); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:12px 16px; opacity:0; transform:translateX(20px); transition:all .3s ease; }
.popup-toast.show { opacity:1; transform:translateX(0); }
.popup-toast strong { display:block; margin-bottom:6px; font-size:14px; }
.popup-toast p { margin:0 0 6px; color:#555; font-size:13px; }
.popup-toast small { color:#999; font-size:12px; }

.badge.yellow { background:#fff3b0; color:#7a6200; }

.group-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.group-header h2 { margin:0; }


/* ===== 手机端优化 ===== */
@media (max-width: 760px) {
  .navbar { flex-wrap:wrap; height:auto; min-height:52px; padding:8px 10px; gap:6px; }
  .navbar .brand { font-size:16px; margin-right:8px; }
  .brand-logo { height:26px; width:26px; }
  .navbar nav { order:3; width:100%; overflow-x:auto; display:flex; flex-wrap:nowrap; gap:2px; }
  .navbar nav a { white-space:nowrap; padding:6px 8px; font-size:13px; }
  .navbar .right { margin-left:auto; gap:4px; }
  .navbar .right .user-name { font-size:13px; padding:5px 6px; }
  .message-bell { font-size:16px; padding:5px 6px; }

  .container { margin:12px auto; padding:0 8px; }
  .card { padding:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .grid { grid-template-columns:1fr 1fr; gap:10px; }
  .center-grid { grid-template-columns:1fr; }
  .ops-grid { grid-template-columns:1fr; gap:12px; }
  .ops-stats .stat { padding:12px; }
  .stat .num { font-size:24px; }

  .ops-subnav-inner { flex-wrap:nowrap; overflow-x:auto; padding:0 8px; -webkit-overflow-scrolling:touch; }
  .ops-subnav-inner a { white-space:nowrap; padding:8px 10px; font-size:13px; }
  .ops-nav-label { font-size:11px; padding:8px 4px 8px 10px; }

  .ops-toolbar { flex-direction:column; align-items:stretch; gap:8px; }
  .ops-search { flex-direction:column; align-items:stretch; gap:6px; }
  .ops-search input, .ops-search select { width:100%; min-width:0; }
  .ops-toolbar .btn { text-align:center; }

  .ops-table { font-size:13px; }
  .ops-table th, .ops-table td { padding:8px 8px; white-space:nowrap; }
  .ops-actions .btn { padding:4px 8px; font-size:12px; }
  .ops-progress { min-width:100px; }

  .popup-toast-container { left:8px; right:8px; }
  .popup-toast { width:auto; max-width:100%; }

  .home-hero h1 { font-size:22px; }
  .approval-entry { flex-direction:column; align-items:stretch; text-align:left; }
}