/* ═══════════════════════════════════════════════════════════════
   ARKAN Enterprise Workspace — Phase 1
   Built on the existing v5 token system (Manrope / JetBrains Mono,
   cyan accent). Signature element: the severity spine — a 3px
   color-coded left border on every work-item row, using the
   existing --status-* tokens. This is the one motif carried across
   every widget; it encodes real urgency, nothing decorative.
   ═══════════════════════════════════════════════════════════════ */

.wsw-page {
  padding: var(--space-5) var(--space-8) var(--space-16) var(--space-8);
  max-width: 1440px;
  margin: 0 auto;
}

/* ── Hero / greeting band ─────────────────────────────────────── */
.wsw-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.wsw-hero-title {
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 4px;
  text-wrap: balance;
}

.wsw-hero-date {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-transform: capitalize;
  margin: 0;
}

/* ── Toolbar ───────────────────────────────────────────────────── */
.wsw-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.wsw-toolbar-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 6px 14px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.wsw-toolbar-btn:hover { color: var(--text-primary); border-color: var(--accent-primary); }
.wsw-toolbar-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* ── Grid ──────────────────────────────────────────────────────── */
.wsw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.wsw-cell { position: relative; min-width: 0; }
.wsw-col-sm  { grid-column: span 1; }
.wsw-col-md  { grid-column: span 2; }
.wsw-col-lg  { grid-column: span 3; }
.wsw-col-full { grid-column: span 4; }

@media (max-width: 1180px) {
  .wsw-grid { grid-template-columns: repeat(2, 1fr); }
  .wsw-col-lg, .wsw-col-full { grid-column: span 2; }
}

@media (max-width: 720px) {
  .wsw-page { padding: var(--space-5); }
  .wsw-grid { grid-template-columns: 1fr; }
  .wsw-col-sm, .wsw-col-md, .wsw-col-lg, .wsw-col-full { grid-column: span 1; }
  .wsw-hero { flex-direction: column; align-items: flex-start; }
}

/* ── Widget card ───────────────────────────────────────────────── */
.wsw-widget {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wsw-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5) var(--space-3);
}

.wsw-widget-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wsw-widget-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.wsw-widget-body { flex: 1; }

.wsw-widget-footer {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--accent-primary);
  text-decoration: none;
  border-top: 1px solid var(--border-subtle);
}
.wsw-widget-footer:hover { color: var(--accent-hover); }

.wsw-hide-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: var(--transition-fast);
  font-size: 14px;
  line-height: 1;
}
.wsw-cell:hover .wsw-hide-btn { opacity: 1; }
.wsw-hide-btn:hover { background: var(--status-danger-bg); color: var(--status-danger); }
.wsw-hide-btn:focus-visible { opacity: 1; outline: 2px solid var(--accent-primary); }

/* ── Work-item row (severity spine — the signature motif) ────────── */
.wsw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px var(--space-5);
  border-left: 3px solid transparent;
  text-decoration: none;
  border-top: 1px solid var(--border-subtle);
  transition: var(--transition-fast);
}
.wsw-row:first-child { border-top: none; }
.wsw-row:hover { background: var(--bg-subtle); }
.wsw-row:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }

.wsw-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wsw-row-title {
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wsw-row-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.wsw-row-due {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Stat / link rows ──────────────────────────────────────────── */
.wsw-stat-row, .wsw-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-5);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  border-top: 1px solid var(--border-subtle);
  transition: var(--transition-fast);
}
.wsw-stat-row:first-child, .wsw-link-row:first-child { border-top: none; }
.wsw-stat-row:hover, .wsw-link-row:hover { background: var(--bg-subtle); color: var(--text-primary); }

.wsw-stat-val {
  font-family: var(--font-mono);
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.wsw-stat-label { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.wsw-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--text-muted);
}
.wsw-stat-icon svg { width: 14px; height: 14px; }

.wsw-big-stat {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: var(--font-bold);
  color: var(--accent-primary);
  text-align: center;
  padding-top: var(--space-4);
  font-variant-numeric: tabular-nums;
}
.wsw-big-stat-label {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-bottom: var(--space-5);
}

