@e-llm-studio/instant-learning 0.1.1-alpha.34 → 0.1.1-alpha.36

package/dist/index.css

@@ -0,0 +1,5038 @@
+@import "https://fonts.googleapis.com/css2?family=Inter:wght@400..900&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&display=swap";
+
+/* src/features/InstantLearning/InstantLearning.module.css */
+.customFont {
+  font-family: "Plus Jakarta Sans", sans-serif;
+}
+
+/* src/features/InstantLearning/_components/ChatComponent.css */
+.welcome-message {
+  display: fixed;
+  align-items: flex-start;
+  padding: 1rem;
+  max-width: 100%;
+  font-size: 1rem;
+  line-height: 1.75rem;
+  border-radius: 0.5rem;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  color: #333;
+  opacity: 0;
+  transform: translateY(10px);
+  animation: fadeSlideIn 1.2s ease-out forwards;
+}
+@keyframes fadeSlideIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* src/features/WtaWnta/WtaWnta.module.css */
+:global(body) {
+  font-family: "Inter", sans-serif;
+}
+:global(body) {
+  font-family: "Inter", sans-serif;
+}
+.parentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  width: 100%;
+}
+
+/* src/features/DocumentLearning/InstantLearning.module.css */
+.customFont {
+  font-family: "Plus Jakarta Sans", sans-serif;
+}
+
+/* src/features/DocumentLearning/_components/ChatComponent.css */
+.welcome-message {
+  display: fixed;
+  align-items: flex-start;
+  padding: 1rem;
+  max-width: 100%;
+  font-size: 1rem;
+  line-height: 1.75rem;
+  border-radius: 0.5rem;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  color: #333;
+  opacity: 0;
+  transform: translateY(10px);
+  animation: fadeSlideIn 1.2s ease-out forwards;
+}
+@keyframes fadeSlideIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* src/features/IL-OTJ/_components/ChatComponents/ChatHeader.module.css */
+.chat-header-container {
+  width: 100%;
+  padding: 0.65rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  border-bottom: 1px solid #e5e7eb;
+  position: relative;
+  box-sizing: border-box;
+}
+.chat-header-title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+}
+.chat-header-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.chat-header-title {
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: #111827;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+.chat-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-left: 1rem;
+}
+.resize-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.resize-trigger {
+  height: 2rem;
+  width: 2rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ease;
+}
+.resize-dropdown {
+  position: absolute;
+  top: 35px;
+  right: 0;
+  background-color: white;
+  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.12);
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 8px;
+  display: flex;
+  gap: 6px;
+  z-index: 1000;
+  white-space: nowrap;
+}
+.resize-option {
+  padding: 4px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  transition: all 0.2s ease;
+  border: 1px solid #f3f4f6;
+  background-color: transparent;
+}
+.resize-option.selected {
+  background-color: #f0f0ff;
+  border: 1px solid #512ced;
+}
+.new-chat-trigger {
+  height: 2rem;
+  width: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.new-chat-trigger.enabled {
+  cursor: pointer;
+  opacity: 1;
+}
+.new-chat-trigger.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* src/features/IL-OTJ/_components/atoms/SkeletonLoader/SkeletonLoader.module.css */
+.skeleton {
+  background:
+    linear-gradient(
+      90deg,
+      #e0e0e0 25%,
+      #f0f0f0 37%,
+      #e0e0e0 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 4px;
+  display: inline-flex;
+  margin: 0px;
+}
+.skeleton-text {
+  height: 14px;
+  width: 100%;
+}
+.skeleton-title {
+  height: 20px;
+  width: 60%;
+}
+.skeleton-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+}
+.skeleton-image {
+  width: 100%;
+  height: 180px;
+  border-radius: 8px;
+}
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+
+/* src/features/IL-OTJ/_components/ChatComponents/ChatComponent.module.css */
+.welcome-message {
+  display: fixed;
+  align-items: flex-start;
+  padding: 1rem;
+  max-width: 100%;
+  font-size: 1rem;
+  line-height: 1.75rem;
+  border-radius: 0.5rem;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  color: #333;
+  opacity: 0;
+  transform: translateY(10px);
+  animation: fadeSlideIn 1.2s ease-out forwards;
+}
+@keyframes fadeSlideIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.thinkingIndicatorContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background-color: transparent;
+  border-radius: 4px;
+  width: 100%;
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+.thinkingText {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.thinkingDot {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: #6b7280;
+  animation: thinkingBounce 1.4s infinite ease-in-out;
+  animation-fill-mode: both;
+}
+.thinkingDot:nth-child(2) {
+  animation-delay: -0.32s;
+}
+.thinkingDot:nth-child(3) {
+  animation-delay: -0.16s;
+}
+.thinkingDot:nth-child(4) {
+  animation-delay: 0s;
+}
+@keyframes thinkingBounce {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1.0);
+  }
+}
+.chatContainer {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: "Plus Jakarta Sans", sans-serif;
+  background-color: #fbfaff;
+  border: 1px solid #d1d5db;
+  overflow: hidden;
+}
+.scrollWrapper {
+  width: 100%;
+  height: 100%;
+  background-color: #fbfaff;
+  max-width: 100%;
+  overflow: auto;
+}
+.stickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  background-color: #fbfaff;
+}
+.messagesList {
+  flex: 1;
+  overflow-y: auto;
+  background-color: #fbfaff;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+.initialMessageRow {
+  display: flex;
+  flex-direction: row;
+  font-family: inherit;
+  padding: 16px 10px 0px 16px;
+}
+.iconWrapper {
+  max-height: 32px;
+  max-width: 32px;
+  margin-top: 0.3rem;
+}
+.welcomeTextWrapper {
+  display: flex;
+  flex-direction: column;
+  font-weight: 400;
+  color: #000;
+}
+.welcomeMarkdownWrapper {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  width: 100%;
+  max-width: 100%;
+  font-size: 1rem;
+  line-height: 1.75rem;
+  margin-bottom: 1rem;
+  border-radius: 0.5rem;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  color: #333;
+}
+.messageRow {
+  display: flex;
+  padding: 0.5rem 1.25rem 0.5rem 1.15rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+.assistantIconContainer {
+  min-width: 32px;
+  max-width: 32px;
+  margin-top: 0.5rem;
+  margin-right: 0.7rem;
+}
+.userSpacer {
+  min-width: 32px;
+  margin-right: 1rem;
+}
+.messageContent {
+  flex: 1;
+  min-width: 0;
+}
+.timestamp {
+  color: #BFBFBF;
+  font-size: 0.75rem;
+  margin-top: 4px;
+}
+.userMessageWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.userMessageBubble {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  background-color: #8694A10D;
+  padding: 0rem 1rem 0.5rem 1rem;
+  border-radius: 8px;
+  max-width: 80%;
+}
+.userTimestamp {
+  color: #BFBFBF;
+  font-size: 0.75rem;
+  margin-top: 8px;
+  padding-right: 16px;
+}
+.loadingRow {
+  display: flex;
+  padding: 16px 16px 0px 16px;
+}
+.loadingTextWrapper {
+  display: inline-flex;
+  align-items: flex-start;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 1rem;
+  width: 100%;
+  max-width: 100%;
+  font-size: 1rem;
+  line-height: 1.75rem;
+  margin-bottom: 1rem;
+  border-radius: 0.5rem;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  color: #333;
+}
+.inputAreaWrapper {
+  width: 95%;
+  height: fit-content;
+  background-color: #fbfaff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+}
+.inputBoxContainer {
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  position: relative;
+}
+.inputBoxContainer.disabled {
+  cursor: not-allowed;
+}
+.scrollToBottomBtn {
+  position: absolute;
+  top: -34px;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: #ffffff;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  z-index: 10;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+.chatTextarea {
+  flex-grow: 1;
+  padding: 12px;
+  border-radius: 0.5rem;
+  border: none;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  resize: none;
+  background-color: #fff;
+  color: inherit;
+  overflow-y: auto;
+  font-family: inherit;
+  outline: none;
+  transition: min-height 0.3s ease, background-color 0.3s ease;
+  box-sizing: border-box;
+}
+.chatTextarea:disabled {
+  cursor: not-allowed;
+}
+.sendButtonWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+.sendButton {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.475rem;
+  border: none;
+  background-color: white;
+  font-weight: bold;
+  font-size: 1rem;
+  height: 50px;
+  transition: background-color 0.3s, color 0.3s;
+}
+.sendButton.active {
+  color: #5928ed;
+  cursor: pointer;
+}
+.sendButton.disabled {
+  color: #d1d5db;
+  cursor: not-allowed;
+}
+.footerTools {
+  width: 95%;
+  display: flex;
+  gap: 0.25rem;
+  flex-direction: row;
+}
+.footerToolItem {
+  width: 50%;
+}
+
+/* src/features/IL-OTJ/InstantLearning.module.css */
+.customFont {
+  font-family: "Plus Jakarta Sans", sans-serif;
+}
+
+/* src/features/LearningManagement/styles/LearningTemplateManagement.module.css */
+.learningManagementContainer {
+  font-family: sans-serif;
+}
+.backBtn {
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+.backBtn:hover {
+  background-color: #f3f4f6;
+}
+.backIcon {
+  height: 1.25rem;
+  width: 1.25rem;
+  color: #4b5563;
+}
+.mainWrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 140px);
+  background-color: #ffffff;
+}
+.errorContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 2rem;
+  background-color: #fef2f2;
+  border-radius: 0.5rem;
+  border: 1px solid #fecaca;
+  max-width: 480px;
+}
+.errorTitle {
+  color: #ef4444;
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+.errorDesc {
+  color: #4b5563;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+.tryAgainBtn {
+  padding: 0.5rem 1rem;
+  background-color: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.tryAgainBtn:hover {
+  background-color: #f9fafb;
+}
+.highlight {
+  font-weight: 500;
+  color: #111827;
+}
+
+/* src/features/LearningManagement/styles/EmptyRuleState.module.css */
+.container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem;
+}
+.card {
+  text-align: center;
+  width: 100%;
+  max-width: 600px;
+  padding: 4rem 2.5rem;
+  border: 1px solid #f3f4f6;
+  border-radius: 1rem;
+  background-color: #ffffff;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.iconContainer {
+  width: 5rem;
+  height: 5rem;
+  background-color: #f9fafb;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  position: relative;
+}
+.iconLines {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  opacity: 0.2;
+  transform: scale(1.1);
+}
+.iconLine {
+  height: 0.375rem;
+  background-color: #60a5fa;
+  border-radius: 9999px;
+}
+.iconLineLong {
+  width: 2.5rem;
+}
+.iconLineShort {
+  width: 1.75rem;
+}
+.iconBadge {
+  position: absolute;
+  right: -0.25rem;
+  bottom: -0.25rem;
+  background-color: #ffffff;
+  border-radius: 9999px;
+  padding: 0.375rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  border: 1px solid #f9fafb;
+}
+.iconBadge svg {
+  color: #d1d5db;
+}
+.title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 0.5rem;
+}
+.description {
+  color: #6b7280;
+  margin-bottom: 2rem;
+  font-size: 0.875rem;
+}
+.createButton {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: #2563EB;
+  color: #ffffff;
+  padding: 0.625rem 1.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s, box-shadow 0.2s;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+.createButton:hover {
+  background-color: #1d4ed8;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+/* src/features/LearningManagement/styles/LearningContentSkeleton.module.css */
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 140px);
+  overflow: hidden;
+  background-color: #ffffff;
+}
+.contentHeader {
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+.headerGap {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.headerRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.headerInfo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.headerTextGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.headerActions {
+  display: flex;
+  gap: 0.5rem;
+}
+.tabsRow {
+  margin-top: 1rem;
+  display: flex;
+  gap: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+.tabItem {
+  padding-bottom: 0.75rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.rulesWrapper {
+  flex: 1;
+  padding: 1.5rem;
+  background-color: rgba(249, 250, 251, 0.5);
+  overflow-y: auto;
+}
+.rulesList {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.tierContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.tierHeaderRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ruleItemCard {
+  background-color: #ffffff;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  padding: 1rem;
+}
+.ruleCardRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+.ruleCardInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.ruleTitleRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.ruleCardFooter {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+}
+
+/* src/features/LearningManagement/styles/skeleton.module.css */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.skeleton {
+  background-color: #e5e7eb;
+  border-radius: 0.375rem;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  display: block;
+  width: 100%;
+}
+
+/* src/features/LearningManagement/styles/RuleHeader.module.css */
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid transparent;
+}
+.info h1 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #19213D;
+  margin-bottom: 0.25rem;
+}
+.description {
+  font-size: 0.875rem;
+  color: #666F8D;
+  font-weight: 400;
+}
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.exemptionButton {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #2563EB;
+  background-color: #ffffff;
+  border: 1px solid #2563EB;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+  white-space: nowrap;
+}
+.exemptionButton:hover {
+  background-color: rgba(37, 99, 235, 0.1);
+}
+.addRuleButton {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #ffffff;
+  background-color: #2563EB;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+.addRuleButton:hover {
+  background-color: #1D4ED8;
+}
+.exportButton {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #19213D;
+  background-color: #ffffff;
+  border: 1px solid #E2E8F0;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+.exportButton:hover:not(:disabled) {
+  background-color: #F8FAFC;
+  border-color: #CBD5E1;
+}
+.exportButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* src/features/LearningManagement/styles/RuleAccordion.module.css */
+.accordion {
+  border: 1px solid #E3E6EA;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background-color: #ffffff;
+  margin-bottom: 1rem;
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+.accordionOpen {
+  border-color: #2563EB;
+  border-width: 1.5px;
+}
+.accordionHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  user-select: none;
+  background-color: #ffffff;
+}
+.accordionHeader:hover {
+  background-color: #FAFCFF;
+}
+.headerContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+.headerTopRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+.titleSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  width: 100%;
+}
+.titleRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.dragHandle {
+  margin-right: 0.75rem;
+  color: #94a3b8;
+  cursor: grab;
+  transition: color 0.15s ease-in-out;
+}
+.dragHandle:hover {
+  color: #475569;
+}
+.dragHandle:active {
+  cursor: grabbing;
+}
+.overriddenTag {
+  font-family: sans-serif;
+  padding: 2px 8px;
+  color: #19213D;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  border-radius: 200px;
+  border: 1px solid #F1F5F9;
+  background: #F8FAFC;
+}
+.ruleTitle {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #19213D;
+}
+.dataSourceTag {
+  padding: 0.125rem 0.5rem;
+  background-color: #F7F8FA;
+  color: #666F8D;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 1.5rem;
+  border: 1px solid #F3F2F2;
+}
+.learningDisabledPill {
+  background-color: #FFF7ED;
+  color: #C2410C;
+  border: 1px solid #FFEDD5;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  min-width: fit-content;
+}
+.chevronIcon {
+  color: #000000;
+}
+.divider {
+  background-color: #F0F2F5;
+  height: 1px;
+  width: 100%;
+}
+.footerRow {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 0.25rem;
+}
+.headerButtonGroup {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: auto;
+}
+.toggleLearningButton {
+  background: none;
+  border: none;
+  padding: 0;
+  color: #64748B;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+.toggleLearningButton:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+.deleteButton {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #EF4444;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+.deleteButton:hover {
+  color: #DC2626;
+}
+.inheritanceBreadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: #666F8D;
+}
+.inheritanceIcon {
+  color: #0F172A;
+}
+.inheritanceLabel {
+  color: #0F172A;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 150%;
+}
+.inheritanceItems {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.inheritanceItem {
+  font-weight: 500;
+  font-size: 11px;
+  border: 1px solid;
+  padding: 4px 6px;
+  border-radius: 9999px;
+  margin-top: 2px;
+}
+.inheritanceItemDefault {
+  color: #19213D;
+  background-color: #ffffff;
+  border-color: #F1F5F9;
+}
+.inheritanceItemCurrent {
+  color: #2563EB;
+  background-color: #EFF6FF;
+  border-color: #DBEAFE;
+}
+.inheritanceArrow {
+  color: #B1B4C0;
+}
+.accordionContent {
+  padding: 1rem;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.contentInner {
+  padding: 1rem;
+  background-color: #FAFCFF;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid #E3E6EA;
+}
+.contentHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+.variantChipWrapper {
+  width: 100%;
+}
+.variantChip {
+  padding: 0.25rem 0.5rem;
+  background-color: #ffffff;
+  border: 1px solid #F0F2F5;
+  color: #19213D;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 0.25rem;
+}
+.contentActions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.overrideButton {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #64748B;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  transition: color 0.2s ease;
+  text-wrap: nowrap;
+}
+.overrideButton:hover {
+  color: #19213D;
+}
+.actionDivider {
+  color: #D1D5DB;
+}
+.editButton {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #2563EB;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+.editButton:hover {
+  color: #1D4ED8;
+}
+.descriptionBox {
+  position: relative;
+  z-index: 10;
+}
+.descriptionContainer {
+  font-size: 0.9375rem;
+  color: #0F172A;
+  border: 1px solid #E3E6EA;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  background-color: #ffffff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+.descriptionContainerWithHistory {
+  border-color: #E3E6EA;
+  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
+}
+.footerInfoRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+.warningContainer {
+  display: flex;
+  align-items: center;
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+}
+.warningText {
+  color: #EF4444;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 120%;
+  margin-left: 0.25rem;
+}
+.metadataGroup {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.metadataText {
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 120%;
+}
+.descriptionHeader {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.descriptionText {
+  line-height: 1.4;
+  font-weight: 500;
+}
+.treeContainer {
+  padding-left: 1.5rem;
+  position: relative;
+  padding-top: 0.5rem;
+}
+.conditionBlock {
+  position: relative;
+}
+.conditionBlockApply .verticalLine {
+  position: absolute;
+  left: 8px;
+  top: -12px;
+  bottom: 0;
+  width: 1px;
+  background-color: #CFD4DC;
+}
+.conditionBlockApply .horizontalLine {
+  position: absolute;
+  left: 8px;
+  top: 11px;
+  width: 1.25rem;
+  height: 1.5px;
+  background-color: #CFD4DC;
+  border-radius: 2px;
+}
+.conditionBlockNotApply .curvedLine {
+  position: absolute;
+  left: 8px;
+  top: -23px;
+  height: 36px;
+  width: 1.25rem;
+  border-left: 1.5px solid #CFD4DC;
+  border-bottom: 1.5px solid #CFD4DC;
+  border-bottom-left-radius: 0.75rem;
+}
+.conditionContent {
+  margin-left: 1.75rem;
+  border-radius: 0.5rem;
+  padding-left: 0px;
+}
+.conditionHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6B7280;
+  cursor: pointer;
+  user-select: none;
+}
+.conditionHeader:hover .conditionLabel {
+  color: #000000;
+}
+.conditionIconWrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.conditionIconApply {
+  background-color: #4AD562;
+  color: #ffffff;
+  border-radius: 9999px;
+  padding: 0.125rem;
+  z-index: 10;
+  box-shadow: 0 0 0 4px #ffffff;
+  position: relative;
+}
+.conditionIconNotApply {
+  background-color: #FF6058;
+  color: #ffffff;
+  border-radius: 9999px;
+  padding: 0.125rem;
+  z-index: 10;
+  box-shadow: 0 0 0 4px #ffffff;
+  position: relative;
+}
+.conditionLabel {
+  color: #19213D;
+  font-size: 0.875rem;
+  font-weight: 400;
+  transition: color 0.2s ease;
+}
+.conditionToggleButton {
+  color: #666F8D;
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin-left: 0.25rem;
+  transition: color 0.2s ease;
+}
+.conditionToggleButton:hover {
+  color: #666F8D;
+}
+.chevronOpen {
+}
+.chevronClosed {
+  transform: rotate(180deg);
+}
+.conditionItems {
+  padding-left: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.conditionItemContainer {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875rem;
+  color: #19213D;
+  padding: 0.75rem;
+  padding-bottom: 0;
+  padding-left: 0;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s ease;
+}
+.conditionItemHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.conditionItemContent {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+.conditionList {
+  list-style-type: decimal;
+  list-style-position: outside;
+  margin: 0;
+  padding-left: 1.25rem;
+}
+.conditionListItem {
+  margin-bottom: 0.35rem;
+  color: #000000;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.conditionItemText {
+  color: #000000;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.conditionItemText > div {
+  margin-bottom: 0.35rem;
+}
+.noConditions {
+  font-size: 0.75rem;
+  color: #98A2B3;
+  margin-top: 0.375rem;
+}
+.collapsedPadding {
+  padding-bottom: 0;
+}
+.errorMessage {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #EF4444;
+  font-size: 0.75rem;
+  margin-top: 0.5rem;
+}
+.spinner {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* src/features/LearningManagement/styles/CustomTooltip.module.css */
+.tooltipContent {
+  font-family: sans-serif;
+  background-color: #2A3547;
+  color: #ffffff;
+  position: relative;
+  z-index: 50;
+  width: auto;
+  max-width: 90vw;
+  padding: 0.75rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+@media (min-width: 640px) {
+  .tooltipContent {
+    max-width: 32rem;
+  }
+}
+.arrow {
+  position: absolute;
+  fill: #2A3547;
+}
+.arrow_top {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 100%);
+}
+.arrow_bottom {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -100%) rotate(180deg);
+}
+.arrow_left {
+  right: 0;
+  top: 50%;
+  transform: translate(100%, -50%) rotate(-90deg);
+}
+.arrow_right {
+  left: 0;
+  top: 50%;
+  transform: translate(-100%, -50%) rotate(90deg);
+}
+.customTooltip {
+  background-color: #2A3547;
+  color: #ffffff;
+  padding: 8px 16px;
+  border-radius: 12px;
+}
+
+/* src/features/LearningManagement/styles/ConfirmationModal.module.css */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.modal {
+  position: relative;
+  width: 680px;
+  max-width: 90%;
+  border-radius: 0.75rem;
+  background-color: #ffffff;
+  padding: 1.5rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+}
+.header {
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.headerContent {
+  flex: 1;
+}
+.title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #19213D;
+  margin: 0;
+}
+.description {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: #4B5563;
+  line-height: 1.5;
+}
+.warning {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #EA580C;
+}
+.closeBtn {
+  color: #9CA3AF;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  transition: color 0.2s, background-color 0.2s;
+}
+.closeBtn:hover {
+  color: #4B5563;
+  background-color: #F3F4F6;
+}
+.closeBtn:focus {
+  outline: none;
+}
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+.cancelBtn {
+  border-radius: 0.375rem;
+  border: none;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #4B5563;
+  background-color: transparent;
+  cursor: pointer;
+  transition: color 0.2s, background-color 0.2s;
+}
+.cancelBtn:hover:not(:disabled) {
+  color: #1F2937;
+  background-color: #F3F4F6;
+}
+.cancelBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.confirmBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  transition: filter 0.2s;
+}
+.confirmBtn:hover:not(:disabled) {
+  filter: brightness(0.9);
+}
+.confirmBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.spinner {
+  margin-right: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+  animation: spin 1s linear infinite;
+  color: #ffffff;
+}
+
+/* src/features/LearningManagement/styles/ToolTip.module.css */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+.tooltipContent {
+  background-color: #1E293B;
+  color: #F8FAFC;
+  transform-origin: var(--radix-tooltip-content-transform-origin);
+  z-index: 50;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  font-family: sans-serif;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.tooltipContent[data-state=delayed-open],
+.tooltipContent[data-state=instant-open] {
+  animation: fadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.tooltipContent[data-state=closed] {
+  animation: fadeOut 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* src/features/LearningManagement/styles/common.module.css */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.historyContainer {
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+  padding-left: 0.5rem;
+}
+.historyHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.historyHeaderIcon {
+  height: 1rem;
+  width: 1rem;
+  background-color: #e5e7eb;
+  border-radius: 9999px;
+}
+.historyHeaderText {
+  height: 0.75rem;
+  width: 7rem;
+  background-color: #e5e7eb;
+  border-radius: 0.25rem;
+}
+.historyTimeline {
+  position: relative;
+}
+.historyRow {
+  display: flex;
+  min-height: 32px;
+}
+.historyLeftColumn {
+  width: 60px;
+  text-align: right;
+  padding-right: 1rem;
+  padding-top: 3px;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+}
+.historyMiddleColumn {
+  position: relative;
+  width: 1rem;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.historyVerticalLine {
+  position: absolute;
+  top: 8px;
+  bottom: -8px;
+  width: 1px;
+  background-color: #e5e7eb;
+  left: 50%;
+  margin-left: -0.5px;
+}
+.historyDot {
+  position: relative;
+  z-index: 10;
+  top: 6px;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  background-color: #e5e7eb;
+  box-shadow: 0 0 0 4px #ffffff;
+}
+.historyRightColumn {
+  flex: 1;
+  padding-left: 0.25rem;
+  padding-bottom: 1.5rem;
+}
+.historyContentPlaceholder {
+  margin-top: 3px;
+  height: 0.75rem;
+  width: 6rem;
+  background-color: #f3f4f6;
+  border-radius: 0.25rem;
+}
+.historyLabelPlaceholder {
+  height: 0.75rem;
+  width: 2.5rem;
+  background-color: #e5e7eb;
+  border-radius: 0.25rem;
+}
+.historyLeafLeftColumn {
+  width: 60px;
+  text-align: right;
+  padding-right: 1rem;
+  padding-top: 0.25rem;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+}
+.historyLeafLabel {
+  margin-top: 1rem;
+  height: 0.5rem;
+  width: 2rem;
+  background-color: #e5e7eb;
+  border-radius: 0.25rem;
+}
+.historyLeafConnector {
+  position: absolute;
+  top: -8px;
+  height: 33px;
+  width: 24px;
+  border-left: 1px solid #e5e7eb;
+  border-bottom: 1px solid #e5e7eb;
+  border-bottom-left-radius: 0.75rem;
+  left: 50%;
+  margin-left: -0.5px;
+}
+.historyLeafRightColumn {
+  flex: 1;
+  padding-left: 0;
+  padding-bottom: 1.5rem;
+  position: relative;
+}
+.historyLeafDot {
+  position: absolute;
+  left: 11.5px;
+  top: 21px;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  background-color: #e5e7eb;
+}
+.historyLeafCard {
+  background-color: #ffffff;
+  border: 1px solid #f3f4f6;
+  border-radius: 0.375rem;
+  padding: 0.75rem 1rem;
+  margin-left: 28px;
+  margin-top: 3px;
+}
+.historyLeafCardContent {
+  height: 1rem;
+  width: 100%;
+  max-width: 200px;
+  background-color: #f3f4f6;
+  border-radius: 0.25rem;
+}
+.ruleContentContainer {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  background-color: #ffffff;
+  padding: 0 2rem 2rem 2rem;
+}
+.ruleContentHeader {
+  padding: 1.5rem 0;
+  border-bottom: 1px solid #f3f4f6;
+  margin-bottom: 1.5rem;
+}
+.ruleContentHeaderInner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.ruleContentTitleGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.ruleContentTitle {
+  height: 1.5rem;
+  width: 10rem;
+  background-color: #f3f4f6;
+  border-radius: 0.375rem;
+}
+.ruleContentSubtitle {
+  height: 1rem;
+  width: 16rem;
+  background-color: #f3f4f6;
+  border-radius: 0.25rem;
+}
+.ruleContentButtons {
+  display: flex;
+  gap: 0.75rem;
+}
+.ruleContentButton {
+  height: 2.5rem;
+  width: 8rem;
+  background-color: #f3f4f6;
+  border-radius: 0.375rem;
+}
+.ruleContentCards {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.ruleContentCard {
+  border: 1px solid #f3f4f6;
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+.ruleContentCardHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+.ruleContentCardTitle {
+  height: 1.25rem;
+  width: 8rem;
+  background-color: #f3f4f6;
+  border-radius: 0.25rem;
+}
+.ruleContentCardChevron {
+  height: 1.25rem;
+  width: 1.25rem;
+  background-color: #f3f4f6;
+  border-radius: 0.25rem;
+}
+.ruleContentCardAccordion {
+  border: 1px solid #f3f4f6;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.ruleContentCardAccordionLine {
+  height: 1rem;
+  background-color: #f3f4f6;
+  border-radius: 0.25rem;
+}
+.ruleContentCardAccordionLineWide {
+  width: 75%;
+}
+.ruleContentCardAccordionLineMedium {
+  width: 50%;
+}
+
+/* src/features/LearningManagement/styles/OverrideTimeline.module.css */
+.container {
+  padding: 0.75rem 1rem;
+  margin-top: 0.5rem;
+  background-color: rgba(255, 247, 237, 0.3);
+  border: 1px solid #F3EEE7;
+  border-radius: 0.375rem;
+  width: 100%;
+}
+.header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  color: #666F8D;
+  user-select: none;
+}
+.headerIcon {
+  color: #475569;
+}
+.headerText {
+  font-size: 13px;
+  font-weight: 500;
+  color: #475569;
+}
+.timeline {
+  position: relative;
+}
+.timelineItem {
+  display: flex;
+  min-height: 32px;
+}
+.leftColumn {
+  width: 100px;
+  text-align: right;
+  padding-right: 1rem;
+  padding-top: 2px;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.scopeLabel {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #19213D;
+  white-space: nowrap;
+}
+.leafLabel {
+  font-size: 10px;
+  font-style: italic;
+  color: #4f5e73;
+  display: block;
+  padding-top: 1rem;
+  padding-right: 0;
+}
+.middleColumn {
+  position: relative;
+  width: 1rem;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.verticalLine {
+  position: absolute;
+  top: 8px;
+  bottom: -8px;
+  width: 1px;
+  background-color: #CBD5E1;
+  left: 50%;
+  margin-left: -0.5px;
+}
+.leafConnector {
+  position: absolute;
+  top: -8px;
+  height: 33px;
+  width: 24px;
+  border-left: 1.5px solid #CBD5E1;
+  border-bottom: 1.5px solid #CBD5E1;
+  left: 50%;
+  margin-left: -0.5px;
+}
+.dot {
+  position: relative;
+  z-index: 10;
+  top: 6px;
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 9999px;
+  box-shadow: 0 0 0 4px #ffffff;
+  border-width: 2px;
+  border-style: solid;
+}
+.dotGlobal {
+  background-color: #2563EB;
+  border-color: #E3EAFB;
+}
+.dotOther {
+  background-color: #FD8E1E;
+  border-color: #FFEDD6;
+}
+.rightColumn {
+  flex: 1;
+}
+.leafCard {
+  position: relative;
+}
+.leafDot {
+  position: absolute;
+  left: 11.5px;
+  top: 17px;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  background-color: #FD8E1E;
+  border: 1px solid #FFEDD6;
+}
+.leafContent {
+  background-color: #ffffff;
+  border: 1px solid #E2E8F0;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #1E293B;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  margin-left: 28px;
+  margin-top: 3px;
+}
+.normalContent {
+  padding-top: 5px;
+  padding-left: 0.875rem;
+  font-size: 0.75rem;
+  color: #515667;
+}
+.strikethrough {
+  text-decoration: line-through;
+  color: #EF4444;
+  text-decoration-color: #EF4444;
+  margin-right: 0.25rem;
+  opacity: 0.6;
+}
+
+/* src/features/LearningManagement/styles/VariantCard.module.css */
+.variantCard {
+  background-color: #FAFCFF;
+  border: 1px solid #E3E6EA;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  position: relative;
+}
+.overriddenTag {
+  font-family: sans-serif;
+  padding: 2px 8px;
+  color: #19213D;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  border-radius: 200px;
+  border: 0.6px solid #E3E6EA;
+  background: #FAFCFF;
+}
+@keyframes spinGradientFade {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+    opacity: 1;
+  }
+  85% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(1080deg);
+    opacity: 0;
+  }
+}
+@keyframes innerMaskFade {
+  0% {
+    background-color: rgba(250, 252, 255, 0.95);
+  }
+  100% {
+    background-color: #FAFCFF;
+  }
+}
+@keyframes borderRestore {
+  0%, 99% {
+    border-color: transparent;
+    box-shadow: 0 0 20px 4px rgba(56, 189, 248, 0.35);
+  }
+  100% {
+    border-color: #E3E6EA;
+    box-shadow: none;
+  }
+}
+.variantHighlight {
+  position: relative;
+  overflow: hidden;
+  border-color: transparent !important;
+  animation: borderRestore 10s forwards;
+}
+.variantHighlight::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 5000px;
+  height: 5000px;
+  background:
+    conic-gradient(
+      from 180deg at 50% 50%,
+      rgba(37, 99, 235, 0.05) 0deg,
+      #0ea5e9 90deg,
+      #3b82f6 180deg,
+      #8b5cf6 270deg,
+      rgba(37, 99, 235, 0.05) 360deg);
+  animation: spinGradientFade 10s linear forwards;
+  z-index: 0;
+  pointer-events: none;
+}
+.variantHighlight::after {
+  content: "";
+  position: absolute;
+  inset: 1.5px;
+  background: #FAFCFF;
+  border-radius: calc(0.5rem - 1.5px);
+  z-index: 0;
+  pointer-events: none;
+  animation: innerMaskFade 10s forwards;
+}
+.variantHighlight > * {
+  position: relative;
+  z-index: 1;
+}
+.crossTierBanner {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.5rem;
+  background-color: #FFFBEB;
+  border: 1px solid #FCD34D;
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
+  color: #92400E;
+  animation: bannerFadeIn 0.3s ease-out;
+}
+@keyframes bannerFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.crossTierBannerIcon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  color: #D97706;
+}
+.crossTierBannerText {
+  flex: 1;
+  line-height: 1.3;
+}
+.crossTierBannerLink {
+  color: #B45309;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.crossTierBannerLink:hover {
+  text-decoration: underline;
+  color: #92400E;
+}
+.variantCard:last-child {
+  margin-bottom: 0;
+}
+.variantHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+.variantLabelSection {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.variantLabel {
+  font-size: 12px;
+  font-weight: 500;
+  color: #19213D;
+  background-color: #fff;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid #F0F2F5;
+}
+.defaultBadge {
+  font-size: 0.625rem;
+  font-weight: 500;
+  color: #10B981;
+  background-color: #ECFDF5;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  border: 1px solid #A7F3D0;
+}
+.actionChip {
+  font-size: 0.625rem;
+  font-weight: 600;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  text-transform: uppercase;
+}
+.actionChipNew {
+  color: #10B981;
+  background-color: #ECFDF5;
+  border: 1px solid #A7F3D0;
+}
+.actionChipUpdated {
+  color: #3B82F6;
+  background-color: #EFF6FF;
+  border: 1px solid #BFDBFE;
+}
+.variantActions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.viewOverrideButton {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #64748B;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  padding: 0;
+}
+.viewOverrideButton:hover {
+  color: #19213D;
+}
+.viewOverrideButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.editButton {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #2563EB;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  padding: 0;
+}
+.editButton:hover {
+  color: #1D4ED8;
+}
+.deleteButton {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #EF4444;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  padding: 0;
+}
+.deleteButton:hover {
+  color: #DC2626;
+}
+.menuWrapper {
+  position: relative;
+}
+.menuTrigger {
+  background: none;
+  border: 1px solid #E2E8F0;
+  border-radius: 6px;
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #64748B;
+  background-color: transparent;
+}
+.menuTriggerActive {
+  background-color: #F8FAFC;
+}
+.menuDropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background-color: #fff;
+  border: 1px solid #E2E8F0;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  z-index: 50;
+  min-width: 200px;
+  padding: 4px;
+}
+.menuItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: #334155;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  border-radius: 4px;
+}
+.menuItem:hover {
+  background-color: #F8FAFC;
+}
+.menuItemDisabled {
+  cursor: wait;
+  opacity: 0.7;
+}
+.variantLabelSection {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.defaultTag {
+  background-color: #f0f4f8;
+  color: #475569;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  border: 1px solid #cbd5e1;
+}
+.learningDisabledPill {
+  background-color: #FFF7ED;
+  color: #C2410C;
+  border: 1px solid #FFEDD5;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+.descriptionBox {
+  background-color: #FFFFFF;
+  border: 1px solid #E3E6EA;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+.descriptionText {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #19213D;
+  line-height: 1.5;
+  margin: 0;
+}
+.conditionsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.historySection {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #F0F2F5;
+}
+.errorText {
+  font-size: 0.75rem;
+  color: #EF4444;
+  margin: 0;
+}
+.noHistoryText {
+  font-size: 0.75rem;
+  color: #64748B;
+  margin: 0;
+  font-style: italic;
+}
+.variantCardWithConnector {
+  position: relative;
+}
+.variantCardWithConnector::before {
+  content: "";
+  position: absolute;
+  left: 1.5rem;
+  top: -0.75rem;
+  width: 2px;
+  height: 0.75rem;
+  background-color: #CFD4DC;
+}
+.variantFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #666F8D;
+  font-size: 12px;
+  font-weight: 400;
+  margin-top: 4px;
+  flex-wrap: wrap;
+}
+.resolveGaps {
+  display: flex;
+  align-items: center;
+}
+.resolveGapsText {
+  color: #EF4444;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 120%;
+  margin-left: 4px;
+}
+.resolveButton {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  color: #2563EB;
+  font-size: 12.25px;
+  font-weight: 500;
+  line-height: normal;
+  margin-left: 8px;
+}
+.variantFooterContent {
+  margin-left: auto;
+}
+.variantFooterItem {
+  cursor: default;
+  position: relative;
+}
+.variantFooterItem:hover {
+  color: #19213D;
+}
+.variantFooterSeparator {
+  margin: 0 0.375rem;
+}
+
+/* src/features/LearningManagement/styles/VariantList.module.css */
+.variantList {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.variantWrapper {
+  position: relative;
+}
+.variantWithConnector {
+  margin-top: 0.75rem;
+}
+.connectorLine {
+  position: absolute;
+  left: 1.5rem;
+  top: -0.75rem;
+  width: 2px;
+  height: 0.75rem;
+  background-color: #CFD4DC;
+}
+.emptyState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  background-color: #F9FAFB;
+  border: 1px dashed #E3E6EA;
+  border-radius: 0.5rem;
+}
+.emptyText {
+  font-size: 0.875rem;
+  color: #666F8D;
+  margin: 0;
+}
+.linkedVariantSection {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+.linkedVariantMessage {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.25rem;
+  margin-bottom: 0.75rem;
+}
+.linkedVariantText {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #666F8D;
+  margin: 0;
+}
+.viewDetailsButton {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #2563EB;
+  background: none;
+  border: none;
+  padding: 0.375rem 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.chevronIcon {
+  transition: transform 0.2s ease;
+}
+.chevronIconOpen {
+  transform: rotate(180deg);
+}
+.linkedVariantContainer {
+  border: 1px solid #E3E6EA;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+}
+.linkedTierName {
+  font-size: 12px;
+  font-weight: 600;
+  color: #0F172A;
+  margin: 0 0 0.75rem 0;
+  padding: 6px;
+  border: 1px solid #F0F2F5;
+  border-radius: 4px;
+  background-color: #FFFFFF;
+  box-shadow: 0 1px 2px 0 rgba(25, 33, 61, 0.1);
+  max-width: fit-content;
+}
+.linkedVariantCard {
+  background-color: #FFFFFF;
+  border: 1px solid #E3E6EA;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+}
+
+/* src/features/LearningManagement/styles/TierCard.module.css */
+.tierCard {
+  border: 1px solid #BFDBFE;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  background-color: #ffffff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+}
+.tierCardOpen {
+  border-color: #2563EB;
+  border-width: 1.5px;
+}
+.tierButtonGroup {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: auto;
+}
+.deleteButton {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #EF4444;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+.tierHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1.25rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  user-select: none;
+}
+.tierHeader:hover {
+  background-color: #F9FAFB;
+}
+.tierInfo h3 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #19213D;
+  margin-bottom: 0.25rem;
+}
+.tierInfo h3 span {
+  color: #19213D;
+  font-weight: 400;
+}
+.tierDescription {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: #666F8D;
+  max-width: 36rem;
+}
+.chevronIcon {
+  color: #000000;
+  transition: transform 0.2s ease;
+}
+.chevronIconClosed {
+  transform: rotate(180deg);
+}
+.tierContent {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+.emptyRules {
+  color: #6B7280;
+  font-size: 0.875rem;
+  text-align: center;
+  margin-top: 1.25rem;
+}
+.rulesList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* src/features/LearningManagement/styles/ToastContent.module.css */
+.wrapper {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.iconRed {
+  color: #EF4444;
+}
+.iconGreen {
+  color: #10B981;
+}
+.titleRed {
+  font-weight: 700;
+  color: #EF4444;
+}
+.titleGreen {
+  font-weight: 700;
+  color: #10B981;
+}
+.messageRed {
+  margin: 0;
+  color: #EF4444;
+}
+.messageGreen {
+  margin: 0;
+  color: #10B981;
+}
+
+/* src/features/LearningManagement/styles/RuleTierList.module.css */
+.container {
+  flex: 1;
+  overflow-y: auto;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  padding-bottom: 2.5rem;
+}
+.tiersList {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* src/features/LearningManagement/styles/ErrorStateDisplay.module.css */
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+.card {
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #EF4444;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 24rem;
+  text-align: center;
+}
+.titleRow {
+  color: #EF4444;
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.message {
+  color: #4B5563;
+  margin-bottom: 1rem;
+  margin-top: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.retryBtn {
+  box-sizing: border-box;
+  padding: 0.5rem 1rem;
+  background-color: #2563EB;
+  color: #ffffff;
+  border: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease-in-out;
+}
+.retryBtn:hover {
+  background-color: #1D4ED8;
+}
+
+/* src/features/LearningManagement/styles/LearningContent.module.css */
+.container {
+  flex: 1;
+  height: calc(100vh - 140px);
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+.successToast {
+  border-radius: 0.25rem !important;
+  border: 1px solid #C6F6D5 !important;
+  background-color: #F0FDF4 !important;
+  box-shadow: none !important;
+}
+.errorToast {
+  border-radius: 0.25rem !important;
+  border: 1px solid #FEB2B2 !important;
+  background-color: #FEF2F2 !important;
+  box-shadow: none !important;
+}
+.semibold {
+  font-weight: 600;
+}
+
+/* src/features/LearningManagement/styles/InstantLearningModal.module.css */
+.container {
+  margin-top: 0rem;
+}
+.mainHeader {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  padding: 0.5rem 0;
+  user-select: none;
+}
+.mainHeaderIcon {
+  color: #16A34A;
+  flex-shrink: 0;
+}
+.mainHeaderTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1A847C;
+  line-height: 1.4;
+}
+.mainHeaderChevron {
+  color: #19213D;
+  transition: transform 0.2s ease;
+  margin-left: 0.25rem;
+}
+.mainHeaderChevronClosed {
+  transform: rotate(180deg);
+}
+.contentBox {
+  border: 1px solid #CDEFED;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-top: 0.5rem;
+  background-color: #CDEFED05;
+  margin-bottom: 0.5rem;
+}
+.contentBox .contentBox {
+  padding: 0.75rem;
+  margin-top: 0.25rem;
+}
+.subtitle {
+  font-size: 14px;
+  color: #62687D;
+  margin-bottom: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+.rulesList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.ruleAccordion {
+  border: 1px solid #E3E6EA;
+  border-radius: 8px;
+  background-color: #fff;
+  overflow: hidden;
+}
+.ruleHeaderWrapper {
+  display: flex;
+  flex-direction: column;
+}
+.variantBrief {
+  padding: 0 1rem 0.75rem;
+  color: #999;
+}
+.summaryWrapper {
+  display: flex;
+  gap: 0.25rem;
+}
+.summaryCard {
+  border: 1px solid #eee;
+  padding: 5px;
+  background: rgb(245 245 245);
+  width: calc(100% / 5);
+  text-align: center;
+}
+.summaryCard__blue {
+  border: 1px solid #eee;
+  background: aliceblue;
+}
+.summaryCard__green {
+  background-color: #F0FDF4;
+  border: 1px solid #DCFCE7;
+  color: #008615;
+}
+.summaryCard__red {
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+  border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+.summaryCard__orange {
+  background-color: #FFF7ED;
+  border: 1px solid #FFEDD5;
+  color: #EA580C;
+}
+.ruleHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  user-select: none;
+}
+.ruleHeaderLeft {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.ruleNumber {
+  font-size: 14px;
+  font-weight: 500;
+  color: #19213D;
+}
+.ruleTitle {
+  font-size: 14px;
+  font-weight: 500;
+  color: #19213D;
+}
+.badgeApplied {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  background-color: #F0FDF4;
+  border: 1px solid #DCFCE7;
+  border-radius: 200px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #008615;
+}
+.badgeNotApplied {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  background-color: #FFF7ED;
+  border: 1px solid #FFEDD5;
+  border-radius: 200px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #EA580C;
+}
+.contextScore {
+  font-size: 12px;
+  font-weight: 500;
+  color: #19213D;
+  background-color: #E0F2FE;
+  border: 1px solid #BAE6FD;
+  border-radius: 200px;
+  padding: 0.25rem 0.5rem;
+}
+.defaultChip {
+  font-size: 12px;
+  font-weight: 500;
+  color: #19213D;
+  background-color: #efefef;
+  border: 1px solid #BAE6FD;
+  border-radius: 200px;
+  padding: 0.25rem 0.5rem;
+}
+.ruleChevron {
+  color: #666F8D;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+.ruleChevronOpen {
+  transform: rotate(180deg);
+}
+.ruleContent {
+  padding: 0 1rem 1rem 1rem;
+}
+.showNotAppliedToggle {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.75rem 0;
+  cursor: pointer;
+  user-select: none;
+  margin-top: 0.5rem;
+}
+.showNotAppliedText {
+  font-size: 14px;
+  font-weight: 500;
+  color: #19213D;
+}
+.showNotAppliedChevron {
+  color: #19213D;
+  transition: transform 0.2s ease;
+}
+.showNotAppliedChevronClosed {
+  transform: rotate(180deg);
+}
+.showNotAppliedChevronOpen {
+  transform: rotate(180deg);
+}
+.variantBadgesContainer {
+  display: flex;
+  gap: 0.5rem;
+}
+.variantBadge {
+  padding: 0.25rem 0.5rem;
+  background-color: #ffffff;
+  border: 1px solid #F0F2F5;
+  color: #19213D;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 0.25rem;
+}
+.descriptionBox {
+  background-color: #F8FAFC;
+  border: 1px solid #E3E6EA;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+.descriptionText {
+  font-size: 14px;
+  font-weight: 500;
+  color: #19213D;
+  line-height: 1.5;
+  margin: 0;
+}
+.conditionsContainer {
+  border-left: 2px solid #E3E6EA;
+  margin-left: 0.5rem;
+  padding-left: 1rem;
+}
+.conditionBlock {
+  margin-bottom: 1rem;
+}
+.conditionBlock:last-child {
+  margin-bottom: 0;
+}
+.conditionHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  padding: 0.5rem 0;
+  user-select: none;
+}
+.conditionIconApply {
+  color: #16A34A;
+  flex-shrink: 0;
+}
+.conditionIconNotApply {
+  color: #EF4444;
+  flex-shrink: 0;
+}
+.conditionLabel {
+  font-size: 14px;
+  font-weight: 500;
+  color: #19213D;
+}
+.conditionChevron {
+  color: #666F8D;
+  transition: transform 0.2s ease;
+}
+.conditionChevronOpen {
+  transform: rotate(180deg);
+}
+.conditionContent {
+  padding-left: 1.5rem;
+  padding-top: 0.25rem;
+}
+.conditionItem {
+  font-size: 14px;
+  color: #19213D;
+  line-height: 1.5;
+  margin-bottom: 0.25rem;
+}
+.noConditions {
+  font-size: 14px;
+  color: #666F8D;
+  font-style: italic;
+}
+.whyRuleContainer {
+  margin-top: 1rem;
+}
+.whyRuleAccordion {
+  border: 1px solid #E3E6EA;
+  border-radius: 8px;
+  background-color: #fff;
+  overflow: hidden;
+}
+.whyRuleHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  user-select: none;
+}
+.whyRuleHeaderLeft {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.whyRuleIcon {
+  color: #6D28D9;
+  flex-shrink: 0;
+}
+.whyRuleTitle {
+  font-size: 12px;
+  font-weight: 500;
+  color: #1E293B;
+  line-height: 20px;
+}
+.whyRuleHeaderRight {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.strengthBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  background-color: #ffffff;
+  border: 1px solid #C4B5FD;
+  border-radius: 16px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #1E293B;
+}
+.whyRuleChevron {
+  color: #19213D;
+  transition: transform 0.2s ease;
+}
+.whyRuleChevronOpen {
+  transform: rotate(180deg);
+}
+.whyRuleContent {
+  padding: 0 1rem 1rem 1rem;
+}
+.whyRuleSection {
+  margin-bottom: 1rem;
+}
+.whyRuleSection:last-child {
+  margin-bottom: 0;
+}
+.sectionTitle {
+  font-size: 12px;
+  font-weight: 500;
+  color: #19213D;
+  line-height: 130%;
+  margin-bottom: 0.5rem;
+}
+.sectionSubtitle {
+  font-size: 12px;
+  font-weight: 400;
+  color: #1E293B;
+  line-height: 150%;
+  margin-bottom: 0.5rem;
+}
+.reasoningList {
+  padding-left: 1.25rem;
+}
+.reasoningItem {
+  font-size: 12px;
+  font-weight: 400;
+  color: #666F8D;
+  line-height: 150%;
+  margin-bottom: 0.25rem;
+  list-style: decimal;
+}
+.cognitiveCardWrapper {
+  margin: 0 1rem 1rem 1rem;
+}
+.summarySectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  transition: opacity 0.2s;
+}
+.summarySectionHeader:hover {
+  opacity: 0.8;
+}
+.ruleHeaderRight {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-shrink: 0;
+}
+.adIdLabel {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    monospace;
+  font-size: 10px;
+  color: #94A3B8;
+  background: #F8FAFC;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid #F1F5F9;
+}
+.revenueBadge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #059669;
+  background-color: #ECFDF5;
+  border: 1px solid #D1FAE5;
+  border-radius: 200px;
+  padding: 0.25rem 0.6rem;
+}
+.ruleHeaderLeft .variantBadge {
+  background-color: #F3F4F6;
+  border-color: #E5E7EB;
+  color: #4B5563;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  height: 24px;
+}
+.ruleHeaderLeft .revenueBadge {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  line-height: 1;
+}
+.ruleTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: #19213D;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+/* src/features/LearningManagement/styles/StationsContent.module.css */
+.container {
+  flex: 1;
+  height: calc(100vh - 140px);
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+.searchBarWrapper {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+.searchRelative {
+  position: relative;
+  width: 100%;
+  max-width: 28rem;
+}
+.searchIconWrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  padding-left: 0.75rem;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+.searchIcon {
+  height: 1rem;
+  width: 1rem;
+  color: #9CA3AF;
+}
+.searchInput {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 2.5rem;
+  padding-right: 0.75rem;
+  border: 1px solid #D1D5DB;
+  border-radius: 0.375rem;
+  line-height: 1.25rem;
+  background-color: #ffffff;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+.searchInput::placeholder {
+  color: #6B7280;
+}
+.searchInput:focus {
+  border-color: #3B82F6;
+  box-shadow: 0 0 0 1px #3B82F6;
+}
+.contentArea {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+.loadingWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #6B7280;
+}
+.emptyWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.noResultsWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #6B7280;
+}
+.stationList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.stationCard {
+  box-sizing: border-box;
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  padding: 1rem;
+  background-color: #ffffff;
+  border-radius: 0.5rem;
+  border: 1px solid #E5E7EB;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+.stationCardLeft {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.stationIconWrapper {
+  flex-shrink: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: #EFF6FF;
+  color: #3B82F6;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.stationDetails {
+  display: flex;
+  flex-direction: column;
+}
+.stationHeaderRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.stationNameText {
+  font-size: 15px;
+  font-weight: 500;
+  color: #111827;
+}
+.learningsBadge {
+  font-size: 11px;
+  color: #374151;
+  background-color: #F9FAFB;
+  border: 1px solid #F3F4F6;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  border-radius: 9999px;
+  font-weight: 500;
+}
+.stationDescText {
+  font-size: 13px;
+  color: #6B7280;
+  margin-top: 0.125rem;
+}
+.actionButtonsWrapper {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding-right: 0.5rem;
+}
+.deleteBtn {
+  background: none;
+  border: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #EF4444;
+  cursor: pointer;
+  transition: color 0.15s ease-in-out;
+}
+.deleteBtn:hover {
+  color: #B91C1C;
+}
+.viewBtn {
+  background: none;
+  border: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #2563EB;
+  cursor: pointer;
+  transition: color 0.15s ease-in-out;
+}
+.viewBtn:hover {
+  color: #1D4ED8;
+}
+
+/* src/features/LearningManagement/styles/LearningTemplateLayout.module.css */
+.container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  background-color: #ffffff;
+}
+.content {
+  flex: 1;
+  overflow: hidden;
+}
+.emptyStateWrapper {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+/* src/features/LearningManagement/styles/Sidebar.module.css */
+.sidebar {
+  width: 340px;
+  background-color: #ffffff;
+  border-right: 1px solid #E3E6EA;
+  height: calc(100vh - 140px);
+  display: flex;
+  flex-direction: column;
+  padding-top: 1.25rem;
+  position: relative;
+  overflow: hidden;
+}
+.tabsContainer {
+  padding: 0 1.25rem;
+  margin-bottom: 1.25rem;
+}
+.tabsWrapper {
+  background-color: rgba(243, 244, 246, 0.8);
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.25rem;
+}
+.tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  color: #64748B;
+}
+.tab:hover {
+  color: #2563EB;
+}
+.tabActive {
+  background-color: #ffffff;
+  color: #2563EB;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  font-weight: 700;
+}
+.searchContainer {
+  padding: 0 1.25rem;
+  margin-bottom: 1rem;
+}
+.searchWrapper {
+  display: flex;
+  gap: 0.5rem;
+}
+.searchInputWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  flex: 1;
+}
+.searchIcon {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #9ca3af;
+}
+.searchInput {
+  width: 100%;
+  padding: 0.5rem 1rem 0.5rem 2.25rem;
+  background-color: #ffffff;
+  border: 1px solid #F0F2F5;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  outline: none;
+  transition: all 0.2s;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+.searchInput:focus {
+  border-color: #2563EB;
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+}
+.searchInput::placeholder {
+  color: #9ca3af;
+}
+.searchRightContainer {
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.searchCountBadge {
+  font-size: 0.75rem;
+  font-weight: 500;
+  background-color: #FDE047;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  color: #374151;
+}
+.searchClearButton {
+  color: #9ca3af;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  outline: none;
+}
+.searchClearButton:hover {
+  color: #4b5563;
+}
+.filterButton {
+  padding: 0.5rem;
+  border: 1px solid #F0F2F5;
+  border-radius: 0.5rem;
+  background-color: #F7F8FA;
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+.filterButton:hover {
+  background-color: #F0F2F5;
+}
+.filterButton svg {
+  color: #19213D;
+}
+.divider {
+  height: 1.5px;
+  margin: 0 1.25rem;
+  width: 100%;
+  background-color: #F0F2F5;
+  margin-bottom: 1rem;
+}
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 1.25rem;
+}
+.content::-webkit-scrollbar {
+  width: 4px;
+}
+.content::-webkit-scrollbar-thumb {
+  background-color: #e5e7eb;
+  border-radius: 9999px;
+}
+.section {
+  margin-bottom: 1.5rem;
+}
+.sectionTitle {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #19213D;
+  margin-bottom: 0.75rem;
+}
+.sectionList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.createButtonContainer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #ffffff;
+  border-top: 1px solid #e5e7eb;
+  padding: 1rem;
+  z-index: 50;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
+}
+.createButton {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background-color: #F7F8FA;
+  border: 1px solid #F0F2F5;
+  border-radius: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #19213D;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.createButton:hover {
+  background-color: #f3f4f6;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+.createButton:active {
+  transform: scale(0.99);
+}
+.emptyContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 10rem;
+  color: #9ca3af;
+  font-size: 0.875rem;
+}
+
+/* src/features/LearningManagement/styles/ScopeTree.module.css */
+.treeContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0 1.25rem;
+  padding-bottom: 80px;
+  flex: 1;
+  overflow: auto;
+  height: 100%;
+}
+.treeContainer::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.treeContainer::-webkit-scrollbar-thumb {
+  background-color: #e5e7eb;
+  border-radius: 9999px;
+}
+.nodeWrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-width: max-content;
+}
+.childrenWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  margin-left: calc((var(--tree-depth, 0) * 0px) + 0.875rem);
+  padding-left: 1rem;
+  border-left: 1px solid #E3E6EA;
+  min-width: max-content;
+}
+.nodeHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.5rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: #19213D;
+  border: 1px solid transparent;
+  min-width: max-content;
+}
+.nodeHeader:hover {
+  background-color: #F7F8FA;
+}
+.nodeHeaderSelected {
+  color: #2563EB;
+  border-color: #2563EB;
+}
+.nodeHeaderAncestor {
+  color: #2563EB;
+}
+.chevron {
+  color: #9CA3AF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+.chevronExpanded {
+  transform: rotate(180deg);
+}
+.chevronHidden {
+  visibility: hidden;
+  width: 16px;
+}
+.folderIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  flex-shrink: 0;
+}
+.nodeName {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.optionsButton {
+  color: #64748B;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: all 0.2s;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.optionsButton:hover {
+  background-color: #E2E8F0;
+  color: #19213D;
+}
+.pill {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+  color: #64748B;
+}
+.pill:hover {
+  background-color: #F7F8FA;
+  color: #19213D;
+}
+.pillActive {
+  background-color: #F0F5FF;
+  border-color: #2563EB;
+  color: #2563EB;
+}
+.pillActive:hover {
+  background-color: #E0EBFF;
+  color: #2563EB;
+}
+.pillIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pillLabel {
+  font-size: 0.875rem;
+  font-weight: 500;
+  flex: 1;
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  background-color: #F1F5F9;
+  color: #475569;
+  font-size: 0.625rem;
+  font-weight: 600;
+  padding: 0 0.375rem;
+}
+.badgeActive {
+  background-color: #2563EB;
+  color: #FFFFFF;
+}
+.addAction {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.5rem;
+  color: #2563EB;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+  margin-top: 0.25rem;
+  width: fit-content;
+}
+.addAction:hover {
+  background-color: #F0F5FF;
+}
+.addIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.menuContainer {
+  position: relative;
+  display: inline-block;
+  text-align: left;
+}
+.menuDropdown {
+  position: absolute;
+  z-index: 9999;
+  width: 12rem;
+  border-radius: 0.375rem;
+  background-color: #ffffff;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  outline: none;
+  padding: 0.25rem 0;
+  display: flex;
+  flex-direction: column;
+}
+.menuDropdownTop {
+  bottom: 100%;
+  margin-bottom: 0.25rem;
+  right: 0;
+}
+.menuDropdownBottom {
+  top: 100%;
+  margin-top: 0.25rem;
+  right: 0;
+}
+.menuOption {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  text-align: left;
+  font-size: 0.875rem;
+  color: #374151;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.menuOption:not(:disabled):hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+.menuOptionDisabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.menuOptionIcon {
+  margin-right: 0.75rem;
+  flex-shrink: 0;
+}
+.tooltipWrapper {
+  width: 100%;
+  position: relative;
+}
+.tooltipContent {
+  font-family: sans-serif;
+  z-index: 9999;
+  background-color: #2A3547;
+  color: #ffffff;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  max-width: 280px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  position: relative;
+  animation: tooltipFadeIn 0.15s ease-out;
+}
+.tooltipArrow {
+  position: absolute;
+  fill: #2A3547;
+}
+@keyframes tooltipFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.highlightText {
+  background-color: #FDE047;
+  border-radius: 0.125rem;
+  color: #111827;
+}
+
+/* src/features/LearningManagement/styles/StationAutocomplete.module.css */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.wrapper {
+  position: relative;
+  width: 100%;
+}
+.inputWrapper {
+  position: relative;
+  width: 100%;
+}
+.input {
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 0.5rem;
+  border: 1px solid #F0F2F5;
+  padding: 0.5rem 2.5rem 0.5rem 1rem;
+  font-size: 14px;
+  outline: none;
+  background-color: #ffffff;
+  transition: all 0.2s ease-in-out;
+}
+.input:hover {
+  border-color: #2563EB50;
+}
+.input:focus {
+  border-color: #2563EB;
+  box-shadow: 0 0 0 1px #2563EB;
+}
+.input::placeholder {
+  color: #9CA3AF;
+}
+.spinnerWrapper {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+.spinner {
+  width: 1rem;
+  height: 1rem;
+  animation: spin 1s linear infinite;
+  color: #9CA3AF;
+}
+.dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  margin-top: 0.25rem;
+  max-height: 15rem;
+  width: 100%;
+  overflow-y: auto;
+  border-radius: 0.375rem;
+  border: 1px solid #E2E8F0;
+  background-color: #ffffff;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+}
+.item {
+  box-sizing: border-box;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: background-color 0.15s ease;
+}
+.itemOnboarded {
+  cursor: not-allowed;
+  background-color: #F9FAFB;
+  opacity: 0.6;
+}
+.itemClickable {
+  cursor: pointer;
+}
+.itemClickable:hover {
+  background-color: #F3F4F6;
+}
+.itemLeft {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.checkWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  background-color: #DCFCE7;
+  color: #16A34A;
+  flex-shrink: 0;
+}
+.stationName {
+  font-weight: 500;
+}
+.stationNameOnboarded {
+  color: #6B7280;
+}
+.stationNameUnonboarded {
+  color: #111827;
+}
+.market {
+  font-size: 0.75rem;
+  color: #6B7280;
+}
+.badge {
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #9CA3AF;
+  background-color: #F3F4F6;
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid #E5E7EB;
+}
+.noResults {
+  padding: 0.5rem 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: #6B7280;
+  cursor: not-allowed;
+}
+
+/* src/features/LearningManagement/styles/CardSkeleton.module.css */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .5;
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.skeletonCard {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 1.5rem;
+  gap: 1.5rem;
+  width: 100%;
+  background-color: #ffffff;
+  border: 1px solid #F0F2F5;
+  box-shadow: 0px 2px 4px rgba(25, 33, 61, 0.08);
+  border-radius: 16px;
+}
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.paragraphGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+}
+.shimmerLine {
+  height: 8px;
+  background-color: #F0F2F5;
+  border-radius: 9999px;
+}
+.analysisLoader {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 1.5rem;
+  gap: 1.5rem;
+  width: 100%;
+  max-width: 48rem;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: #ffffff;
+  border: 1px solid #F0F2F5;
+  border-radius: 1rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+.loaderHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 1rem 1.25rem;
+  background-color: #F8FAFC;
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+}
+.spinIcon {
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: spin 1s linear infinite;
+}
+.loaderText {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #19213D;
+  line-height: 1.3;
+}
+
+/* src/features/LearningManagement/styles/OnboardingLoader.module.css */
+@keyframes shimmer {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+.successIndicator {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: #22C55E;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.progressIndicator {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pendingIndicator {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1.5px solid #CBD5E1;
+  background-color: transparent;
+}
+.shimmerBar {
+  background-color: #E2E8F0;
+  border-radius: 4px;
+  background-image:
+    linear-gradient(
+      90deg,
+      #E2E8F0 0px,
+      #F1F5F9 40px,
+      #E2E8F0 80px);
+  background-size: 200px 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+.shimmer1 {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  background-color: #fff;
+  border-radius: 12px;
+  border: 1px solid #E2E8F0;
+  width: 100%;
+  box-sizing: border-box;
+}
+.shimmer2 {
+  display: flex;
+  gap: 16px;
+  padding: 24px;
+  background-color: #fff;
+  border-radius: 12px;
+  border: 1px solid #E2E8F0;
+  width: 100%;
+  box-sizing: border-box;
+}
+.shimmer2Left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.shimmer2Right {
+  flex: 1;
+  background-color: #F1F5F9;
+  border-radius: 12px;
+  min-height: 200px;
+  background-image:
+    linear-gradient(
+      90deg,
+      #F1F5F9 0px,
+      #F8FAFC 40px,
+      #F1F5F9 80px);
+  background-size: 200px 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+.shimmer3 {
+  display: flex;
+  gap: 16px;
+  padding: 24px;
+  background-color: #fff;
+  border-radius: 12px;
+  border: 1px solid #E2E8F0;
+  width: 100%;
+  box-sizing: border-box;
+}
+.shimmer3Left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.shimmer3Right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.shimmer3Card {
+  height: 48px;
+  background-color: #F1F5F9;
+  border-radius: 8px;
+  background-image:
+    linear-gradient(
+      90deg,
+      #F1F5F9 0px,
+      #F8FAFC 40px,
+      #F1F5F9 80px);
+  background-size: 200px 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.97);
+  display: flex;
+  flex-direction: row;
+  padding: 48px;
+  gap: 48px;
+  z-index: 100;
+  box-sizing: border-box;
+}
+.leftSide {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.sparkleWrapper {
+  margin-bottom: 16px;
+}
+.title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #0F172A;
+  margin: 0 0 8px 0;
+}
+.subtitle {
+  font-size: 0.875rem;
+  color: #64748B;
+  margin: 0 0 24px 0;
+  line-height: 1.5;
+}
+.stepsList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.stepRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.stepText {
+  font-size: 0.875rem;
+}
+.stepTextActive {
+  font-weight: 600;
+  color: #0F172A;
+}
+.stepTextPending {
+  font-weight: 400;
+  color: #94A3B8;
+}
+.rightSide {
+  flex: 1.5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* src/features/LearningManagement/styles/TemplateCard.module.css */
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 14px;
+  gap: 8px;
+  width: 100%;
+  border-radius: 8px;
+  cursor: pointer;
+  border: 1px solid #E2E8F0;
+  background-color: #ffffff;
+  transition: all 0.2s ease-in-out;
+  box-sizing: border-box;
+}
+.card:hover {
+  border-color: #CBD5E1;
+}
+.cardSelected {
+  background-color: rgba(239, 246, 255, 0.5);
+  border-color: #2563EB;
+  box-shadow: 0px 2px 4px rgba(25, 33, 61, 0.08);
+}
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+.iconBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 28px;
+  height: 26px;
+  background-color: #E7F0FD;
+  border-radius: 5px;
+  flex-shrink: 0;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 9px;
+  flex: 1;
+  min-w: 0;
+}
+.headerRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  min-height: 24px;
+}
+.titleRow {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 9px;
+  min-w: 0;
+}
+.title {
+  font-family: "Inter", sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 1.3;
+  color: #19213D;
+  word-break: break-all;
+}
+.badge {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 8px;
+  background-color: #EDE9FE;
+  border-radius: 4px;
+  min-height: 22px;
+  flex-shrink: 0;
+}
+.badgeText {
+  font-family: "Inter", sans-serif;
+  font-weight: 500;
+  font-size: 11px;
+  line-height: 1.3;
+  text-align: center;
+  color: #5B21B6;
+}
+.checkmark {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 20px;
+  transition: background-color 0.2s, border-color 0.2s;
+  flex-shrink: 0;
+  margin-left: 8px;
+  box-sizing: border-box;
+}
+.checkmarkSelected {
+  background-color: #2563EB;
+  border: none;
+}
+.checkmarkUnselected {
+  border: 1.5px solid #CBD5E1;
+  background-color: transparent;
+}
+.descWrapper {
+  width: 100%;
+}
+.desc {
+  font-family: "Inter", sans-serif;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 1.3;
+  color: #666F8D;
+  margin: 0;
+}
+.tagsRow {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+}
+.tagGroup {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+.tag {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 8px;
+  gap: 4px;
+  background-color: #ffffff;
+  border: 0.75px solid #E2E8F0;
+  border-radius: 200px;
+  min-height: 20px;
+}
+.vectorIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 9px;
+  height: 7px;
+  flex-shrink: 0;
+}
+.tagText {
+  font-family: "Inter", sans-serif;
+  font-weight: 500;
+  font-size: 10px;
+  line-height: 1.3;
+  color: #19213D;
+  white-space: nowrap;
+}
+.divider {
+  width: 1px;
+  height: 14px;
+  background-color: #E2E8F0;
+}
+
+/* src/features/LearningManagement/styles/StationOnboardModal.module.css */
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #19213D;
+  display: flex;
+  align-items: center;
+}
+.asterisk {
+  margin-right: 0.125rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #8F2C23;
+}
+.searchWrapper {
+  position: relative;
+  margin-bottom: 1rem;
+  width: 100%;
+}
+.searchInput {
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 0.5rem;
+  border: 1px solid #E2E8F0;
+  padding: 0.4375rem 0.625rem 0.4375rem 2.5rem;
+  font-size: 12px;
+  outline: none;
+  background-color: #ffffff;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  color: #19213D;
+}
+.searchInput::placeholder {
+  color: #BAC0CC;
+}
+.searchInput:focus {
+  border-color: #2563EB;
+  box-shadow: 0 0 0 1px #2563EB;
+}
+.searchIcon {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #9ca3af;
+  pointer-events: none;
+}
+
+/* src/features/LearningManagement/styles/InputField.module.css */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dropdownFade {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.inputWrapper {
+  width: 100%;
+}
+.relativeWrapper {
+  position: relative;
+  width: 100%;
+}
+.label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #19213D;
+}
+.requiredAsterisk {
+  margin-right: 0.125rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #8F2C23;
+}
+.inputField {
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 0.5rem;
+  border: 1px solid #F0F2F5;
+  padding: 0.5rem 1rem;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+  background-color: #ffffff;
+}
+.inputField::placeholder {
+  color: #BAC0CC;
+}
+.inputField:focus {
+  border-color: #2563EB;
+  box-shadow: 0 0 0 1px #2563EB;
+}
+.inputFieldError {
+  border-color: #EF4444;
+}
+.inputFieldError:focus {
+  border-color: #EF4444;
+  box-shadow: 0 0 0 1px #EF4444;
+}
+.inputFieldDisabled {
+  background-color: #F3F4F6;
+  color: #6B7280;
+  cursor: not-allowed;
+}
+.errorMessage {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #EF4444;
+}
+.selectContainer {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  min-height: 42px;
+  width: 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 0.5rem;
+  border: 1px solid #F0F2F5;
+  padding: 0.25rem 0.5rem;
+  transition: all 0.2s ease-in-out;
+}
+.selectContainerDisabled {
+  cursor: not-allowed;
+  background-color: #F3F4F6;
+}
+.selectContainerClickable {
+  cursor: pointer;
+  background-color: #ffffff;
+}
+.selectContainerError {
+  border-color: #EF4444;
+}
+.selectContainerError:focus-within {
+  border-color: #EF4444;
+  box-shadow: 0 0 0 1px #EF4444;
+}
+.selectContainerSuccess:focus-within {
+  border-color: #2563EB;
+  box-shadow: 0 0 0 1px #2563EB;
+}
+.selectedChips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1;
+}
+.chip {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  background-color: #EFF6FF;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #1D4ED8;
+}
+.chipCloseBtn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #1D4ED8;
+  display: flex;
+  align-items: center;
+}
+.chipCloseBtn:hover {
+  color: #1E3A8A;
+}
+.selectInput {
+  flex: 1;
+  background-color: transparent;
+  padding: 0.25rem 0.5rem;
+  font-size: 14px;
+  outline: none;
+  border: none;
+  min-width: 50px;
+}
+.selectInput::placeholder {
+  color: #9CA3AF;
+}
+.caretTransparent {
+  cursor: pointer;
+  caret-color: transparent;
+}
+.chevronIconWrapper {
+  pointer-events: none;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  color: #9CA3AF;
+  display: flex;
+  align-items: center;
+}
+.chevronIcon {
+  width: 1rem;
+  height: 1rem;
+  transition: transform 0.2s ease-in-out;
+}
+.chevronIconOpen {
+  transform: rotate(180deg);
+}
+.dropdownMenu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 50;
+  margin-top: 0.25rem;
+  max-height: 15rem;
+  width: 100%;
+  overflow-y: auto;
+  border-radius: 0.375rem;
+  border: 1px solid #F1F5F9;
+  background-color: #ffffff;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  list-style: none;
+  box-sizing: border-box;
+  animation: dropdownFade 0.1s ease-out forwards;
+}
+.noOptionsItem {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: #6B7280;
+}
+.optionItem {
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  transition: background-color 0.15s ease;
+  color: #374151;
+}
+.optionItem:hover {
+  background-color: #F9FAFB;
+}
+.optionItemSelected {
+  background-color: #EFF6FF;
+  font-weight: 500;
+  color: #2563EB;
+}
+.optionContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.loaderItem {
+  display: flex;
+  justify-content: center;
+  padding: 0.75rem 1rem;
+}
+.spinIcon {
+  width: 1.25rem;
+  height: 1.25rem;
+  animation: spin 1s linear infinite;
+  color: #2563EB;
+}
+.endOfListItem {
+  padding: 0.5rem 1rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: #9CA3AF;
+  cursor: default;
+}
+
+/* src/features/LearningManagement/styles/LearningTemplateManagementSkeleton.module.css */
+.wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+}
+.sidebar {
+  width: 340px;
+  border-right: 1px solid #e5e7eb;
+  height: calc(100vh - 140px);
+  display: flex;
+  flex-direction: column;
+  padding-top: 1.25rem;
+}
+.sidebarTabs {
+  padding: 0 1.25rem;
+  margin-bottom: 1.25rem;
+}
+.sidebarSearch {
+  padding: 0 1.25rem;
+  margin-bottom: 1.5rem;
+}
+.searchGap {
+  display: flex;
+  gap: 0.5rem;
+}
+.searchBar {
+  flex: 1;
+}
+.searchBtn {
+  width: 40px;
+}
+.sidebarList {
+  flex: 1;
+  padding: 0 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  overflow: hidden;
+}
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.rowCard {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  border: 1px solid #f3f4f6;
+  margin-bottom: 0.75rem;
+}
+.cardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+}
+.cardSubHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+}
+.cardTextWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 140px);
+  overflow: hidden;
+}
+.contentHeader {
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+.headerGap {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.headerRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.headerInfo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.headerTextGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.headerActions {
+  display: flex;
+  gap: 0.5rem;
+}
+.tabsRow {
+  margin-top: 1rem;
+  display: flex;
+  gap: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+.tabItem {
+  padding-bottom: 0.75rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.rulesWrapper {
+  flex: 1;
+  padding: 1.5rem;
+  background-color: rgba(249, 250, 251, 0.5);
+  overflow-y: auto;
+}
+.rulesList {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.tierContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.tierHeaderRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ruleItemCard {
+  background-color: #ffffff;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  padding: 1rem;
+}
+.ruleCardRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+.ruleCardInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.ruleTitleRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.ruleCardFooter {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+}
+
+/* src/features/LearningManagement/styles/CreateLearningSetModal.module.css */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.modal {
+  position: relative;
+  width: 600px;
+  max-width: 90%;
+  border-radius: 0.75rem;
+  background-color: #ffffff;
+  padding: 1.5rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+}
+.header {
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.headerContent {
+  flex: 1;
+}
+.title {
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: #19213D;
+  margin: 0;
+}
+.description {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: #666F8D;
+  line-height: 1.5;
+}
+.closeBtn {
+  color: #9ca3af;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  transition: color 0.2s, background-color 0.2s;
+}
+.closeBtn:hover {
+  color: #4b5563;
+  background-color: #f3f4f6;
+}
+.closeBtn:focus {
+  outline: none;
+}
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+.formGroup {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #19213D;
+  display: flex;
+  align-items: center;
+}
+.asterisk {
+  margin-right: 0.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #8F2C23;
+}
+.inputField {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.625rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  outline: none;
+  border: 1px solid #F0F2F5;
+  background-color: #ffffff;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  color: #19213D;
+}
+.inputField::placeholder {
+  color: #9ca3af;
+}
+.inputField:focus {
+  border-color: #2563EB;
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+}
+.inputError {
+  border-color: #8F2C23;
+}
+.inputError:focus {
+  border-color: #8F2C23;
+  box-shadow: 0 0 0 2px rgba(143, 44, 35, 0.2);
+}
+.errorMessage {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #8F2C23;
+  font-weight: 400;
+}
+.footer {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+.cancelBtn {
+  border-radius: 0.375rem;
+  border: 1px solid #e2e8f0;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #64748B;
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.cancelBtn:hover:not(:disabled) {
+  background-color: #f9fafb;
+}
+.cancelBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.confirmBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  background-color: #2563EB;
+  transition: background-color 0.2s;
+}
+.confirmBtn:hover:not(:disabled) {
+  background-color: #1d4ed8;
+}
+.confirmBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.spinner {
+  margin-right: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+  animation: spin 1s linear infinite;
+  color: #ffffff;
+}
+/*# sourceMappingURL=index.css.map */