:root {
  --bg: #eef3f1;
  --surface: #ffffff;
  --surface-soft: #f7faf8;
  --ink: #17211d;
  --muted: #66736e;
  --line: #dce6e1;
  --green: #116b5f;
  --green-dark: #0d463f;
  --green-soft: #e8f5f1;
  --gold: #d99b2b;
  --red: #b42318;
  --red-soft: #fff0ed;
  --amber: #b85f00;
  --amber-soft: #fff6e7;
  --blue: #2866b2;
  --shadow: 0 18px 48px rgba(20, 42, 35, .12);
}

.mobile-pull-refresh {
  display: none;
}

@media (max-width: 860px) {
  body[data-view="events"] .mobile-pull-refresh {
    position: fixed;
    top: calc(130px + env(safe-area-inset-top));
    left: 50%;
    z-index: 65;
    display: flex;
    min-width: 210px;
    max-width: calc(100vw - 32px);
    min-height: 44px;
    box-sizing: border-box;
    align-items: center;
    gap: 9px;
    border: 1px solid #cfe2dc;
    border-radius: 8px;
    padding: 7px 12px;
    color: #27473e;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 8px 20px rgba(17, 44, 36, .14);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, -54px, 0);
    transition: transform 160ms ease, opacity 140ms ease;
  }

  body[data-view="events"] {
    overscroll-behavior-y: contain;
  }

  body[data-view="events"] .mobile-pull-refresh.is-visible {
    opacity: 1;
  }

  .mobile-pull-refresh-icon {
    display: inline-grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #2f7b70;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    transition: transform 150ms ease, background 150ms ease;
  }

  .mobile-pull-refresh > span:last-child {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .mobile-pull-refresh strong {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-pull-refresh small {
    overflow: hidden;
    color: #728079;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-pull-refresh.is-ready .mobile-pull-refresh-icon {
    background: #b27420;
  }

  .mobile-pull-refresh.is-refreshing .mobile-pull-refresh-icon {
    animation: mobile-pull-refresh-spin 720ms linear infinite;
  }

  .mobile-pull-refresh.is-success .mobile-pull-refresh-icon {
    background: #14715f;
  }

  .mobile-pull-refresh.is-error .mobile-pull-refresh-icon {
    background: #9b413b;
  }
}

@keyframes mobile-pull-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}
* {
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(17, 107, 95, .07), transparent 240px),
    var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  letter-spacing: 0;
}

body:not(.is-authenticated) .app-shell {
  display: none;
}

body.is-authenticated .login-screen {
  display: none;
}

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 36px 18px;
  background:
    radial-gradient(circle at 18% 8%, rgba(238, 93, 88, .14), transparent 28%),
    radial-gradient(circle at 82% 92%, rgba(45, 117, 176, .12), transparent 30%),
    linear-gradient(180deg, #f7eff5 0%, #f7faf7 48%, #fff7ec 100%);
}

.login-panel {
  width: min(760px, 100%);
  min-height: min(760px, calc(100vh - 72px));
  border: 1px solid rgba(231, 235, 240, .92);
  border-radius: 28px;
  padding: clamp(30px, 5vw, 58px);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 28px 80px rgba(59, 69, 79, .10);
}

.login-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 34px;
}

.login-product {
  margin: 0 0 8px;
  color: #8f9aa8;
  font-size: 14px;
  font-weight: 700;
}

.login-panel h1 {
  margin: 0;
  color: #20272d;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 850;
}

.login-mode-toggle,
.link-btn {
  border: 0;
  padding: 0;
  color: #566170;
  background: transparent;
  font: inherit;
  font-weight: 750;
}

.login-mode-toggle {
  margin-top: 14px;
  font-size: 20px;
  white-space: nowrap;
}

.login-mode-toggle:hover,
.link-btn:hover {
  color: #ef5752;
}

.oauth-row {
  display: flex;
  justify-content: center;
  gap: 26px;
}

.oauth-btn {
  display: inline-grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid #dfe5ec;
  border-radius: 50%;
  color: #5b6674;
  background: #fff;
  font-size: 0;
  font-weight: 850;
  box-shadow: 0 4px 12px rgba(38, 52, 66, .05);
}

.oauth-btn span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 17px;
  line-height: 1;
}

.oauth-btn.feishu span {
  background: linear-gradient(135deg, #3370ff, #19c2ff);
}

.oauth-btn.dingtalk span {
  background: linear-gradient(135deg, #2187ff, #42b7ff);
}

.oauth-btn.wechat span {
  background: linear-gradient(135deg, #18b05f, #48d28a);
}

.oauth-btn:disabled,
.oauth-btn.is-disabled {
  cursor: not-allowed;
  opacity: .38;
  filter: grayscale(1);
  background: #f5f7f8;
}

.login-fields {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.login-fields[hidden] {
  display: none;
}

.login-fields label,
.mobile-login-fields label,
.oauth-register-fields label,
.password-reset-fields label,
.customer-activation-fields label {
  display: grid;
  gap: 8px;
  color: #687485;
  font-size: 14px;
  font-weight: 700;
}

.login-fields input,
.login-fields select,
.mobile-login-fields input,
.oauth-register-fields input,
.password-reset-fields input,
.customer-activation-fields input {
  width: 100%;
}

.mobile-login-fields,
.mobile-register-fields,
.oauth-register-fields,
.password-reset-fields,
.customer-activation-fields {
  display: grid;
  gap: 18px;
}

.mobile-login-fields,
.oauth-register-fields,
.password-reset-fields,
.customer-activation-fields {
  margin-bottom: 20px;
  border: 0;
  padding: 0;
  background: transparent;
}

.mobile-login-fields[hidden],
.oauth-register-fields[hidden],
.password-reset-fields[hidden],
.customer-activation-fields[hidden] {
  display: none;
}

.mobile-register-fields {
  border-top: 1px solid #e6ebf0;
  padding-top: 18px;
}

.mobile-register-fields[hidden] {
  display: none;
}

.mobile-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  align-items: end;
  gap: 12px;
}

.login-submit {
  width: 100%;
  height: 64px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 850;
  background: #f05b57;
}

.login-submit:hover {
  background: #e84d49;
}

.login-fields input,
.login-fields select,
.mobile-login-fields input,
.oauth-register-fields input,
.password-reset-fields input,
.customer-activation-fields input {
  height: 62px;
  border-color: #dfe4eb;
  border-radius: 12px;
  padding-inline: 18px;
  font-size: 17px;
  background: #fff;
}

.mobile-code-row .ghost {
  height: 62px;
  border-radius: 12px;
  font-weight: 800;
}

.login-check-row {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 28px !important;
  color: #2a333d !important;
  font-size: 17px !important;
}

.login-check-row span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.login-check-row input {
  width: 22px;
  height: 22px;
  accent-color: #f05b57;
}

.forgot-btn {
  justify-self: start;
  margin-top: -4px;
  font-size: 16px;
}

.password-reset-fields,
.customer-activation-fields {
  margin-top: 24px;
}

.local-login-toggle {
  justify-self: center;
  margin-top: 8px;
  color: #8f9aa8;
  font-size: 13px;
}

.local-login-toggle[hidden] {
  display: none;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #a0a9b6;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e4e9ef;
}

.oauth-footer {
  display: grid;
  gap: 22px;
  margin-top: clamp(46px, 8vh, 110px);
}

.login-hint {
  color: var(--muted);
  font-size: 12px;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

body[data-view="events"] .app-shell {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  height: 100vh;
  overflow: hidden;
}

body[data-view="events"] .workspace {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  height: calc(100vh - 69px);
  min-height: calc(100vh - 69px);
  padding: 24px;
  padding-bottom: 0;
  overflow: hidden;
  flex-direction: column;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 68px;
  border-bottom: 1px solid #173f5c;
  background: #1d3c5a;
  box-shadow: 0 8px 22px rgba(18, 42, 58, .12);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 16px;
  color: #1d2c38;
  background: #fff;
}

.brand-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(17, 107, 95, .2);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  font-size: 21px;
  font-weight: 800;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-size: 18px;
}

.brand span {
  margin-top: 3px;
  color: #697a84;
  font-size: 12px;
}

.nav-list {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  min-width: 0;
}

.nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  color: #f3faf9;
  background: transparent;
  padding: 0 8px;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: .02em;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.nav-item[data-view="fast"] {
  white-space: nowrap;
  word-break: keep-all;
}

.nav-item[hidden] {
  display: none !important;
}

.nav-item.active,
.nav-item:hover {
  color: #fff;
  background: #37bfd0;
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .35);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  padding: 10px 14px 10px 10px;
  font-size: 13px;
}

.user-badge {
  width: 96px;
  min-width: 96px;
  padding-right: 2px;
}

.user-badge span,
.user-badge strong {
  display: block;
  color: #fff;
  line-height: 1.35;
}

.user-badge span {
  color: #b8d0dc;
  font-size: 12px;
}

.user-badge strong {
  margin-top: 4px;
  font-size: 12px;
}

.header-actions #logoutBtn {
  min-width: 58px;
  margin-right: 0;
}

.header-actions #logoutBtn::after {
  content: "";
  display: inline-block;
}

.header-window {
  display: none;
  width: clamp(160px, 12vw, 220px);
  max-width: 220px;
  margin-left: 0;
  padding: 0 10px;
  border-left: 1px solid rgba(255, 255, 255, .18);
  border-right: 1px solid rgba(255, 255, 255, .2);
}

.header-window span,
.header-window strong {
  display: block;
}

.header-window span {
  color: #b8d0dc;
  font-size: 12px;
}

.header-window strong {
  margin-top: 4px;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-actions #importBtn {
  min-width: 108px;
}

.header-actions #templateBtn {
  min-width: 86px;
}

.header-actions #refreshBtn {
  min-width: 112px;
}

.header-actions #helpOpenBtn {
  min-width: 54px;
}

.notification-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 68px;
}

.notification-open-btn span {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 10px;
  padding: 0 5px;
  color: #36534b;
  background: #eaf2ef;
  font-size: 11px;
  font-weight: 850;
}

.notification-open-btn.has-unread span {
  color: #fff;
  background: #c94e40;
}

.header-actions > button,
.header-actions > .header-link-btn {
  padding-right: 12px;
  padding-left: 12px;
  white-space: nowrap;
}

.workspace {
  min-width: 0;
  padding: 24px;
}

.mobile-desktop-tip {
  display: none;
}

.topbar,
.section-head,
.table-head,
.status-strip,
.kpi-grid,
.dashboard-grid,
.overview-extra-grid {
  min-width: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--green);
  font-size: 13px;
  font-weight: 750;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.2;
}

h2 {
  font-size: 16px;
}

.top-actions,
.filters {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}

.primary,
.ghost,
.load-more,
.detail-close,
.copy-btn {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: #fff;
  color: var(--ink);
}

.header-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.primary {
  border-color: var(--green);
  color: #fff;
  background: var(--green);
}

.ghost:hover,
.load-more:hover,
.copy-btn:hover {
  border-color: #a8cbc3;
  background: var(--green-soft);
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.status-strip div,
.kpi-card,
.map-panel,
.chart-panel,
.hotword-panel,
.trend-panel,
.table-panel,
.task-panel,
.detail-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 26px rgba(25, 47, 40, .06);
}

.health-panel {
  margin-bottom: 24px;
}

.health-actions,
.health-range-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.health-range-tabs {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.health-range-tab {
  min-width: 68px;
  height: 34px;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 0 10px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}

.health-range-tab:last-child {
  border-right: 0;
}

.health-range-tab.active {
  color: #fff;
  background: var(--green);
}

.health-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  border: 1px solid #cce2db;
  border-left: 5px solid var(--green);
  border-radius: 8px;
  padding: 16px 18px;
  background: #f4fbf8;
}

.health-current.status-warning {
  border-color: #efd9bd;
  border-left-color: var(--amber);
  background: #fffaf2;
}

.health-current.status-error {
  border-color: #eccdc8;
  border-left-color: var(--red);
  background: #fff5f2;
}

.health-current-label,
.health-current p,
.health-current-meta span,
.health-kpis span,
.health-kpis small,
.ingest-monitor-kpis span,
.ingest-monitor-kpis small,
.ingest-queue-status span,
.ingest-queue-status small,
.health-block-head p,
.health-history-item span,
.health-api-item span,
.health-api-item small,
.health-issue span,
.health-issue small,
.ingest-receive-item span,
.ingest-receive-item time {
  color: var(--muted);
}

.health-current-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 750;
}

.health-current strong {
  display: block;
  font-size: 21px;
}

.health-current p {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
}

.health-current-meta {
  flex: 0 0 auto;
  min-width: 168px;
  border-left: 1px solid rgba(44, 91, 79, .16);
  padding-left: 16px;
}

.health-current-meta span,
.health-current-meta strong {
  display: block;
}

.health-current-meta strong {
  margin-top: 5px;
  font-size: 13px;
}

.health-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.health-kpis article,
.health-history-panel,
.health-detail-panel,
.health-api-panel,
.ingest-monitor-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 26px rgba(25, 47, 40, .06);
}

.health-kpis article {
  min-width: 0;
  border-top: 3px solid var(--green);
  padding: 14px;
}

.health-kpis article.status-warning {
  border-top-color: var(--amber);
}

.health-kpis article.status-error {
  border-top-color: var(--red);
}

.ingest-monitor-panel {
  margin-bottom: 14px;
  padding: 16px;
}

.ingest-monitor-time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}

.ingest-monitor-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ingest-monitor-kpis article {
  min-width: 0;
  border-top: 3px solid var(--green);
  padding: 12px 0 0;
}

.ingest-monitor-kpis article.status-error {
  border-top-color: var(--red);
}

.ingest-monitor-kpis span,
.ingest-monitor-kpis small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.ingest-monitor-kpis strong {
  display: block;
  margin: 7px 0 4px;
  font-size: 23px;
}

.ingest-queue-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.ingest-queue-status article {
  min-width: 0;
  border-top: 3px solid var(--green);
  padding: 10px 0 0;
}

.ingest-queue-status article.status-error {
  border-top-color: var(--red);
}

.ingest-queue-status span,
.ingest-queue-status small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.ingest-queue-status strong {
  display: block;
  margin: 7px 0 4px;
  font-size: 18px;
}

.ingest-receive-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.ingest-receive-item {
  display: grid;
  gap: 5px;
  border: 1px solid #dce8e4;
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.ingest-receive-item.status-error {
  border-left-color: var(--red);
  background: #fff5f2;
}

.ingest-receive-item > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ingest-receive-item strong,
.ingest-receive-item span,
.ingest-receive-item p,
.ingest-receive-item time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.ingest-receive-item p {
  margin: 0;
  color: var(--ink);
}

.health-kpis span,
.health-kpis small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.health-kpis strong {
  display: block;
  margin: 8px 0 5px;
  font-size: 24px;
}

.health-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.health-history-panel,
.health-detail-panel,
.health-api-panel {
  padding: 16px;
}

.health-side,
.health-history-list,
.health-issues,
.health-api-list {
  display: grid;
  gap: 10px;
}

.health-side {
  gap: 14px;
}

.health-block-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.health-block-head h3 {
  margin: 0;
  font-size: 15px;
}

.health-block-head p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
}

.health-history-list {
  max-height: 460px;
  overflow: auto;
}

.health-history-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #dce8e4;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.health-history-item i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}

.health-history-item.status-warning i {
  background: var(--amber);
}

.health-history-item.status-error i {
  background: var(--red);
}

.health-history-item strong,
.health-history-item span {
  display: block;
}

.health-history-item strong {
  margin-bottom: 3px;
  font-size: 13px;
}

.health-history-item span,
.health-history-item time {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
}

.health-history-item time {
  color: var(--muted);
  white-space: nowrap;
}

.health-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.health-detail-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #edf2ef;
  padding: 9px 0;
}

.health-detail-list div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.health-detail-list dt,
.health-detail-list dd {
  margin: 0;
  font-size: 12px;
}

.health-detail-list dt {
  color: var(--muted);
}