.wsw-empty {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.wsw-empty-page {
  padding: var(--space-16) 0;
  text-align: center;
  color: var(--text-muted);
}

.wsw-loading {
  padding: var(--space-16) 0;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.wsw-error {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  background: var(--status-danger-bg);
  color: var(--status-danger);
  font-size: var(--text-sm);
}

/* ── Customize modal ───────────────────────────────────────────── */
.wsw-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.wsw-modal {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  width: 420px;
  max-width: 92vw;
  max-height: 80vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
}

.wsw-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.wsw-modal-head h3 { margin: 0; font-size: var(--text-md); color: var(--text-primary); }
.wsw-modal-head button {
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer; line-height: 1;
}

.wsw-modal-body { padding: var(--space-2) var(--space-5); }

.wsw-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.wsw-modal-row:last-child { border-bottom: none; }
.wsw-modal-row label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }

.wsw-modal-order-btns button {
  width: 24px; height: 24px;
  border: 1px solid var(--border-default);
  background: var(--surface-primary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: 4px;
}
.wsw-modal-order-btns button:disabled { opacity: 0.35; cursor: default; }
.wsw-modal-order-btns button:not(:disabled):hover { border-color: var(--accent-primary); color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   Enterprise Workspace V2 — region-based layout
   Complete redesign per WORKSPACE_V2_BLUEPRINT.md: header → operational
   summary → 3-column work row → module status strip → activity/chart/
   favorites row → right rail. Same v5 token system, same severity-spine
   motif — density and structure change, the design language does not.
   ═══════════════════════════════════════════════════════════════ */

.wsw-hero-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.wsw-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  align-items: start;
}

.wsw-main-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.wsw-rail-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: var(--space-4);
}

.wsw-region {
  display: grid;
  gap: var(--space-5);
}
.wsw-region--summary .wsw-cell,
.wsw-region--modules .wsw-cell {
  grid-column: 1 / -1;
}
.wsw-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
/* Insights row: the activity feed is naturally much taller than the other
   cards, and a flat 3-up row left a block of empty space under the shorter
   ones. Instead of a single row, span the feed down both rows in column 1
   and stack donut / favorites / agent leaderboard across the remaining
   2x2 area on the right — the leaderboard fills exactly the gap that used
   to sit empty under "Документы в работе" / "Мои избранные". */
.wsw-region--insights.wsw-grid-3 {
  grid-template-rows: auto auto;
}
.wsw-region--insights.wsw-grid-3 [data-widget-cell="activity-feed"] {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.wsw-region--insights.wsw-grid-3 [data-widget-cell="documents-donut"] {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}
.wsw-region--insights.wsw-grid-3 [data-widget-cell="favorites"] {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
}
.wsw-region--insights.wsw-grid-3 [data-widget-cell="agent-leaderboard"] {
  grid-column: 2 / span 2;
  grid-row: 2;
  align-self: start;
}
/* wsw-col-sm/md/lg/full's `grid-column: span N` is sized for the old 4-col
   .wsw-grid — inside the region system's 3-col work/insights rows every
   widget must occupy exactly one column, matching the reference's equal
   3-up rows (Мои документы | Мои задачи | Поручения). */
.wsw-grid-3 .wsw-cell {
  grid-column: span 1;
}
@media (max-width: 900px) {
  .wsw-grid-3 { grid-template-columns: 1fr; }
  .wsw-region--insights.wsw-grid-3 [data-widget-cell] {
    grid-column: 1;
    grid-row: auto;
  }
}
.wsw-grid-full {
  grid-template-columns: 1fr;
}

@media (max-width: 1180px) {
  .wsw-layout { grid-template-columns: 1fr; }
  .wsw-rail-col { position: static; }
}
@media (max-width: 720px) {
  .wsw-grid-3 { grid-template-columns: 1fr; }
}

/* ── Operational Summary strip ────────────────────────────────── */
.wsw-widget--summary { background: none; border: none; }
.wsw-sum-strip {
  display: grid;
  /* Fixed column count (this widget always renders exactly 5 cards) instead
     of auto-fit — auto-fit left a lone last card stranded in an otherwise-
     empty row on wide viewports. */
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .wsw-sum-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .wsw-sum-strip { grid-template-columns: repeat(2, 1fr); }
}
.wsw-sum-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--sum-accent, var(--accent-primary)) 20%, var(--border-default));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--sum-accent, var(--accent-primary)) 8%, var(--surface-primary)) 0%, var(--surface-primary) 60%);
  text-decoration: none;
  transition: var(--transition-fast), box-shadow var(--transition-fast);
  overflow: hidden;
}
.wsw-sum-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--sum-accent, var(--accent-primary));
}
.wsw-sum-card:hover {
  border-color: var(--sum-accent, var(--accent-primary));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--sum-accent, var(--accent-primary)) 60%, transparent);
}
.wsw-sum-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sum-accent, var(--accent-primary)) 14%, transparent);
  color: var(--sum-accent, var(--accent-primary));
}
.wsw-sum-icon svg { width: 19px; height: 19px; }
.wsw-sum-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.01em;
  order: 3;
}
.wsw-sum-value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  order: 2;
}

