/* M-OPS industrial editorial layer */
html, body, #app { max-width: 100%; overflow-x: hidden; }
body { background: var(--paper); color: var(--ink); font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif; }
.app-shell { background: var(--paper); }
.sidebar { background: var(--ink); border-right: 1px solid #30322f; }
.brand-mark { border-color: var(--signal); background: var(--signal); color: var(--ink); clip-path: polygon(12% 0, 88% 0, 100% 20%, 100% 80%, 88% 100%, 12% 100%, 0 80%, 0 20%); }
.brand strong { letter-spacing: .05em; }
.brand span, .side-label { color: #969b92; }
.nav button { border-radius: 0; color: #b8bbb1; }
.nav button:hover, .nav button.active { background: #242623; border-color: #555a51; color: #f5f5f0; }
.nav button.active { box-shadow: inset 4px 0 var(--signal); }
.nav-icon { color: var(--signal); }
.nav-count { color: var(--signal); }
.side-status { border-radius: 0; border-color: #464a43; background: linear-gradient(135deg, #1e211f, #111211); clip-path: polygon(0 0, 95% 0, 100% 14%, 100% 100%, 0 100%); }
.side-status strong { color: var(--signal); }
.main { background: var(--paper); }
.topbar { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.page-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.eyebrow, .panel-kicker { color: var(--teal-dark); }
.page-title { letter-spacing: -.04em; }
.back-button { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--ink); background: var(--ink); color: var(--surface); display: grid; place-items: center; clip-path: polygon(12% 0, 88% 0, 100% 18%, 100% 82%, 88% 100%, 12% 100%, 0 82%, 0 18%); font-size: 20px; transition: .22s ease; }
.back-button:hover { background: var(--signal); color: var(--ink); border-color: var(--signal); transform: translateX(-2px); }
.role-switch { border-radius: 0; border-color: var(--line); background: var(--surface); color: var(--muted); }
.role-switch select { color: var(--ink); }
.avatar { border-radius: 0; clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0 82%, 0 18%); background: var(--signal); }
.stat-card, .panel, .activity-card, .member-card { border-radius: var(--radius); border-color: var(--line); background: var(--surface); box-shadow: none; }
.stat-card { border-top: 3px solid var(--ink); }
.stat-card.teal { border-top-color: var(--teal); }
.stat-card.amber { border-top-color: var(--amber); }
.stat-card.red { border-top-color: var(--red); }
.stat-card::after { border-color: #bfc1b9; }
.stat-card.teal .stat-value { color: var(--teal-dark); }
.stat-card.amber .stat-value { color: var(--amber); }
.stat-card.red .stat-value { color: var(--red); }
.hero-panel { border-radius: 0; border-left: 6px solid var(--signal); background: var(--ink); }
.hero-panel .eyebrow { color: var(--signal); }
.hero-panel::after { color: rgba(255,245,0,.18); }
.hero-stat strong { color: var(--signal); }
.panel { padding: 18px; }
.panel-header { border-bottom: 1px solid var(--line); padding-bottom: 11px; }
.panel-action { color: var(--teal-dark); }
.activity-row { border-bottom-color: var(--line); }
.activity-dot { background: var(--teal); box-shadow: 0 0 0 4px rgba(20,208,208,.16); }
.activity-dot.pending { background: var(--amber); box-shadow: 0 0 0 4px rgba(217,130,43,.16); }
.activity-dot.closed { background: #878b83; box-shadow: 0 0 0 4px rgba(135,139,131,.14); }
.quick-btn { border-radius: 0; background: transparent; border-color: var(--line); }
.quick-btn:hover { border-color: var(--signal); box-shadow: none; background: #ffffc8; }
.quick-btn span { color: var(--teal-dark); }
.bar-track { border-radius: 0; background: #d7d9d1; }
.bar-fill { border-radius: 0; background: var(--teal); }
.input, .select, .textarea { border-radius: 0; background: var(--surface); border-color: var(--line); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--teal-dark); box-shadow: 0 0 0 2px rgba(20,208,208,.2); }
.button { border-radius: 0; min-height: 40px; }
.button.primary { background: var(--signal); color: var(--ink); }
.button.primary:hover { background: #e5dc00; }
.button.teal { background: var(--teal); color: var(--ink); }
.button.ghost { background: transparent; border-color: var(--ink); }
.button.warning { background: #fff0cf; border-color: var(--amber); color: #7a4811; }
.button.danger { background: #ffe6e3; border-color: var(--red); color: #9b241e; }
.chip { border-radius: 999px; }
.chip.teal { background: rgba(20,208,208,.14); color: var(--teal-dark); }
.chip.amber { background: rgba(217,130,43,.15); color: #8b5010; }
.chip.red { background: rgba(255,59,48,.13); color: #a1261f; }
.chip.gray { background: #dedfd9; color: #5f635d; }
.chip.blue { background: rgba(0,106,106,.12); color: var(--teal-dark); }
.table-wrap { border-radius: 0; border-color: var(--line); }
th { background: #dedfd9; color: #5f635d; }
th, td { border-bottom-color: var(--line); }
.score-positive { color: var(--teal-dark); }
.score-negative { color: var(--red); }
.activity-card { transition: .2s ease; }
.activity-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px; }
.review-groups { gap: 12px; }
.review-group { padding: 0; overflow: hidden; }
.review-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 70px; padding: 16px 18px; cursor: pointer; list-style: none; }
.review-summary::-webkit-details-marker { display: none; }
.review-summary::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; background: var(--amber); box-shadow: 0 0 0 4px rgba(217,130,43,.14); }
.review-summary > span:first-of-type { min-width: 0; flex: 1; }
.review-summary strong { display: block; font-size: 14px; }
.review-summary small { display: block; margin-top: 5px; color: var(--muted); font: 10px "DM Mono", "Microsoft YaHei", sans-serif; }
.review-summary-side { display: flex; align-items: center; gap: 10px; }
.summary-arrow { display: inline-grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--line); font-size: 18px; transition: .2s ease; }
.review-group[open] .summary-arrow { transform: rotate(90deg); background: var(--signal); border-color: var(--signal); }
.review-body { padding: 0 18px 18px; }
.review-body-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 14px 0 12px; }
.activity-card:hover, .activity-card:focus-visible { border-color: var(--teal-dark); outline: none; transform: translateY(-1px); }
.activity-card h3 { margin: 7px 0 5px; font-size: 16px; }
.activity-summary { margin: 0; color: var(--muted); font-size: 11px; }
.card-statuses { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.form-footer { border-top-color: var(--line); }
.member-toggle { border-radius: 0; background: transparent; }
.member-toggle.selected { border-color: var(--teal-dark); background: rgba(20,208,208,.1); }
.participant-groups { display: grid; gap: 12px; margin-top: 8px; }
.participant-group { border: 1px solid var(--line); padding: 12px; background: rgba(255,255,255,.22); }
.participant-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.participant-group-head strong { font-size: 12px; }
.member-toggle span { min-width: 0; }
.member-toggle small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.group-overview-panel { margin-top: 16px; }
.group-overview { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.group-overview-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); padding: 13px; background: rgba(255,255,255,.22); }
.group-overview-card strong, .group-overview-card small { display: block; }
.group-overview-card strong { margin-top: 4px; font-size: 14px; }
.group-overview-card small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.group-overview-meta { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.mini-stat { border-radius: 0; background: transparent; border-color: var(--line); }
.empty { border: 1px dashed var(--line); }
.mobile-nav { background: var(--ink); border-top-color: var(--signal); }
.mobile-nav button.active { color: var(--signal); }
.toast { border-radius: 0; background: var(--ink); border-color: var(--signal); }

.group-overview-card { width: 100%; min-height: 154px; cursor: pointer; text-align: left; transition: .2s ease; }
.group-overview-card:hover, .group-overview-card:focus-visible { border-color: var(--teal-dark); background: rgba(20,208,208,.08); outline: none; transform: translateY(-1px); }