.health-detail-list dd {
  max-width: 62%;
  overflow: hidden;
  color: var(--ink);
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-issue,
.health-api-item {
  display: grid;
  gap: 4px;
  border: 1px solid #dce8e4;
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.health-issue.status-warning {
  border-left-color: var(--amber);
  background: #fffaf2;
}

.health-issue.status-error,
.health-api-item.status-error {
  border-left-color: var(--red);
  background: #fff5f2;
}

.health-issue strong,
.health-api-item strong {
  font-size: 12px;
}

.health-issue span,
.health-issue small,
.health-api-item span,
.health-api-item small {
  font-size: 12px;
  line-height: 1.45;
}

.health-api-list {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
}

body[data-view="health"] .status-strip,
body[data-view="health"] .kpi-grid,
body[data-view="health"] .dashboard-grid,
body[data-view="health"] .overview-extra-grid,
body[data-view="health"] .table-panel,
body[data-view="health"] .fast-panel,
body[data-view="health"] .skill-panel,
body[data-view="health"] .task-panel,
body[data-view="health"] .security-panel,
body[data-view="health"] .user-panel,
body[data-view="health"] .preference-panel,
body[data-view="health"] .history-panel,
body[data-view="health"] .profile-panel {
  display: none;
}

body[data-view="health"] .health-panel {
  animation: viewFade .16s ease;
}

.status-strip div {
  padding: 11px 13px;
}

.status-strip span,
.kpi-card span,
.kpi-card small,
.section-head p {
  color: var(--muted);
  font-size: 12px;
}

.status-strip strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.kpi-card {
  padding: 15px;
  background: linear-gradient(180deg, #fff, #f8fbfa);
}

.kpi-card strong {
  display: block;
  margin: 8px 0 7px;
  font-size: 32px;
  line-height: 1;
}

.kpi-card.danger {
  background: linear-gradient(180deg, #fff, var(--red-soft));
}

.kpi-card.warning {
  background: linear-gradient(180deg, #fff, var(--amber-soft));
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(440px, 1.25fr) minmax(280px, .75fr);
  gap: 14px;
  margin-bottom: 14px;
}

.map-panel,
.chart-panel,
.hotword-panel,
.trend-panel,
.table-panel {
  padding: 16px;
}

.overview-extra-grid {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(460px, 1.1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

select,
input {
  height: 36px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
}

input {
  width: 230px;
}

.map-canvas {
  position: relative;
  height: 360px;
  overflow: hidden;
  border: 1px solid #cfded8;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(17, 107, 95, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(17, 107, 95, .08) 1px, transparent 1px),
    radial-gradient(circle at 34% 38%, rgba(217, 155, 43, .14), transparent 18%),
    linear-gradient(135deg, #f6faf8, #eef6f2);
  background-size: 44px 44px, 44px 44px, auto, auto;
}

.map-label {
  position: absolute;
  color: rgba(23, 33, 29, .34);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.map-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 16px rgba(23, 33, 29, .2);
}

.map-dot.high {
  width: 16px;
  height: 16px;
  background: var(--red);
}

.map-dot.sensitive {
  background: #5194a7;
}

.map-dot.medium {
  background: var(--amber);
}

.map-dot.normal {
  background: var(--green);
}

.bars {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.bar-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8efec;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--gold));
}

.table-panel {
  margin-bottom: 24px;
}

body[data-view="events"] .table-panel {
  display: flex;
  height: 100%;
  min-height: 0;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
  flex: 1;
  flex-direction: column;
  background: rgba(255, 255, 255, .96);
}

.event-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  overflow: hidden;
  min-height: 0;
  padding: 12px;
  flex: 1;
}

.event-stream {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.event-scrollbar {
  display: none;
}

body[data-view="overview"] .table-panel,
body[data-view="overview"] .fast-panel,
body[data-view="overview"] .skill-panel,
body[data-view="overview"] .task-panel,
body[data-view="overview"] .security-panel,
body[data-view="overview"] .user-panel,
body[data-view="overview"] .preference-panel,
body[data-view="overview"] .history-panel,
body[data-view="events"] .status-strip,
body[data-view="events"] .kpi-grid,
body[data-view="events"] .dashboard-grid,
body[data-view="events"] .overview-extra-grid,
body[data-view="events"] .fast-panel,
body[data-view="events"] .skill-panel,
body[data-view="events"] .task-panel,
body[data-view="events"] .security-panel,
body[data-view="events"] .user-panel,
body[data-view="events"] .preference-panel,
body[data-view="events"] .history-panel,
body[data-view="history"] .status-strip,
body[data-view="history"] .kpi-grid,
body[data-view="history"] .dashboard-grid,
body[data-view="history"] .overview-extra-grid,
body[data-view="history"] .table-panel,
body[data-view="history"] .fast-panel,
body[data-view="history"] .skill-panel,
body[data-view="history"] .task-panel,
body[data-view="history"] .security-panel,
body[data-view="history"] .user-panel,
body[data-view="history"] .preference-panel,
body[data-view="fast"] .status-strip,
body[data-view="fast"] .kpi-grid,
body[data-view="fast"] .dashboard-grid,
body[data-view="fast"] .overview-extra-grid,
body[data-view="fast"] .table-panel,
body[data-view="fast"] .skill-panel,
body[data-view="fast"] .task-panel,
body[data-view="fast"] .security-panel,
body[data-view="fast"] .user-panel,
body[data-view="fast"] .preference-panel,
body[data-view="fast"] .history-panel,
body[data-view="preferences"] .status-strip,
body[data-view="preferences"] .kpi-grid,
body[data-view="preferences"] .dashboard-grid,
body[data-view="preferences"] .overview-extra-grid,
body[data-view="preferences"] .table-panel,
body[data-view="preferences"] .fast-panel,
body[data-view="preferences"] .skill-panel,
body[data-view="preferences"] .task-panel,
body[data-view="preferences"] .security-panel,
body[data-view="preferences"] .user-panel,
body[data-view="preferences"] .history-panel,
body[data-view="skill_library"] .status-strip,
body[data-view="skill_library"] .kpi-grid,
body[data-view="skill_library"] .dashboard-grid,
body[data-view="skill_library"] .overview-extra-grid,
body[data-view="skill_library"] .table-panel,
body[data-view="skill_library"] .fast-panel,
body[data-view="skill_library"] .task-panel,
body[data-view="skill_library"] .security-panel,
body[data-view="skill_library"] .user-panel,
body[data-view="skill_library"] .preference-panel,
body[data-view="skill_library"] .history-panel,
body[data-view="tasks"] .status-strip,
body[data-view="tasks"] .kpi-grid,
body[data-view="tasks"] .dashboard-grid,
body[data-view="tasks"] .overview-extra-grid,
body[data-view="tasks"] .table-panel,
body[data-view="tasks"] .fast-panel,
body[data-view="tasks"] .skill-panel,
body[data-view="tasks"] .security-panel,
body[data-view="tasks"] .user-panel,
body[data-view="tasks"] .preference-panel,
body[data-view="tasks"] .history-panel,
body[data-view="security"] .status-strip,
body[data-view="security"] .kpi-grid,
body[data-view="security"] .dashboard-grid,
body[data-view="security"] .overview-extra-grid,
body[data-view="security"] .table-panel,
body[data-view="security"] .fast-panel,
body[data-view="security"] .skill-panel,
body[data-view="security"] .task-panel,
body[data-view="security"] .user-panel,
body[data-view="security"] .preference-panel,
body[data-view="security"] .history-panel,
body[data-view="users"] .status-strip,
body[data-view="users"] .kpi-grid,
body[data-view="users"] .dashboard-grid,
body[data-view="users"] .overview-extra-grid,
body[data-view="users"] .table-panel,
body[data-view="users"] .fast-panel,
body[data-view="users"] .skill-panel,
body[data-view="users"] .task-panel,
body[data-view="users"] .security-panel,
body[data-view="users"] .preference-panel,
body[data-view="users"] .history-panel {
  display: none;
}

body[data-view]:not([data-view="profile"]) .profile-panel {
  display: none;
}

body[data-view]:not([data-view="health"]) .health-panel {
  display: none;
}

body[data-view="profile"] .status-strip,
body[data-view="profile"] .kpi-grid,
body[data-view="profile"] .dashboard-grid,
body[data-view="profile"] .overview-extra-grid,
body[data-view="profile"] .table-panel,
body[data-view="profile"] .fast-panel,
body[data-view="profile"] .skill-panel,
body[data-view="profile"] .task-panel,
body[data-view="profile"] .security-panel,
body[data-view="profile"] .user-panel,
body[data-view="profile"] .preference-panel,
body[data-view="profile"] .history-panel {
  display: none;
}

body[data-view="events"] .table-panel,
body[data-view="history"] .history-panel,
body[data-view="fast"] .fast-panel,
body[data-view="preferences"] .preference-panel,
body[data-view="skill_library"] .skill-panel,
body[data-view="tasks"] .task-panel,
body[data-view="security"] .security-panel,
body[data-view="users"] .user-panel,
body[data-view="profile"] .profile-panel {
  animation: viewFade .16s ease;
}

body[data-view="history"] .topbar,
body[data-view="history"] .history-panel {
  width: min(820px, 100%);
  margin-right: auto;
  margin-left: auto;
}

body[data-view="history"] .topbar {
  margin-bottom: 18px;
}

.history-panel .section-head {
  margin-bottom: 14px;
}

.history-panel .section-head h2 {
  font-size: 20px;
  line-height: 1.25;
}

.history-panel .section-head p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
}

.hotword-panel {
  min-height: 300px;
  background:
    radial-gradient(circle at 18% 30%, rgba(217, 155, 43, .09), transparent 26%),
    linear-gradient(180deg, #fff, #fbfdfc);
}

.hotword-cloud {
  display: flex;
  min-height: 218px;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  flex-wrap: wrap;
  padding: 18px 12px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: linear-gradient(135deg, #fbfdfc, #f1f7f4);
}

.hotword-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 34px;
  border: 1px solid rgba(17, 107, 95, .15);
  border-radius: 999px;
  padding: 5px 12px;
  color: #20584f;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 20px rgba(25, 47, 40, .06);
  font-size: calc(13px * var(--weight));
  font-weight: 800;
  line-height: 1.1;
  transition: .16s ease;
}

.hotword-chip:hover {
  transform: translateY(-1px);
  border-color: #a8cbc3;
  background: #fff;
}

.hotword-chip strong {
  color: var(--muted);
  font-size: 12px;
}

.hotword-chip.high {
  color: #a82218;
  border-color: rgba(180, 35, 24, .22);
}

.hotword-chip.medium {
  color: #915111;
  border-color: rgba(217, 155, 43, .28);
}

.hotword-chip.level-1 {
  color: #2866b2;
}

.hotword-chip.level-2 {
  color: #116b5f;
}

.hotword-chip.level-3 {
  color: #7f4aa0;
}

.hotword-chip.level-4 {
  color: #6b7140;
}

.trend-panel {
  min-height: 300px;
  background: linear-gradient(180deg, #fff, #fbfdfc);
}

.trend-chart {
  min-height: 218px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 248, .96)),
    var(--surface);
}

.trend-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.trend-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.trend-grid-line {
  stroke: #e4eeea;
  stroke-width: 1;
}

.trend-axis,
.trend-label {
  fill: #7b8984;
  font-size: 11px;
}

.trend-burst-bar {
  fill: rgba(217, 155, 43, .5);
}

.trend-burst-bar.high {
  fill: rgba(180, 35, 24, .42);
}

.trend-line {
  fill: none;
  stroke: #21a4b6;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-dot {
  fill: #21a4b6;
  stroke: #fff;
  stroke-width: 2;
}

.trend-dot.peak {
  fill: var(--red);
}

@keyframes viewFade {
  from {
    opacity: .55;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.table-head {
  align-items: center;
}

body[data-view="events"] .table-head {
  position: sticky;
  top: 69px;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(118px, 150px) minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  border-bottom: 1px solid #e2ebe7;
  padding: 12px;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(10px);
}

body[data-view="events"] .table-head > div:first-child {
  display: grid;
  align-content: center;
  min-height: 48px;
}

body[data-view="events"] .table-head h2 {
  font-size: 18px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
}

body[data-view="events"] .filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
  gap: 8px;
  align-items: center;
}

.filters input {
  width: clamp(180px, 20vw, 260px);
  flex: 0 1 240px;
}

body[data-view="events"] .filters input:not([type="checkbox"]) {
  width: 100%;
  max-width: none;
  flex: none;
}

.filters select {
  width: auto;
  min-width: 116px;
  max-width: 172px;
  flex: 0 1 132px;
  padding-right: 28px;
}

body[data-view="events"] .filters select,
body[data-view="events"] .filter-check {
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: none;
}

body[data-view="events"] .manual-link-import-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: auto;
  min-width: 96px;
  height: 38px;
  border-color: #a9d5cc;
  padding: 0 14px;
  color: #235f56;
  background: #eef9f6;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: #34423d;
  background: #fff;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.filter-check input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.filter-note {
  flex: 1 1 100%;
  margin: -2px 0 0;
  color: #7a8782;
  font-size: 12px;
  line-height: 1.4;
}

body[data-view="events"] .filter-note {
  grid-column: 1 / -1;
  margin: 0;
}

body[data-view="events"] .filter-check {
  justify-content: flex-start;
  height: 36px;
  overflow: hidden;
}

body[data-view="events"] .filter-check span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sourceFilter {
  flex-basis: 142px;
  min-width: 128px;
}

#locationFilter,
#ipRegionFilter,
#sortFilter {
  flex-basis: 136px;
}

.event-list {
  display: grid;
  gap: 10px;
}

.event-empty-state {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  min-height: 240px;
  border: 1px dashed #c8ddd7;
  border-radius: 8px;
  padding: 24px;
  color: #53655f;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 251, 249, .96));
}

.event-empty-state strong {
  color: #1f2f2a;
  font-size: 16px;
}

.event-empty-state p {
  max-width: 520px;
  color: #66766f;
  font-size: 13px;
  line-height: 1.55;
}

.event-empty-state div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-empty-state {
  min-height: 180px;
}

body[data-view="events"] .event-list {
  flex: 1;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid #d7e6e1;
  padding: 0 10px 0 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #2f7b70 #edf5f2;
  scroll-padding-top: 12px;
}

body[data-view="events"] .event-list::-webkit-scrollbar {
  width: 12px;
}

body[data-view="events"] .event-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #edf5f2;
}

body[data-view="events"] .event-list::-webkit-scrollbar-thumb {
  border: 2px solid #edf5f2;
  border-radius: 999px;
  background: #2f7b70;
}

.event-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

body[data-view="events"] .event-card {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  border-left-width: 4px;
  padding: 12px 12px 12px 10px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body[data-view="events"] .event-card.selected {
  border-color: #79b9ad;
  box-shadow: 0 0 0 2px rgba(72, 181, 168, .12), 0 10px 22px rgba(25, 47, 40, .08);
}

.event-main {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.event-card:hover {
  border-color: #b7d5ce;
  box-shadow: 0 10px 22px rgba(25, 47, 40, .08);
}

.event-card.high {
  border-left-color: var(--red);
  background: linear-gradient(90deg, var(--red-soft), #fff 26%);
}

.event-card.sensitive {
  border-left-color: #5194a7;
  background: linear-gradient(90deg, #edf8fa, #fff 26%);
}

.event-card.medium {
  border-left-color: var(--amber);
  background: linear-gradient(90deg, var(--amber-soft), #fff 26%);
}

.event-title {
  margin: 7px 0 6px;
  font-weight: 760;
  line-height: 1.35;
}

.event-summary {
  display: -webkit-box;
  overflow: hidden;
  color: #34423d;
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.event-meta,
.tags {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.event-meta {
  color: var(--muted);
  font-size: 12px;
}

.tag {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  height: 24px;
  border: 1px solid #dbe7e3;
  border-radius: 999px;
  padding: 0 8px;
  color: #36554c;
  background: var(--surface-soft);
  font-size: 12px;
  white-space: nowrap;
}

.tag.high {
  color: #8e1d14;
  border-color: #f0b6ad;
  background: var(--red-soft);
}

.tag.sensitive {
  color: #1d6477;
  border-color: #aad5df;
  background: #edf8fa;
}

.tag.medium {
  color: #874500;
  border-color: #efcf94;
  background: var(--amber-soft);
}

.tag.normal {
  color: #0f5b50;
  border-color: #b9d9d2;
  background: var(--green-soft);
}

.event-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  align-content: center;
  min-width: 0;
  white-space: nowrap;
}

.event-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 68px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid #dce8e4;
  border-radius: 7px;
  padding: 0 9px;
  color: #52645e;
  background: #f8fbfa;
  text-align: center;
}

.event-status-chip small {
  display: none;
}

.event-status-chip strong {
  color: #3e514a;
  font-size: 12px;
  line-height: 1.25;
}

.event-status-chip.alert {
  border-color: #efb3aa;
  background: #fff5f2;
}

.event-status-chip.alert strong {
  color: #a13c30;
}

.event-status-chip.watch {
  border-color: #efd6a1;
  background: #fffaf0;
}

.event-status-chip.watch strong {
  color: #98631d;
}

.event-status-chip.done {
  border-color: #b9d9d2;
  background: #f2faf7;
}

.event-status-chip.done strong {
  color: #226e59;
}

.event-status-chip.muted strong {
  color: #687872;
}

.event-actions .copy-btn,
.event-location-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 30px;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.event-actions .copy-btn {
  color: #235f56;
  border-color: #a9d5cc;
  background: #eef9f6;
  text-decoration: none;
}

.event-actions .event-original-link {
  color: #315d78;
  border-color: #b9d3e0;
  background: #f1f8fb;
}

.event-actions .event-original-link.disabled {
  color: #8c9b96;
  border-color: #dbe7e3;
  background: #f6faf8;
}

.event-actions .copy-btn.disabled {
  color: #8c9b96;
  border-color: #dbe7e3;
  background: #f6faf8;
  cursor: not-allowed;
}

.event-location-chip {
  min-width: 58px;
  max-width: 96px;
  overflow: hidden;
  border: 1px solid #d6ded9;
  border-radius: 7px;
  color: #61736e;
  background: #f7f9f8;
  text-overflow: ellipsis;
}

.event-status-control {
  display: grid;
  gap: 5px;
}

.event-status-control span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mobile-event-workflow {
  display: none;
}

.status-select {
  width: 100%;
  min-width: 150px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 28px 0 10px;
  color: #40514c;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-select.status-pending {
  border-color: #9fcfc4;
  color: #0f5b50;
  background: var(--green-soft);
}

.status-select.status-watch {
  border-color: #efcf94;
  color: #874500;
  background: var(--amber-soft);
}

.status-select.status-alert {
  border-color: #f0b6ad;
  color: #8e1d14;
  background: var(--red-soft);
}

.status-select.status-done {
  border-color: #d9e2de;
  color: #586661;
  background: #f4f7f5;
}

.status-select.status-muted {
  border-color: #d9e2de;
  color: #5f6f69;
  background: #f8faf9;
}

.status-select:disabled {
  cursor: default;
  opacity: .68;
}

.load-more {
  display: none !important;
  width: 100%;
  margin-top: 12px;
}

@media (min-width: 1181px) {
  body[data-view="events"] .filters {
    display: flex;
    flex-wrap: wrap;
  }

  body[data-view="events"] #searchInput {
    width: clamp(180px, 16vw, 250px);
    flex: 1.25 1 180px;
  }

  body[data-view="events"] .filters select {
    width: auto;
    min-width: 112px;
    max-width: none;
    flex: 1 1 120px;
  }

  body[data-view="events"] .manual-link-import-btn {
    flex: 0 0 auto;
  }

  body[data-view="events"] {
    height: 100vh;
    overflow: hidden;
  }

  body[data-view="events"] .app-shell {
    height: 100vh;
    min-height: 0;
    grid-template-rows: 68px minmax(0, 1fr);
    overflow: hidden;
  }

  body[data-view="events"] .workspace {
    height: calc(100vh - 68px);
    min-height: 0;
    padding: 12px 16px 0;
    overflow: hidden;
  }

  body[data-view="events"] .table-panel {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  body[data-view="events"] .table-head {
    position: relative;
    top: auto;
  }

  body[data-view="events"] .event-workbench {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-view="events"] .detail-panel {
    position: relative;
    top: auto;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  body[data-view="events"] .event-stream {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding-right: 0;
    overflow: hidden;
  }

  body[data-view="events"] .event-list {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow-y: scroll !important;
    overflow-x: hidden;
    padding: 0 8px 12px 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: #2f7b70 #edf5f2;
  }

  body[data-view="events"] .event-list::-webkit-scrollbar {
    width: 18px;
  }

  body[data-view="events"] .event-list::-webkit-scrollbar-track {
    border-radius: 999px;
    background: linear-gradient(180deg, #f6fbf9, #eaf3f0);
  }

  body[data-view="events"] .event-list::-webkit-scrollbar-thumb {
    border: 3px solid #edf5f2;
    border-radius: 999px;
    background: #2f7b70;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), 0 2px 8px rgba(20, 64, 56, .18);
  }

  body[data-view="events"] .event-list::-webkit-scrollbar-thumb:hover,
  body[data-view="events"] .event-list::-webkit-scrollbar-thumb:active {
    background: #145f55;
  }

  body[data-view="events"] .event-scrollbar {
    display: none !important;
  }
}

.fast-panel {
  min-height: calc(100vh - 116px);
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 248, .96)),
    var(--surface);
  box-shadow: 0 10px 26px rgba(25, 47, 40, .06);
}

.fast-inner {
  display: grid;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 58px 28px 40px;
  gap: 18px;
}

.fast-heading {
  text-align: center;
}

.fast-heading h2 {
  font-size: 32px;
  line-height: 1.2;
}

.fast-heading h2 span {
  color: #2f6fd7;
}

.fast-prompt-bubbles {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 4px 0 12px;
}

.fast-prompts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px 16px;
  flex-wrap: wrap;
  min-height: 150px;
}

.fast-specials {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fast-prompts button,
.fast-specials button {
  border: 1px solid #dce6e1;
  color: #5f6f69;
  background: #fff;
  white-space: nowrap;
  transition: .16s ease;
}

.fast-prompts button {
  min-height: 38px;
  border-radius: 999px;
  padding: 0 18px;
  opacity: 0;
  transform: translateY(calc(var(--float) * 3px));
  box-shadow: 0 12px 26px rgba(36, 54, 48, .06);
  animation:
    fastBubbleFade .58s ease forwards,
    fastBubbleFloat 4.6s ease-in-out infinite;
  animation-delay:
    calc(var(--i) * 90ms),
    calc(.7s + var(--i) * 160ms);
}

.fast-prompts button:hover,
.fast-specials button:hover {
  color: var(--green-dark);
  border-color: #a8cbc3;
  background: var(--green-soft);
}

.fast-prompts button:nth-child(3n + 1) {
  margin-top: 12px;
}

.fast-prompts button:nth-child(4n + 2) {
  margin-bottom: 12px;
}

.fast-prompts button:nth-child(5n) {
  background: linear-gradient(180deg, #fff, var(--surface-soft));
}

@keyframes fastBubbleFade {
  to {
    opacity: 1;
  }
}

@keyframes fastBubbleFloat {
  0%,
  100% {
    transform: translateY(calc(var(--float) * 3px));
  }

  50% {
    transform: translateY(calc(var(--float) * 3px - 8px));
  }
}

.fast-composer {
  position: relative;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #d8e3de;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(25, 47, 40, .06);
}

.fast-composer textarea {
  display: block;
  width: 100%;
  min-height: 164px;
  resize: vertical;
  border: 0;
  outline: 0;
  padding: 18px 18px 62px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  line-height: 1.6;
}

.fast-composer textarea::placeholder {
  color: #93a39d;
}

.fast-compose-actions {
  position: absolute;
  right: 16px;
  bottom: 14px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.fast-add,
.fast-send {
  pointer-events: auto;
}

.fast-add {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: #50615b;
  background: transparent;
  font-size: 24px;
  line-height: 1;
}

.fast-add:hover {
  background: var(--surface-soft);
}

.fast-send {
  min-width: 74px;
}

.fast-specials {
  justify-content: flex-start;
}

.fast-specials button {
  height: 38px;
  border-radius: 8px;
  padding: 0 18px;
  background: var(--surface-soft);
}

.fast-search-options {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.fast-search-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #34423d;
  font-weight: 700;
}

.fast-search-options input {
  width: auto;
  height: auto;
}

.fast-search-options select {
  width: auto;
  min-width: 116px;
  height: 32px;
  border-radius: 8px;
  padding: 0 28px 0 10px;
  font-size: 13px;
}

.fast-search-options > span {
  margin-left: auto;
}

.fast-status-bar {
  display: grid;
  gap: 7px;
  flex: 1 1 280px;
  min-height: 42px;
  border: 1px solid #dbe7e3;
  border-radius: 8px;
  padding: 8px 12px;
  color: #5d6c66;
  background: #fff;
}

.fast-progress-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8efec;
}

.fast-progress-track i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width .32s ease;
}

.fast-status-bar span {
  display: block;
}

.fast-status-bar.loading {
  border-color: #9fcac1;
  background: linear-gradient(90deg, rgba(47, 111, 215, .06), #fff);
}

.fast-status-bar.loading .fast-progress-track i {
  width: 42%;
  background: linear-gradient(90deg, var(--green), #61a89b);
  animation: fastStatusProgress 1.1s ease-in-out infinite;
}

.fast-status-bar.done {
  border-color: #a8cbc3;
  color: #214e45;
  background: var(--green-soft);
}

.fast-status-bar.done .fast-progress-track i {
  width: 100%;
}

.fast-status-bar.error {
  border-color: #f0b6ad;
  color: #8e1d14;
  background: var(--red-soft);
}

.fast-status-bar.error .fast-progress-track {
  background: #f8d8d2;
}

.fast-status-bar.error .fast-progress-track i {
  width: 100%;
  background: var(--red);
}

@keyframes fastStatusProgress {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(260%);
  }
}

.fast-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 10px;
}

.fast-result-column.ai {
  grid-column: auto;
  border-color: #c8dcf2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 250, 255, .96)),
    #fff;
}

.fast-result-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 210px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(25, 47, 40, .05);
}

.fast-result-head,
.fast-result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fast-result-head {
  margin-bottom: 14px;
}

.fast-result-head h3 {
  margin: 0;
  font-size: 16px;
}

.fast-result-head p {
  margin: 4px 0 0;
  max-width: 520px;
  color: #73817c;
  font-size: 12px;
  line-height: 1.45;
}

.fast-result-head span,
.fast-result-meta {
  color: var(--muted);
  font-size: 12px;
}

.fast-result-head > span {
  flex: 0 0 auto;
  min-width: 66px;
  border: 1px solid #dbe7e3;
  border-radius: 999px;
  padding: 5px 10px;
  color: #49645c;
  background: #f8fbfa;
  text-align: center;
  font-weight: 800;
}

.fast-result-list {
  display: grid;
  align-content: start;
  flex: 1;
  gap: 10px;
}

.fast-answer {
  margin-bottom: 10px;
  border: 1px solid #cfe0da;
  border-radius: 8px;
  padding: 10px 12px;
  color: #21352f;
  background: var(--green-soft);
  font-size: 13px;
  line-height: 1.6;
}

.fast-ai-answer {
  display: grid;
  align-content: start;
  min-height: 142px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  padding: 12px;
  background: #fbfdfc;
}

.fast-ai-answer pre {
  margin: 0;
  color: #263832;
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}

.fast-result-card {
  display: grid;
  gap: 8px;
  border: 1px solid #dce6e1;
  border-left: 5px solid var(--green);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.fast-result-card.high {
  border-left-color: var(--red);
  background: linear-gradient(90deg, var(--red-soft), #fff 34%);
}

.fast-result-card.medium {
  border-left-color: var(--amber);
  background: linear-gradient(90deg, var(--amber-soft), #fff 34%);
}

.fast-result-card.web {
  border-left-color: var(--blue);
}

.fast-result-card h4 {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.fast-result-card h4 a {
  color: var(--blue);
  text-decoration: none;
}

.fast-result-card p {
  display: -webkit-box;
  overflow: hidden;
  color: #34423d;
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.fast-result-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fast-empty-state {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 130px;
  overflow: hidden;
  border: 1px dashed #d6e3de;
  border-radius: 8px;
  padding: 22px 22px 20px 58px;
  color: #53645e;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 251, 250, .94)),
    #fff;
}

.fast-empty-state::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 22px;
  width: 20px;
  height: 20px;
  border: 2px solid #b8c9c3;
  border-radius: 999px;
  box-shadow: inset 0 0 0 5px #fff;
  background: #dfe9e5;
}

.fast-empty-state.loading::before {
  border-color: #64a99b;
  border-top-color: transparent;
  background: transparent;
  animation: fastEmptySpin .8s linear infinite;
}

.fast-empty-state.warning {
  border-color: #efc6bd;
  background: linear-gradient(180deg, #fff, rgba(254, 246, 244, .96));
}

.fast-empty-state.warning::before {
  border-color: #d97867;
  background: #f8d8d2;
}

.fast-empty-state.muted {
  color: #6b7773;
  background: #f8faf9;
}

.fast-empty-state strong {
  color: #1f2b27;
  font-size: 15px;
  line-height: 1.4;
}

.fast-empty-state p {
  margin: 6px 0 0;
  color: inherit;
  font-size: 13px;
  line-height: 1.65;
}

.fast-empty-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.fast-empty-tips span {
  border: 1px solid #dce7e3;
  border-radius: 999px;
  padding: 4px 10px;
  color: #41645b;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

@keyframes fastEmptySpin {
  to {
    transform: rotate(360deg);
  }
}

.task-panel {
  margin-bottom: 24px;
  padding: 18px;
}

.task-layout {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(420px, 1.18fr);
  gap: 16px;
  align-items: start;
}

.task-form,
.task-output,
.task-report,
.operation-log-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.task-form {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.task-output {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.task-field,
.task-materials {
  display: grid;
  gap: 8px;
}

.task-field span,
.task-materials legend {
  color: #34423d;
  font-size: 13px;
  font-weight: 750;
}

.task-field input,
.task-field select,
.task-field textarea {
  width: 100%;
}

.task-field textarea {
  min-height: 126px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  line-height: 1.6;
}

.task-field input[type="file"] {
  padding-top: 7px;
  color: var(--muted);
}

.task-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.task-materials {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.task-materials legend {
  padding: 0 6px;
}

.task-materials label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #42524d;
  font-size: 13px;
  line-height: 1.45;
}

.task-materials input {
  width: auto;
  height: auto;
}

.task-actions,
.task-list-head,
.task-card,
.task-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-actions {
  justify-content: flex-end;
}

.task-list-head {
  justify-content: space-between;
}

.task-list-head h3,
.task-report h3 {
  margin: 0;
  font-size: 15px;
}

.task-list,
.operation-log-list {
  display: grid;
  gap: 10px;
}

.operation-log-panel {
  padding: 14px;
}

.operation-log-item {
  display: grid;
  gap: 4px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  padding: 10px;
  background: #fbfdfc;
}

.operation-log-item strong {
  font-size: 13px;
}

.operation-log-item span,
.operation-log-item small {
  color: var(--muted);
  font-size: 12px;
}

.task-card {
  justify-content: space-between;
  border: 1px solid #dce6e1;
  border-left: 5px solid var(--green);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.task-card-main {
  min-width: 0;
}

.task-card-main strong,
.task-card-main span,
.task-card-main small {
  display: block;
}

.task-card-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card-main span,
.task-card-main small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.task-card-main p {
  margin-top: 7px;
  color: #34423d;
  font-size: 13px;
}

.task-card-actions {
  flex-shrink: 0;
}

.task-report {
  padding: 14px;
}

.task-report pre {
  min-height: 260px;
  max-height: 460px;
  margin: 12px 0 0;
  overflow: auto;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  padding: 13px;
  color: #263832;
  background: #fbfdfc;
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}

.skill-panel {
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 26px rgba(25, 47, 40, .06);
}

.skill-actions {
  display: flex;
  gap: 8px;
}

.skill-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.skill-tree,
.skill-workspace,
.skill-card-form,
.skill-list-panel,
.skill-doc-controls,
.skill-doc-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.skill-tree {
  min-height: 620px;
  padding: 12px;
}

.skill-tree-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #17211d;
  font-size: 14px;
}

.skill-tree-title span {
  color: var(--muted);
  font-size: 12px;
}

.skill-tree-group {
  margin-bottom: 14px;
}

.skill-tree-group h3 {
  margin: 0 0 7px;
  color: #42524d;
  font-size: 12px;
  font-weight: 800;
}

.skill-tree-list {
  display: grid;
  gap: 4px;
}

.skill-tree-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 8px;
  padding: 8px 9px;
  color: #263832;
  background: transparent;
  text-align: left;
}

.skill-tree-item:hover,
.skill-tree-item.active {
  border-left-color: #37bfd0;
  background: #eef7fb;
}

.skill-folder {
  position: relative;
  width: 18px;
  height: 14px;
  border: 2px solid #214b67;
  border-radius: 3px;
}

.skill-folder::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -2px;
  width: 9px;
  height: 6px;
  border: 2px solid #214b67;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: #fff;
}

.skill-tree-item.active .skill-folder,
.skill-tree-item.active .skill-folder::before {
  border-color: #1aa7bd;
}

.skill-tree-item strong,
.skill-tree-item small {
  display: block;
}

.skill-tree-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.skill-tree-item small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.skill-tree-item em {
  min-width: 24px;
  border-radius: 999px;
  padding: 3px 7px;
  color: #0f5b50;
  background: var(--green-soft);
  font-size: 12px;
  font-style: normal;
  text-align: center;
}

.skill-workspace {
  min-width: 0;
  min-height: 620px;
  padding: 16px;
}

.skill-workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.skill-workspace-head h3,
.skill-list-head h3,
.skill-form-head h3,
.skill-doc-controls h3 {
  margin: 0;
  font-size: 17px;
}

.skill-workspace-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.skill-work-grid,
.skill-document-layout {
  display: grid;
  grid-template-columns: minmax(300px, .76fr) minmax(420px, 1.24fr);
  gap: 14px;
  align-items: start;
}

.skill-card-form,
.skill-list-panel,
.skill-doc-controls,
.skill-doc-preview {
  padding: 14px;
}

.skill-card-form {
  display: grid;
  gap: 12px;
}

.skill-form-head,
.skill-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.skill-form-head span,
.skill-list-head span {
  color: var(--muted);
  font-size: 12px;
}

.skill-card-form label,
.skill-doc-controls label {
  display: grid;
  gap: 7px;
  color: #34423d;
  font-size: 13px;
  font-weight: 750;
}

.skill-card-form input,
.skill-card-form select,
.skill-card-form textarea,
.skill-doc-controls input,
.skill-doc-controls select,
.skill-doc-controls textarea {
  width: 100%;
}

.skill-card-form textarea,
.skill-doc-controls textarea {
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  line-height: 1.6;
}

.skill-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.skill-form-actions,
.skill-doc-quick {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.skill-item-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.skill-data-card {
  display: grid;
  gap: 8px;
  border: 1px solid #dce6e1;
  border-left: 5px solid var(--green);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.skill-data-card div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.skill-data-card strong {
  font-size: 14px;
}

.skill-data-card span,
.skill-data-card small {
  color: var(--muted);
  font-size: 12px;
}

.skill-data-card p {
  color: #34423d;
  font-size: 13px;
  line-height: 1.55;
}

.skill-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.skill-tags i {
  border: 1px solid #dbe7e3;
  border-radius: 999px;
  padding: 3px 8px;
  color: #36554c;
  background: #fff;
  font-size: 12px;
  font-style: normal;
}

.skill-document-layout {
  grid-template-columns: minmax(280px, .58fr) minmax(460px, 1.42fr);
}

.skill-doc-controls {
  display: grid;
  gap: 14px;
}

.skill-doc-section {
  display: grid;
  gap: 10px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  padding: 12px;
  background: #fbfdfc;
}

.skill-doc-section h4 {
  margin: 0;
  color: #263832;
  font-size: 14px;
}

.skill-template-modes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.skill-template-modes label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  padding: 0 10px;
  color: #34423d;
  background: #fff;
  font-size: 12px;
  font-weight: 750;
}

.skill-template-modes input {
  width: auto;
  height: auto;
}

.skill-template-file {
  min-height: 36px;
  border: 1px dashed #c8d8d2;
  border-radius: 8px;
  padding: 7px 9px;
  background: #fff;
}

.skill-template-file:disabled {
  opacity: .55;
}

.skill-template-name {
  color: var(--muted);
  font-size: 12px;
}

.skill-client-fields {
  display: grid;
  gap: 10px;
}

.skill-client-fields[hidden],
#skillLeaderTargetWrap[hidden] {
  display: none;
}

.skill-doc-source {
  border: 1px solid #dce6e1;
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.skill-doc-source h4 {
  margin: 0 0 7px;
  font-size: 14px;
}

.skill-doc-source p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.skill-doc-preview pre {
  min-height: 440px;
  max-height: 620px;
  margin: 12px 0 0;
  overflow: auto;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  padding: 14px;
  color: #263832;
  background: #fbfdfc;
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}

.security-panel {
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 26px rgba(25, 47, 40, .06);
}

.security-actions {
  display: flex;
  gap: 8px;
}

.security-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.security-tabs button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  color: #42524d;
  background: #fff;
  font-weight: 750;
}

.security-tabs button.active,
.security-tabs button:hover {
  color: #fff;
  border-color: #1d7e74;
  background: var(--green);
}

.security-tab-panel {
  display: none;
}

.security-tab-panel.active {
  display: block;
}

.security-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.security-status-card,
.security-summary-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.security-status-card {
  padding: 14px;
}

.security-status-card span,
.security-status-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.security-status-card strong {
  display: block;
  margin: 7px 0 6px;
  overflow: hidden;
  color: #17211d;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 22px;
}

.security-status-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.security-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
  align-items: start;
}

.security-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.security-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.security-filters input {
  width: clamp(180px, 22vw, 300px);
}

.security-filters select {
  width: 150px;
}

.security-alert-list {
  display: grid;
  gap: 10px;
}

.security-log-list {
  display: grid;
  gap: 10px;
}

.security-log-card {
  display: grid;
  gap: 7px;
  border: 1px solid #dce6e1;
  border-left: 5px solid var(--green);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.security-log-card.status-error {
  border-left-color: var(--red);
  background: linear-gradient(90deg, var(--red-soft), #fff 32%);
}

.security-log-card.status-ok {
  border-left-color: var(--blue);
}

.security-log-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.security-log-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.security-log-head span,
.security-log-card p,
.security-log-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.security-log-card small {
  overflow-wrap: anywhere;
}

.backup-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.backup-toolbar strong,
.backup-toolbar span {
  display: block;
}

.backup-toolbar span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.backup-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.profile-panel {
  margin-bottom: 24px;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.profile-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 26px rgba(25, 47, 40, .06);
}

.profile-summary-card {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.profile-avatar-wrap {
  position: relative;
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  overflow: hidden;
  border: 3px solid #dce8e4;
  border-radius: 50%;
  background: var(--green-soft);
}

.profile-avatar-fallback,
.profile-avatar-image {
  width: 100%;
  height: 100%;
}

.profile-avatar-fallback {
  display: grid;
  place-items: center;
  color: #12594f;
  font-size: 32px;
  font-weight: 800;
}

.profile-avatar-image {
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.profile-avatar-actions {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-avatar-actions button,
.profile-password-form button {
  min-height: 38px;
}

.profile-avatar-note,
.profile-card-head p,
.profile-readonly-notice {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.profile-account-summary {
  display: grid;
  width: 100%;
  gap: 9px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.profile-account-summary div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.profile-account-summary span {
  color: var(--muted);
  font-size: 12px;
}

.profile-account-summary strong {
  overflow-wrap: anywhere;
  color: #263832;
  font-size: 13px;
  text-align: right;
}

.profile-form-card {
  display: grid;
  gap: 20px;
}

.profile-card-head h3 {
  margin: 0 0 5px;
  font-size: 16px;
}

.profile-readonly-grid,
.profile-password-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-readonly-grid label,
.profile-password-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.profile-readonly-grid input,
.profile-password-form input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
}

.profile-readonly-grid input[readonly] {
  color: #52635d;
  background: var(--surface-soft);
}

.profile-password-head {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.profile-password-form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
}

.profile-readonly-notice {
  border-left: 3px solid var(--amber);
  padding: 8px 10px;
  background: var(--amber-soft);
}

.task-list-head span {
  color: var(--muted);
  font-size: 12px;
}

.user-panel {
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 26px rgba(25, 47, 40, .06);
}

.user-layout {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.user-create-panel,
.permission-matrix,
.user-list-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.user-create-panel {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 14px;
}

.user-create-panel h3 {
  margin: 0 0 2px;
  font-size: 15px;
}

.user-create-note {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.user-create-panel label,
.user-actions label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.user-create-panel input,
.user-create-panel select,
.user-actions select {
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
}

.customer-invite-result {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.customer-invite-result[hidden] {
  display: none;
}

.customer-invite-result strong {
  color: var(--green-dark);
  font-size: 13px;
}

.customer-invite-result input {
  font-size: 12px;
}

.customer-credential-grid {
  display: grid;
  gap: 8px;
}

.customer-credential-grid input {
  color: #173c34;
  background: #f7fbf9;
}

#customerAccountUsername,
#customerAccountPassword {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
}

#customerCredentialsCopyBtn {
  width: 100%;
  min-height: 36px;
}

.customer-invite-result small {
  color: var(--muted);
  line-height: 1.5;
}

.user-main-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.permission-grid {
  display: block;
  min-width: 0;
}

.permission-table-shell {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #dde7e3;
  border-radius: 8px;
  background: #fff;
}

.permission-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  table-layout: fixed;
}

.permission-table th,
.permission-table td {
  border-bottom: 1px solid #e7eeeb;
  padding: 6px 12px;
}

.permission-table tr:last-child th,
.permission-table tr:last-child td {
  border-bottom: 0;
}

.permission-table thead th {
  color: #314a43;
  background: #f4f8f6;
  font-size: 12px;
  text-align: center;
}

.permission-table thead th:first-child,
.permission-table tbody th {
  width: 27%;
  text-align: left;
}

.permission-table thead strong,
.permission-table thead small {
  display: block;
}

.permission-table thead strong {
  font-size: 13px;
}

.permission-table thead small {
  margin-top: 2px;
  color: #71847e;
  font-size: 10px;
  font-weight: 700;
}

.permission-table tbody th {
  color: #263c36;
  background: #fff;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.permission-table tbody td {
  text-align: center;
  transition: opacity .15s ease, background-color .15s ease;
}

.permission-table tbody tr:hover th,
.permission-table tbody tr:hover td {
  background: #f9fbfa;
}

.permission-table td.is-updating {
  opacity: .45;
}

.permission-switch {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 18px;
  cursor: pointer;
  vertical-align: middle;
}

.permission-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.permission-switch-track {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #c8d5d1;
  border-radius: 999px;
  background: #dfe7e4;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.permission-switch-track span {
  display: block;
  width: 12px;
  height: 12px;
  margin: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(24, 47, 40, .2);
  transition: transform .16s ease;
}

.permission-switch input:checked + .permission-switch-track {
  border-color: #287567;
  background: #287567;
}

.permission-switch input:checked + .permission-switch-track span {
  transform: translateX(14px);
}

.permission-switch input:focus-visible + .permission-switch-track {
  box-shadow: 0 0 0 3px rgba(40, 117, 103, .16);
}

.permission-switch.is-locked {
  cursor: not-allowed;
  opacity: .66;
}

.user-permissions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.user-permissions span {
  border: 1px solid #dbe7e3;
  border-radius: 999px;
  padding: 3px 7px;
  color: #36554c;
  background: var(--surface-soft);
  font-size: 11px;
  font-weight: 700;
}

.user-list {
  display: grid;
  gap: 10px;
}

.user-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  gap: 12px;
  align-items: start;
  border: 1px solid #dce8e4;
  border-left: 5px solid var(--green);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.user-card.pending {
  border-left-color: var(--amber);
  background: linear-gradient(90deg, var(--amber-soft), #fff 30%);
}

.user-card.invited {
  border-left-color: var(--amber);
  background: linear-gradient(90deg, var(--amber-soft), #fff 30%);
}

.user-card.disabled {
  border-left-color: var(--red);
  background: linear-gradient(90deg, var(--red-soft), #fff 30%);
}

.user-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.user-card-head strong {
  font-size: 15px;
}

.user-main p,
.user-main small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.user-permissions {
  margin-top: 9px;
}

.user-actions {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(90px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.user-invite-action {
  grid-column: 1 / -1;
}

.user-actions button:disabled,
.user-actions select:disabled {
  opacity: .52;
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  .user-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-create-panel {
    position: static;
  }

}

.security-alert-card {
  display: grid;
  gap: 8px;
  border: 1px solid #dce6e1;
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.security-alert-card.severity-1 {
  border-left-color: var(--red);
  background: linear-gradient(90deg, var(--red-soft), #fff 30%);
}

.security-alert-card.severity-2 {
  border-left-color: var(--amber);
  background: linear-gradient(90deg, var(--amber-soft), #fff 30%);
}

.security-alert-card.severity-3 {
  border-left-color: var(--green);
}

.security-alert-head,
.security-alert-meta {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.security-alert-head strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.security-alert-head span,
.security-alert-meta,
.security-alert-card small {
  color: var(--muted);
  font-size: 12px;
}

.security-alert-card p {
  overflow-wrap: anywhere;
  color: #263832;
  font-size: 13px;
  line-height: 1.5;
}

.security-side {
  display: grid;
  gap: 14px;
}

.security-summary-card {
  padding: 14px;
}

.security-summary-card h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.security-summary-list {
  display: grid;
  gap: 9px;
}

.security-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 34px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.security-summary-row span {
  overflow: hidden;
  color: #34423d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.security-summary-row div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8efec;
}

.security-summary-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.security-summary-row strong {
  color: var(--muted);
  text-align: right;
}

.security-tips {
  display: grid;
  gap: 8px;
}

.security-tips p {
  border: 1px solid #dce6e1;
  border-radius: 8px;
  padding: 9px 10px;
  color: #42524d;
  background: var(--surface-soft);
  font-size: 12px;
  line-height: 1.5;
}

.detail-panel {
  display: none;
  position: sticky;
  top: 82px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 250, .96)),
    #fff;
  box-shadow: 0 10px 24px rgba(25, 47, 40, .06);
}

body[data-view="events"] .detail-panel {
  display: block;
  align-self: stretch;
  max-height: 100%;
}

body[data-view="events"] .detail-content {
  display: grid;
  gap: 12px;
}

.detail-close {
  display: none;
  margin-bottom: 12px;
}

.detail-content .empty {
  color: var(--muted);
  font-size: 14px;
}

body[data-view="events"] .detail-content > h2 {
  display: -webkit-box;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-view="events"] .detail-summary {
  display: -webkit-box;
  overflow: hidden;
  color: #354842;
  font-size: 14px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body[data-view="events"] .detail-grid {
  grid-template-columns: 74px minmax(0, 1fr);
  margin-top: 0;
  border: 1px solid #dde9e5;
  border-radius: 8px;
  padding: 12px;
  background: #fbfdfc;
}

body[data-view="events"] .detail-grid dt,
body[data-view="events"] .detail-grid dd {
  min-width: 0;
}

body[data-view="events"] .detail-grid dd {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-view="events"] .detail-section {
  border: 1px solid #dde9e5;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.detail-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border-bottom: 1px solid #d7e2de;
  padding: 0 2px;
}

.detail-tabs button {
  min-width: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 10px 8px 8px;
  color: #64736f;
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.detail-tabs button.active {
  border-bottom-color: var(--green);
  color: #175d53;
}

.detail-tabs button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 5px;
  border-radius: 10px;
  color: #fff;
  background: #397e74;
  font-size: 11px;
}

.detail-tab-panel[hidden] {
  display: none !important;
}

.evidence-section {
  margin-top: 4px !important;
}

.evidence-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.evidence-overview > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.evidence-overview > div > span,
.evidence-overview small {
  color: var(--muted);
  font-size: 12px;
}

.evidence-status {
  color: #566762;
}

.evidence-status.complete {
  color: #176c52;
}

.evidence-status.partial,
.evidence-status.capturing {
  color: #94620d;
}

.evidence-status.failed {
  color: #b33b2f;
}

.evidence-boundary {
  margin: 0;
  border-left: 3px solid #aebdb8;
  padding: 8px 10px;
  color: #566762;
  background: #f7faf9;
  font-size: 12px;
  line-height: 1.65;
}

.evidence-version-list {
  display: grid;
  gap: 10px;
}

.evidence-version-card {
  display: grid;
  gap: 10px;
  border: 1px solid #d9e4e0;
  border-radius: 8px;
  padding: 12px;
  background: #fbfdfc;
}

.evidence-version-head,
.evidence-version-head > div,
.evidence-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.evidence-version-head {
  justify-content: space-between;
}

.evidence-version-head time {
  color: var(--muted);
  font-size: 12px;
}

.evidence-version-head .evidence-status,
.evidence-frozen {
  border: 1px solid #cfdcd7;
  border-radius: 8px;
  padding: 2px 6px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
}

.evidence-frozen {
  border-color: #9caaa5;
  color: #41524d;
}

.evidence-meta {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
  font-size: 12px;
}

.evidence-meta dt {
  color: var(--muted);
}

.evidence-meta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.evidence-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.evidence-issue {
  margin: 0;
  border-left: 3px solid #d3a13b;
  padding: 7px 9px;
  color: #7d5310;
  background: #fff9ed;
  font-size: 12px;
  line-height: 1.55;
}

.evidence-file-list {
  display: grid;
  border-top: 1px solid #e1e9e6;
}

.evidence-file-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #e1e9e6;
  padding: 8px 0;
}

.evidence-file-list > div > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.evidence-file-list small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
}

.evidence-readonly {
  flex: 0 0 auto;
}

.evidence-actions a.primary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  text-decoration: none;
}

.evidence-empty {
  margin: 0;
  border: 1px dashed #cbd9d4;
  padding: 14px;
  background: #fafcfb;
  line-height: 1.65;
}

.detail-kicker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.detail-status-actions {
  margin-top: 14px;
}

.detail-status-bar {
  display: grid;
  grid-template-columns: minmax(130px, 160px) minmax(0, 1fr);
  gap: 8px;
  align-items: end;
  border: 1px solid #dce8e4;
  border-radius: 8px;
  padding: 10px;
  background: #fbfdfc;
}

.detail-status-bar .event-status-control {
  gap: 4px;
}

.detail-status-bar .status-select {
  min-width: 0;
  height: 36px;
}

.detail-status-note {
  margin: 0;
  border-left: 3px solid var(--green);
  padding: 6px 10px;
  color: #53655f;
  background: #f7fbf9;
  font-size: 12px;
  line-height: 1.55;
}

.detail-section {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.workflow-launch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid #d6e5e0;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fbfdfc;
  text-align: left;
  cursor: pointer;
}

.workflow-launch:hover {
  border-color: #9bc7bd;
  background: #f4faf8;
}

.workflow-launch > span:first-child {
  display: grid;
  gap: 3px;
}

.workflow-launch strong {
  color: #20322c;
  font-size: 14px;
}

.workflow-launch small {
  color: var(--muted);
  font-size: 12px;
}

.workflow-launch-status {
  color: #5a6b65;
  font-size: 12px;
  font-weight: 750;
}

.workflow-launch-status.soon {
  color: #98631d;
}

.workflow-launch-status.overdue,
.workflow-launch-status.invalid {
  color: #a13c30;
}

.workflow-launch-arrow {
  color: #4a6960;
  font-size: 24px;
  line-height: 1;
}

.workflow-scope-actions {
  display: flex;
  justify-content: flex-end;
}

.detail-content h2 {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.35;
}

.detail-summary {
  color: #293b35;
  line-height: 1.7;
}

.detail-grid {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px 12px;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
}

.detail-grid dt {
  color: var(--muted);
}

.detail-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.detail-grid a {
  color: var(--blue);
  text-decoration: none;
}

.responsibility-card {
  display: grid;
  gap: 12px;
}

.responsibility-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr);
  gap: 10px;
  align-items: stretch;
}

.responsibility-top > div,
.responsibility-top label,
.unit-picker,
.responsibility-review,
.workflow-brief-grid label,
.comment-form {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid #dce8e4;
  border-radius: 8px;
  padding: 10px;
  background: #fbfdfc;
  color: #53655f;
  font-size: 12px;
  font-weight: 760;
}

.responsibility-top span,
.unit-picker-head span,
.responsibility-top small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.responsibility-top strong {
  overflow: hidden;
  color: #19352f;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  line-height: 1.2;
}

.deadline-field {
  grid-template-rows: auto auto 1fr;
}

.deadline-state {
  display: grid;
  gap: 2px;
  margin-top: 2px;
  padding-left: 8px;
  border-left: 3px solid #b8c9c4;
}

.deadline-state strong {
  color: #40514c;
  font-size: 12px;
}

.deadline-state small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.deadline-state.soon {
  border-color: #d2942f;
}

.deadline-state.soon strong {
  color: #98631d;
}

.deadline-state.overdue,
.deadline-state.invalid {
  border-color: #c35443;
}

.deadline-state.overdue strong,
.deadline-state.invalid strong {
  color: #a13c30;
}

.deadline-state.done {
  border-color: #4d9a80;
}

.deadline-state.done strong {
  color: #226e59;
}

.tag.deadline-tag.soon {
  border-color: #e0b565;
  color: #8d5d19;
  background: #fff8e9;
}

.tag.deadline-tag.overdue,
.tag.deadline-tag.invalid {
  border-color: #dca398;
  color: #9d382d;
  background: #fff1ee;
}

.client-deadline-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, .8fr) auto;
  align-items: end;
  gap: 10px;
  border: 1px solid #d7e5e0;
  border-left: 4px solid #78a99c;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbfa;
}

.client-deadline-inline.soon {
  border-left-color: #d39a36;
  background: #fffaf0;
}

.client-deadline-inline.overdue,
.client-deadline-inline.invalid {
  border-left-color: #c65346;
  background: #fff5f2;
}

.client-deadline-copy,
.client-deadline-inline label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.client-deadline-copy span,
.client-deadline-inline label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.client-deadline-copy strong {
  color: #213831;
  font-size: 15px;
  line-height: 1.35;
  white-space: normal;
}

.client-deadline-copy small {
  color: #61736d;
  font-size: 11px;
  line-height: 1.4;
}

.client-deadline-inline input {
  width: 100%;
  min-width: 0;
}

.client-deadline-actions {
  display: flex;
  gap: 7px;
}

.deadline-presets {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 9px 10px;
  border: 1px solid #dce8e4;
  border-radius: 8px;
  background: #fbfdfc;
}

.deadline-presets > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.deadline-presets .copy-btn {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}

.danger-text {
  color: #a64b3f !important;
}

.unit-picker-head,
.review-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.unit-picker-head strong,
.review-head strong {
  color: #1f2f2a;
  font-size: 13px;
}

.unit-chip-list {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.unit-chip {
  min-height: 30px;
  border: 1px solid #d5e3de;
  border-radius: 999px;
  padding: 0 10px;
  color: #40514c;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.unit-chip.active {
  color: #0f5b50;
  border-color: #a8d2ca;
  background: var(--green-soft);
}

.unit-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.workflow-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.responsibility-top input,
.unit-add-row input,
.workflow-brief-grid textarea,
#statusReasonInput,
.comment-form textarea,
.comment-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
}

.workflow-brief-grid textarea,
.comment-form textarea {
  min-height: 68px;
  resize: vertical;
}

.responsibility-review {
  border-color: #cfe4df;
  background: linear-gradient(180deg, #fbfdfc, #f5fbf9);
}

.responsibility-review.warning {
  border-color: #efd6a1;
  background: linear-gradient(180deg, #fffaf0, #fff);
}

.responsibility-review.danger {
  border-color: #efb4aa;
  background: linear-gradient(180deg, #fff4f1, #fff);
}

.review-head p {
  margin-top: 4px;
  color: #53655f;
  font-size: 12px;
  line-height: 1.45;
}

.review-head > span {
  flex: 0 0 auto;
  max-width: 190px;
  overflow: hidden;
  border: 1px solid #d9e7e2;
  border-radius: 999px;
  padding: 4px 9px;
  color: #37685e;
  background: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.review-metrics article {
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.review-metrics span,
.review-missed span {
  color: var(--muted);
  font-size: 11px;
}

.review-metrics strong {
  display: block;
  margin-top: 3px;
  color: #20322c;
  font-size: 18px;
  line-height: 1;
}

.review-missed {
  display: grid;
  gap: 5px;
}

.compact-actions {
  margin-top: 0;
}

.workflow-sync-note {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid #d9e7e2;
  border-radius: 8px;
  padding: 0 12px;
  color: #3f695f;
  background: var(--green-soft);
  font-size: 13px;
  font-weight: 800;
}

.client-workflow-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.client-workflow-cards article,
.client-progress-box {
  border: 1px solid #dce8e4;
  border-radius: 8px;
  padding: 12px;
  background: #fbfdfc;
}

.client-workflow-cards span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.client-workflow-cards strong {
  display: block;
  margin-top: 5px;
  color: #1f2f2a;
  font-size: 15px;
}

.client-workflow-cards p,
.client-progress-box p {
  margin-top: 5px;
  color: #53655f;
  font-size: 12px;
  line-height: 1.55;
}

.client-progress-box {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.client-collab-section .client-progress-box {
  margin-top: 0;
}

.client-progress-box strong {
  color: #20322c;
  font-size: 13px;
}

.collab-advice-field {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.collab-advice-field span {
  color: #20322c;
  font-size: 13px;
  font-weight: 800;
}

.collab-advice-field textarea {
  width: 100%;
  min-height: 82px;
  border: 1px solid #dce8e4;
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}

.collab-advice-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.collab-advice-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.client-decision-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  border-top: 1px solid #e0ebe7;
  padding-top: 10px;
}

.client-decision-row button {
  min-width: 78px;
}

.client-decision-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.collab-message-panel {
  border-top: 1px solid #dce8e4;
  margin-top: 14px;
  padding-top: 12px;
}

.collab-message-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.collab-message-head strong {
  color: #20322c;
  font-size: 14px;
}

.collab-message-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.collab-empty {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.collab-history {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.collab-history article {
  border: 1px solid #dce8e4;
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.collab-history div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.collab-history strong {
  color: #20322c;
}

.collab-history span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.status-timeline,
.comment-list {
  display: grid;
  gap: 8px;
}

.timeline-item,
.comment-card {
  border: 1px solid #dce8e4;
  border-radius: 8px;
  padding: 10px;
  background: #fbfdfc;
}

.timeline-item strong,
.comment-card strong {
  display: block;
  color: #1f2f2a;
  font-size: 13px;
}

.timeline-item span,
.comment-card span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.timeline-item p,
.comment-card p {
  margin-top: 7px;
  color: #34423d;
  font-size: 13px;
  line-height: 1.55;
}

.comment-attach-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.comment-card a {
  display: inline-flex;
  margin-top: 8px;
  color: var(--blue);
  font-size: 13px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.detail-aggregation {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.detail-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.detail-subhead h3 {
  margin: 0;
  font-size: 14px;
}

.detail-subhead span {
  color: var(--muted);
  font-size: 12px;
}

.aggregation-list {
  display: grid;
  gap: 8px;
}

.aggregation-note {
  margin: 0;
  border: 1px solid #dbe7e3;
  border-radius: 8px;
  padding: 8px 10px;
  color: #5b6a65;
  background: var(--surface-soft);
  font-size: 12px;
  line-height: 1.5;
}

.aggregation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
}

.aggregation-item.high {
  border-left-color: var(--red);
  background: linear-gradient(90deg, var(--red-soft), #fff 34%);
}

.aggregation-item.medium {
  border-left-color: var(--amber);
  background: linear-gradient(90deg, var(--amber-soft), #fff 34%);
}

.aggregation-item strong {
  display: block;
  color: #1d2b27;
  font-size: 13px;
  line-height: 1.45;
}

.aggregation-item p {
  margin: 4px 0;
  color: #4b5a55;
  font-size: 12px;
  line-height: 1.5;
}

.aggregation-item small {
  color: var(--muted);
  font-size: 11px;
}

.aggregation-item a {
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 8px;
  color: #1e5f55;
  background: var(--surface-soft);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  padding: 10px 13px;
  border-radius: 8px;
  color: #fff;
  background: #17211d;
  opacity: 0;
  transform: translateY(8px);
  transition: .2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

body.help-open {
  overflow: hidden;
}

.help-modal[hidden] {
  display: none;
}

.history-sync-modal[hidden] {
  display: none;
}

.history-sync-modal {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: grid;
  place-items: center;
  padding: 20px;
}

.history-sync-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(12, 24, 30, .38);
}

.history-sync-dialog {
  position: relative;
  width: min(620px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(12, 24, 30, .28);
}

.history-sync-dialog.inline {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 16px 42px rgba(25, 47, 40, .08);
}

.history-sync-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.history-sync-head p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.history-sync-head h2 {
  margin: 0;
  font-size: 22px;
}

.history-sync-presets,
.history-sync-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.history-sync-presets .ghost {
  min-height: 40px;
}

.history-sync-presets .ghost.active,
.history-sync-presets .ghost[aria-pressed="true"] {
  border-color: var(--green);
  background: #e8f3ef;
  color: var(--green);
  font-weight: 800;
}

.history-range-summary {
  margin: 10px 0 0;
  color: var(--green);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.history-sync-form label {
  display: grid;
  flex: 1 1 180px;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.history-sync-form input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  font: inherit;
}

.history-sync-form .primary {
  align-self: end;
  min-width: 116px;
  min-height: 42px;
}

.history-sync-form .primary:disabled {
  cursor: wait;
  opacity: .72;
}

.history-sync-status {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  padding: 12px;
  background: #f7faf8;
}

.history-sync-running {
  display: grid;
  gap: 9px;
}

.history-sync-running-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.history-sync-running-head strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.history-sync-running-head i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(17, 107, 95, .34);
  animation: syncPulse 1.15s ease-out infinite;
}

.history-sync-running-head span {
  color: var(--green);
  font-size: 13px;
  font-weight: 850;
}

.history-progress {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #e4eee9;
}

.history-progress div {
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .28) 0 18px, transparent 18px 36px),
    linear-gradient(90deg, #1f7f72, #62c0cf);
  background-size: 36px 100%, 100% 100%;
  transition: width .35s ease;
  animation: syncFlow .9s linear infinite;
}

.history-sync-status strong {
  font-size: 14px;
}

.history-sync-status span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.history-events-panel {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 32px rgba(25, 47, 40, .07);
}

.history-events-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.history-events-head h3 {
  margin: 0 0 5px;
  font-size: 16px;
}

.history-events-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.history-event-list {
  display: grid;
  gap: 10px;
}

.history-event-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, .34fr);
  gap: 14px;
  border: 1px solid #dde8e3;
  border-left: 4px solid #94b8af;
  border-radius: 8px;
  padding: 13px;
  background: #fff;
}

.history-event-card.high {
  border-left-color: var(--red);
}

.history-event-card.medium {
  border-left-color: var(--gold);
}

.history-event-main {
  min-width: 0;
}

.history-event-main strong {
  display: block;
  margin: 6px 0;
  font-size: 15px;
  line-height: 1.35;
}

.history-event-main p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.history-event-result {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #f8fbfa;
  color: #53645e;
  font-size: 12px;
  line-height: 1.45;
}

.history-event-result span:first-child {
  color: var(--green-dark);
  font-weight: 850;
}

.history-event-actions {
  display: grid;
  align-content: start;
  gap: 8px;
}

.history-event-actions .copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  text-align: center;
  text-decoration: none;
}

@keyframes syncPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(17, 107, 95, .34);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(17, 107, 95, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(17, 107, 95, 0);
  }
}

@keyframes syncFlow {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 36px 0, 0 0;
  }
}

.workflow-modal {
  position: fixed;
  inset: 0;
  z-index: 71;
  display: grid;
  place-items: center;
  padding: 20px;
}

.workflow-modal[hidden] {
  display: none;
}

.workflow-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 24, 30, .38);
}

.workflow-dialog {
  position: relative;
  width: min(780px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(12, 24, 30, .28);
}

.workflow-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e2ece9;
  padding: 16px 18px;
}

.workflow-dialog-head h2 {
  margin: 2px 0 0;
  font-size: 19px;
}

.workflow-dialog-head .detail-close {
  display: inline-flex;
}

.workflow-dialog-content {
  padding: 18px;
}

body.workflow-modal-open {
  overflow: hidden;
}

.manual-link-modal {
  position: fixed;
  inset: 0;
  z-index: 74;
  display: grid;
  place-items: center;
  padding: 20px;
}

.manual-link-modal[hidden] {
  display: none;
}

.manual-link-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 24, 30, .42);
}

.manual-link-dialog {
  position: relative;
  width: min(620px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(12, 24, 30, .28);
}

.manual-link-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e2ece9;
  padding: 16px 18px;
}

.manual-link-dialog-head h2 {
  margin: 2px 0 0;
  font-size: 19px;
}

.manual-link-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.manual-link-form label {
  display: grid;
  gap: 7px;
  color: #344740;
  font-size: 13px;
  font-weight: 750;
}

.manual-link-form textarea,
.manual-link-form input {
  width: 100%;
  border: 1px solid #cfded9;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-weight: 500;
}

.manual-link-form textarea {
  min-height: 158px;
  resize: vertical;
  line-height: 1.55;
}

.manual-link-form textarea:focus,
.manual-link-form input:focus {
  outline: 2px solid rgba(17, 107, 95, .18);
  border-color: var(--green);
}

.manual-link-hint {
  color: #718079;
  font-size: 12px;
  line-height: 1.6;
}

.manual-link-result {
  border-left: 3px solid var(--green);
  padding: 10px 12px;
  color: #2d453d;
  background: #f2f8f6;
  font-size: 12px;
  line-height: 1.55;
}

.manual-link-result strong {
  display: block;
  color: #174f43;
  font-size: 13px;
}

.manual-link-result p,
.manual-link-result ul {
  margin: 5px 0 0;
}

.manual-link-result ul {
  padding-left: 18px;
}

.manual-link-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.manual-link-actions button {
  min-width: 96px;
}

body.manual-link-modal-open {
  overflow: hidden;
}

.help-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 24, 30, .38);
}

.help-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 40px));
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(12, 24, 30, .28);
}

.help-modal.guide-compact {
  pointer-events: none;
}

.help-modal.guide-compact .help-backdrop,
.help-modal.guide-compact .help-dialog-head,
.help-modal.guide-compact .help-sidebar,
.help-modal.guide-compact .help-article {
  display: none;
}

.help-modal.guide-compact .help-dialog {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(430px, calc(100vw - 36px));
  height: auto;
  margin: 0;
  pointer-events: auto;
}

.help-modal.guide-compact .help-layout {
  display: block;
}

.help-modal.guide-compact .help-content {
  padding: 12px;
}

.help-modal.guide-compact .help-guide-panel {
  grid-template-columns: 1fr;
}

.help-dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px 14px;
  background: linear-gradient(180deg, #fff, #f7faf8);
}

.help-dialog-head h2 {
  margin: 0;
  font-size: 22px;
}

.help-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  min-height: 0;
}

.help-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  border-right: 1px solid var(--line);
  padding: 14px;
  background: #fbfdfc;
}

.help-sidebar input {
  width: 100%;
}

.help-role-card {
  display: grid;
  gap: 4px;
  border: 1px solid #dce8e4;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.help-role-card strong {
  font-size: 14px;
}

.help-role-card span,
.help-role-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.help-topic-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.help-topic-list button {
  display: grid;
  gap: 4px;
  border: 1px solid #dce8e4;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  text-align: left;
}

.help-topic-list button.active,
.help-topic-list button:hover {
  border-color: #9fcfc4;
  background: var(--green-soft);
}

.help-topic-list span,
.help-article-head span,
.help-guide-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.help-topic-list strong {
  color: var(--ink);
  font-size: 14px;
}

.help-content {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.help-guide-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid #cfe3dd;
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, #f7fcfa, #fff);
}

.help-guide-panel h3,
.help-article h3 {
  margin: 4px 0 0;
  font-size: 18px;
}

.help-guide-panel p {
  margin-top: 8px;
  color: #35443f;
  line-height: 1.65;
}

.guide-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.guide-actions button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

.guide-focus {
  position: relative;
  outline: 3px solid rgba(82, 190, 205, .78);
  outline-offset: 4px;
  box-shadow: 0 0 0 8px rgba(82, 190, 205, .16);
  z-index: 5;
}

.help-article {
  display: grid;
  gap: 14px;
}

.help-article-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.help-steps {
  display: grid;
  gap: 10px;
}

.help-steps article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid #dce8e4;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.help-steps b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #fff;
  background: var(--green);
  font-size: 13px;
}

.help-steps p {
  color: #2f3f39;
  line-height: 1.7;
}

.warning-dock {
  position: fixed;
  right: 22px;
  bottom: 76px;
  z-index: 28;
  width: min(360px, calc(100vw - 28px));
  color: #17211d;
  transform: translateX(calc(100% + 32px));
  animation: warningSlideIn .42s ease .2s forwards;
}

.warning-dock[hidden] {
  display: none;
}

.warning-toggle {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid rgba(20, 55, 49, .18);
  border-radius: 8px;
  padding: 10px;
  color: #17211d;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 42px rgba(18, 42, 58, .18);
  text-align: left;
}

.warning-brand {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  font-size: 20px;
  font-weight: 850;
}

.warning-toggle-text {
  min-width: 0;
}

.warning-toggle-text strong,
.warning-toggle-text small {
  display: block;
}

.warning-toggle-text strong {
  font-size: 15px;
}

.warning-toggle-text small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.warning-toggle em {
  min-width: 30px;
  border-radius: 999px;
  padding: 4px 8px;
  color: #8e1d14;
  background: var(--red-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.warning-panel {
  display: none;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(20, 55, 49, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 48px rgba(18, 42, 58, .18);
}

.warning-dock.open .warning-panel {
  display: block;
}

.warning-dock:not(.open) {
  width: min(310px, calc(100vw - 28px));
}

.warning-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  background: linear-gradient(180deg, #fff, #f7faf8);
}

.warning-head strong,
.warning-head span {
  display: block;
}

.warning-head strong {
  font-size: 15px;
}

.warning-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.warning-head-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.warning-head button {
  min-width: 58px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #42524d;
  background: #fff;
  font-size: 12px;
  font-weight: 750;
}

.warning-list {
  display: grid;
  gap: 0;
  max-height: none;
  overflow: visible;
  padding: 8px;
}

.warning-card {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid #dce6e1;
  border-left: 5px solid var(--amber);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fbfdfc;
  cursor: pointer;
  text-align: left;
  transition: .16s ease;
}

.warning-card:hover {
  transform: translateY(-1px);
  border-color: #b8d5cd;
  box-shadow: 0 8px 18px rgba(25, 47, 40, .08);
}

.warning-card.high {
  border-left-color: var(--red);
  background: linear-gradient(90deg, var(--red-soft), #fff 36%);
}

.warning-card-head,
.warning-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.warning-card-head strong {
  color: #8e1d14;
  font-size: 12px;
}

.warning-card-head span,
.warning-meta {
  color: var(--muted);
  font-size: 11px;
}

.warning-card h4 {
  margin: 0;
  color: #17211d;
  font-size: 13px;
  line-height: 1.45;
}

.warning-card p {
  display: -webkit-box;
  overflow: hidden;
  color: #34423d;
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.reminder-dock {
  right: 22px;
  bottom: 22px;
  width: min(460px, calc(100vw - 28px));
  transform: none;
  animation: none;
}

.reminder-dock.open .reminder-panel {
  display: grid;
  max-height: min(760px, calc(100vh - 100px));
  overflow: hidden;
}

.reminder-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f7faf8;
}

.reminder-summary article {
  min-width: 0;
  border: 1px solid #dce7e3;
  border-radius: 8px;
  padding: 8px 9px;
  background: #fff;
}

.reminder-summary span,
.reminder-summary strong {
  display: block;
}

.reminder-summary span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.reminder-summary strong {
  margin-top: 4px;
  color: #20342e;
  font-size: 20px;
}

.reminder-focus-section,
.reminder-message-section {
  min-height: 0;
  padding: 10px 12px;
}

.reminder-focus-section {
  border-bottom: 1px solid var(--line);
}

.reminder-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.reminder-section-head strong {
  color: #20342e;
  font-size: 13px;
}

.reminder-section-head span {
  color: var(--muted);
  font-size: 11px;
}

.reminder-focus-list,
.reminder-message-list {
  display: grid;
  gap: 7px;
  overflow-y: auto;
}

.reminder-focus-list {
  max-height: 230px;
}

.reminder-message-list {
  max-height: 250px;
  padding: 0;
}

.reminder-focus-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid #dce6e2;
  border-left: 4px solid #d49a36;
  border-radius: 8px;
  padding: 9px 10px;
  color: #20342e;
  background: #fff;
  text-align: left;
}

.reminder-focus-item.overdue {
  border-left-color: #c65346;
  background: #fff8f6;
}

.reminder-focus-item span,
.reminder-focus-item strong,
.reminder-focus-item small {
  display: block;
  min-width: 0;
}

.reminder-focus-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.reminder-focus-item small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.reminder-focus-item em {
  color: #8d5d19;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.reminder-focus-item.overdue em {
  color: #a13c30;
}

.warning-card.is-read {
  opacity: .62;
}

.reminder-empty {
  margin: 0;
  border: 1px dashed #cfddd8;
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
  background: #fbfdfc;
  font-size: 12px;
  text-align: center;
}

@keyframes warningSlideIn {
  from {
    opacity: .2;
    transform: translateX(calc(100% + 32px));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="events"] .workspace {
    grid-column: 1;
    padding: 24px;
  }

  .site-header {
    grid-template-columns: 1fr;
  }

  .nav-list,
  .header-actions {
    justify-content: flex-start;
  }

  .detail-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 25;
    width: min(420px, 92vw);
    height: 100vh;
    border-left: 1px solid var(--line);
    border-right: 0;
    transform: translateX(110%);
    transition: transform .2s ease;
  }

  .detail-panel.open {
    transform: translateX(0);
  }

  .detail-close {
    display: inline-flex;
    align-items: center;
  }
}

.preference-panel {
  margin-bottom: 24px;
}

.preference-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.preference-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.preference-kpis article,
.preference-main,
.preference-side section,
.preference-company,
.preference-client-card,
.preference-alert-card,
.preference-feed-item {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 22px rgba(28, 48, 43, .06);
}

.preference-kpis article {
  border-radius: 8px;
  padding: 16px;
}

.preference-kpis span,
.preference-client-head span,
.preference-block-head p,
.preference-company-head p,
.preference-feed-item span,
.preference-client-footer,
.preference-alert-card .muted {
  color: var(--muted);
}

.preference-kpis strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 30px;
}

.preference-kpis small {
  color: var(--muted);
}

.preference-kpis .warning {
  background: linear-gradient(135deg, #fff, #fff8eb);
}

.preference-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.preference-main,
.preference-side section {
  border-radius: 8px;
  padding: 18px;
}

.preference-side,
.preference-groups,
.preference-client-grid,
#preferenceAlerts,
#preferenceFeed {
  display: grid;
  gap: 14px;
}

.preference-block-head {
  margin-bottom: 14px;
}

.preference-block-head h3,
.preference-company-head h4 {
  margin: 0;
}

.preference-block-head h3 {
  font-size: 18px;
}

.preference-block-head p,
.preference-company-head p {
  margin: 4px 0 0;
  font-size: 13px;
}

.preference-company {
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(246, 250, 248, .92), #fff);
  box-shadow: none;
}

.preference-company-head,
.preference-client-head,
.preference-alert-top,
.preference-client-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.preference-company-head {
  margin-bottom: 12px;
}

.preference-client-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
}

.preference-client-card,
.preference-alert-card,
.preference-feed-item {
  border-radius: 8px;
  padding: 14px;
}

.preference-client-card {
  padding: 16px 18px;
  box-shadow: 0 5px 16px rgba(28, 48, 43, .05);
}

.preference-client-head {
  margin-bottom: 12px;
}

.preference-client-head strong {
  display: block;
  font-size: 17px;
}

.preference-client-head em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.preference-dimensions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
}

.preference-dimensions .wide {
  grid-column: span 2;
}

.preference-dimensions span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.preference-dimensions p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.preference-tag,
.preference-empty-tag,
.preference-dislikes span,
.preference-alert-tags span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid #d8e5e0;
  border-radius: 999px;
  padding: 5px 9px;
  background: #f8fbfa;
  color: var(--ink);
  font-size: 12px;
}

.preference-tag em {
  color: var(--green);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.preference-empty-tag {
  color: var(--muted);
}

.preference-client-footer {
  margin-top: 12px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  font-size: 12px;
}

.preference-dislikes,
.preference-alert-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.preference-dislikes span {
  border-color: #ead7c0;
  background: #fff8ec;
  color: #8a5218;
}

.preference-alert-card {
  border-color: #efd9bd;
  background: #fffaf2;
}

.preference-alert-top {
  margin-bottom: 8px;
}

.preference-alert-top strong {
  line-height: 1.35;
}

.preference-alert-top span {
  flex: 0 0 auto;
  color: #94611f;
  font-size: 12px;
}

.preference-alert-card p,
.preference-feed-item p {
  margin: 8px 0 0;
  line-height: 1.55;
}

.preference-feed-item {
  display: grid;
  gap: 8px;
}

.preference-feed-item strong {
  display: block;
  margin-bottom: 3px;
}

.preference-feed-item.signal-negative {
  border-color: #efd9bd;
  background: #fffaf2;
}

@media (max-width: 1180px) {
  .preference-kpis,
  .preference-layout,
  .preference-dimensions,
  .health-kpis,
  .health-layout,
  .ingest-monitor-kpis,
  .ingest-queue-status {
    grid-template-columns: 1fr;
  }

  .preference-client-grid {
    grid-template-columns: 1fr;
  }

  .preference-dimensions .wide {
    grid-column: 1 / -1;
  }

  .health-current {
    align-items: stretch;
  }
}

@media (min-width: 1181px) and (max-width: 1540px) {
  .preference-dimensions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-header {
    grid-template-columns: 170px minmax(0, 1fr) auto;
  }

  .brand {
    padding: 10px 12px;
  }

  .nav-item {
    min-width: 0;
    padding: 0 6px;
    border-left: 1px solid rgba(255, 255, 255, .05);
    font-size: 13px;
    letter-spacing: 0;
  }

  .header-actions {
    gap: 5px;
    padding: 10px 7px 10px 5px;
    font-size: 12px;
  }

  .user-badge {
    width: 72px;
    min-width: 72px;
  }

  .header-window {
    width: 122px;
    padding: 0 7px;
  }

  .header-window span,
  .header-window strong,
  .user-badge span,
  .user-badge strong {
    font-size: 11px;
  }

  .header-actions > button,
  .header-actions > .header-link-btn {
    height: 34px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .header-actions #helpOpenBtn,
  .header-actions #logoutBtn {
    min-width: 48px;
  }

  .header-actions #importBtn {
    min-width: 92px;
  }

  .header-actions #templateBtn {
    min-width: 72px;
  }

  .header-actions #refreshBtn {
    min-width: 100px;
  }
}

@media (max-width: 860px) {
  .login-screen {
    padding: 14px;
  }

  .login-panel {
    min-height: calc(100vh - 28px);
    border-radius: 18px;
    padding: 26px 18px;
  }

  .login-topline {
    display: grid;
    gap: 8px;
    margin-bottom: 26px;
  }

  .login-panel h1 {
    font-size: 30px;
  }

  .login-mode-toggle {
    justify-self: start;
    margin-top: 0;
    font-size: 16px;
  }

  .mobile-code-row {
    grid-template-columns: 1fr;
  }

  .health-current {
    display: grid;
    gap: 12px;
  }

  .health-current-meta {
    min-width: 0;
    border-top: 1px solid rgba(44, 91, 79, .16);
    border-left: 0;
    padding-top: 12px;
    padding-left: 0;
  }

  .login-check-row {
    gap: 16px !important;
    font-size: 15px !important;
  }

  .oauth-footer {
    margin-top: 42px;
  }

  .app-shell {
    display: block;
  }

  body[data-view="events"] .app-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .site-header {
    position: sticky;
    z-index: 20;
    display: grid;
  }

  .brand,
  .nav-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .brand {
    padding: 10px 12px;
  }

  .nav-list {
    gap: 8px;
    margin-top: 0;
    padding: 0 10px 10px;
  }

  .nav-item[data-view]:not([data-view="events"]) {
    display: none !important;
  }

  .nav-item {
    height: 38px;
    border-radius: 8px;
    text-align: center;
  }

  .header-actions {
    display: flex;
    justify-content: space-between;
    padding: 0 10px 10px;
  }

  .header-actions .header-window,
  .header-actions #helpOpenBtn,
  .header-actions #templateBtn,
  .header-actions #importBtn,
  .header-actions #refreshBtn {
    display: none !important;
  }

  .user-badge {
    width: auto;
    min-width: 0;
    margin-right: auto;
  }

  .header-actions #logoutBtn {
    margin-right: 0;
  }

  .header-window {
    grid-column: 1 / -1;
    max-width: none;
    padding: 0;
    border-right: 0;
  }

  .workspace {
    padding: 14px 12px;
  }

  .mobile-desktop-tip {
    display: block;
    margin-bottom: 12px;
    border-left: 3px solid var(--green);
    color: #315249;
    background: var(--green-soft);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
  }

  body[data-view="events"] .workspace {
    display: block;
    height: auto;
    min-height: calc(100vh - 180px);
    padding: 12px;
    overflow: visible;
  }

  body[data-view="events"] .table-panel,
  body[data-view="events"] .event-workbench,
  body[data-view="events"] .event-stream,
  body[data-view="events"] .event-list {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  body[data-view="events"] .detail-panel {
    display: none !important;
  }

  body[data-view="events"] .table-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-view="events"] .event-workbench {
    display: block;
    padding: 0;
  }

  body[data-view="events"] .event-list {
    display: grid;
    gap: 10px;
  }

  body[data-view="events"] .event-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 13px 12px;
    box-shadow: 0 4px 14px rgba(25, 47, 40, .05);
  }

  body[data-view="events"] .event-main {
    cursor: default;
  }

  body[data-view="events"] .event-actions {
    grid-column: 1;
  }

  .event-title {
    margin-top: 6px;
    font-size: 15px;
  }

  .event-summary {
    -webkit-line-clamp: 3;
  }

  .event-actions {
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-top: 2px;
  }

  .event-location-chip {
    margin-right: auto;
    padding-left: 0;
  }

  .mobile-event-workflow {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    border-top: 1px solid #dbe7e3;
    border-radius: 8px;
    background: #f7fbfa;
    padding: 12px;
  }

  .mobile-event-workflow-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .mobile-event-workflow-head > strong {
    color: #25483f;
    font-size: 14px;
  }

  .mobile-event-workflow .event-status-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    gap: 8px;
  }

  .mobile-event-workflow .status-select {
    min-width: 0;
    height: 38px;
  }

  .mobile-advice-field {
    display: grid;
    gap: 6px;
  }

  .mobile-advice-field > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  .mobile-advice-field textarea {
    width: 100%;
    min-height: 76px;
    resize: vertical;
    font-size: 16px;
    line-height: 1.45;
  }

  .mobile-event-workflow-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-event-workflow-actions .primary:last-child {
    grid-column: 1 / -1;
  }

  .mobile-event-workflow-actions button {
    min-height: 38px;
    padding: 0 10px;
  }

  .topbar,
  .section-head,
  .table-head {
    display: grid;
  }

  .status-strip,
  .kpi-grid,
  .dashboard-grid,
  .overview-extra-grid,
	  .task-layout,
	  .skill-layout,
	  .skill-work-grid,
	  .skill-document-layout,
	  .security-status-grid,
	  .security-layout,
	  .profile-layout,
	  .user-layout,
	  .permission-grid,
	  .user-card,
	  .user-actions {
	    grid-template-columns: 1fr;
	  }

  .profile-readonly-grid,
  .profile-password-form {
    grid-template-columns: 1fr;
  }

  .profile-password-form button {
    width: 100%;
  }

  .filters,
  .security-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body[data-view="events"] .table-head,
  body[data-view="events"] .filters {
    grid-template-columns: 1fr 1fr;
  }

  .event-workbench {
    grid-template-columns: 1fr;
  }

  .event-stream {
    grid-column: 1;
  }

  body[data-view="events"] .table-head > div:first-child,
  body[data-view="events"] .filter-note {
    grid-column: 1 / -1;
  }

  body[data-view="events"] .table-head {
    gap: 8px;
    border: 1px solid #e2ebe7;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 14px rgba(25, 47, 40, .05);
  }

  body[data-view="events"] .table-head > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    min-height: 0;
  }

  body[data-view="events"] .table-head h2 {
    font-size: 17px;
  }

  body[data-view="events"] .table-head > div:first-child p {
    margin: 0;
    color: #71827c;
    font-size: 12px;
  }

  body[data-view="events"] .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid #e2ebe7;
    border-radius: 9px;
    background: #f6faf8;
  }

  body[data-view="events"] .filters input:not([type="checkbox"]),
  body[data-view="events"] .filters select {
    width: 100%;
    min-width: 0;
    height: 40px;
    border-color: #d4e4df;
    border-radius: 8px;
    color: #294a41;
    background: #fff;
    box-shadow: none;
    font-size: 13px;
  }

  body[data-view="events"] #searchInput,
  body[data-view="events"] #mergeSimilarFilter {
    grid-column: 1 / -1;
  }

  body[data-view="events"] .filter-check {
    height: 40px;
    min-height: 40px;
    border-color: #d4e4df;
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
  }

  body[data-view="events"] .filter-note {
    padding: 0 2px;
    color: #71827c;
  }

  input,
  .filters select,
  .filter-check,
  .security-filters input,
  .security-filters select {
    width: 100%;
  }

  body[data-view="history"] .topbar,
  body[data-view="history"] .history-panel {
    width: 100%;
  }

  .history-sync-dialog.inline {
    padding: 16px;
  }

  .history-sync-presets .ghost,
  .history-sync-form .primary {
    width: 100%;
  }

  .history-sync-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .history-events-head,
  .history-event-card {
    grid-template-columns: 1fr;
  }

  .history-events-head {
    display: grid;
  }

  .event-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-actions {
    display: flex;
    grid-column: 1 / -1;
    min-width: 0;
    flex-wrap: wrap;
  }

  .event-status-control {
    width: 100%;
  }

  .responsibility-top,
  .workflow-brief-grid,
  .review-metrics,
  .client-workflow-cards,
  .detail-status-bar,
  .comment-attach-row {
    grid-template-columns: 1fr;
  }

  .task-field-row,
  .skill-form-row,
  .task-card {
    grid-template-columns: 1fr;
  }

  .skill-tree,
  .skill-workspace {
    min-height: auto;
  }

  .task-card {
    display: grid;
  }

  .task-card-actions {
    flex-wrap: wrap;
  }

  .fast-inner {
    padding: 34px 14px 28px;
  }

  .fast-heading h2 {
    font-size: 28px;
  }

  .fast-specials button {
    width: 100%;
    white-space: normal;
  }

  .fast-status-bar {
    width: 100%;
    margin-left: 0;
  }

  .fast-results {
    grid-template-columns: 1fr;
  }

  .fast-result-head {
    align-items: flex-start;
  }

  .fast-empty-state {
    min-height: 118px;
    padding: 18px 16px 18px 48px;
  }

  .fast-empty-state::before {
    left: 16px;
  }

  .trend-summary {
    display: grid;
  }

  .hotword-cloud {
    justify-content: flex-start;
  }

	  .warning-dock {
	    right: 12px;
	    bottom: 66px;
	    width: calc(100vw - 24px);
	  }

    .reminder-dock {
      right: 12px;
      bottom: 12px;
      width: calc(100vw - 24px);
    }

    .reminder-dock.open .reminder-panel {
      max-height: calc(100vh - 24px);
    }

    .client-deadline-inline {
      grid-template-columns: 1fr;
      align-items: stretch;
    }

    .client-deadline-actions button {
      flex: 1;
    }

	  .help-dialog {
	    width: calc(100vw - 20px);
	    height: calc(100vh - 20px);
	    margin: 10px auto;
	  }

	  .help-layout {
	    grid-template-columns: 1fr;
	  }

	  .help-sidebar {
	    max-height: 42vh;
	    border-right: 0;
	    border-bottom: 1px solid var(--line);
	  }

	  .help-guide-panel {
	    grid-template-columns: 1fr;
	  }

	  .warning-list {
	    max-height: none;
	  }
}

@media (max-width: 560px) {
  body[data-view="events"] .table-head {
    grid-template-columns: 1fr;
  }

  body[data-view="events"] .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body[data-view="events"] .workspace {
    padding-top: 12px;
  }

  body[data-view="events"] .table-head {
    position: static;
    top: auto;
    z-index: auto;
    backdrop-filter: none;
  }
}

.mobile-appbar,
.mobile-tabbar,
.mobile-brief-intro,
.mobile-event-total,
.mobile-kpi-overview,
.mobile-bottom-bar,
.mobile-copy-current-row,
.mobile-only-kpi {
  display: none;
}

@media (max-width: 860px) {
  body[data-view="events"] {
    background: #f8f8f6;
  }

  body[data-view="events"] .app-shell {
    min-height: 0;
  }

  body[data-view="events"] .site-header {
    position: sticky;
    top: 0;
    display: block;
    min-height: 0;
    border-bottom: 0;
    background: #fff;
    box-shadow: 0 1px 0 rgba(23, 63, 53, .12);
  }

  body[data-view="events"] .brand,
  body[data-view="events"] .nav-list,
  body[data-view="events"] .header-actions {
    display: none !important;
  }

  .mobile-appbar {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    height: 62px;
    padding: 0 8px;
    background: #fff;
  }

  .mobile-appbar-btn {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #111b18;
    background: transparent;
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
  }

  .mobile-appbar-btn:active {
    background: #eef5f1;
  }

  .mobile-more-btn {
    justify-self: end;
    padding-bottom: 12px;
    font-size: 21px;
    letter-spacing: 2px;
  }

  .mobile-appbar-title {
    overflow: hidden;
    color: #1a2521;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-tabbar {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 48px;
    align-items: center;
    min-height: 68px;
    padding: 8px 12px;
    color: #f2fbf8;
    background: #0d463f;
  }

  .mobile-tab-brand {
    display: grid;
    width: 72px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 14px;
    color: #f5fbf8;
    background: rgba(255, 255, 255, .08);
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
  }

  .mobile-tab-items {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    min-width: 0;
  }

  .mobile-tab {
    min-width: 64px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    color: rgba(245, 252, 249, .78);
    background: transparent;
    font-size: 16px;
    font-weight: 700;
  }

  .mobile-tab.active {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 4px 0 0 #d99b2b;
  }

  .mobile-profile-chip {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #f8fffc;
    background: rgba(255, 255, 255, .12);
    font-size: 13px;
    font-weight: 800;
  }

  body[data-view="events"] .workspace {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0 12px 80px;
    overflow: visible;
  }

  body[data-view="events"] .mobile-desktop-tip {
    display: block;
    margin: 12px 2px 0;
    border-top: 1px solid #dfeae5;
    border-left: 0;
    padding: 9px 0 0;
    color: #55726a;
    background: transparent;
    font-size: 12px;
    line-height: 1.45;
  }

  .mobile-brief-intro {
    display: block;
    padding: 12px 2px 0;
  }

  .mobile-brief-kicker {
    margin-bottom: 10px;
    color: var(--green);
    font-size: 15px;
    font-weight: 800;
  }

  .mobile-brief-intro h1 {
    color: #1b2823;
    font-size: 28px;
    line-height: 1.2;
  }

  .mobile-brief-description {
    margin-top: 12px;
    color: #67756f;
    font-size: 15px;
    line-height: 1.55;
  }

  .mobile-brief-meta {
    margin-top: 13px;
    color: #5f6d68;
    font-size: 13px;
    line-height: 1.45;
  }

  .mobile-brief-meta strong {
    color: var(--green);
    font-size: 14px;
  }

  body[data-view="events"] .topbar,
  body[data-view="events"] .status-strip {
    display: none !important;
  }

  body[data-view="events"] .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 14px;
  }

  body[data-view="events"] .mobile-only-kpi {
    display: block !important;
  }

  body[data-view="events"] .kpi-card {
    min-height: 86px;
    border-radius: 12px;
    padding: 13px 12px;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(24, 47, 40, .08);
  }

  body[data-view="events"] .kpi-card strong {
    margin: 7px 0 4px;
    font-size: 30px;
  }

  body[data-view="events"] .table-panel {
    display: block;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  .mobile-copy-current-row {
    display: block;
    margin: 2px 0 10px;
  }

  .mobile-copy-current {
    width: 100%;
    height: 44px;
    border: 1px solid #b8ded5;
    border-radius: 12px;
    color: #24655a;
    background: #effaf7;
    font-size: 15px;
    font-weight: 800;
  }

  body[data-view="events"] .table-head {
    display: block;
    position: static;
    top: auto;
    z-index: auto;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  body[data-view="events"] .table-head > div:first-child {
    display: none !important;
  }

  body[data-view="events"] .filters {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  body[data-view="events"] .filters input:not([type="checkbox"]),
  body[data-view="events"] .filters select {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 42px;
    border: 1px solid #dbe5e1;
    border-radius: 11px;
    padding: 0 7px;
    color: #3c4d47;
    background: #fff;
    box-shadow: 0 1px 2px rgba(24, 47, 40, .04);
    font-size: 12px;
  }

  body[data-view="events"] #searchInput {
    grid-column: 1 / -1;
    padding: 0 12px;
    font-size: 16px;
  }

  body[data-view="events"] #mergeSimilarFilter {
    grid-column: span 2;
  }

  body[data-view="events"] #sourceFilter,
  body[data-view="events"] #locationFilter,
  body[data-view="events"] #ipRegionFilter,
  body[data-view="events"] .filter-check,
  body[data-view="events"] .filter-note {
    display: none !important;
  }

  body[data-view="events"] .event-workbench {
    display: block;
    margin-top: 12px;
    padding: 0;
    overflow: visible;
  }

  body[data-view="events"] .event-stream,
  body[data-view="events"] .event-list {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body[data-view="events"] .event-list {
    display: grid;
    gap: 12px;
    border-right: 0;
    padding: 0;
    scrollbar-width: none;
  }

  body[data-view="events"] .event-list::-webkit-scrollbar {
    display: none;
  }

  body[data-view="events"] .event-card {
    display: block;
    border: 1px solid #e0e8e4;
    border-radius: 14px;
    padding: 14px 14px 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(25, 47, 40, .06);
  }

  body[data-view="events"] .event-card.high {
    border-top: 3px solid var(--red);
    border-left-color: #e0e8e4;
    background: #fff;
  }

  body[data-view="events"] .event-card.medium {
    border-top: 3px solid var(--amber);
    border-left-color: #e0e8e4;
    background: #fff;
  }

  body[data-view="events"] .event-main {
    display: flex;
    flex-direction: column;
    cursor: default;
  }

  body[data-view="events"] .event-meta {
    display: none;
  }

  body[data-view="events"] .tags {
    order: 1;
    gap: 6px;
    margin-bottom: 10px;
  }

  body[data-view="events"] .tag {
    height: 30px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 800;
  }

  body[data-view="events"] .event-title {
    order: 2;
    margin: 0 0 10px;
    color: #1b2823;
    font-size: 18px;
    line-height: 1.4;
  }

  body[data-view="events"] .event-summary {
    order: 3;
    color: #3f4e49;
    font-size: 15px;
    line-height: 1.65;
    -webkit-line-clamp: 4;
  }

  body[data-view="events"] .event-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #edf2ef;
  }

  body[data-view="events"] .event-location-chip {
    display: none !important;
  }

  body[data-view="events"] .event-original-link {
    display: inline-flex !important;
    grid-column: 1;
    width: 100%;
    height: 42px;
    border-radius: 11px;
    font-size: 14px;
  }

  body[data-view="events"] .event-actions .copy-btn {
    display: inline-flex;
    grid-column: 2;
    width: 100%;
    height: 42px;
    border-radius: 11px;
    font-size: 14px;
  }

  body[data-view="events"] .mobile-event-workflow {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    border-top: 1px solid #edf2ef;
    border-radius: 0;
    padding: 12px 0 14px;
    background: #fff;
  }

  body[data-view="events"] .mobile-event-workflow-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  body[data-view="events"] .mobile-event-workflow-head > strong {
    color: #45635a;
    font-size: 12px;
  }

  body[data-view="events"] .mobile-event-workflow .status-select {
    height: 38px;
    font-size: 14px;
  }

  body[data-view="events"] .mobile-advice-field {
    gap: 6px;
  }

  body[data-view="events"] .mobile-advice-field > span {
    color: #697a73;
    font-size: 12px;
  }

  body[data-view="events"] .mobile-advice-field textarea {
    min-height: 72px;
    border: 1px solid #d8e8e2;
    border-radius: 11px;
    padding: 10px;
    color: #25352f;
    background: #fbfefc;
    font-size: 16px;
    line-height: 1.45;
  }

  body[data-view="events"] .mobile-event-workflow-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-view="events"] .mobile-event-workflow-actions .primary:last-child {
    grid-column: auto;
  }

  body[data-view="events"] .mobile-event-workflow-actions button {
    min-height: 42px;
    border-radius: 11px;
    padding: 0 6px;
    font-size: 14px;
  }

  .mobile-bottom-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 0 32px env(safe-area-inset-bottom);
    border-top: 1px solid #e3e9e6;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -4px 14px rgba(25, 47, 40, .06);
  }

  .mobile-bottom-bar button {
    display: grid;
    place-items: center;
    border: 0;
    color: #5e6864;
    background: transparent;
    font-size: 30px;
    line-height: 1;
  }

  .mobile-bottom-bar button:active {
    color: var(--green);
    background: #f1f8f5;
  }
}

.mobile-action-dock,
.mobile-original-modal,
.mobile-summary-modal {
  display: none;
}

.mobile-action-dock[hidden],
.mobile-original-modal[hidden],
.mobile-summary-modal[hidden],
.mobile-advice-editor[hidden] {
  display: none !important;
}

@media (max-width: 860px) {
  body[data-view="events"] .workspace {
    padding-bottom: calc(188px + env(safe-area-inset-bottom));
  }

  body[data-view="events"] .mobile-event-workflow {
    display: none !important;
  }

  body[data-view="events"] .mobile-action-dock {
    position: fixed;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    left: 0;
    z-index: 39;
    display: grid;
    gap: 9px;
    padding: 10px 14px 12px;
    border-top: 1px solid #dfe8e4;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -6px 18px rgba(25, 47, 40, .1);
    backdrop-filter: blur(12px);
  }

  .mobile-action-context {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .mobile-action-kicker {
    color: #72817b;
    font-size: 11px;
    font-weight: 700;
  }

  .mobile-action-context strong {
    overflow: hidden;
    color: #1b2823;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-action-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-action-hint {
    margin: 0;
    color: #647871;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
  }

  .mobile-action-buttons button {
    width: 100%;
    min-width: 0;
    height: 42px;
    border-radius: 11px;
    padding: 0 5px;
    font-size: 14px;
    white-space: nowrap;
  }

  .mobile-action-buttons button:disabled {
    cursor: not-allowed;
    opacity: .55;
  }

  .mobile-advice-editor {
    display: grid;
    gap: 8px;
    border-top: 1px solid #e4ece8;
    padding-top: 9px;
  }

  .mobile-advice-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #35584e;
    font-size: 13px;
  }

  .mobile-advice-close,
  .mobile-original-close {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #50635c;
    background: transparent;
    font-size: 24px;
    line-height: 1;
  }

  .mobile-advice-close:active,
  .mobile-original-close:active {
    background: #eef5f1;
  }

  #mobileAdviceInput {
    width: 100%;
    min-height: 62px;
    resize: vertical;
    border: 1px solid #d5e5df;
    border-radius: 10px;
    padding: 9px 10px;
    color: #24352f;
    background: #fbfefc;
    font-size: 16px;
    line-height: 1.45;
  }

  #mobileAdviceSubmitBtn {
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    font-size: 14px;
  }

  .mobile-original-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 18px 14px;
  }

  .mobile-original-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 34, 29, .42);
    backdrop-filter: blur(4px);
  }

  .mobile-original-dialog {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(560px, calc(100vw - 28px));
    max-height: min(78vh, 680px);
    overflow: hidden;
    border: 1px solid #d9e6e1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(16, 41, 34, .24);
  }

  .mobile-original-dialog-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    padding: 10px 12px 9px 8px;
    border-bottom: 1px solid #e4ece8;
  }

  .mobile-original-dialog-head > div {
    min-width: 0;
  }

  .mobile-original-dialog-head span {
    color: #6b7c75;
    font-size: 11px;
    font-weight: 700;
  }

  .mobile-original-dialog-head h2 {
    overflow: hidden;
    margin-top: 2px;
    color: #1d2e27;
    font-size: 17px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-original-content {
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
  }

  .mobile-original-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
  }

  .mobile-original-tags .tag {
    min-height: 28px;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
  }

  .mobile-original-content h3 {
    color: #1d2e27;
    font-size: 18px;
    line-height: 1.45;
  }

  .mobile-original-body {
    margin-top: 12px;
    color: #3c4d47;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
  }

  .mobile-original-meta {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 12px;
    border-radius: 11px;
    background: #f5faf8;
  }

  .mobile-original-meta div {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
  }

  .mobile-original-meta dt {
    color: #718079;
    font-size: 12px;
  }

  .mobile-original-meta dd {
    min-width: 0;
    margin: 0;
    color: #344941;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .mobile-original-judgment {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e4ece8;
  }

  .mobile-original-judgment strong {
    color: #35584e;
    font-size: 12px;
  }

  .mobile-original-judgment p {
    margin-top: 6px;
    color: #53665e;
    font-size: 13px;
    line-height: 1.6;
  }

  body.mobile-original-open {
    overflow: hidden;
  }

  .mobile-summary-modal {
    position: fixed;
    inset: 0;
    z-index: 82;
    display: grid;
    place-items: center;
    padding: 18px 14px;
  }

  .mobile-summary-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 34, 29, .42);
    backdrop-filter: blur(4px);
  }

  .mobile-summary-dialog {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(680px, calc(100vw - 28px));
    max-height: min(78svh, 720px);
    overflow: hidden;
    border: 1px solid #d9e6e1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(16, 41, 34, .24);
  }

  .mobile-summary-dialog-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    padding: 10px 12px 9px 8px;
    border-bottom: 1px solid #e4ece8;
  }

  .mobile-summary-close {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #496159;
    background: transparent;
    font-size: 24px;
    line-height: 1;
  }

  .mobile-summary-close:active {
    background: #eef5f1;
  }

  .mobile-summary-dialog-head span {
    color: #6b7c75;
    font-size: 11px;
    font-weight: 700;
  }

  .mobile-summary-dialog-head h2 {
    margin-top: 2px;
    color: #1d2e27;
    font-size: 17px;
    line-height: 1.35;
  }

  .mobile-summary-content {
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
  }

  .mobile-summary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
  }

  .mobile-summary-tags .tag {
    min-height: 26px;
    padding: 4px 8px;
    font-size: 11px;
  }

  .mobile-summary-content h3 {
    color: #1d2e27;
    font-size: 18px;
    line-height: 1.45;
  }

  .mobile-summary-body {
    margin-top: 10px;
    color: #3c4d47;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
  }

  .mobile-summary-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 14px 0 0;
    padding: 12px;
    border: 1px solid #dce8e3;
    border-radius: 10px;
    background: #fbfdfc;
  }

  .mobile-summary-meta div {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 6px;
    min-width: 0;
  }

  .mobile-summary-meta .wide {
    grid-column: 1 / -1;
  }

  .mobile-summary-meta dt {
    color: #718079;
    font-size: 12px;
  }

  .mobile-summary-meta dd {
    min-width: 0;
    margin: 0;
    color: #273931;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .mobile-summary-meta a {
    color: #2866b1;
    text-decoration: none;
  }

  .mobile-summary-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }

  .mobile-summary-actions .copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 34px;
    border-radius: 8px;
    padding: 0 12px;
    color: #235f56;
    border-color: #a9d5cc;
    background: #eef9f6;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-summary-actions .event-original-link {
    color: #315d78;
    border-color: #b9d3e0;
    background: #f1f8fb;
  }

  body.mobile-summary-open {
    overflow: hidden;
  }
}

