juxscript 1.0.64 → 1.0.65

package/create/style.css

@@ -0,0 +1,1952 @@
+/**
+ * Default Preset - Grid Layout System
+ * Comprehensive component styling
+ */
+
+/* ============================================
+   CSS VARIABLES
+   ============================================ */
+:root {
+  /* Typography */
+  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-family-mono: 'SF Mono', Monaco, Menlo, 'Courier New', monospace;
+  
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 0.75rem;
+  --space-lg: 1rem;
+  --space-xl: 1.5rem;
+  --space-2xl: 2rem;
+  --space-3xl: 3rem;
+  
+  /* Colors - Light Theme */
+  --color-text-primary: #111111;
+  --color-text-secondary: #65676b;
+  --color-text-tertiary: #8b8d94;
+  
+  --color-background: #ffffff;
+  --color-surface-base: #f7f7f7;
+  --color-surface-elevated: #ffffff;
+  --color-surface-hover: #f1f1f1;
+  --color-surface-active: #e8e8e8;
+  
+  --color-border: #e8e8e8;
+  --color-border-hover: #d1d1d1;
+  
+  --color-brand: #0ea5e9;
+  --color-brand-hover: #0284c7;
+  
+  /* Borders & Radius */
+  --border-width: 1px;
+  --radius-sm: 3px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-full: 9999px;
+  
+  /* Transitions */
+  --transition-base: 150ms ease;
+  --transition-fast: 100ms ease;
+}
+
+/* ============================================
+   GLOBAL RESET
+   ============================================ */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family-base);
+  color: var(--color-text-primary);
+  background: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* ============================================
+   GRID LAYOUT
+   ============================================ */
+#app {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "header header"
+    "sidebar main"
+    "footer footer";
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+#appheader {
+  grid-area: header;
+  background: var(--color-surface-elevated);
+  border-bottom: var(--border-width) solid var(--color-border);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-2xl);
+  height: 48px;
+  z-index: 100;
+}
+
+#appheader-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--space-xl);
+}
+
+#appheader-logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+#appheader-logo h1 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin: 0;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
+#appheader-nav {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+#appheader-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+/* ============================================
+   SIDEBAR
+   ============================================ */
+#appaside {
+  grid-area: sidebar;
+  width: 240px;
+  background: var(--color-surface-base);
+  border-right: var(--border-width) solid var(--color-border);
+  overflow-y: auto;
+  padding: var(--space-lg);
+}
+
+/* ============================================
+   MAIN CONTENT
+   ============================================ */
+#appmain {
+  grid-area: main;
+  background: var(--color-background);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#appmain-content {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: var(--space-3xl) var(--space-2xl);
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+#appfooter {
+  grid-area: footer;
+  background: var(--color-surface-elevated);
+  border-top: var(--border-width) solid var(--color-border);
+  padding: var(--space-md) var(--space-2xl);
+  font-size: 0.8125rem;
+  color: var(--color-text-tertiary);
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+#appfooter-content {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+}
+
+/* ============================================
+   TYPOGRAPHY
+   ============================================ */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+h1 { font-size: 2rem; }
+h2 { font-size: 1.5rem; }
+h3 { font-size: 1.125rem; margin-bottom: var(--space-md); }
+h4 { font-size: 1rem; }
+h5 { font-size: 0.875rem; }
+h6 { font-size: 0.75rem; }
+
+p {
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* ============================================
+   HEADINGS
+   ============================================ */
+.jux-heading {
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--color-text-primary);
+  margin: 0 0 var(--space-md) 0;
+}
+
+.jux-heading-1 { font-size: 2rem; }
+.jux-heading-2 { font-size: 1.5rem; }
+.jux-heading-3 { font-size: 1.125rem; font-weight: 700; }
+.jux-heading-4 { font-size: 1rem; }
+.jux-heading-5 { font-size: 0.875rem; }
+.jux-heading-6 { font-size: 0.75rem; }
+
+/* ============================================
+   HERO COMPONENT
+   ============================================ */
+.jux-hero {
+  padding: var(--space-3xl) 0;
+  margin-bottom: var(--space-2xl);
+}
+
+.jux-hero-centered {
+  text-align: center;
+}
+
+.jux-hero-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.jux-hero-centered .jux-hero-content {
+  align-items: center;
+}
+
+.jux-hero-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0;
+  letter-spacing: -0.02em;
+  color: var(--color-text-primary);
+}
+
+.jux-hero-subtitle {
+  font-size: 1.25rem;
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.jux-hero-body {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  max-width: 600px;
+}
+
+.jux-hero-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-md) var(--space-2xl);
+  font-size: 1rem;
+  font-weight: 600;
+  color: white;
+  background: var(--color-brand);
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  transition: background-color var(--transition-base);
+}
+
+.jux-hero-cta:hover {
+  background: var(--color-brand-hover);
+}
+
+/* ============================================
+   ALERT COMPONENT
+   ============================================ */
+.jux-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-lg);
+  position: relative;
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.jux-alert-info {
+  background: #dbeafe;
+  border-left: 4px solid #3b82f6;
+  color: #1e40af;
+}
+
+.jux-alert-success {
+  background: #d1fae5;
+  border-left: 4px solid #10b981;
+  color: #065f46;
+}
+
+.jux-alert-warning {
+  background: #fef3c7;
+  border-left: 4px solid #f59e0b;
+  color: #92400e;
+}
+
+.jux-alert-error {
+  background: #fee2e2;
+  border-left: 4px solid #ef4444;
+  color: #991b1b;
+}
+
+.jux-alert-content {
+  flex: 1;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.jux-alert-close {
+  flex-shrink: 0;
+  background: transparent;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity var(--transition-base);
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.jux-alert-close:hover {
+  opacity: 1;
+}
+
+/* ============================================
+   BADGE COMPONENT
+   ============================================ */
+.jux-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-base);
+}
+
+.jux-badge-default {
+  color: #374151;
+  background-color: #e5e7eb;
+}
+
+.jux-badge-success {
+  color: #065f46;
+  background-color: #d1fae5;
+}
+
+.jux-badge-warning {
+  color: #92400e;
+  background-color: #fef3c7;
+}
+
+.jux-badge-error {
+  color: #991b1b;
+  background-color: #fee2e2;
+}
+
+.jux-badge-info {
+  color: #1e40af;
+  background-color: #dbeafe;
+}
+
+/* ============================================
+   BUTTON COMPONENT
+   ============================================ */
+.jux-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--space-xl);
+  height: 36px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-family: var(--font-family-base);
+  color: white;
+  background: var(--color-brand);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background-color var(--transition-base), transform var(--transition-fast);
+  user-select: none;
+  white-space: nowrap;
+}
+
+.jux-button:hover {
+  background: var(--color-brand-hover);
+}
+
+.jux-button:active {
+  transform: scale(0.98);
+}
+
+.jux-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.jux-button-primary {
+  background: var(--color-brand);
+}
+
+.jux-button-primary:hover {
+  background: var(--color-brand-hover);
+}
+
+.jux-button-secondary {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+  border: var(--border-width) solid var(--color-border);
+}
+
+.jux-button-secondary:hover {
+  background: var(--color-surface-active);
+}
+
+.jux-button-small {
+  height: 28px;
+  padding: 0 var(--space-md);
+  font-size: 0.8125rem;
+}
+
+.jux-button-medium {
+  height: 36px;
+}
+
+.jux-button-large {
+  height: 44px;
+  padding: 0 var(--space-2xl);
+  font-size: 1rem;
+}
+
+/* ============================================
+   CARD COMPONENT
+   ============================================ */
+.jux-card {
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-bottom: var(--space-lg);
+}
+
+.jux-card-default {
+  /* Base card styles */
+}
+
+.jux-card-header {
+  padding: var(--space-lg) var(--space-xl);
+  border-bottom: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-base);
+}
+
+.jux-card-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.jux-card-body {
+  padding: var(--space-xl);
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+
+.jux-card-footer {
+  padding: var(--space-lg) var(--space-xl);
+  border-top: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-base);
+  font-size: 0.875rem;
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   CHECKBOX COMPONENT
+   ============================================ */
+.jux-checkbox {
+  margin-bottom: var(--space-md);
+}
+
+.jux-checkbox-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+.jux-checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.jux-checkbox-checkmark {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+  background: var(--color-surface-elevated);
+}
+
+.jux-checkbox-input:checked + .jux-checkbox-checkmark {
+  background: var(--color-brand);
+  border-color: var(--color-brand);
+}
+
+.jux-checkbox-checkmark svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: white;
+  stroke-width: 2;
+  opacity: 0;
+  transition: opacity var(--transition-base);
+}
+
+.jux-checkbox-input:checked + .jux-checkbox-checkmark svg {
+  opacity: 1;
+}
+
+.jux-checkbox-label-text {
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+}
+
+.jux-input-error {
+  color: #ef4444;
+  font-size: 0.75rem;
+  margin-top: var(--space-xs);
+}
+
+/* ============================================
+   CODE COMPONENT
+   ============================================ */
+.jux-code {
+  background: #1e1e1e;
+  border: var(--border-width) solid #2d2d2d;
+  border-radius: var(--radius-lg);
+  padding: var(--space-lg);
+  margin: var(--space-xl) 0;
+  overflow-x: auto;
+}
+
+.jux-code pre {
+  margin: 0;
+  font-family: var(--font-family-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.jux-code code {
+  color: #d4d4d4;
+  font-family: inherit;
+}
+
+/* ============================================
+   CONTAINER COMPONENT
+   ============================================ */
+.jux-container {
+  display: block;
+}
+
+/* ============================================
+   DATEPICKER COMPONENT
+   ============================================ */
+.jux-datepicker {
+  position: relative;
+}
+
+.jux-datepicker-container {
+  position: relative;
+}
+
+.jux-datepicker-input {
+  padding-left: var(--space-3xl);
+}
+
+/* ============================================
+   DIVIDER COMPONENT
+   ============================================ */
+.jux-divider {
+  border: none;
+  margin: var(--space-2xl) 0;
+}
+
+.jux-divider-default {
+  border-top: var(--border-width) solid var(--color-border);
+}
+
+/* ============================================
+   DROPDOWN COMPONENT
+   ============================================ */
+.jux-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.jux-dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-lg);
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  transition: background-color var(--transition-base);
+}
+
+.jux-dropdown-trigger:hover {
+  background: var(--color-surface-hover);
+}
+
+.jux-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  margin-top: var(--space-xs);
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  min-width: 200px;
+  z-index: 1000;
+  display: none;
+}
+
+.jux-dropdown-menu.show {
+  display: block;
+}
+
+.jux-dropdown-bottom-left {
+  left: 0;
+}
+
+.jux-dropdown-item {
+  width: 100%;
+  padding: var(--space-md) var(--space-lg);
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  transition: background-color var(--transition-base);
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.jux-dropdown-item:hover {
+  background: var(--color-surface-hover);
+}
+
+/* ============================================
+   INPUT COMPONENT
+   ============================================ */
+.jux-input {
+  margin-bottom: var(--space-lg);
+}
+
+.jux-input-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-sm);
+}
+
+.jux-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.jux-input-icon {
+  position: absolute;
+  left: var(--space-md);
+  color: var(--color-text-tertiary);
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+.jux-input-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.jux-input-element {
+  width: 100%;
+  padding: var(--space-md);
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  transition: border-color var(--transition-base), box-shadow var(--transition-base);
+  font-family: var(--font-family-base);
+}
+
+.jux-input-element:focus {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+}
+
+/* ============================================
+   FILE UPLOAD COMPONENT
+   ============================================ */
+.jux-fileupload {
+  margin-bottom: var(--space-lg);
+}
+
+.jux-fileupload-input {
+  display: none;
+}
+
+.jux-fileupload-button-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-3xl);
+  border: 2px dashed var(--color-border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: border-color var(--transition-base), background-color var(--transition-base);
+}
+
+.jux-fileupload-button-container:hover {
+  border-color: var(--color-brand);
+  background: var(--color-surface-base);
+}
+
+.jux-fileupload-icon svg {
+  width: 48px;
+  height: 48px;
+  color: var(--color-text-tertiary);
+}
+
+.jux-fileupload-button {
+  padding: var(--space-sm) var(--space-xl);
+  background: var(--color-brand);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: background-color var(--transition-base);
+}
+
+.jux-fileupload-button:hover {
+  background: var(--color-brand-hover);
+}
+
+.jux-fileupload-list {
+  margin-top: var(--space-lg);
+}
+
+/* ============================================
+   KPI CARD COMPONENT
+   ============================================ */
+.jux-kpicard {
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-xl);
+  margin-bottom: var(--space-lg);
+}
+
+.jux-kpicard-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.jux-kpicard-title {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+
+.jux-kpicard-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  line-height: 1;
+}
+
+.jux-kpicard-delta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #10b981;
+}
+
+.jux-kpicard-delta svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* ============================================
+   LIST COMPONENT
+   ============================================ */
+.jux-list-wrapper {
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-bottom: var(--space-lg);
+}
+
+.jux-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.jux-list-unordered {
+  /* Base list styles */
+}
+
+.jux-list-item {
+  padding: var(--space-lg);
+  border-bottom: var(--border-width) solid var(--color-border);
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.jux-list-item:last-child {
+  border-bottom: none;
+}
+
+.jux-list-item-hoverable {
+  transition: background-color var(--transition-base);
+  cursor: pointer;
+}
+
+.jux-list-item-hoverable:hover {
+  background: var(--color-surface-hover);
+}
+
+.jux-list-item-content {
+  flex: 1;
+}
+
+.jux-list-item-text {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.jux-list-item-title {
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-xs);
+}
+
+/* ============================================
+   LOADING COMPONENT
+   ============================================ */
+.jux-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-xl);
+}
+
+.jux-loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-brand);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.jux-loading-lg .jux-loading-spinner {
+  width: 48px;
+  height: 48px;
+  border-width: 4px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ============================================
+   MENU COMPONENT
+   ============================================ */
+.jux-menu {
+  display: flex;
+  gap: var(--space-xs);
+}
+
+.jux-menu-vertical {
+  flex-direction: column;
+}
+
+.jux-menu-item {
+  /* Menu item wrapper */
+}
+
+.jux-menu-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  transition: background-color var(--transition-base);
+}
+
+.jux-menu-button:hover {
+  background: var(--color-surface-hover);
+}
+
+.jux-menu-label {
+  flex: 1;
+}
+
+/* ============================================
+   NAV COMPONENT
+   ============================================ */
+.jux-nav {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+.jux-nav-default {
+  /* Base nav styles */
+}
+
+.jux-nav-items {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+}
+
+.jux-nav-item-wrapper {
+  /* Nav item wrapper */
+}
+
+.jux-nav-link {
+  padding: var(--space-sm) var(--space-lg);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  border-radius: var(--radius-md);
+  transition: background-color var(--transition-base), color var(--transition-base);
+}
+
+.jux-nav-link:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-brand);
+}
+
+/* ============================================
+   PARAGRAPH COMPONENT
+   ============================================ */
+.jux-paragraph {
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-lg);
+  font-size: 0.875rem;
+}
+
+/* ============================================
+   PROGRESS COMPONENT
+   ============================================ */
+.jux-progress {
+  margin-bottom: var(--space-lg);
+}
+
+.jux-progress-track {
+  width: 100%;
+  height: 8px;
+  background: var(--color-surface-base);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.jux-progress-bar {
+  height: 100%;
+  background: var(--color-brand);
+  transition: width 0.3s ease;
+  border-radius: var(--radius-full);
+}
+
+.jux-progress-bar-success {
+  background: #10b981;
+}
+
+.jux-progress-bar-warning {
+  background: #f59e0b;
+}
+
+.jux-progress-bar-error {
+  background: #ef4444;
+}
+
+/* ============================================
+   RADIO COMPONENT
+   ============================================ */
+.jux-radio {
+  margin-bottom: var(--space-lg);
+}
+
+.jux-radio-options {
+  display: flex;
+  gap: var(--space-lg);
+}
+
+.jux-radio-vertical {
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.jux-radio-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+.jux-radio-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.jux-radio-mark {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--color-border);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+  background: var(--color-surface-elevated);
+}
+
+.jux-radio-input:checked + .jux-radio-mark {
+  border-color: var(--color-brand);
+}
+
+.jux-radio-mark::after {
+  content: '';
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--color-brand);
+  opacity: 0;
+  transform: scale(0);
+  transition: all var(--transition-base);
+}
+
+.jux-radio-input:checked + .jux-radio-mark::after {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.jux-radio-label-text {
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   SELECT COMPONENT
+   ============================================ */
+.jux-select {
+  margin-bottom: var(--space-lg);
+}
+
+.jux-select-container {
+  position: relative;
+}
+
+.jux-select-element {
+  width: 100%;
+  padding: var(--space-md);
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--space-md) center;
+  background-size: 20px;
+  padding-right: var(--space-3xl);
+}
+
+.jux-select-element:focus {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+}
+
+/* ============================================
+   SIDEBAR COMPONENT
+   ============================================ */
+.jux-sidebar {
+  position: relative;
+  background: var(--color-surface-base);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-lg);
+  margin-bottom: var(--space-lg);
+}
+
+.jux-sidebar-left {
+  /* Left-aligned sidebar */
+}
+
+.jux-sidebar-toggle {
+  position: absolute;
+  top: var(--space-md);
+  right: var(--space-md);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: var(--space-xs);
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ============================================
+   SWITCH COMPONENT
+   ============================================ */
+.jux-switch {
+  margin-bottom: var(--space-lg);
+}
+
+.jux-switch-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+.jux-switch-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.jux-switch-slider {
+  width: 44px;
+  height: 24px;
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+  position: relative;
+  transition: background-color var(--transition-base);
+}
+
+.jux-switch-slider::before {
+  content: '';
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  left: 3px;
+  top: 3px;
+  background: white;
+  border-radius: 50%;
+  transition: transform var(--transition-base);
+}
+
+.jux-switch-input:checked + .jux-switch-slider {
+  background: var(--color-brand);
+}
+
+.jux-switch-input:checked + .jux-switch-slider::before {
+  transform: translateX(20px);
+}
+
+.jux-switch-label-text {
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   TABLE COMPONENT
+   ============================================ */
+.jux-table-wrapper {
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-bottom: var(--space-lg);
+}
+
+.jux-table-filter {
+  width: 100%;
+  padding: var(--space-md) var(--space-lg);
+  font-size: 0.875rem;
+  border: none;
+  border-bottom: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-base);
+  color: var(--color-text-primary);
+}
+
+.jux-table-filter:focus {
+  outline: none;
+  background: var(--color-surface-elevated);
+}
+
+.jux-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.jux-table-bordered {
+  /* Bordered table variant */
+}
+
+.jux-table thead {
+  background: var(--color-surface-base);
+  border-bottom: var(--border-width) solid var(--color-border);
+}
+
+.jux-table th {
+  padding: var(--space-md) var(--space-lg);
+  text-align: left;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.jux-table td {
+  padding: var(--space-md) var(--space-lg);
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  border-top: var(--border-width) solid var(--color-border);
+}
+
+.jux-table tbody tr:hover {
+  background: var(--color-surface-hover);
+}
+
+.jux-table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  border-top: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-base);
+}
+
+.jux-table-pagination button {
+  padding: var(--space-xs) var(--space-md);
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  transition: background-color var(--transition-base);
+}
+
+.jux-table-pagination button:hover:not(:disabled) {
+  background: var(--color-surface-hover);
+}
+
+.jux-table-pagination button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.jux-table-pagination span {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   TABS COMPONENT
+   ============================================ */
+.jux-tabs {
+  margin-bottom: var(--space-lg);
+}
+
+.jux-tabs-default {
+  /* Base tabs styles */
+}
+
+.jux-tabs-list {
+  display: flex;
+  gap: var(--space-xs);
+  border-bottom: var(--border-width) solid var(--color-border);
+  margin-bottom: var(--space-lg);
+}
+
+.jux-tabs-button {
+  padding: var(--space-md) var(--space-xl);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  transition: color var(--transition-base), border-color var(--transition-base);
+  position: relative;
+  bottom: -1px;
+}
+
+.jux-tabs-button:hover {
+  color: var(--color-text-primary);
+}
+
+.jux-tabs-button-active {
+  color: var(--color-brand);
+  border-bottom-color: var(--color-brand);
+}
+
+.jux-tabs-panels {
+  /* Tabs panels container */
+}
+
+.jux-tabs-panel {
+  display: none;
+  animation: fadeIn 0.2s ease-in;
+}
+
+.jux-tabs-panel-active {
+  display: block;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* ============================================
+   VIEW COMPONENT
+   ============================================ */
+.jux-view {
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-bottom: var(--space-lg);
+}
+
+.jux-view-header {
+  padding: var(--space-xl);
+  border-bottom: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-base);
+}
+
+.jux-view-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.jux-view-content {
+  padding: var(--space-xl);
+}
+
+/* ============================================
+   SCROLLBARS
+   ============================================ */
+#appmain::-webkit-scrollbar,
+#appaside::-webkit-scrollbar {
+  width: 6px;
+}
+
+#appmain::-webkit-scrollbar-track,
+#appaside::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#appmain::-webkit-scrollbar-thumb,
+#appaside::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+
+#appmain::-webkit-scrollbar-thumb:hover,
+#appaside::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-hover);
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+@media (max-width: 768px) {
+  #app {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "main"
+      "footer";
+  }
+  
+  #appaside {
+    display: none;
+  }
+  
+  #appheader {
+    padding: 0 var(--space-lg);
+  }
+  
+  #appmain-content {
+    padding: var(--space-2xl) var(--space-lg);
+  }
+  
+  #appfooter {
+    padding: var(--space-md) var(--space-lg);
+  }
+  
+  .jux-hero-title {
+    font-size: 2rem;
+  }
+  
+  .jux-radio-options {
+    flex-direction: column;
+  }
+}
+
+/* ============================================
+   GRID COMPONENT
+   ============================================ */
+.jux-grid {
+  display: grid;
+  position: relative;
+}
+
+.jux-grid-cell {
+  position: relative;
+  overflow: auto;
+  min-width: 0;  /* Prevent grid blowout */
+  min-height: 0;
+}
+
+/* ============================================
+   GRID GRIDDER MODE (Blueprint Visualization)
+   ============================================ */
+.jux-grid-gridder {
+  /* Blueprint-style background */
+  background-color: #0a1929;
+  background-image: 
+    linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
+  background-size: 20px 20px;
+  padding: 2px;
+  border: 2px solid #3b82f6;
+  box-shadow: 
+    0 0 0 1px rgba(59, 130, 246, 0.2),
+    inset 0 0 20px rgba(59, 130, 246, 0.1);
+}
+
+.jux-grid-gridder .jux-grid-cell {
+  /* Cell styling in gridder mode */
+  background: rgba(15, 23, 42, 0.8);
+  border: 1px solid rgba(59, 130, 246, 0.4);
+  box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.05);
+  min-height: 80px;  /* Ensure cells are visible */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.jux-grid-gridder .jux-grid-cell:hover {
+  background: rgba(30, 41, 59, 0.9);
+  border-color: rgba(59, 130, 246, 0.8);
+  box-shadow: 
+    inset 0 0 15px rgba(59, 130, 246, 0.15),
+    0 0 10px rgba(59, 130, 246, 0.3);
+}
+
+/* Coordinate label (top-left corner) */
+.jux-grid-gridder .jux-grid-cell::before {
+  content: attr(data-row) ',' attr(data-col);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  font-size: 10px;
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  font-weight: 600;
+  color: rgba(59, 130, 246, 0.8);
+  background: rgba(15, 23, 42, 0.95);
+  padding: 2px 6px;
+  border-radius: 3px;
+  border: 1px solid rgba(59, 130, 246, 0.3);
+  letter-spacing: 0.5px;
+  z-index: 10;
+}
+
+/* ID label (bottom-right corner) */
+.jux-grid-gridder .jux-grid-cell::after {
+  content: '#' attr(id);
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  font-size: 9px;
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  color: rgba(148, 163, 184, 0.6);
+  background: rgba(15, 23, 42, 0.8);
+  padding: 2px 5px;
+  border-radius: 2px;
+  border: 1px solid rgba(71, 85, 105, 0.3);
+  max-width: calc(100% - 12px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Grid lines (column separators) */
+.jux-grid-gridder .jux-grid-cell:not(:nth-child(1))::before {
+  box-shadow: 0 0 5px rgba(59, 130, 246, 0.4);
+}
+
+/* Remove default debug styles when gridder is active */
+.jux-grid-gridder.jux-grid-debug .jux-grid-cell {
+  /* Gridder overrides debug mode */
+  border-color: rgba(59, 130, 246, 0.4);
+  background: rgba(15, 23, 42, 0.8);
+}
+
+/* ============================================
+   GRID DEBUG MODE (Legacy - simpler version)
+   ============================================ */
+.jux-grid-debug .jux-grid-cell {
+  border: 1px dashed var(--color-border);
+  background: var(--color-surface-base);
+}
+
+.jux-grid-debug .jux-grid-cell::before {
+  content: attr(data-row) '-' attr(data-col);
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  font-size: 10px;
+  color: var(--color-text-tertiary);
+  opacity: 0.5;
+}
+
+/* ============================================
+   CALENDAR COMPONENT
+   ============================================ */
+.jux-calendar {
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-bottom: var(--space-lg);
+}
+
+.jux-calendar-header {
+  padding: var(--space-lg);
+  border-bottom: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-base);
+}
+
+.jux-calendar-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+}
+
+.jux-calendar-nav-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 1.25rem;
+  color: var(--color-text-primary);
+  transition: all var(--transition-base);
+}
+
+.jux-calendar-nav-btn:hover {
+  background: var(--color-surface-hover);
+  border-color: var(--color-brand);
+}
+
+.jux-calendar-today-btn {
+  padding: var(--space-xs) var(--space-lg);
+  background: var(--color-brand);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: background-color var(--transition-base);
+}
+
+.jux-calendar-today-btn:hover {
+  background: var(--color-brand-hover);
+}
+
+.jux-calendar-title {
+  flex: 1;
+  text-align: center;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.jux-calendar-grid {
+  padding: var(--space-md);
+}
+
+.jux-calendar-days-header {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--space-xs);
+  margin-bottom: var(--space-md);
+}
+
+.jux-calendar-day-name {
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: var(--space-sm);
+}
+
+.jux-calendar-days-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--space-xs);
+}
+
+.jux-calendar-day-cell {
+  min-height: 100px;
+  padding: var(--space-sm);
+  background: var(--color-surface-base);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  display: flex;
+  flex-direction: column;
+}
+
+.jux-calendar-day-cell:hover {
+  background: var(--color-surface-hover);
+  border-color: var(--color-brand);
+}
+
+.jux-calendar-day-cell.other-month {
+  opacity: 0.4;
+}
+
+.jux-calendar-day-cell.today {
+  border-color: var(--color-brand);
+  background: rgba(14, 165, 233, 0.05);
+}
+
+.jux-calendar-day-number {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-xs);
+}
+
+.jux-calendar-day-cell.today .jux-calendar-day-number {
+  color: var(--color-brand);
+}
+
+.jux-calendar-day-events {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  flex: 1;
+  overflow: hidden;
+}
+
+.jux-calendar-event {
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--color-brand);
+  color: white;
+  font-size: 0.75rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: opacity var(--transition-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.jux-calendar-event:hover {
+  opacity: 0.8;
+}
+
+/* Popover */
+.jux-calendar-popover {
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  padding: var(--space-lg);
+  min-width: 320px;
+  max-width: 400px;
+  z-index: 1000;
+}
+
+.jux-calendar-event-form h4 {
+  margin: 0 0 var(--space-lg) 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.jux-calendar-event-form label {
+  display: block;
+  margin-bottom: var(--space-md);
+}
+
+.jux-calendar-event-form label span {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-xs);
+}
+
+.jux-calendar-event-form input,
+.jux-calendar-event-form textarea {
+  width: 100%;
+  padding: var(--space-sm);
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-base);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-family: var(--font-family-base);
+}
+
+.jux-calendar-event-form input:focus,
+.jux-calendar-event-form textarea:focus {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+}
+
+.jux-calendar-form-actions {
+  display: flex;
+  gap: var(--space-sm);
+  margin-top: var(--space-lg);
+}
+
+.jux-calendar-btn-primary,
+.jux-calendar-btn-secondary,
+.jux-calendar-btn-danger {
+  padding: var(--space-sm) var(--space-lg);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all var(--transition-base);
+}
+
+.jux-calendar-btn-primary {
+  background: var(--color-brand);
+  color: white;
+}
+
+.jux-calendar-btn-primary:hover {
+  background: var(--color-brand-hover);
+}
+
+.jux-calendar-btn-secondary {
+  background: var(--color-surface-base);
+  color: var(--color-text-primary);
+  border: var(--border-width) solid var(--color-border);
+}
+
+.jux-calendar-btn-secondary:hover {
+  background: var(--color-surface-hover);
+}
+
+.jux-calendar-btn-danger {
+  background: #ef4444;
+  color: white;
+}
+
+.jux-calendar-btn-danger:hover {
+  background: #dc2626;
+}
+
+/* ✅ ADD: Week view styles */
+.jux-calendar-week-view {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--space-xs);
+  padding: var(--space-md);
+}
+
+.jux-calendar-week-day-col {
+  min-height: 400px;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+/* ✅ ADD: Day view styles */
+.jux-calendar-day-view {
+  padding: var(--space-md);
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.jux-calendar-hour-slot {
+  height: 60px;
+  border-bottom: var(--border-width) solid var(--color-border);
+  padding: var(--space-sm);
+  position: relative;
+}
+
+/* ✅ ADD: Year view styles */
+.jux-calendar-year-view {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-lg);
+  padding: var(--space-lg);
+}
+
+.jux-calendar-mini-month {
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-md);
+  min-height: 150px;
+}
+
+
+/* componentsv2/list*/
+.jux-list {
+    font-family: system-ui, -apple-system, sans-serif;
+    padding: 1rem;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    transition: opacity 0.2s;
+}
+
+.jux-list[aria-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
+    background-color: #f9f9f9;
+}
+
+.jux-list[aria-busy="true"] {
+    cursor: wait;
+    opacity: 0.7;
+}
+
+/* Internal List Element */
+.jux-list-element {
+    margin: 0;
+    padding-left: 1.5rem;
+}
+
+.jux-list li {
+    padding: 0.25rem 0.5rem;
+    cursor: default;
+    border-radius: 2px;
+}
+
+.jux-list li:hover {
+    background-color: #f0f0f0;
+}
+
+.jux-list li.jux-selected {
+    background-color: #e3f2fd;
+    color: #1565c0;
+    font-weight: 500;
+}