/* ── Module Status strip ──────────────────────────────────────── */
.wsw-mod-strip {
  display: grid;
  /* 140px left no room for icon + name + status badge together — names
     collapsed to a single letter and the badge crowded the meta line. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
}
.wsw-mod-tile {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border-default);
  background: var(--surface-elevated);
  text-decoration: none;
  transition: var(--transition-fast);
}
.wsw-mod-tile:hover { border-color: var(--mod-accent, var(--accent-primary)); transform: translateY(-1px); }
.wsw-mod-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--mod-accent, var(--text-muted)) 13%, transparent);
  color: var(--mod-accent, var(--text-muted));
}
.wsw-mod-icon svg { width: 15px; height: 15px; }
.wsw-mod-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.wsw-mod-name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsw-mod-status { font-size: 10px; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.wsw-mod-tile--ok .wsw-mod-status { color: var(--status-success); }
.wsw-mod-tile--warn .wsw-mod-status { color: var(--status-warning); }
.wsw-mod-tile--warn { border-color: var(--status-warning); }
.wsw-mod-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.wsw-mod-tile--locked {
  opacity: 0.55;
  cursor: help;
  background: repeating-linear-gradient(135deg, var(--surface-elevated), var(--surface-elevated) 8px, var(--bg-subtle) 8px, var(--bg-subtle) 16px);
}
.wsw-mod-tile--locked .wsw-mod-icon { background: var(--bg-subtle); color: var(--text-muted); }
.wsw-mod-tile--locked .wsw-mod-status { color: var(--text-muted); }

/* ── Agent leaderboard (Рейтинг агентов) ─────────────────────────── */
.wsw-lb-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.wsw-lb-row:last-child { border-bottom: none; }
.wsw-lb-rank {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  background: var(--bg-subtle);
}
.wsw-lb-rank--top { color: #fff; background: var(--lb-accent); }
.wsw-lb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wsw-lb-name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsw-lb-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.wsw-lb-score {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ── Мои задачи tabs ───────────────────────────────────────────── */
.wsw-tabs {
  display: flex;
  gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.wsw-tab {
  background: none;
  border: none;
  padding: 0 0 var(--space-3);
  margin-bottom: calc(-1 * var(--space-3) - 1px);
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition-fast);
}
.wsw-tab:hover { color: var(--text-primary); }
.wsw-tab--active { color: var(--accent-primary); font-weight: var(--font-semibold); border-bottom-color: var(--accent-primary); }

/* ── Activity feed ─────────────────────────────────────────────── */
.wsw-activity-row {
  display: flex;
  gap: var(--space-3);
  padding: 8px var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
.wsw-activity-row:first-child { border-top: none; }
.wsw-activity-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  padding-top: 2px;
}
.wsw-activity-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wsw-activity-text { color: var(--text-primary); }
.wsw-activity-actor { font-size: 11px; color: var(--text-muted); }

/* ── Donut chart ───────────────────────────────────────────────── */
.wsw-donut-body {
  display: flex;
  /* Insight-region cards share a grid row and stretch to match the tallest
     sibling (e.g. a long "Последние события" feed) — centering here left
     the donut floating in a sea of empty space on short-content days. */
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.wsw-donut {
  width: 96px; height: 96px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.wsw-donut-hole {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--surface-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.wsw-donut-hole strong { font-family: var(--font-mono); font-size: 18px; color: var(--text-primary); }
.wsw-donut-hole span { font-size: 10px; color: var(--text-muted); }
.wsw-donut-legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.wsw-donut-legend-row {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--text-secondary);
}
.wsw-donut-legend-row .wsw-stat-val { margin-left: auto; font-size: var(--text-xs); }
.wsw-donut-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Right rail: Deadlines timeline / Quick Actions / Recommendations ── */
.wsw-deadline-row {
  display: flex;
  gap: var(--space-3);
  padding: 10px var(--space-5) 10px var(--space-4);
  text-decoration: none;
  font-size: var(--text-sm);
}
.wsw-deadline-row:hover { background: var(--bg-subtle); }
.wsw-deadline-rail {
  position: relative;
  display: flex;
  justify-content: center;
  width: 12px;
  flex-shrink: 0;
}
.wsw-deadline-rail::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: -10px;
  left: 50%;
  width: 1px;
  background: var(--border-subtle);
}
.wsw-deadline-row--last .wsw-deadline-rail::before { display: none; }
.wsw-deadline-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--dl-color, var(--accent-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dl-color, var(--accent-primary)) 22%, transparent);
  flex-shrink: 0;
  z-index: 1;
}
.wsw-deadline-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wsw-deadline-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.wsw-deadline-title { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wsw-qa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
}
.wsw-qa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-3) var(--space-2);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: var(--font-medium);
  border-radius: var(--radius);
  transition: var(--transition-fast);
}
.wsw-qa-btn:hover {
  color: var(--text-primary);
  border-color: var(--qa-accent, var(--accent-primary));
  background: color-mix(in srgb, var(--qa-accent, var(--accent-primary)) 8%, var(--surface-elevated));
}
.wsw-qa-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--qa-accent, var(--accent-primary)) 16%, transparent);
  color: var(--qa-accent, var(--accent-primary));
}
.wsw-qa-icon svg { width: 18px; height: 18px; }

.wsw-rec-row {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  border-left: 3px solid var(--status-info);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wsw-rec-row:first-child { border-top: none; }
.wsw-rec-row--critical { border-left-color: var(--status-danger); }
.wsw-rec-row--warning { border-left-color: var(--status-warning); }
.wsw-rec-title { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); }
.wsw-rec-detail { font-size: 11px; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .wsw-row, .wsw-stat-row, .wsw-link-row, .wsw-hide-btn, .wsw-toolbar-btn, .wsw-chip,
  .wsw-sum-card, .wsw-mod-tile, .wsw-qa-btn, .wsw-deadline-row {
    transition: none;
  }
}