@media (max-width: 860px) {
  body[data-view="events"] .mobile-bottom-bar {
    display: none !important;
  }

  body[data-view="events"] .mobile-action-dock {
    bottom: env(safe-area-inset-bottom);
  }

  body[data-view="events"] .workspace {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  body[data-view="events"] .event-card {
    border-radius: 12px;
    padding: 10px 11px 0;
  }

  body[data-view="events"] .tags {
    gap: 5px;
    margin-bottom: 7px;
  }

  body[data-view="events"] .tag {
    height: 26px;
    padding: 0 8px;
    font-size: 11px;
  }

  body[data-view="events"] .event-title {
    margin-bottom: 7px;
    font-size: 16px;
    line-height: 1.35;
  }

  body[data-view="events"] .event-summary {
    font-size: 14px;
    line-height: 1.52;
    -webkit-line-clamp: 3;
  }

  body[data-view="events"] .event-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    margin-top: 8px;
    padding-top: 8px;
  }

  body[data-view="events"] .event-original-link,
  body[data-view="events"] .event-actions .copy-btn {
    display: inline-flex !important;
    flex: 0 0 auto;
    grid-column: auto;
    width: auto;
    min-width: 50px;
    max-width: max-content;
    height: 30px;
    border-radius: 8px;
    padding: 0 11px;
    font-size: 12px;
  }

  body[data-view="events"] .mobile-action-dock {
    gap: 8px;
    padding: 8px 12px 10px;
  }

  .mobile-action-hint {
    font-size: 10px;
  }

  .mobile-action-buttons {
    gap: 7px;
  }

  .mobile-action-buttons button {
    height: 40px;
    border-radius: 9px;
    font-size: 13px;
  }

  .mobile-advice-editor-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .mobile-advice-editor-actions button {
    min-width: 0;
    min-height: 38px;
    border-radius: 9px;
    padding: 0 5px;
    font-size: 13px;
  }

  .mobile-advice-editor [hidden] {
    display: none !important;
  }

  .mobile-advice-hint {
    color: #82918b;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
  }

  body[data-view="events"] .event-location-chip {
    display: inline-flex !important;
    flex: 0 0 auto;
    min-width: 58px;
  }

  body[data-view="events"] .event-status-chip {
    display: grid !important;
    flex: 0 0 auto;
    min-width: 76px;
    height: 30px;
  }

  /* 手机端仅保留快速研判所需的线索信息，桌面工作字段不在卡片中展示。 */
  body[data-view="events"] .event-inline-fields,
  body[data-view="events"] .event-status-chip,
  body[data-view="events"] .event-location-chip,
  body[data-view="events"] .tags .deadline-tag {
    display: none !important;
  }

  body[data-view="events"] .event-list {
    gap: 8px;
  }

  body[data-view="events"] .event-card {
    padding: 8px 10px 0;
  }

  body[data-view="events"] .tags {
    gap: 4px;
    margin-bottom: 6px;
  }

  body[data-view="events"] .tag {
    height: 24px;
    padding: 0 7px;
    font-size: 11px;
  }

  body[data-view="events"] .event-title {
    margin-bottom: 5px;
    font-size: 15px;
  }

  body[data-view="events"] .event-summary {
    font-size: 13px;
    line-height: 1.48;
    -webkit-line-clamp: 2;
  }

  body[data-view="events"] .event-actions {
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
  }

  body[data-view="events"] .event-original-link,
  body[data-view="events"] .event-actions .copy-btn {
    min-width: 46px;
    height: 28px;
    padding: 0 9px;
    font-size: 12px;
  }

  /* 让手机端直接进入线索浏览，概览统计留在电脑端使用。 */
  body[data-view="events"] .mobile-brief-intro,
  body[data-view="events"] .kpi-grid,
  body[data-view="events"] .mobile-copy-current-row {
    display: none !important;
  }

  body[data-view="events"] .mobile-desktop-tip {
    margin-top: 8px;
  }

  body[data-view="events"] .mobile-event-total {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 7px 2px 0;
    color: #5c7068;
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-view="events"] .mobile-event-total strong {
    color: #176c5e;
    font-size: 18px;
    line-height: 1;
  }

  body[data-view="events"] .mobile-kpi-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 12px;
  }

  body[data-view="events"] .mobile-kpi-overview article {
    display: flex;
    min-width: 0;
    min-height: 72px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid #dfe5e2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(25, 54, 46, 0.04);
  }

  body[data-view="events"] .mobile-kpi-overview strong {
    color: #17221f;
    font-size: 26px;
    font-weight: 750;
    line-height: 1;
  }

  body[data-view="events"] .mobile-kpi-overview span {
    color: #66736e;
    font-size: 12px;
    line-height: 1.3;
  }

  body[data-view="events"] .table-panel {
    margin-top: 8px;
  }

  .mobile-action-buttons #mobileAdoptBtn:not(.is-selected),
  .mobile-action-buttons #mobileRejectBtn:not(.is-selected) {
    color: #2f4840;
    border-color: #d6e3de;
    background: #fff;
  }

  .mobile-action-buttons #mobileAdoptBtn.is-selected {
    color: #fff;
    border-color: #157a68;
    background: #157a68;
  }

  .mobile-action-buttons #mobileRejectBtn.is-selected {
    color: #fff;
    border-color: #b84a41;
    background: #b84a41;
  }

  body[data-view="events"] .toast {
    right: 12px;
    bottom: calc(62px + env(safe-area-inset-bottom));
    left: 12px;
    z-index: 50;
    text-align: center;
  }
}

