securityclaw 0.0.1

package/admin/public/styles.css

@@ -0,0 +1,2715 @@
+:root {
+  --bg-base: #eef4fb;
+  --bg-elevated: #ffffff;
+  --bg-subtle: #f8fbff;
+  --bg-canvas-start: #f6f9fd;
+  --bg-canvas-end: #eef4fb;
+  --bg-panel-accent: #f7fbff;
+  --bg-panel-muted: #f5f9ff;
+  --panel-border: #d8e2ef;
+  --ink: #10263e;
+  --muted: #4e6783;
+  --line: #d8e2ef;
+  --line-soft: rgba(141, 171, 201, 0.22);
+  --brand: #0f6ea9;
+  --brand-strong: #16a0cf;
+  --brand-soft: rgba(15, 110, 169, 0.12);
+  --brand-soft-strong: rgba(15, 110, 169, 0.16);
+  --brand-focus: rgba(15, 110, 169, 0.2);
+  --good: #18755f;
+  --good-soft: rgba(24, 117, 95, 0.12);
+  --good-surface: #f2faf7;
+  --good-border: rgba(24, 117, 95, 0.28);
+  --good-border-soft: rgba(24, 117, 95, 0.18);
+  --warn: #a96211;
+  --warn-soft: rgba(169, 98, 17, 0.12);
+  --warn-surface: #fff8ef;
+  --warn-border: rgba(169, 98, 17, 0.28);
+  --warn-border-soft: rgba(169, 98, 17, 0.18);
+  --bad: #c03a4b;
+  --bad-soft: rgba(192, 58, 75, 0.12);
+  --bad-surface: #fff3f5;
+  --bad-border: rgba(192, 58, 75, 0.28);
+  --bad-border-soft: rgba(192, 58, 75, 0.18);
+  --surface-ghost: #f6faff;
+  --surface-ghost-strong: #f9fcff;
+  --surface-hover: rgba(15, 110, 169, 0.06);
+  --surface-tab: #eaf0f7;
+  --surface-tab-hover: rgba(255, 255, 255, 0.65);
+  --surface-chart-border: #d9e6f4;
+  --surface-chart-top: #ffffff;
+  --surface-chart-bottom: #f6faff;
+  --surface-tooltip: #ffffff;
+  --surface-table-head: #f6faff;
+  --surface-track: #ecf2f9;
+  --surface-neutral-chip: rgba(233, 241, 248, 0.88);
+  --surface-neutral-chip-border: rgba(141, 171, 201, 0.18);
+  --surface-user-message: rgba(230, 244, 255, 0.9);
+  --surface-user-message-border: rgba(15, 110, 169, 0.24);
+  --surface-system-message: rgba(255, 248, 239, 0.92);
+  --surface-system-message-border: rgba(169, 98, 17, 0.26);
+  --surface-account-card-top: #ffffff;
+  --surface-account-card-bottom: #f8fbff;
+  --shadow-brand: 0 8px 18px rgba(15, 110, 169, 0.24);
+  --shadow-brand-hover: 0 10px 22px rgba(15, 110, 169, 0.28);
+  --shadow-soft: 0 6px 16px rgba(16, 44, 76, 0.08);
+  --shadow-soft-strong: 0 8px 18px rgba(16, 44, 76, 0.08);
+  --shadow-float: 0 10px 24px rgba(16, 44, 76, 0.14);
+  --shadow-subtle: 0 1px 2px rgba(16, 44, 76, 0.14);
+  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  --axis: #c8d8eb;
+  --grid: #e7eef8;
+  --chart-tick: #607891;
+  --chart-total: #1e40af;
+  --chart-total-soft: rgba(30, 64, 175, 0.12);
+  --chart-risk: #c03a4b;
+  --radius-lg: 16px;
+  --radius-md: 12px;
+  --radius-sm: 10px;
+}
+
+:root[data-theme="dark"] {
+  --bg-base: #020817;
+  --bg-elevated: #081321;
+  --bg-subtle: #0c1b2d;
+  --bg-canvas-start: #07111f;
+  --bg-canvas-end: #020817;
+  --bg-panel-accent: #0b1727;
+  --bg-panel-muted: #0d1a2b;
+  --panel-border: #22364b;
+  --ink: #e6eef7;
+  --muted: #95a8bc;
+  --line: #24384d;
+  --line-soft: rgba(96, 124, 156, 0.22);
+  --brand: #38bdf8;
+  --brand-strong: #0ea5e9;
+  --brand-soft: rgba(56, 189, 248, 0.16);
+  --brand-soft-strong: rgba(56, 189, 248, 0.22);
+  --brand-focus: rgba(56, 189, 248, 0.24);
+  --good: #34d399;
+  --good-soft: rgba(52, 211, 153, 0.16);
+  --good-surface: rgba(16, 185, 129, 0.14);
+  --good-border: rgba(52, 211, 153, 0.28);
+  --good-border-soft: rgba(52, 211, 153, 0.2);
+  --warn: #f59e0b;
+  --warn-soft: rgba(245, 158, 11, 0.16);
+  --warn-surface: rgba(245, 158, 11, 0.14);
+  --warn-border: rgba(245, 158, 11, 0.28);
+  --warn-border-soft: rgba(245, 158, 11, 0.2);
+  --bad: #fb7185;
+  --bad-soft: rgba(251, 113, 133, 0.16);
+  --bad-surface: rgba(251, 113, 133, 0.14);
+  --bad-border: rgba(251, 113, 133, 0.28);
+  --bad-border-soft: rgba(251, 113, 133, 0.2);
+  --surface-ghost: #0d1a2a;
+  --surface-ghost-strong: #0f1d2f;
+  --surface-hover: rgba(56, 189, 248, 0.12);
+  --surface-tab: #0d1b2d;
+  --surface-tab-hover: rgba(56, 189, 248, 0.12);
+  --surface-chart-border: #23364b;
+  --surface-chart-top: #0d1726;
+  --surface-chart-bottom: #091320;
+  --surface-tooltip: #081522;
+  --surface-table-head: #0c1725;
+  --surface-track: #13263a;
+  --surface-neutral-chip: rgba(20, 36, 55, 0.92);
+  --surface-neutral-chip-border: rgba(96, 124, 156, 0.2);
+  --surface-user-message: rgba(14, 71, 110, 0.35);
+  --surface-user-message-border: rgba(56, 189, 248, 0.28);
+  --surface-system-message: rgba(115, 75, 13, 0.24);
+  --surface-system-message-border: rgba(245, 158, 11, 0.26);
+  --surface-account-card-top: #0d1928;
+  --surface-account-card-bottom: #091320;
+  --shadow-brand: 0 10px 24px rgba(2, 6, 23, 0.36);
+  --shadow-brand-hover: 0 14px 30px rgba(2, 6, 23, 0.44);
+  --shadow-soft: 0 10px 24px rgba(2, 6, 23, 0.22);
+  --shadow-soft-strong: 0 12px 28px rgba(2, 6, 23, 0.3);
+  --shadow-float: 0 14px 32px rgba(2, 6, 23, 0.42);
+  --shadow-subtle: 0 1px 2px rgba(2, 6, 23, 0.36);
+  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  --axis: rgba(148, 163, 184, 0.4);
+  --grid: rgba(148, 163, 184, 0.18);
+  --chart-tick: #9fb2c7;
+  --chart-total: #60a5fa;
+  --chart-total-soft: rgba(96, 165, 250, 0.16);
+  --chart-risk: #fb7185;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background: var(--bg-base);
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--ink);
+  font-family: "IBM Plex Sans", "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  background: linear-gradient(180deg, var(--bg-canvas-start) 0%, var(--bg-canvas-end) 100%);
+  transition: background 180ms ease, color 180ms ease;
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+button {
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
+}
+
+button:disabled {
+  opacity: 0.58;
+  cursor: not-allowed;
+  transform: none;
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: 3px solid var(--brand-focus);
+  outline-offset: 2px;
+}
+
+button.primary,
+button.ghost {
+  padding: 10px 14px;
+  font-weight: 700;
+}
+
+button.small {
+  min-height: 38px;
+  padding: 0 14px;
+  font-size: 13px;
+}
+
+button.primary {
+  color: #fff;
+  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
+  border-color: var(--brand-soft-strong);
+  box-shadow: var(--shadow-brand);
+}
+
+button.primary:hover {
+  box-shadow: var(--shadow-brand-hover);
+}
+
+button.ghost {
+  color: var(--ink);
+  background: var(--surface-ghost);
+  border-color: var(--line);
+}
+
+.app {
+  width: 100%;
+  min-height: 100vh;
+  margin: 0;
+  display: grid;
+  gap: 0;
+}
+
+.card {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.workspace-kicker,
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--brand);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.workspace-favicon {
+  width: 20px;
+  height: 20px;
+  flex: 0 0 20px;
+  border-radius: 5px;
+}
+
+.workspace {
+  width: 100%;
+  min-height: 100vh;
+  padding: 0 clamp(18px, 3vw, 42px) 24px;
+  display: grid;
+  gap: 18px;
+  align-content: start;
+  animation: rise-in 220ms ease;
+}
+
+.workspace-top,
+.card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 14px;
+}
+
+.workspace-top {
+  padding-top: 22px;
+}
+
+.workspace-title {
+  min-width: 0;
+}
+
+.toolbar-controls {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+.control-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 14px;
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-subtle);
+}
+
+.control-group:focus-within {
+  border-color: var(--brand-soft-strong);
+  box-shadow: 0 0 0 1px var(--brand-soft-strong);
+}
+
+.toolbar-icon-button {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: 11px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: none;
+  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
+}
+
+.toolbar-icon-button:hover {
+  color: var(--ink);
+  background: var(--surface-hover);
+}
+
+.toolbar-icon-button:focus-visible {
+  outline: 3px solid var(--brand-focus);
+  outline-offset: 2px;
+}
+
+.toolbar-icon-button.active {
+  color: var(--ink);
+  border-color: var(--brand-soft-strong);
+  background: linear-gradient(135deg, var(--brand-soft-strong) 0%, var(--brand-soft) 100%);
+  box-shadow: var(--shadow-subtle);
+}
+
+.toolbar-icon-button.active:hover {
+  transform: translateY(-1px);
+}
+
+.toolbar-icon-button svg {
+  width: 18px;
+  height: 18px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.toolbar-icon-button-text {
+  width: 40px;
+}
+
+.toolbar-monogram {
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.card-head {
+  margin-bottom: 14px;
+}
+
+.workspace-title h1 {
+  margin: 4px 0 10px;
+  font-size: clamp(22px, 3vw, 32px);
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+}
+
+.workspace-heading {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.card-head h2,
+.card-head h3 {
+  margin: 0;
+  font-size: 24px;
+}
+
+.status-inline {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 42px;
+  padding: 0 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  font-size: 13px;
+  font-weight: 700;
+  width: fit-content;
+}
+
+.status-banner {
+  max-width: min(920px, 100%);
+}
+
+.status-dot {
+  width: 9px;
+  height: 9px;
+  flex: 0 0 9px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.status-inline.good {
+  color: var(--good);
+  background: var(--good-surface);
+}
+
+.status-inline.warn {
+  color: var(--warn);
+  background: var(--warn-surface);
+}
+
+.status-inline.error {
+  color: var(--bad);
+  background: var(--bad-surface);
+}
+
+.tablist {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--surface-tab);
+}
+
+.tab-button {
+  min-height: 30px;
+  padding: 0 10px;
+  text-align: center;
+  border: 1px solid transparent;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  border-radius: 7px;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.tab-button:hover {
+  background: var(--surface-tab-hover);
+}
+
+.tab-button.active {
+  color: var(--ink);
+  border-color: var(--panel-border);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-subtle);
+}
+
+.tab-label {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.tab-count {
+  min-width: 20px;
+  min-height: 18px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--brand-soft);
+  color: var(--brand);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-panel {
+  animation: rise-in 220ms ease;
+}
+
+.card-head-compact {
+  margin-bottom: 20px;
+}
+
+.overview-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  align-items: stretch;
+}
+
+.overview-grid > .panel-card {
+  height: 100%;
+}
+
+.overview-charts {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.panel-card {
+  padding: 18px;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--panel-border);
+  background: var(--bg-elevated);
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: 12px;
+}
+
+.stat {
+  padding: 16px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-subtle);
+  min-height: 122px;
+}
+
+.stat-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.stat b {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.stat span {
+  display: block;
+  margin-top: 16px;
+  font-size: clamp(30px, 3vw, 40px);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.stat-value,
+.stat-value-button {
+  display: block;
+  margin-top: 16px;
+  font-size: clamp(30px, 3vw, 40px);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.stat-value-button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  width: fit-content;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 6px;
+  text-decoration-color: currentColor;
+  opacity: 0.86;
+  transition: transform 180ms ease, opacity 180ms ease;
+}
+
+.stat-value-button:hover {
+  transform: translateX(1px);
+  opacity: 1;
+}
+
+.stat-value-button:focus-visible {
+  outline: 3px solid var(--brand-focus);
+  outline-offset: 4px;
+  opacity: 1;
+}
+
+.stat.good {
+  background: var(--good-surface);
+}
+
+.stat.good .stat-value,
+.stat.good .stat-value-button {
+  color: var(--good);
+}
+
+.stat.warn {
+  background: var(--warn-surface);
+}
+
+.stat.warn .stat-value,
+.stat.warn .stat-value-button {
+  color: var(--warn);
+}
+
+.stat.bad {
+  background: var(--bad-surface);
+}
+
+.stat.bad .stat-value,
+.stat.bad .stat-value-button {
+  color: var(--bad);
+}
+
+.insight-card {
+  display: grid;
+  gap: 18px;
+  align-content: start;
+  background: var(--bg-panel-accent);
+}
+
+.overview-skill-card {
+  grid-column: 1 / -1;
+  display: grid;
+  gap: 16px;
+  background: linear-gradient(180deg, var(--bg-panel-accent) 0%, var(--bg-elevated) 100%);
+}
+
+.overview-skill-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 14px;
+}
+
+.overview-skill-head h3 {
+  margin: 6px 0 0;
+  font-size: 20px;
+}
+
+.overview-skill-head p {
+  margin: 8px 0 0;
+  color: var(--muted);
+  line-height: 1.65;
+}
+
+.overview-skill-stats {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.overview-skill-stat {
+  padding: 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-subtle);
+  display: grid;
+  gap: 8px;
+}
+
+.overview-skill-stat span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.overview-skill-stat strong {
+  font-size: 28px;
+  line-height: 1;
+}
+
+.overview-skill-highlights {
+  display: grid;
+  gap: 12px;
+}
+
+.overview-skill-item {
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 14px;
+  align-items: center;
+  text-align: left;
+}
+
+.overview-skill-item:hover {
+  border-color: var(--brand-soft-strong);
+  background: var(--surface-hover);
+}
+
+.overview-skill-item-main {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.overview-skill-item-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.overview-skill-item-head strong {
+  font-size: 15px;
+}
+
+.overview-skill-item-meta {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.overview-skill-item-side {
+  display: grid;
+  gap: 6px;
+  justify-items: end;
+}
+
+.overview-skill-item-side span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.overview-skill-item-side strong {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.chart-card {
+  display: grid;
+  gap: 14px;
+  align-content: start;
+}
+
+.trend-card {
+  grid-column: 1 / -1;
+}
+
+.chart-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.chart-head h3 {
+  margin: 0;
+  font-size: 19px;
+}
+
+.chart-subtitle {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.chart-empty {
+  padding: 12px 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-subtle);
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.chart-surface {
+  min-height: 230px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--surface-chart-border);
+  background: linear-gradient(180deg, var(--surface-chart-top) 0%, var(--surface-chart-bottom) 100%);
+  box-shadow: var(--shadow-inset);
+  padding: 12px 12px 6px;
+  position: relative;
+}
+
+.chart-card .recharts-legend-item-text {
+  color: var(--muted) !important;
+  font-size: 12px;
+}
+
+.chart-card .recharts-cartesian-axis-tick-value {
+  fill: var(--chart-tick);
+}
+
+.chart-card .recharts-cartesian-axis-line,
+.chart-card .recharts-cartesian-axis-tick-line {
+  stroke: var(--axis);
+}
+
+.chart-tooltip {
+  min-width: 120px;
+  max-width: 260px;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--surface-chart-border);
+  background: var(--surface-tooltip);
+  box-shadow: var(--shadow-float);
+}
+
+.chart-tooltip-title {
+  color: var(--ink);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.chart-tooltip-row {
+  margin-top: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.chart-tooltip-key,
+.chart-tooltip-value {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.donut-layout {
+  display: grid;
+  grid-template-columns: 190px minmax(0, 1fr);
+  gap: 18px;
+  align-items: center;
+}
+
+.donut-shell {
+  width: 190px;
+  height: 190px;
+  margin: 0 auto;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+}
+
+.donut-inner {
+  width: 118px;
+  height: 118px;
+  border-radius: 50%;
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  display: grid;
+  place-items: center;
+  text-align: center;
+  gap: 2px;
+}
+
+.donut-inner strong {
+  font-size: 28px;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
+.donut-inner span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.donut-legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.donut-legend-item {
+  min-height: 38px;
+  padding: 0 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-subtle);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.legend-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+}
+
+.legend-label {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.legend-value {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.distribution-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.distribution-item {
+  display: grid;
+  gap: 6px;
+}
+
+.distribution-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+}
+
+.distribution-label {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.distribution-value {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  flex: 0 0 auto;
+}
+
+.distribution-track {
+  height: 8px;
+  border-radius: 999px;
+  background: var(--surface-track);
+  overflow: hidden;
+}
+
+.distribution-bar {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+}
+
+.trend-chart-shell {
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-subtle);
+  padding: 10px 10px 4px;
+}
+
+.trend-chart {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.trend-axis {
+  stroke: var(--axis);
+  stroke-width: 1.2;
+}
+
+.trend-line {
+  fill: none;
+  stroke-width: 2.4;
+}
+
+.trend-line.total {
+  stroke: var(--chart-total);
+}
+
+.trend-line.risk {
+  stroke: var(--chart-risk);
+  stroke-dasharray: 5 5;
+}
+
+.trend-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.trend-legend {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.trend-chip {
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 800;
+  display: inline-flex;
+  align-items: center;
+}
+
+.trend-chip.total {
+  color: var(--chart-total);
+  background: var(--chart-total-soft);
+}
+
+.trend-chip.risk {
+  color: var(--bad);
+  background: var(--bad-soft);
+}
+
+.trend-peak {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.insight-head h3 {
+  margin: 8px 0 0;
+  font-size: 24px;
+  line-height: 1.2;
+}
+
+.insight-head p {
+  margin: 10px 0 0;
+  color: var(--muted);
+  line-height: 1.65;
+}
+
+.insight-list {
+  display: grid;
+  gap: 10px;
+}
+
+.insight-item {
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+}
+
+.insight-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+}
+
+.insight-item span {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.insight-item strong {
+  font-size: 18px;
+}
+
+.header-actions,
+.rule-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.meta-pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 38px;
+  padding: 0 14px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-panel-muted);
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 700;
+  border: 1px solid var(--line);
+}
+
+.meta-pill-highlight {
+  color: var(--brand);
+  background: var(--brand-soft);
+  border-color: var(--brand-soft-strong);
+}
+
+.meta-pill.severity-high,
+.meta-pill.severity-critical {
+  background: var(--bad-soft);
+  color: var(--bad);
+}
+
+.meta-pill.severity-medium {
+  background: var(--warn-soft);
+  color: var(--warn);
+}
+
+.meta-pill.severity-low {
+  background: var(--good-soft);
+  color: var(--good);
+}
+
+.link-pill {
+  text-decoration: none;
+}
+
+.table-wrap {
+  overflow-x: auto;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+}
+
+.decision-toolbar {
+  margin-bottom: 16px;
+  display: grid;
+  gap: 12px;
+}
+
+.decision-filter-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.filter-chip {
+  min-height: 36px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: var(--bg-subtle);
+  color: var(--muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.filter-chip:hover {
+  color: var(--ink);
+  background: var(--surface-hover);
+}
+
+.filter-chip.active {
+  color: var(--ink);
+  border-color: var(--brand-soft-strong);
+  background: linear-gradient(135deg, var(--brand-soft-strong) 0%, var(--brand-soft) 100%);
+  box-shadow: var(--shadow-subtle);
+}
+
+.filter-chip-count {
+  min-width: 22px;
+  min-height: 22px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--bg-elevated);
+  color: var(--brand);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.decision-toolbar-note {
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+table {
+  width: 100%;
+  min-width: 860px;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+th,
+td {
+  padding: 14px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--line-soft);
+  vertical-align: top;
+}
+
+th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--surface-table-head);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+tbody tr {
+  transition: background-color 180ms ease;
+}
+
+tbody tr:hover {
+  background: var(--surface-hover);
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.tag.meta-tag {
+  color: var(--ink);
+  background: var(--surface-neutral-chip);
+  border: 1px solid var(--surface-neutral-chip-border);
+}
+
+.tag.meta-tag.severity-high,
+.tag.meta-tag.severity-critical {
+  color: var(--bad);
+  background: var(--bad-soft);
+  border-color: var(--bad-border-soft);
+}
+
+.tag.meta-tag.severity-medium {
+  color: var(--warn);
+  background: var(--warn-soft);
+  border-color: var(--warn-border-soft);
+}
+
+.tag.meta-tag.severity-low {
+  color: var(--good);
+  background: var(--good-soft);
+  border-color: var(--good-border-soft);
+}
+
+.tag.allow {
+  color: var(--good);
+  background: var(--good-soft);
+}
+
+.tag.warn,
+.tag.challenge {
+  color: var(--warn);
+  background: var(--warn-soft);
+}
+
+.tag.block {
+  color: var(--bad);
+  background: var(--bad-soft);
+}
+
+.sensitive-path-panel {
+  margin-bottom: 18px;
+  padding: 18px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-panel-accent);
+  display: grid;
+  gap: 16px;
+}
+
+.sensitive-path-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.sensitive-path-head h3 {
+  margin: 8px 0 0;
+  font-size: 20px;
+}
+
+.sensitive-path-intro {
+  margin: 10px 0 0;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.65;
+  max-width: 780px;
+}
+
+.sensitive-path-toolbar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) minmax(220px, 320px) auto;
+  gap: 12px;
+  align-items: end;
+}
+
+.sensitive-path-selected {
+  min-height: 40px;
+  padding: 9px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  color: var(--ink);
+  font-family: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.sensitive-path-field {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.sensitive-path-field-wide {
+  min-width: 0;
+}
+
+.sensitive-path-field span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.sensitive-path-field select,
+.sensitive-path-field input {
+  min-height: 40px;
+  width: 100%;
+  padding: 0 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  color: var(--ink);
+}
+
+.sensitive-path-note {
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.sensitive-path-validation {
+  color: var(--bad);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.sensitive-path-groups,
+.sensitive-path-removed {
+  display: grid;
+  gap: 12px;
+}
+
+.sensitive-path-group,
+.sensitive-path-removed {
+  padding: 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+}
+
+.sensitive-path-group-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.sensitive-path-group-head h4 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.sensitive-path-group-head p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.sensitive-path-list {
+  margin-top: 12px;
+  display: grid;
+  gap: 10px;
+}
+
+.sensitive-path-item {
+  padding: 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-subtle);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.sensitive-path-item.configured {
+  border-color: var(--brand-soft-strong);
+  background: var(--bg-elevated);
+}
+
+.sensitive-path-item.muted {
+  opacity: 0.86;
+  background: var(--surface-ghost);
+}
+
+.sensitive-path-item-main {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.sensitive-path-item-pattern {
+  font-family: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  word-break: break-all;
+}
+
+.sensitive-path-item-tags {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.file-rule-item-actions {
+  display: grid;
+  grid-template-columns: minmax(160px, 260px) auto;
+  align-items: end;
+  gap: 10px;
+  min-width: 0;
+}
+
+.file-rule-action-field {
+  min-width: 0;
+  width: auto;
+  max-width: none;
+}
+
+.file-rule-item-actions .ghost.small {
+  white-space: nowrap;
+}
+
+.directory-picker-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  background: rgba(8, 15, 28, 0.52);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.directory-picker-card {
+  width: min(980px, 100%);
+  max-height: min(80vh, 760px);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-float);
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+}
+
+.directory-picker-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.directory-picker-head h4 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.directory-picker-toolbar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.directory-picker-current {
+  min-height: 36px;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-subtle);
+  font-family: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.directory-picker-roots {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.directory-picker-list {
+  display: grid;
+  gap: 8px;
+  max-height: min(52vh, 520px);
+  overflow: auto;
+  padding-right: 2px;
+}
+
+.directory-picker-item {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-subtle);
+  color: var(--ink);
+  display: grid;
+  gap: 3px;
+  text-align: left;
+}
+
+.directory-picker-item:hover {
+  border-color: var(--brand-soft-strong);
+  background: var(--bg-elevated);
+}
+
+.directory-picker-item-name {
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.directory-picker-item-path {
+  color: var(--muted);
+  font-family: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.confirm-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: rgba(8, 15, 28, 0.52);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.confirm-dialog-card {
+  width: min(560px, 100%);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-float);
+  padding: 16px;
+  display: grid;
+  gap: 12px;
+}
+
+.confirm-dialog-card h4 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.confirm-dialog-text {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.confirm-dialog-path {
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-subtle);
+  font-family: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.confirm-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.rules-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 14px;
+  align-items: start;
+}
+
+.rules-layout.with-side {
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
+}
+
+.rules {
+  display: grid;
+  gap: 18px;
+}
+
+.rule-group {
+  display: grid;
+  gap: 10px;
+}
+
+.rule-group-title {
+  margin: 4px 4px 0;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.rule {
+  padding: 16px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  display: grid;
+  gap: 12px;
+  cursor: pointer;
+  transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
+}
+
+.rule:hover {
+  box-shadow: var(--shadow-soft);
+  border-color: var(--brand-soft-strong);
+}
+
+.rule.active {
+  border-color: var(--brand-soft-strong);
+  box-shadow: var(--shadow-soft-strong);
+  background: var(--bg-panel-muted);
+}
+
+.rule:focus-visible {
+  outline: 3px solid var(--brand-focus);
+  outline-offset: 3px;
+}
+
+.rule-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 14px;
+}
+
+.rule-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.rule-head-side {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
+  gap: 8px;
+}
+
+.rule-tags {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+
+.rule-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.rule-meta-row {
+  row-gap: 8px;
+}
+
+.rule-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.rule-action-button {
+  min-height: 38px;
+  padding: 0 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--surface-ghost-strong);
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.rule-action-button.active {
+  color: var(--ink);
+  box-shadow: var(--shadow-soft-strong);
+}
+
+.rule-action-button.allow.active {
+  border-color: var(--good-border);
+  background: var(--good-soft);
+  color: var(--good);
+}
+
+.rule-action-button.warn.active,
+.rule-action-button.challenge.active {
+  border-color: var(--warn-border);
+  background: var(--warn-soft);
+  color: var(--warn);
+}
+
+.rule-action-button.block.active {
+  border-color: var(--bad-border);
+  background: var(--bad-soft);
+  color: var(--bad);
+}
+
+.rule-side-panel {
+  position: sticky;
+  top: 16px;
+}
+
+.rule-side-card {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  background: var(--bg-subtle);
+  padding: 16px;
+  display: grid;
+  gap: 14px;
+}
+
+.rule-side-empty {
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.rule-side-head h3 {
+  margin: 8px 0 0;
+  font-size: 19px;
+  line-height: 1.3;
+}
+
+.rule-side-head-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.rule-side-close {
+  min-height: 32px;
+  padding: 0 12px;
+}
+
+.rule-side-notes {
+  display: grid;
+  gap: 8px;
+}
+
+.rule-side-note {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  padding: 10px 12px;
+}
+
+.rule-side-note h5,
+.rule-chat-panel h5 {
+  margin: 0 0 6px;
+  font-size: 13px;
+}
+
+.rule-side-note p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.rule-chat-panel {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--bg-panel-muted);
+  padding: 10px 12px;
+  display: grid;
+  gap: 8px;
+}
+
+.rule-chat {
+  display: grid;
+  gap: 8px;
+}
+
+.rule-message {
+  max-width: 92%;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line-soft);
+  background: var(--bg-elevated);
+  padding: 8px 10px;
+}
+
+.rule-message.user {
+  margin-left: auto;
+  border-color: var(--surface-user-message-border);
+  background: var(--surface-user-message);
+}
+
+.rule-message.system {
+  border-color: var(--surface-system-message-border);
+  background: var(--surface-system-message);
+}
+
+.rule-message-role {
+  display: inline-flex;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.rule-message p {
+  margin: 4px 0 0;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.rule-desc {
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.65;
+}
+
+.pagination {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--line);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.pagination-summary {
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.page-button {
+  min-width: 38px;
+  min-height: 38px;
+  padding: 0 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.page-button.active {
+  border-color: var(--brand-soft-strong);
+  background: linear-gradient(135deg, var(--brand-soft-strong) 0%, var(--brand-soft) 100%);
+  color: var(--ink);
+}
+
+.accounts-panel {
+  display: grid;
+  gap: 18px;
+}
+
+.accounts-intro {
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.65;
+  max-width: 880px;
+}
+
+.account-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.account-picker {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.account-picker select,
+.account-field select {
+  min-height: 40px;
+  min-width: min(420px, 80vw);
+  padding: 0 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  color: var(--ink);
+}
+
+.account-list {
+  display: grid;
+  gap: 14px;
+}
+
+.account-card {
+  padding: 18px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, var(--surface-account-card-top) 0%, var(--surface-account-card-bottom) 100%);
+  display: grid;
+  gap: 16px;
+}
+
+.account-card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.account-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.account-title-row h3 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.account-subject {
+  margin-top: 8px;
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.account-meta {
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.account-controls {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.account-field {
+  display: grid;
+  gap: 8px;
+}
+
+.account-field span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.account-toggle {
+  min-height: 40px;
+  padding: 0 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.account-toggle.disabled {
+  opacity: 0.58;
+}
+
+.account-toggle input {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+}
+
+.skills-intro,
+.skill-detail-intro {
+  margin: 8px 0 0;
+  color: var(--muted);
+  line-height: 1.65;
+}
+
+.skills-panel {
+  display: grid;
+  gap: 18px;
+}
+
+.skills-metrics {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.skills-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.skill-list-panel,
+.skill-detail-panel,
+.skill-policy-panel {
+  background: linear-gradient(180deg, var(--surface-chart-top) 0%, var(--surface-chart-bottom) 100%);
+  border: 1px solid var(--surface-chart-border);
+  box-shadow: var(--shadow-soft);
+}
+
+.skill-list-panel,
+.skill-detail-panel,
+.skill-policy-panel,
+.skills-metrics .stat {
+  border-radius: var(--radius-lg);
+}
+
+.skill-list-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 14px;
+  margin-bottom: 16px;
+}
+
+.skills-toolbar {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.skill-filter-field,
+.skill-policy-field {
+  display: grid;
+  gap: 8px;
+}
+
+.skill-filter-field span,
+.skill-policy-field span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.skill-filter-field select,
+.skill-policy-field select,
+.skill-policy-field input {
+  width: 100%;
+  min-height: 42px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  color: var(--ink);
+  padding: 0 12px;
+  box-shadow: var(--shadow-inset);
+}
+
+.skill-list {
+  display: grid;
+  gap: 12px;
+}
+
+.skill-row {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 14px;
+  align-items: center;
+  padding: 16px;
+  text-align: left;
+  background: var(--bg-elevated);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-subtle);
+}
+
+.skill-row:hover {
+  border-color: var(--brand-soft-strong);
+  background: var(--surface-hover);
+}
+
+.skill-row.active {
+  border-color: var(--brand);
+  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--brand-soft) 100%);
+  box-shadow: var(--shadow-brand);
+}
+
+.skill-row-main {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.skill-row-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.skill-row-title {
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.skill-row-meta,
+.skill-row-subline,
+.skill-row-foot {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.skill-row-foot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 14px;
+}
+
+.skill-row-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.skill-row-side {
+  min-width: 88px;
+  padding: 12px 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line-soft);
+  background: var(--surface-ghost);
+  display: grid;
+  justify-items: end;
+  gap: 4px;
+}
+
+.skill-row-side strong {
+  font-size: 22px;
+  line-height: 1;
+}
+
+.skill-row-side span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.skill-detail-panel {
+  position: sticky;
+  top: 18px;
+  display: grid;
+  gap: 16px;
+}
+
+.skill-detail-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 14px;
+}
+
+.skill-detail-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.skill-score-card {
+  padding: 16px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-elevated) 100%);
+}
+
+.skill-score-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.skill-score-label {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.skill-score-value {
+  margin-top: 8px;
+  font-size: 38px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.skill-score-side {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.skill-score-track {
+  margin-top: 16px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--surface-track);
+  overflow: hidden;
+}
+
+.skill-score-track span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--brand) 0%, var(--warn) 55%, var(--bad) 100%);
+}
+
+.skill-score-meta {
+  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 14px;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.skill-meta-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.skill-meta-item {
+  padding: 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  display: grid;
+  gap: 6px;
+}
+
+.skill-meta-item span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.skill-meta-item strong {
+  min-width: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.skill-meta-item-wide {
+  grid-column: 1 / -1;
+}
+
+.skill-section {
+  display: grid;
+  gap: 12px;
+}
+
+.skill-section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.skill-section h4 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.skill-finding-list,
+.skill-activity-list {
+  display: grid;
+  gap: 12px;
+}
+
+.skill-finding-card,
+.skill-activity-item {
+  padding: 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  display: grid;
+  gap: 10px;
+}
+
+.skill-finding-head,
+.skill-activity-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.skill-finding-card p,
+.skill-activity-item p {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.65;
+}
+
+.skill-finding-card code {
+  display: block;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-ghost);
+  color: var(--ink);
+  border: 1px solid var(--line-soft);
+  overflow-x: auto;
+}
+
+.skill-activity-title {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.skill-policy-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.skill-policy-grid-secondary {
+  margin-top: 16px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.skill-policy-table-wrap {
+  margin-top: 16px;
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+}
+
+.skill-policy-table {
+  width: 100%;
+  min-width: 760px;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.skill-policy-table th,
+.skill-policy-table td {
+  padding: 12px;
+  border-bottom: 1px solid var(--line);
+  border-right: 1px solid var(--line);
+  vertical-align: middle;
+}
+
+.skill-policy-table th:last-child,
+.skill-policy-table td:last-child {
+  border-right: 0;
+}
+
+.skill-policy-table tbody tr:last-child th,
+.skill-policy-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.skill-policy-table thead th {
+  background: var(--surface-table-head);
+  color: var(--ink);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.skill-policy-table tbody th {
+  background: var(--bg-elevated);
+  min-width: 180px;
+  text-align: left;
+}
+
+.skill-policy-table select {
+  width: 100%;
+  min-height: 40px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  color: var(--ink);
+  padding: 0 12px;
+}
+
+@keyframes rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 1040px) {
+  .overview-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .overview-charts {
+    grid-template-columns: 1fr;
+  }
+
+  .trend-card {
+    grid-column: auto;
+  }
+
+  .rules-layout.with-side {
+    grid-template-columns: 1fr;
+  }
+
+  .rule-side-panel {
+    position: static;
+    margin-top: 0 !important;
+  }
+
+  .skills-metrics,
+  .skill-policy-grid,
+  .skill-policy-grid-secondary,
+  .skills-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .skill-detail-panel {
+    position: static;
+    top: auto;
+  }
+
+  .overview-skill-stats {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .app {
+    width: 100%;
+  }
+
+  .workspace,
+  .panel-card {
+    padding: 16px;
+  }
+
+  .workspace-top,
+  .card-head,
+  .rule-head,
+  .account-card-head,
+  .sensitive-path-head,
+  .sensitive-path-item,
+  .sensitive-path-group-head,
+  .skill-list-head,
+  .skill-detail-head,
+  .skill-row-head,
+  .skill-finding-head,
+  .skill-activity-top,
+  .skill-score-top,
+  .overview-skill-head,
+  .overview-skill-item-head {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .sensitive-path-toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .file-rule-item-actions {
+    width: 100%;
+    grid-template-columns: 1fr;
+  }
+
+  .file-rule-action-field {
+    min-width: 0;
+    max-width: none;
+  }
+
+  .directory-picker-backdrop {
+    padding: 12px;
+  }
+
+  .directory-picker-card {
+    max-height: 86vh;
+    padding: 12px;
+  }
+
+  .directory-picker-toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .confirm-dialog-backdrop {
+    padding: 12px;
+  }
+
+  .confirm-dialog-card {
+    width: 100%;
+    padding: 14px;
+  }
+
+  .toolbar-controls {
+    margin-left: 0;
+    justify-content: flex-start;
+  }
+
+  .control-group {
+    width: auto;
+    justify-content: flex-start;
+  }
+
+  .workspace-heading {
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .chart-head {
+    align-items: flex-start;
+  }
+
+  .tablist {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  .tab-button {
+    flex: 0 0 auto;
+  }
+
+  .rule-head-side {
+    width: 100%;
+    align-items: flex-start;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .rule-tags {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .rule-side-card {
+    padding: 14px;
+  }
+
+  .workspace-title h1 {
+    font-size: 26px;
+  }
+
+  .stats {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .pagination {
+    align-items: stretch;
+  }
+
+  .account-picker,
+  .account-controls {
+    align-items: stretch;
+  }
+
+  .account-picker select,
+  .account-field select,
+  .skill-filter-field select,
+  .skill-policy-field select,
+  .skill-policy-field input {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .skills-toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .skills-metrics {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .overview-skill-stats {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .skill-row {
+    grid-template-columns: 1fr;
+  }
+
+  .overview-skill-item {
+    grid-template-columns: 1fr;
+  }
+
+  .skill-row-side,
+  .skill-detail-actions,
+  .overview-skill-item-side {
+    justify-items: start;
+    justify-content: flex-start;
+  }
+
+  .skill-meta-grid {
+    grid-template-columns: 1fr;
+  }
+
+  th,
+  td {
+    padding: 12px 10px;
+  }
+}
+
+@media (max-width: 560px) {
+  .workspace-title h1 {
+    font-size: 22px;
+  }
+
+  .distribution-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .stats {
+    grid-template-columns: 1fr;
+  }
+
+  .overview-skill-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .tab-count {
+    min-width: 18px;
+  }
+
+  .pagination-controls {
+    width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+}