keywrod slibrary page dsigning

frontend/src/styles/design-system.css

@@ -184,6 +184,81 @@
    SECTION 3: TAILWIND CONFIGURATION
    =================================================================== */
 
+/* ===================================================================
+   KEYWORDS LIBRARY - SECTOR CARDS
+   =================================================================== */
+
+.keywords-library-sector-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+@media (min-width: 1024px) {
+  .keywords-library-sector-grid {
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  }
+}
+
+.keywords-library-sector-card {
+  padding: 16px;
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--color-stroke);
+  background: var(--color-panel);
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.keywords-library-sector-card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-stroke));
+  transform: translateY(-1px);
+}
+
+.keywords-library-sector-card.is-active {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent), var(--shadow-md);
+}
+
+.keywords-library-sector-card .sector-card-accent {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: var(--gradient-primary);
+  opacity: 0.9;
+}
+
+.keywords-library-sector-card .sector-card-active-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
+}
+
+.keywords-library-sector-card .sector-stats-pill {
+  border-radius: var(--radius-lg);
+  background: var(--color-panel-alt);
+  border: 1px solid var(--color-stroke);
+  padding: 8px;
+}
+
+.keywords-library-sector-card .sector-stats-pill .label {
+  color: var(--color-text-dim);
+  font-size: 12px;
+}
+
+.keywords-library-sector-card .sector-stats-pill .value {
+  color: var(--color-text);
+  font-weight: 600;
+  font-size: 14px;
+}
+
 /*
    🚫 TAILWIND DEFAULT COLORS ARE DISABLED