.mobile-card-advice-btn {
  display: none !important;
}

.event-card-swipe-feedback {
  display: none;
}

@media (max-width: 860px) {
  /* 手机端以左右滑动替代采用/不采用，PC 端保持原交互。 */
  body[data-view="events"] .workspace {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  body[data-view="events"] #mobileActionDock:not(.mobile-advice-open) {
    display: none !important;
  }

  #mobileActionDock.mobile-advice-open .mobile-action-hint,
  #mobileActionDock.mobile-advice-open .mobile-action-buttons {
    display: none !important;
  }

  body[data-view="events"] .event-actions .mobile-card-advice-btn {
    display: inline-flex !important;
  }

  body[data-view="events"] .event-actions > .copy-btn {
    flex: 0 0 78px;
    width: 78px;
    min-width: 78px;
    max-width: 78px;
    box-sizing: border-box;
    justify-content: center;
  }

  body[data-view="events"] .event-card {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    transition: border-color .16s ease, box-shadow .16s ease, transform 200ms ease, opacity 180ms ease;
    will-change: transform, opacity;
  }

  body[data-view="events"] .event-card.is-swiping {
    transition: none;
  }

  body[data-view="events"] .event-card.is-committing {
    pointer-events: none;
    transition: transform 240ms cubic-bezier(.2, .8, .25, 1), opacity 200ms ease;
  }

  .event-card-swipe-feedback {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 8px;
    padding: 7px 10px;
    opacity: 0;
    pointer-events: none;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  .event-card-swipe-feedback-reject {
    right: 12px;
    color: #9b413b;
    background: rgba(255, 244, 243, .96);
    transform: translateY(-50%);
  }

  .event-card-swipe-feedback-adopt {
    left: 12px;
    color: #14715f;
    background: rgba(239, 250, 246, .96);
    transform: translateY(-50%);
  }

  .mobile-summary-dialog {
    z-index: 2;
    touch-action: pan-y;
    transform-origin: center;
    transition: transform 220ms ease, opacity 180ms ease;
    will-change: transform, opacity;
  }

  .mobile-summary-dialog.is-swiping {
    transition: none;
  }

  .mobile-summary-dialog.is-committing {
    pointer-events: none;
    transition: transform 260ms cubic-bezier(.2, .8, .25, 1), opacity 220ms ease;
  }

  .mobile-summary-swipe-feedback {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 8px;
    padding: 8px 11px;
    box-shadow: 0 8px 20px rgba(17, 44, 36, .14);
    opacity: 0;
    pointer-events: none;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transition: opacity 100ms linear;
  }

  .mobile-summary-swipe-feedback-reject {
    right: 20px;
    color: #9b413b;
    background: rgba(255, 244, 243, .96);
    transform: translate3d(0, -50%, 0);
  }

  .mobile-summary-swipe-feedback-adopt {
    left: 20px;
    color: #14715f;
    background: rgba(239, 250, 246, .96);
    transform: translate3d(0, -50%, 0);
  }

  /* 手机摘要弹窗中的复制、原文使用完全相同的稳定尺寸。 */
  .mobile-summary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="events"] .mobile-summary-actions > .copy-btn {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 1 !important;
  }
}