reviewflow 3.4.0 → 3.5.0

package/dist/interface-adapters/views/dashboard/styles.css

@@ -1,5 +1,22 @@
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
+:root {
+  --nsc-bg-base: #0b1220;
+  --nsc-bg-elevated: #111a2b;
+  --nsc-bg-surface: #162235;
+  --nsc-bg-surface-strong: #1c2a40;
+  --nsc-border-soft: rgba(163, 192, 224, 0.16);
+  --nsc-border-strong: rgba(163, 192, 224, 0.28);
+  --nsc-text-primary: #e8efff;
+  --nsc-text-secondary: #b2c1dd;
+  --nsc-text-muted: #8393b0;
+  --nsc-focus: #7ad8ff;
+  --nsc-action: #60c7ff;
+  --nsc-warning: #f4bc71;
+  --nsc-success: #62d3a8;
+  --nsc-danger: #f07f88;
+}
+
 /* Lucide icons base styling */
 [data-lucide] {
   width: 1em;
@@ -78,10 +95,21 @@
   to { transform: rotate(360deg); }
 }
 
+@keyframes quiet-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(96, 199, 255, 0.5);
+  }
+  100% {
+    box-shadow: 0 0 0 8px rgba(96, 199, 255, 0);
+  }
+}
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  color: #e4e4e7;
+  background:
+    radial-gradient(1100px 700px at 12% -10%, #1a2a4a 0%, rgba(26, 42, 74, 0) 58%),
+    linear-gradient(145deg, var(--nsc-bg-base) 0%, #0e1728 100%);
+  color: var(--nsc-text-primary);
   min-height: 100vh;
   padding: 2rem;
 }
@@ -98,7 +126,7 @@ header {
 
 .logo {
   width: 48px; height: 48px;
-  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
+  background: linear-gradient(145deg, #58c4ff 0%, #3c8cc4 100%);
   border-radius: 12px;
   display: flex; align-items: center; justify-content: center;
   font-size: 24px;
@@ -127,18 +155,27 @@ h1 { font-size: 1.75rem; font-weight: 600; }
 }
 
 .btn-primary {
-  background: rgba(245, 158, 11, 0.2);
-  color: #f59e0b;
-  border: 1px solid rgba(245, 158, 11, 0.3);
+  background: rgba(96, 199, 255, 0.16);
+  color: #9ce1ff;
+  border: 1px solid rgba(96, 199, 255, 0.34);
 }
-.btn-primary:hover { background: rgba(245, 158, 11, 0.3); }
+.btn-primary:hover { background: rgba(96, 199, 255, 0.25); }
 
 .btn-secondary {
-  background: rgba(255, 255, 255, 0.05);
-  color: #a1a1aa;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--nsc-text-secondary);
+  border: 1px solid var(--nsc-border-soft);
+}
+.btn-secondary:hover { background: rgba(255, 255, 255, 0.08); }
+
+button:focus-visible,
+a:focus-visible,
+select:focus-visible,
+input:focus-visible,
+[role='button']:focus-visible {
+  outline: 2px solid var(--nsc-focus);
+  outline-offset: 2px;
 }
-.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }
 
 .status-indicator {
   display: inline-flex;
@@ -151,8 +188,8 @@ h1 { font-size: 1.75rem; font-weight: 600; }
 }
 
 .status-indicator.online { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
-.status-indicator.offline { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
-.status-indicator.connecting { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
+.status-indicator.offline { background: rgba(240, 127, 136, 0.2); color: var(--nsc-danger); }
+.status-indicator.connecting { background: rgba(122, 216, 255, 0.2); color: var(--nsc-focus); }
 
 .status-dot {
   width: 8px; height: 8px;
@@ -171,16 +208,125 @@ h1 { font-size: 1.75rem; font-weight: 600; }
 }
 
 .card {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: linear-gradient(170deg, var(--nsc-bg-surface) 0%, #142034 100%);
+  border: 1px solid var(--nsc-border-soft);
   border-radius: 12px;
   padding: 1.25rem;
+  position: relative;
+  overflow: hidden;
 }
 
-.card-label { font-size: 0.75rem; color: #a1a1aa; margin-bottom: 0.5rem; }
+.card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: transparent;
+}
+
+.card-priority::before {
+  background: linear-gradient(180deg, #7ad8ff 0%, rgba(122, 216, 255, 0.2) 100%);
+}
+
+.card-label { font-size: 0.75rem; color: var(--nsc-text-secondary); margin-bottom: 0.5rem; }
 .card-value { font-size: 1.75rem; font-weight: 700; }
-.card-value.running { color: #f59e0b; }
-.card-value.queued { color: #3b82f6; }
+.card-value.running { color: var(--nsc-focus); }
+.card-value.queued { color: #8ab7ff; }
+
+.focus-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.75rem;
+  margin-top: -0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.focus-strip.compact .focus-meta {
+  display: none;
+}
+
+.focus-strip.compact .focus-chip {
+  padding-top: 0.55rem;
+  padding-bottom: 0.55rem;
+}
+
+.focus-chip {
+  background: linear-gradient(160deg, var(--nsc-bg-surface) 0%, var(--nsc-bg-surface-strong) 100%);
+  border: 1px solid var(--nsc-border-soft);
+  border-radius: 10px;
+  padding: 0.65rem 0.75rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.focus-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.focus-label {
+  font-size: 0.72rem;
+  color: var(--nsc-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.focus-meta {
+  font-size: 0.68rem;
+  color: var(--nsc-text-muted);
+}
+
+.focus-value {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--nsc-text-primary);
+}
+
+.focus-now .focus-value { color: var(--nsc-focus); }
+.focus-next .focus-value { color: var(--nsc-warning); }
+.focus-blocked .focus-value { color: var(--nsc-danger); }
+
+.focus-toggle-btn {
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--nsc-text-secondary);
+  border: 1px solid var(--nsc-border-soft);
+  border-radius: 10px;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.focus-toggle-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: var(--nsc-border-strong);
+}
+
+.data-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.35rem 0.6rem;
+  margin-bottom: 1rem;
+  border-radius: 999px;
+  border: 1px solid var(--nsc-border-soft);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--nsc-text-secondary);
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+
+.data-loading [data-lucide] {
+  width: 14px;
+  height: 14px;
+  animation: spin 1s linear infinite;
+}
 
 .card-claude {
   display: flex;
@@ -194,8 +340,8 @@ h1 { font-size: 1.75rem; font-weight: 600; }
 .card-claude.checking .status { color: #f59e0b; }
 
 .section {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: linear-gradient(175deg, var(--nsc-bg-elevated) 0%, #101b2d 100%);
+  border: 1px solid var(--nsc-border-soft);
   border-radius: 12px;
   margin-bottom: 1.5rem;
   overflow: hidden;
@@ -203,16 +349,27 @@ h1 { font-size: 1.75rem; font-weight: 600; }
 
 .section-header {
   padding: 1rem 1.5rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid var(--nsc-border-soft);
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
 
+.section.is-refreshing .section-header::after {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  margin-left: auto;
+  background: var(--nsc-focus);
+  box-shadow: 0 0 0 0 rgba(96, 199, 255, 0.55);
+  animation: quiet-pulse 1.2s ease-out infinite;
+}
+
 .section-header .badge-count {
-  background: rgba(239, 68, 68, 0.2);
-  color: #ef4444;
+  background: rgba(240, 127, 136, 0.16);
+  color: #ff9ea5;
   padding: 0.125rem 0.5rem;
   border-radius: 9999px;
 }
@@ -372,6 +529,12 @@ h1 { font-size: 1.75rem; font-weight: 600; }
   font-weight: 500;
   text-transform: uppercase;
 }
+.badge [data-lucide] {
+  width: 12px;
+  height: 12px;
+  margin-right: 0.2rem;
+  vertical-align: -0.08em;
+}
 .badge.running { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
 .badge.queued { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
 .badge.completed { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
@@ -433,7 +596,32 @@ h1 { font-size: 1.75rem; font-weight: 600; }
 .log-message { flex: 1; word-break: break-word; }
 .log-data { color: #71717a; font-size: 0.7rem; margin-top: 0.25rem; }
 
-.refresh-info { text-align: center; font-size: 0.875rem; color: #71717a; margin-top: 1rem; }
+.refresh-info {
+  text-align: center;
+  font-size: 0.875rem;
+  color: #8d9bb8;
+  margin-top: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.3rem;
+}
+
+body.is-quiet-refresh .refresh-info::after {
+  content: '';
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  margin-left: 0.45rem;
+  background: var(--nsc-focus);
+  box-shadow: 0 0 0 0 rgba(96, 199, 255, 0.65);
+  animation: quiet-pulse 1.2s ease-out infinite;
+}
+
+.refresh-separator {
+  color: #5f6e8d;
+}
 
 .hidden { display: none !important; }
 
@@ -679,37 +867,140 @@ h1 { font-size: 1.75rem; font-weight: 600; }
 /* Stats grid */
 .stats-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
+  gap: 0.75rem;
 }
 .stat-card {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
-  padding: 1rem;
+  background: linear-gradient(165deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.02) 100%);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 9px;
+  padding: 0.75rem 0.7rem;
   text-align: center;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+  min-height: 106px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.35rem;
+}
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: rgba(158, 176, 211, 0.45);
 }
 .stat-card:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.15);
+  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
+  border-color: rgba(255, 255, 255, 0.2);
+  transform: translateY(-1px);
 }
 .stat-card.warning {
-  border-color: rgba(239, 68, 68, 0.3);
+  border-color: rgba(239, 68, 68, 0.45);
+  background: linear-gradient(165deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.03) 100%);
 }
 .stat-value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #f59e0b;
-  line-height: 1.2;
+  min-height: 2rem;
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.2rem;
+  line-height: 1.1;
 }
 .stat-card.warning .stat-value {
-  color: #ef4444;
+  color: #ff8488;
+}
+
+.stat-main {
+  font-size: 1.55rem;
+  font-weight: 700;
+  color: #ffca63;
+}
+
+.stat-denominator {
+  font-size: 0.76rem;
+  font-weight: 600;
+  color: #9eb0d3;
+}
+
+.stat-trend {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stat-trend [data-lucide] {
+  width: 12px;
+  height: 12px;
+}
+
+.stat-trend.up {
+  color: #6ee7a4;
+}
+
+.stat-trend.down {
+  color: #ff8488;
+}
+
+.stat-trend.flat {
+  color: #8ea5cc;
+}
+
+.metric-reviews .stat-main,
+.metric-time .stat-main,
+.metric-average-time .stat-main,
+.metric-warnings .stat-main {
+  color: #ffca63;
+}
+
+.metric-reviews::before {
+  background: rgba(124, 211, 255, 0.75);
+}
+
+.metric-score::before {
+  background: rgba(255, 208, 112, 0.78);
+}
+
+.metric-time::before,
+.metric-average-time::before {
+  background: rgba(180, 165, 255, 0.75);
+}
+
+.metric-warnings::before {
+  background: rgba(255, 196, 105, 0.75);
+}
+
+.metric-score .stat-main {
+  color: #ffd070;
+}
+
+.metric-blocking .stat-main {
+  color: #ff6269;
+}
+
+.metric-blocking::before {
+  background: rgba(255, 98, 105, 0.82);
 }
 .stat-label {
-  font-size: 0.75rem;
-  color: #71717a;
-  margin-top: 0.25rem;
+  font-size: 0.72rem;
+  color: #8fa1c2;
+  margin-top: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+  min-height: 1.1rem;
+}
+
+.stat-label [data-lucide] {
+  width: 11px;
+  height: 11px;
 }
 
 /* Collapsible section header */
@@ -721,6 +1012,11 @@ h1 { font-size: 1.75rem; font-weight: 600; }
 .section-header.clickable:hover {
   background: rgba(255, 255, 255, 0.03);
 }
+
+.section-header.clickable:focus-visible {
+  background: rgba(255, 255, 255, 0.07);
+  border-bottom-color: var(--nsc-border-strong);
+}
 .toggle-icon {
   margin-left: auto;
   transition: transform 0.2s;
@@ -730,6 +1026,21 @@ h1 { font-size: 1.75rem; font-weight: 600; }
   transform: rotate(-90deg);
 }
 
+.section-toggle {
+  margin-left: auto;
+  color: #7d8aa4;
+}
+
+.section-toggle [data-lucide] {
+  width: 15px;
+  height: 15px;
+  transition: transform 0.2s;
+}
+
+.section-toggle.collapsed [data-lucide] {
+  transform: rotate(-90deg);
+}
+
 /* MR tracking items */
 .mr-item {
   display: flex;
@@ -803,49 +1114,58 @@ h1 { font-size: 1.75rem; font-weight: 600; }
 .stat-badge {
   display: inline-flex;
   align-items: center;
-  gap: 0.125rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: 4px;
-  font-size: 0.7rem;
-  font-weight: 500;
+  gap: 0.2rem;
+  padding: 0.16rem 0.44rem;
+  border-radius: 999px;
+  font-size: 0.68rem;
+  font-weight: 600;
+  border: 1px solid transparent;
 }
 .stat-badge.blocking {
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
+  background: rgba(239, 68, 68, 0.16);
+  border-color: rgba(239, 68, 68, 0.26);
+  color: #ff8d90;
 }
 .stat-badge.warning {
-  background: rgba(245, 158, 11, 0.15);
-  color: #f59e0b;
+  background: rgba(245, 158, 11, 0.16);
+  border-color: rgba(245, 158, 11, 0.26);
+  color: #ffc669;
 }
 .stat-badge.followup {
-  background: rgba(59, 130, 246, 0.15);
-  color: #3b82f6;
+  background: rgba(59, 130, 246, 0.16);
+  border-color: rgba(59, 130, 246, 0.26);
+  color: #8ec1ff;
 }
 .stat-badge.score {
-  background: rgba(34, 197, 94, 0.15);
-  color: #22c55e;
+  background: rgba(34, 197, 94, 0.16);
+  border-color: rgba(34, 197, 94, 0.26);
+  color: #77e2a4;
 }
 
 /* MR Item Accordion */
 .mr-item-accordion {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 10px;
+  margin-bottom: 0.55rem;
+  background: linear-gradient(180deg, rgba(13, 23, 42, 0.82) 0%, rgba(10, 19, 36, 0.92) 100%);
+  overflow: hidden;
 }
-.mr-item-accordion:last-child { border-bottom: none; }
+.mr-item-accordion:last-child { margin-bottom: 0; }
 
 .mr-item-header {
   display: flex;
   align-items: center;
-  gap: 1rem;
-  padding: 0.75rem 0;
+  gap: 0.85rem;
+  padding: 0.72rem 0.8rem;
   cursor: pointer;
-  transition: background 0.2s;
+  transition: background 0.2s, border-color 0.2s;
 }
 .mr-item-header:hover {
-  background: rgba(255, 255, 255, 0.02);
+  background: rgba(255, 255, 255, 0.04);
 }
 
 .mr-toggle {
-  color: #71717a;
+  color: #8d9bb8;
   transition: transform 0.2s;
 }
 .mr-toggle [data-lucide] {
@@ -872,13 +1192,13 @@ h1 { font-size: 1.75rem; font-weight: 600; }
   text-align: right;
 }
 .mr-assigner-name {
-  font-size: 0.75rem;
-  color: #a1a1aa;
+  font-size: 0.74rem;
+  color: #b8c7e4;
   font-weight: 500;
 }
 .mr-assigner-time {
   font-size: 0.65rem;
-  color: #71717a;
+  color: #7f90b2;
 }
 .mr-avatar {
   width: 32px;
@@ -897,40 +1217,48 @@ h1 { font-size: 1.75rem; font-weight: 600; }
 /* MR Item expanded content */
 .mr-item-content {
   display: none;
-  padding: 0 0 1rem 1.5rem;
-  margin-left: 1.5rem;
-  border-left: 2px solid rgba(255, 255, 255, 0.1);
+  padding: 0 0.8rem 0.8rem 0.8rem;
+  margin-left: 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  border-left: none;
 }
 .mr-item-accordion.open .mr-item-content {
   display: block;
 }
 
 .mr-details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem 0;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.42rem;
+  padding: 0.6rem 0 0.45rem;
 }
 .mr-detail-row {
   display: flex;
-  gap: 0.5rem;
-  font-size: 0.8rem;
+  gap: 0.45rem;
+  font-size: 0.77rem;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+  padding: 0.36rem 0.5rem;
 }
 .mr-detail-label {
-  color: #71717a;
+  color: #8fa0c2;
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  min-width: 110px;
+  min-width: 82px;
 }
 .mr-detail-label [data-lucide] {
   width: 12px;
   height: 12px;
 }
 .mr-detail-value {
-  color: #a1a1aa;
+  color: #d2dcf2;
   font-family: monospace;
-  font-size: 0.75rem;
+  font-size: 0.73rem;
+  min-width: 0;
+  word-break: break-word;
 }
 
 /* Reviews history in expanded content */
@@ -940,17 +1268,20 @@ h1 { font-size: 1.75rem; font-weight: 600; }
 .mr-reviews-list {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: 0.32rem;
   margin-top: 0.25rem;
-  padding-left: 1rem;
+  padding-left: 0;
 }
 .mr-review-event {
-  display: flex;
-  gap: 0.75rem;
-  font-size: 0.7rem;
-  padding: 0.25rem 0.5rem;
-  background: rgba(255, 255, 255, 0.02);
-  border-radius: 4px;
+  display: grid;
+  grid-template-columns: minmax(58px, auto) minmax(86px, auto) auto auto;
+  align-items: center;
+  gap: 0.35rem 0.6rem;
+  font-size: 0.68rem;
+  padding: 0.32rem 0.46rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
 .mr-review-event.review {
   border-left: 2px solid #f59e0b;
@@ -960,25 +1291,424 @@ h1 { font-size: 1.75rem; font-weight: 600; }
 }
 .review-event-type {
   font-weight: 500;
-  color: #a1a1aa;
-  min-width: 50px;
+  color: #b8c7e4;
+  min-width: 48px;
 }
 .review-event-time {
-  color: #71717a;
+  color: #8a9ab8;
 }
 .review-event-score {
-  color: #22c55e;
+  color: #77e2a4;
   font-weight: 500;
 }
 .review-event-blocking {
-  color: #ef4444;
+  color: #ff8d90;
   font-weight: 500;
 }
 
 .mr-item-actions {
-  padding-top: 0.75rem;
+  padding-top: 0.65rem;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
-  margin-top: 0.5rem;
+  margin-top: 0.45rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.42rem 0.5rem;
+}
+
+.auto-followup-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.32rem;
+  font-size: 0.72rem;
+  color: #c2d0ea;
+  padding: 0.18rem 0.4rem;
+  border: 1px solid rgba(255, 255, 255, 0.13);
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.auto-followup-toggle input[type='checkbox'] {
+  accent-color: var(--nsc-focus);
+}
+
+/* Compact mode for high-focus sessions */
+body.compact-density .section-header {
+  padding: 0.75rem 1rem;
+}
+
+body.compact-density .section-content {
+  padding: 0.75rem 1rem;
+}
+
+body.compact-density .review-item {
+  gap: 0.45rem;
+  padding: 0.7rem 0;
+}
+
+body.compact-density .review-header {
+  gap: 0.65rem;
+}
+
+body.compact-density .review-title {
+  font-size: 0.9rem;
+}
+
+body.compact-density .review-meta {
+  font-size: 0.78rem;
+  margin-top: 0.15rem;
+}
+
+body.compact-density .review-assigner-name {
+  font-size: 0.68rem;
+}
+
+body.compact-density .review-assigner-time {
+  font-size: 0.6rem;
+}
+
+body.compact-density .review-avatar {
+  width: 26px;
+  height: 26px;
+  font-size: 0.74rem;
+}
+
+body.compact-density .review-description-text {
+  font-size: 0.75rem;
+  max-height: 110px;
+}
+
+body.compact-density .mr-item-header {
+  gap: 0.55rem;
+  padding: 0.48rem 0.56rem;
+}
+
+body.compact-density .mr-title {
+  font-size: 0.88rem;
+}
+
+body.compact-density .mr-meta {
+  font-size: 0.66rem;
+  margin-top: 0.15rem;
+  gap: 0.34rem;
+}
+
+body.compact-density .mr-avatar {
+  width: 26px;
+  height: 26px;
+  font-size: 0.74rem;
+}
+
+body.compact-density .mr-item-content {
+  padding: 0 0.56rem 0.56rem 0.56rem;
+  margin-left: 0;
+}
+
+body.compact-density .mr-details {
+  gap: 0.28rem;
+  padding: 0.44rem 0 0.3rem;
+}
+
+body.compact-density .mr-detail-row {
+  font-size: 0.74rem;
+}
+
+body.compact-density .mr-item-actions {
+  padding-top: 0.42rem;
+  margin-top: 0.3rem;
+  gap: 0.3rem 0.35rem;
+}
+
+body.compact-density .btn-action {
+  font-size: 0.68rem;
+  padding: 0.2rem 0.45rem;
+}
+
+body.compact-density .log-entry {
+  font-size: 0.7rem;
+  padding: 0.4rem;
+}
+
+.now-lane {
+  background: linear-gradient(165deg, rgba(96, 199, 255, 0.12) 0%, rgba(122, 216, 255, 0.06) 100%);
+  border: 1px solid rgba(96, 199, 255, 0.28);
+  border-radius: 10px;
+  padding: 0.7rem 0.85rem;
+  margin-bottom: 0.65rem;
+  display: flex;
+  justify-content: space-between;
+  gap: 0.8rem;
+  align-items: center;
+}
+
+.queue-lanes-grid {
+  display: grid;
+  gap: 0.7rem;
+}
+
+.queue-lane {
+  border: 1px solid var(--nsc-border-soft);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.02);
+  overflow: hidden;
+}
+
+.queue-lane-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.55rem 0.75rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.queue-lane-title {
+  font-size: 0.73rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--nsc-text-primary);
+}
+
+.queue-lane-count {
+  min-width: 1.5rem;
+  text-align: center;
+  border-radius: 999px;
+  font-size: 0.67rem;
+  font-weight: 700;
+  padding: 0.08rem 0.4rem;
+  border: 1px solid var(--nsc-border-soft);
+  color: var(--nsc-text-primary);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.queue-lane-body {
+  padding: 0.55rem 0.65rem 0.2rem;
+}
+
+.now-lane-copy {
+  flex: 1;
+  min-width: 0;
+}
+
+.now-lane-kicker {
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #90ddff;
+  font-weight: 700;
+}
+
+.now-lane-title {
+  font-size: 0.9rem;
+  color: var(--nsc-text-primary);
+  font-weight: 600;
+  margin-top: 0.2rem;
+}
+
+.now-lane-meta {
+  font-size: 0.72rem;
+  color: var(--nsc-text-secondary);
+  margin-top: 0.2rem;
+}
+
+.now-lane-owner {
+  font-size: 0.72rem;
+  color: var(--nsc-text-secondary);
+  margin-top: 0.2rem;
+}
+
+.now-lane-quality {
+  min-width: 120px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  padding: 0.4rem 0.5rem;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.quality-kicker {
+  display: block;
+  font-size: 0.62rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--nsc-text-muted);
+}
+
+.quality-main {
+  display: flex;
+  align-items: baseline;
+  gap: 0.15rem;
+  margin-top: 0.15rem;
+}
+
+.quality-score {
+  font-size: 1.05rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.quality-over {
+  font-size: 0.65rem;
+  color: var(--nsc-text-muted);
+}
+
+.quality-target {
+  font-size: 0.65rem;
+  color: var(--nsc-text-secondary);
+  margin-top: 0.1rem;
+}
+
+.quality-progress {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 0.2rem;
+}
+
+.quality-progress-track {
+  flex: 1;
+  height: 6px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  overflow: hidden;
+}
+
+.quality-progress-fill {
+  height: 100%;
+  transition: width 180ms ease;
+}
+
+.quality-progress-fill.excellent {
+  background: var(--nsc-success);
+}
+
+.quality-progress-fill.warning {
+  background: var(--nsc-warning);
+}
+
+.quality-progress-fill.critical {
+  background: var(--nsc-danger);
+}
+
+.quality-progress-fill.unknown {
+  background: var(--nsc-text-muted);
+}
+
+.quality-progress-value {
+  font-size: 0.62rem;
+  color: var(--nsc-text-muted);
+  min-width: 2rem;
+  text-align: right;
+}
+
+.quality-label {
+  font-size: 0.67rem;
+  margin-top: 0.15rem;
+  font-weight: 600;
+}
+
+.quality-trend {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  font-size: 0.62rem;
+  margin-top: 0.15rem;
+  color: var(--nsc-text-secondary);
+}
+
+.quality-trend [data-lucide] {
+  width: 11px;
+  height: 11px;
+}
+
+.quality-trend.up {
+  color: var(--nsc-success);
+}
+
+.quality-trend.down {
+  color: var(--nsc-danger);
+}
+
+.quality-trend.flat {
+  color: var(--nsc-warning);
+}
+
+.quality-trend.unknown {
+  color: var(--nsc-text-muted);
+}
+
+.now-lane-quality.excellent .quality-score,
+.now-lane-quality.excellent .quality-label {
+  color: var(--nsc-success);
+}
+
+.now-lane-quality.warning .quality-score,
+.now-lane-quality.warning .quality-label {
+  color: var(--nsc-warning);
+}
+
+.now-lane-quality.critical .quality-score,
+.now-lane-quality.critical .quality-label {
+  color: var(--nsc-danger);
+}
+
+.now-lane-quality.unknown .quality-score,
+.now-lane-quality.unknown .quality-label {
+  color: var(--nsc-text-muted);
+}
+
+.now-lane-actions {
+  display: flex;
+  gap: 0.45rem;
+  align-items: center;
+  margin-top: 0.35rem;
+  flex-wrap: wrap;
+}
+
+body.compact-density .now-lane {
+  padding: 0.55rem 0.65rem;
+}
+
+body.compact-density .queue-lane-header {
+  padding: 0.42rem 0.55rem;
+}
+
+body.compact-density .queue-lane-title {
+  font-size: 0.66rem;
+}
+
+body.compact-density .queue-lane-body {
+  padding: 0.4rem 0.5rem 0.1rem;
+}
+
+body.compact-density .now-lane-title {
+  font-size: 0.82rem;
+}
+
+body.compact-density .now-lane-meta {
+  font-size: 0.66rem;
+}
+
+body.compact-density .now-lane-owner {
+  font-size: 0.64rem;
+}
+
+body.compact-density .now-lane-quality {
+  min-width: 106px;
+  padding: 0.3rem 0.4rem;
+}
+
+body.compact-density .quality-score {
+  font-size: 0.95rem;
+}
+
+body.compact-density .quality-progress-track {
+  height: 5px;
+}
+
+body.compact-density .quality-progress-value,
+body.compact-density .quality-trend {
+  font-size: 0.58rem;
 }
 
 /* Cancel button for active reviews */
@@ -1127,3 +1857,211 @@ h1 { font-size: 1.75rem; font-weight: 600; }
   width: 16px;
   height: 16px;
 }
+
+@media (max-width: 980px) {
+  body {
+    padding: 1rem;
+  }
+
+  .container {
+    max-width: 100%;
+  }
+
+  .cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.7rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .focus-strip {
+    grid-template-columns: 1fr;
+  }
+
+  .project-loader {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .project-loader .project-input {
+    min-width: 100% !important;
+  }
+
+  .project-loader .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .now-lane {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.55rem;
+  }
+
+  .now-lane-quality {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .mr-item-header {
+    gap: 0.65rem;
+    align-items: flex-start;
+  }
+
+  .mr-title {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    line-height: 1.3;
+  }
+
+  .mr-meta {
+    flex-wrap: wrap;
+    gap: 0.35rem 0.5rem;
+  }
+
+  .mr-assigner {
+    margin-left: 0;
+    justify-content: flex-start;
+    width: 100%;
+    padding-left: 1.15rem;
+  }
+
+  .mr-assigner-info {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .mr-details {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.5rem;
+  }
+
+  .stat-card {
+    padding: 0.62rem 0.5rem;
+    min-height: 89px;
+    gap: 0.2rem;
+  }
+
+  .stat-main {
+    font-size: 1.28rem;
+  }
+
+  .stat-label {
+    font-size: 0.66rem;
+  }
+
+  .cards {
+    grid-template-columns: 1fr;
+  }
+
+  .header-actions {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .header-actions .btn {
+    flex: 1;
+    justify-content: center;
+  }
+
+  .section-header {
+    padding: 0.8rem 0.9rem;
+  }
+
+  .section-content {
+    padding: 0.55rem 0.75rem;
+  }
+
+  .queue-lane-body {
+    padding: 0.45rem 0.35rem 0.15rem;
+  }
+
+  .mr-item-header {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      'status info toggle'
+      '. assigner .';
+    gap: 0.4rem 0.55rem;
+    padding: 0.6rem 0;
+  }
+
+  .mr-item-header .review-status {
+    grid-area: status;
+    margin-top: 0.2rem;
+  }
+
+  .mr-item-header .mr-info {
+    grid-area: info;
+  }
+
+  .mr-item-header .mr-toggle {
+    grid-area: toggle;
+    align-self: start;
+  }
+
+  .mr-item-header .mr-assigner {
+    grid-area: assigner;
+    width: auto;
+    padding-left: 0;
+    margin-top: 0.15rem;
+  }
+
+  .mr-title {
+    font-size: 0.92rem;
+  }
+
+  .mr-meta {
+    font-size: 0.69rem;
+    gap: 0.28rem 0.38rem;
+  }
+
+  .stat-badge {
+    font-size: 0.63rem;
+    padding: 0.1rem 0.3rem;
+  }
+
+  .mr-item-content {
+    margin-left: 0;
+    padding: 0 0.46rem 0.46rem 0.46rem;
+  }
+
+  .mr-item-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.38rem;
+  }
+
+  .mr-item-actions .btn-action {
+    font-size: 0.66rem;
+    padding: 0.18rem 0.42rem;
+  }
+
+  .mr-review-event {
+    grid-template-columns: 1fr;
+    gap: 0.18rem;
+    font-size: 0.66rem;
+  }
+
+  .review-event-type,
+  .review-event-time,
+  .review-event-score,
+  .review-event-blocking {
+    min-width: 0;
+  }
+
+  .toast-container {
+    right: 0.75rem;
+    left: 0.75rem;
+  }
+
+  .toast {
+    width: 100%;
+  }
+}