@metropolle/design-system 1.2025.1-2.5.1903 → 1.2026.0-1.10.2344

package/dist/css/components.css

@@ -44,131 +44,11 @@
 
 /* =========================
    Modal Styles
+   NOTE: Modal styling is handled 100% via inline styles in Modal.tsx
+   (same approach as ProfileCard for visual consistency)
+   NO CSS classes are used for the modal card itself.
    ========================= */
 
-/* Modal overlay styles */
-.mds-modal-overlay,
-.modal-overlay {
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  background-color: transparent !important;
-  backdrop-filter: blur(4px) !important;
-  z-index: 9999 !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-
-/* Modal card styles - Liquid Glass Effect */
-.mds-modal-overlay .mds-modal-card,
-.modal-overlay .mds-modal-card {
-  background: rgba(255, 255, 255, 0.3) !important;
-  backdrop-filter: blur(20px) !important;
-  -webkit-backdrop-filter: blur(20px) !important;
-  border: 1px solid rgba(255, 255, 255, 0.4) !important;
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.2) !important,
-    0 0 0 1px rgba(255, 255, 255, 0.2) !important,
-    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
-  color: var(--text-primary) !important;
-  min-width: 320px !important;
-  max-width: 600px !important;
-  width: 90vw !important;
-  border-radius: 16px !important;
-  position: relative !important;
-  overflow: hidden !important;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-  transform: translate(0, 0) !important;
-}
-
-/* Inner glow effect */
-.mds-modal-overlay .mds-modal-card::before,
-.modal-overlay .mds-modal-card::before {
-  content: '' !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.1) 0%,
-    rgba(255, 255, 255, 0.05) 50%,
-    rgba(255, 255, 255, 0.02) 100%
-  ) !important;
-  border-radius: 16px !important;
-  pointer-events: none !important;
-  z-index: -1 !important;
-}
-
-/* Border glow */
-.mds-modal-overlay .mds-modal-card::after,
-.modal-overlay .mds-modal-card::after {
-  content: '' !important;
-  position: absolute !important;
-  top: -1px !important;
-  left: -1px !important;
-  right: -1px !important;
-  bottom: -1px !important;
-  background: linear-gradient(
-    45deg,
-    rgba(255, 255, 255, 0.3),
-    rgba(255, 255, 255, 0.1),
-    rgba(255, 255, 255, 0.05),
-    rgba(255, 255, 255, 0.1),
-    rgba(255, 255, 255, 0.3)
-  ) !important;
-  border-radius: 16px !important;
-  z-index: -2 !important;
-  opacity: 0.6 !important;
-  animation: mdsLiquidBorder 3s ease-in-out infinite !important;
-}
-
-@keyframes mdsLiquidBorder {
-  0%, 100% { opacity: 0.6; transform: scale(1); }
-  50% { opacity: 0.8; transform: scale(1.02); }
-}
-
-/* No hover lift or color change */
-.mds-modal-overlay .mds-modal-card,
-.mds-modal-overlay .mds-modal-card:hover,
-.modal-overlay .mds-modal-card,
-.modal-overlay .mds-modal-card:hover {
-  transform: none !important;
-}
-.mds-modal-overlay .mds-modal-card:hover::after,
-.modal-overlay .mds-modal-card:hover::after {
-  opacity: 0.6 !important;
-  animation-duration: 3s !important;
-}
-
-/* Light theme */
-html[data-theme="light"] .mds-modal-overlay .mds-modal-card,
-html[data-theme="light"] .modal-overlay .mds-modal-card {
-  background: rgba(255, 255, 255, 0.35) !important;
-  border: 1px solid rgba(255, 255, 255, 0.5) !important;
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.15) !important,
-    0 0 0 1px rgba(255, 255, 255, 0.3) !important,
-    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
-}
-
-/* Dark theme */
-html[data-theme="dark"] .mds-modal-overlay .mds-modal-card,
-html:not([data-theme]) .mds-modal-overlay .mds-modal-card,
-html[data-theme="dark"] .modal-overlay .mds-modal-card,
-html:not([data-theme]) .modal-overlay .mds-modal-card {
-  background: rgba(30, 41, 59, 0.5) !important;
-  border: 1px solid rgba(255, 255, 255, 0.35) !important;
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.5) !important,
-    0 0 0 1px rgba(255, 255, 255, 0.25) !important,
-    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
-}
-
 /* Header close button sizing + alignment */
 .mds-modal-header > button[aria-label="Fechar"] {
   /* Size and reset */
@@ -282,6 +162,31 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
   background: var(--mds-color-background-secondary);
 }
 
+/* Subtle variant - minimal border, muted colors, perfect for navigation buttons */
+.mds-button--subtle {
+  background: transparent;
+  border: 1px solid var(--mds-liquid-border-subtle, rgba(255, 255, 255, 0.12));
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+.mds-button--subtle:hover:not(:disabled) {
+  background: var(--mds-liquid-bg-button, rgba(255, 255, 255, 0.08));
+  border-color: var(--mds-liquid-border-bright, rgba(255, 255, 255, 0.2));
+  color: var(--mds-color-text-primary);
+}
+
+/* Light theme adjustments for subtle */
+html[data-theme="light"] .mds-button--subtle {
+  border-color: var(--mds-liquid-border-subtle, rgba(0, 0, 0, 0.12));
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+html[data-theme="light"] .mds-button--subtle:hover:not(:disabled) {
+  background: var(--mds-liquid-bg-button, rgba(0, 0, 0, 0.05));
+  border-color: var(--mds-liquid-border-bright, rgba(0, 0, 0, 0.2));
+  color: var(--mds-color-text-primary);
+}
+
 .mds-button--glass {
   background: var(--mds-color-background-glass-light);
   color: var(--mds-color-text-primary);
@@ -298,6 +203,18 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
   box-shadow: var(--mds-spacing-shadow-glass-lightHover);
 }
 
+.mds-button--danger {
+  background: var(--mds-color-error, #dc2626);
+  color: #ffffff;
+  border: 1px solid transparent;
+}
+
+.mds-button--danger:hover:not(:disabled) {
+  background: #b91c1c;
+  transform: var(--mds-effects-transform-hoverUp);
+  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
+}
+
 /* Button Icons */
 .mds-button__icon {
   display: inline-flex;
@@ -460,17 +377,59 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
   font-family: var(--mds-typography-fontFamily-brand);
 }
 
+/* Brand Logo Size Variants - Consistent across all environments */
+.mds-brand-logo--sm {
+  font-size: 1.5rem;  /* 24px - Navbar size */
+  letter-spacing: -0.03rem;
+}
+
+.mds-brand-logo--md {
+  font-size: 2rem;    /* 32px - Medium contexts */
+  letter-spacing: -0.04rem;
+}
+
+.mds-brand-logo--lg {
+  font-size: 2.125rem; /* 34px - Landing/hero contexts */
+  letter-spacing: var(--mds-typography-letterSpacing-brand);
+}
+
+/* Navbar-specific brand logo - always consistent size */
+.navbar-brand-logo,
+.navbar__brand-logo,
+.login-brand-logo {
+  font-size: 1.5rem !important;
+  letter-spacing: -0.03rem !important;
+  font-weight: var(--mds-typography-fontWeight-bold) !important;
+  font-family: var(--mds-typography-fontFamily-brand) !important;
+  color: var(--mds-color-text-primary) !important;
+}
+
 /* Brand Logo Responsive */
 @media (max-width: 768px) {
   .mds-text--brand,
   .mds-brand-logo,
-  .mds-brand-logo--sm,
-  .mds-brand-logo--md,
-  .mds-brand-logo--lg,
   .logo-brand {
     font-size: 1.8rem;
     letter-spacing: var(--mds-typography-letterSpacing-tight);
   }
+
+  .mds-brand-logo--sm,
+  .navbar-brand-logo,
+  .navbar__brand-logo,
+  .login-brand-logo {
+    font-size: 1.25rem !important;
+    letter-spacing: -0.02rem !important;
+  }
+
+  .mds-brand-logo--md {
+    font-size: 1.5rem;
+    letter-spacing: -0.03rem;
+  }
+
+  .mds-brand-logo--lg {
+    font-size: 1.8rem;
+    letter-spacing: var(--mds-typography-letterSpacing-tight);
+  }
 }
 
 /* Glass Card - Enhanced styles (complementing base tokens.css) */
@@ -972,6 +931,15 @@ html body div.mds-dropdown select.mds-select-themed {
   box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
 }
 
+/* Readonly input display (non-editable) */
+.mds-input-readonly {
+  padding: 10px 12px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  color: var(--mds-color-text-secondary, var(--text-secondary));
+  font-size: 0.95rem;
+}
+
 /* Textarea specific styles */
 .mds-textarea {
   resize: vertical;
@@ -994,6 +962,377 @@ html body div.mds-dropdown select.mds-select-themed {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
 }
 
+/* Select dropdown option styles for .mds-input - fixes Edge/Windows dropdown visibility */
+select.mds-input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  color-scheme: dark; /* Forces OS to render dropdown with dark theme on Edge/Chrome Windows */
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right var(--mds-spacing-md) center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  padding-right: calc(var(--mds-spacing-md) + 24px);
+  cursor: pointer;
+}
+
+select.mds-input:disabled {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  cursor: not-allowed;
+}
+
+select.mds-input option {
+  background-color: var(--mds-dashboard-control-option-bg) !important;
+  color: var(--mds-dashboard-control-option-color) !important;
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm) !important;
+}
+
+select.mds-input option:hover,
+select.mds-input option:focus,
+select.mds-input option:checked {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+}
+
+/* Light theme override for select.mds-input */
+html[data-theme="light"] select.mds-input {
+  color-scheme: light;
+}
+
+/* ============================================
+   Custom Select Component (JavaScript-rendered dropdown)
+   Cross-browser compatible - works on Edge/Chrome Windows
+   ============================================ */
+
+/* Select Trigger Button */
+.mds-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  font-family: var(--mds-typography-fontFamily-brand, system-ui, sans-serif);
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: var(--mds-color-text-primary, #ffffff);
+  background-color: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: left;
+  outline: none;
+  overflow: hidden;
+}
+
+.mds-select-trigger:hover:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+.mds-select-trigger:focus:not(:disabled) {
+  border-color: var(--mds-color-primary, #3b82f6);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
+}
+
+.mds-select-trigger--open {
+  border-color: var(--mds-color-primary, #3b82f6);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
+}
+
+.mds-select-trigger--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: rgba(255, 255, 255, 0.04);
+}
+
+.mds-select-trigger--loading {
+  cursor: wait;
+}
+
+.mds-select-trigger--error {
+  border-color: var(--mds-color-error, #ef4444);
+}
+
+.mds-select-trigger--error:focus {
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
+}
+
+.mds-select-trigger--full-width {
+  width: 100%;
+}
+
+/* Select Trigger Value */
+.mds-select-trigger__value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mds-select-trigger__placeholder {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+}
+
+/* Select Trigger Icon */
+.mds-select-trigger__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+  transition: transform 0.2s ease;
+}
+
+.mds-select-trigger--open .mds-select-trigger__icon {
+  transform: rotate(180deg);
+}
+
+.mds-select-chevron {
+  width: 16px;
+  height: 16px;
+}
+
+.mds-select-spinner {
+  width: 16px;
+  height: 16px;
+  animation: mds-select-spin 1s linear infinite;
+}
+
+@keyframes mds-select-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Select Dropdown */
+.mds-select-dropdown {
+  background-color: var(--mds-dashboard-control-option-bg, #2a2a2a);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
+  overflow-y: auto;
+  overflow-x: hidden;
+  animation: mds-select-dropdown-enter 0.15s ease-out;
+}
+
+@keyframes mds-select-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Select Search */
+.mds-select-search {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: var(--mds-dashboard-control-option-bg, #2a2a2a);
+}
+
+.mds-select-search__input {
+  width: 100%;
+  padding: 8px 12px 8px 36px;
+  font-family: var(--mds-typography-fontFamily-brand, system-ui, sans-serif);
+  font-size: 0.9rem;
+  color: var(--mds-color-text-primary, #ffffff);
+  background-color: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.mds-select-search__input:focus {
+  border-color: var(--mds-color-primary, #3b82f6);
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.mds-select-search__input::-moz-placeholder {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+}
+
+.mds-select-search__input::placeholder {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+}
+
+.mds-select-search__icon {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+  pointer-events: none;
+}
+
+/* Select Options List */
+.mds-select-options {
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  overflow-y: auto;
+  max-height: inherit;
+}
+
+/* Select Option */
+.mds-select-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+  font-size: 0.95rem;
+  color: var(--mds-dashboard-control-option-color, #ffffff);
+  background-color: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.mds-select-option:hover,
+.mds-select-option--highlighted {
+  background-color: var(--mds-dashboard-control-option-bg-hover, #505050);
+}
+
+.mds-select-option--selected {
+  color: var(--mds-color-primary, #3b82f6);
+  font-weight: 500;
+}
+
+.mds-select-option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mds-select-option--disabled:hover {
+  background-color: transparent;
+}
+
+.mds-select-option--empty {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+  font-style: italic;
+  cursor: default;
+}
+
+.mds-select-option--empty:hover {
+  background-color: transparent;
+}
+
+.mds-select-option__label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mds-select-option__check {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--mds-color-primary, #3b82f6);
+}
+
+/* Select Size Variants */
+.mds-select--sm .mds-select-trigger {
+  padding: 6px 10px;
+  font-size: 0.85rem;
+}
+
+.mds-select--sm .mds-select-option {
+  padding: 6px 10px;
+  font-size: 0.85rem;
+}
+
+.mds-select--lg .mds-select-trigger {
+  padding: 14px 16px;
+  font-size: 1.05rem;
+}
+
+.mds-select--lg .mds-select-option {
+  padding: 12px 16px;
+  font-size: 1.05rem;
+}
+
+/* Light Theme Overrides */
+html[data-theme="light"] .mds-select-trigger {
+  color: var(--mds-color-text-primary, #1a1a1a);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+html[data-theme="light"] .mds-select-trigger:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.08);
+  border-color: rgba(0, 0, 0, 0.25);
+}
+
+html[data-theme="light"] .mds-select-trigger__placeholder {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-trigger__icon {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-dropdown {
+  background-color: var(--mds-dashboard-control-option-bg, #ffffff);
+  border-color: rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="light"] .mds-select-search {
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--mds-dashboard-control-option-bg, #ffffff);
+}
+
+html[data-theme="light"] .mds-select-search__input {
+  color: var(--mds-color-text-primary, #1a1a1a);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+html[data-theme="light"] .mds-select-search__input:focus {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+html[data-theme="light"] .mds-select-search__input::-moz-placeholder {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-search__input::placeholder {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-search__icon {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-option {
+  color: var(--mds-dashboard-control-option-color, #1a1a1a);
+}
+
+html[data-theme="light"] .mds-select-option:hover,
+html[data-theme="light"] .mds-select-option--highlighted {
+  background-color: var(--mds-dashboard-control-option-bg-hover, #f0f7ff);
+}
+
+html[data-theme="light"] .mds-select-option--empty {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
 /* Label styles */
 .mds-label {
   display: block;
@@ -1055,33 +1394,172 @@ html body div.mds-dropdown select.mds-select-themed {
   gap: var(--mds-spacing-xl);
 }
 
-/* ========================================
-   Layout Utility Classes - @back optimization
-   ======================================== */
-
-/* Flexbox utilities */
-.mds-flex {
+/* Dashboard Progress Bars */
+.mds-progress-row {
   display: flex;
+  align-items: center;
+  gap: 15px;
 }
 
-.mds-flex-col {
-  display: flex;
-  flex-direction: column;
+.mds-progress-label {
+  width: 120px;
+  font-size: 0.9rem;
+  color: var(--mds-color-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.mds-flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.mds-progress-label--wide { width: 200px; }
+
+.mds-progress-track {
+  flex: 1;
+  height: 8px;
+  background: var(--mds-color-border, rgba(128, 128, 128, 0.2));
+  border-radius: 4px;
+  overflow: hidden;
 }
 
-.mds-flex-between {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.mds-progress-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
 }
 
-.mds-flex-start {
+.mds-progress-fill--blue { background: linear-gradient(90deg, #007bff, #0056b3); }
+.mds-progress-fill--green { background: linear-gradient(90deg, #28a745, #20c997); }
+.mds-progress-fill--yellow { background: linear-gradient(90deg, #ffc107, #fd7e14); }
+
+.mds-progress-value {
+  width: 60px;
+  text-align: right;
+  font-size: 0.9rem;
+  color: var(--mds-color-text-primary);
+  font-weight: 500;
+}
+
+/* Dashboard Stat Items (themed) */
+.mds-stat-box {
+  padding: 15px;
+  background: var(--mds-stat-box-bg, rgba(255, 255, 255, 0.05));
+  border-radius: 8px;
+  text-align: center;
+  border: var(--mds-stat-box-border, none);
+}
+
+html[data-theme="light"] .mds-stat-box {
+  --mds-stat-box-bg: rgba(0, 0, 0, 0.03);
+  --mds-stat-box-border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.mds-stat-box__value {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 5px;
+  color: var(--mds-color-text-primary);
+}
+
+.mds-stat-box__label {
+  font-size: 0.8rem;
+  color: var(--mds-color-text-secondary);
+}
+
+/* Dashboard Activity Items */
+.mds-activity-item {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 15px;
+  background: var(--mds-color-border-light, rgba(128, 128, 128, 0.1));
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.mds-activity-icon {
+  font-size: 1.5rem;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mds-color-border, rgba(128, 128, 128, 0.2));
+  border-radius: 8px;
+}
+
+.mds-activity-content { flex: 1; }
+
+.mds-activity-text {
+  font-size: 0.9rem;
+  color: var(--mds-color-text-primary);
+  margin-bottom: 5px;
+}
+
+.mds-activity-time {
+  font-size: 0.8rem;
+  color: var(--mds-color-text-tertiary, var(--mds-color-text-secondary));
+}
+
+.mds-activity-status {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  background: rgba(40, 167, 69, 0.2);
+  color: #28a745;
+}
+
+/* Dashboard Card Header */
+.mds-card-header {
+  margin-bottom: 25px;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: inherit;
+}
+
+.mds-card-header--sm { font-size: 1.25rem; margin-bottom: 15px; }
+
+/* Card Title/Subtitle */
+.mds-card-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--mds-color-text-primary, inherit);
+}
+
+.mds-card-subtitle {
+  margin: 0;
+  font-size: 0.9rem;
+  opacity: 0.8;
+  color: var(--mds-color-text-secondary, inherit);
+}
+
+/* ========================================
+   Layout Utility Classes - @back optimization
+   ======================================== */
+
+/* Flexbox utilities */
+.mds-flex {
+  display: flex;
+}
+
+.mds-flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.mds-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mds-flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mds-flex-start {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
@@ -1511,3 +1989,1975 @@ html[data-theme="light"] .mds-navbar-user-badge {
   font-size: var(--mds-typography-fontSize-sm);
   word-break: break-all;
 }
+
+/* ========================================
+   Settings Page Components - PROC-007 Fase 3
+   ======================================== */
+
+/* Page container */
+.mds-page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--mds-spacing-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-spacing-lg);
+}
+
+/* Tabs Navigation */
+.mds-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding-bottom: 0;
+}
+
+html[data-theme="light"] .mds-tabs {
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+
+.mds-tab {
+  padding: 12px 20px;
+  border: none;
+  background: transparent;
+  color: var(--mds-color-text-secondary);
+  cursor: pointer;
+  font-size: 0.95rem;
+  font-weight: 400;
+  font-family: var(--mds-typography-fontFamily-brand);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.mds-tab:hover {
+  color: var(--mds-color-text-primary);
+}
+
+.mds-tab--active {
+  background: rgba(59, 130, 246, 0.1);
+  color: var(--mds-color-info);
+  font-weight: 600;
+  border-bottom-color: var(--mds-color-info);
+}
+
+/* Settings Card (bordered sections) */
+.mds-settings-card {
+  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+html[data-theme="light"] .mds-settings-card {
+  border-color: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+/* Key-Value Pair Display */
+.mds-kv-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2px 0;
+  font-size: 0.9rem;
+}
+
+.mds-kv-label {
+  color: var(--mds-color-text-secondary);
+}
+
+.mds-kv-value {
+  font-weight: 600;
+  color: var(--mds-color-text-primary);
+}
+
+/* Status Box (colored background indicators) */
+.mds-status-box {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid;
+}
+
+.mds-status-box--loading {
+  background-color: rgba(156, 163, 175, 0.1);
+  border-color: rgba(156, 163, 175, 0.2);
+}
+
+.mds-status-box--success {
+  background-color: rgba(16, 185, 129, 0.1);
+  border-color: rgba(16, 185, 129, 0.2);
+}
+
+.mds-status-box--error {
+  background-color: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.2);
+}
+
+.mds-status-box--warning {
+  background-color: rgba(245, 158, 11, 0.1);
+  border-color: rgba(245, 158, 11, 0.2);
+}
+
+.mds-status-box--info {
+  background-color: rgba(59, 130, 246, 0.1);
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+.mds-status-box__icon {
+  font-size: 1.5rem;
+}
+
+.mds-status-box__content {
+  flex: 1;
+}
+
+.mds-status-box__title {
+  font-weight: 600;
+}
+
+.mds-status-box__title--loading { color: var(--mds-color-text-secondary); }
+.mds-status-box__title--success { color: var(--mds-color-success); }
+.mds-status-box__title--error { color: var(--mds-color-error); }
+.mds-status-box__title--warning { color: var(--mds-color-warning); }
+.mds-status-box__title--info { color: var(--mds-color-info); }
+
+.mds-status-box__subtitle {
+  font-size: 0.85rem;
+  color: var(--mds-color-text-secondary);
+  margin-top: 4px;
+}
+
+/* Info Panel (blue informational box) */
+.mds-info-panel {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.mds-info-panel__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.mds-info-panel__icon {
+  font-size: 1.2rem;
+}
+
+.mds-info-panel__title {
+  font-weight: 600;
+  color: var(--mds-color-text-primary);
+}
+
+.mds-info-panel__content {
+  font-size: 0.85rem;
+  color: var(--mds-color-text-secondary);
+  line-height: 1.5;
+}
+
+/* Error Panel (red error box) */
+.mds-error-panel {
+  padding: 12px 16px;
+  border-radius: 8px;
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: var(--mds-color-error);
+}
+
+/* Danger Section (for delete account, etc.) */
+.mds-danger-section {
+  padding: 20px;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: 12px;
+  background-color: rgba(239, 68, 68, 0.05);
+}
+
+.mds-danger-section__title {
+  color: var(--mds-color-error);
+  margin-bottom: 8px;
+}
+
+/* Section Header with Icon */
+.mds-section-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.mds-section-header__icon {
+  font-size: 2rem;
+}
+
+.mds-section-header__content {
+  flex: 1;
+}
+
+.mds-section-header__title {
+  margin-bottom: 4px;
+}
+
+.mds-section-header__subtitle {
+  color: var(--mds-color-text-secondary);
+}
+
+/* Grid layouts */
+.mds-grid-auto {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.mds-grid-auto-sm {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+/* Notification/Alert variants */
+.mds-notification {
+  padding: 16px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mds-notification--success {
+  background-color: rgba(16, 185, 129, 0.1);
+  border-left: 4px solid var(--mds-color-success);
+}
+
+.mds-notification--error {
+  background-color: rgba(239, 68, 68, 0.1);
+  border-left: 4px solid var(--mds-color-error);
+}
+
+.mds-notification__icon {
+  font-size: 1.2rem;
+}
+
+/* Search counter */
+.mds-search-counter {
+  font-size: 0.9rem;
+  color: var(--mds-color-text-secondary);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* Width utilities */
+.mds-w-full { width: 100%; }
+.mds-w-auto { width: auto; }
+.mds-max-w-sm { max-width: 400px; }
+.mds-max-w-md { max-width: 600px; }
+.mds-max-w-lg { max-width: 800px; }
+
+/* Margin auto utilities */
+.mds-ml-auto { margin-left: auto; }
+.mds-mr-auto { margin-right: auto; }
+.mds-mx-auto { margin-left: auto; margin-right: auto; }
+
+/* Margin top utilities */
+.mds-mt-xs { margin-top: var(--mds-spacing-xs); }
+.mds-mt-sm { margin-top: var(--mds-spacing-sm); }
+.mds-mt-md { margin-top: var(--mds-spacing-md); }
+.mds-mt-lg { margin-top: var(--mds-spacing-lg); }
+.mds-mt-xl { margin-top: var(--mds-spacing-xl); }
+
+/* Text utilities */
+.mds-text-secondary { color: var(--mds-color-text-secondary); }
+.mds-text-success { color: var(--mds-color-success); }
+.mds-text-error { color: var(--mds-color-error); }
+.mds-text-warning { color: var(--mds-color-warning); }
+.mds-text-info { color: var(--mds-color-info); }
+
+.mds-text-sm { font-size: 0.85rem; }
+.mds-text-xs { font-size: 0.75rem; }
+.mds-text-lg { font-size: 1.1rem; }
+
+.mds-font-medium { font-weight: 500; }
+.mds-font-semibold { font-weight: 600; }
+.mds-font-bold { font-weight: 700; }
+
+/* Box sizing */
+.mds-box-border { box-sizing: border-box; }
+
+/* Overflow */
+.mds-overflow-hidden { overflow: hidden; }
+
+/* Zero padding */
+.mds-p-0 { padding: 0; }
+
+/* ============================================
+   PROC-007 Phase 5: Deep Cleanup Classes
+   ============================================ */
+
+/* ---------- Badges (Status Indicators) ---------- */
+.mds-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 12px;
+  white-space: nowrap;
+}
+
+.mds-badge--sm {
+  padding: 2px 8px;
+  font-size: 11px;
+}
+
+.mds-badge--lg {
+  padding: 6px 14px;
+  font-size: 13px;
+}
+
+.mds-badge--success {
+  background-color: rgba(16, 185, 129, 0.15);
+  color: var(--mds-color-success, #10b981);
+}
+
+.mds-badge--warning {
+  background-color: rgba(245, 158, 11, 0.15);
+  color: var(--mds-color-warning, #f59e0b);
+}
+
+.mds-badge--danger {
+  background-color: rgba(239, 68, 68, 0.15);
+  color: var(--mds-color-error, #ef4444);
+}
+
+.mds-badge--info {
+  background-color: rgba(59, 130, 246, 0.15);
+  color: var(--mds-color-info, #3b82f6);
+}
+
+.mds-badge--neutral {
+  background-color: rgba(156, 163, 175, 0.15);
+  color: var(--mds-color-text-secondary, #9ca3af);
+}
+
+/* ---------- Code/Monospace Elements ---------- */
+.mds-code {
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 12px;
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.mds-code-block {
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 12px;
+  background-color: rgba(0, 0, 0, 0.2);
+  padding: 12px 16px;
+  border-radius: 8px;
+  overflow-x: auto;
+  white-space: pre;
+  margin: 0;
+}
+
+.mds-code-box {
+  background-color: rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 12px 16px;
+  overflow: auto;
+  max-height: 300px;
+}
+
+.mds-code-box pre {
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--mds-color-text-primary);
+}
+
+/* ---------- Diff Display (Audit Logs) ---------- */
+.mds-diff {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 12px;
+  align-items: center;
+}
+
+.mds-diff-label {
+  font-size: 11px;
+  color: var(--mds-color-text-secondary);
+  margin-bottom: 4px;
+}
+
+.mds-diff-value {
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.mds-diff-before {
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  color: var(--mds-color-error);
+}
+
+.mds-diff-after {
+  background-color: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+  color: var(--mds-color-success);
+}
+
+.mds-diff-arrow {
+  color: var(--mds-color-text-secondary);
+  font-size: 18px;
+}
+
+/* ---------- Change Item (Field Change in Audit) ---------- */
+.mds-change-item {
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.mds-change-item--modified {
+  background-color: rgba(59, 130, 246, 0.05);
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+.mds-change-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.mds-change-field {
+  color: var(--mds-color-text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.mds-change-type {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.mds-change-type--modified {
+  background-color: rgba(59, 130, 246, 0.2);
+  color: var(--mds-color-info);
+}
+
+.mds-change-type--added {
+  background-color: rgba(16, 185, 129, 0.2);
+  color: var(--mds-color-success);
+}
+
+.mds-change-type--removed {
+  background-color: rgba(239, 68, 68, 0.2);
+  color: var(--mds-color-error);
+}
+
+/* ---------- Table Utilities ---------- */
+.mds-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.mds-th {
+  padding: 14px 16px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--mds-color-text-primary);
+  background-color: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.mds-th--center { text-align: center; }
+.mds-th--right { text-align: right; }
+
+.mds-td {
+  padding: 12px 16px;
+  color: var(--mds-color-text-primary);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.mds-td--center { text-align: center; }
+.mds-td--right { text-align: right; }
+.mds-td--secondary { color: var(--mds-color-text-secondary); }
+.mds-td--small { font-size: 0.9rem; }
+
+.mds-tr:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.mds-tr--striped:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.mds-table-empty {
+  padding: 40px;
+  text-align: center;
+  color: var(--mds-color-text-secondary);
+}
+
+/* ---------- Action Button Groups ---------- */
+.mds-action-group {
+  display: flex;
+  gap: 2px;
+  justify-content: center;
+  align-items: center;
+}
+
+.mds-action-btn {
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.mds-action-btn--view {
+  background-color: rgba(59, 130, 246, 0.15);
+  color: var(--mds-color-info);
+}
+
+.mds-action-btn--view:hover {
+  background-color: rgba(59, 130, 246, 0.25);
+}
+
+.mds-action-btn--edit {
+  background-color: rgba(245, 158, 11, 0.15);
+  color: var(--mds-color-warning);
+}
+
+.mds-action-btn--edit:hover {
+  background-color: rgba(245, 158, 11, 0.25);
+}
+
+.mds-action-btn--delete {
+  background-color: rgba(239, 68, 68, 0.15);
+  color: var(--mds-color-error);
+}
+
+.mds-action-btn--delete:hover {
+  background-color: rgba(239, 68, 68, 0.25);
+}
+
+/* ---------- Avatar/User Icon ---------- */
+.mds-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: rgba(59, 130, 246, 0.15);
+  color: var(--mds-color-info);
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.mds-avatar--sm {
+  width: 32px;
+  height: 32px;
+  font-size: 0.85rem;
+}
+
+.mds-avatar--lg {
+  width: 56px;
+  height: 56px;
+  font-size: 1.5rem;
+}
+
+/* ---------- User Row (Table Cell with Avatar) ---------- */
+.mds-user-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mds-user-row__avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.mds-user-row__fallback {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: rgba(59, 130, 246, 0.15);
+  color: var(--mds-color-info);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+/* ---------- Link Styles ---------- */
+.mds-link {
+  color: var(--mds-color-info, #3b82f6);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.mds-link:hover {
+  text-decoration: underline;
+}
+
+.mds-link--underline {
+  text-decoration: underline;
+}
+
+/* ---------- Cookie Banner ---------- */
+.mds-cookie-banner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  padding: 1rem;
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+}
+
+.mds-cookie-banner--hidden {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.mds-cookie-banner--visible {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.mds-cookie-banner__content {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 1.25rem;
+  background: var(--mds-liquid-bg-elevated);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border-radius: 12px;
+  border: 1px solid var(--mds-liquid-border-subtle);
+  box-shadow: var(--mds-liquid-shadow-floating);
+}
+
+.mds-cookie-banner__title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--mds-color-text-primary);
+}
+
+.mds-cookie-banner__text {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--mds-color-text-secondary);
+  line-height: 1.5;
+}
+
+.mds-cookie-banner__actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+/* ---------- Ghost Button (for banners) ---------- */
+.mds-btn-ghost {
+  padding: 0.625rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--mds-color-text-secondary);
+  background: transparent;
+  border: 1px solid var(--mds-liquid-border-subtle, rgba(255, 255, 255, 0.3));
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.mds-btn-ghost:hover {
+  background: var(--mds-liquid-bg-hover, rgba(255, 255, 255, 0.1));
+}
+
+.mds-btn-solid {
+  padding: 0.625rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: white;
+  background: var(--mds-color-primary, #007AFF);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.mds-btn-solid:hover {
+  opacity: 0.9;
+}
+
+/* ---------- Icon Buttons (Action Buttons in Tables) ---------- */
+.mds-icon-btn {
+  background: transparent;
+  border: none;
+  padding: 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.mds-icon-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.mds-icon-btn--info {
+  color: var(--mds-color-info);
+}
+
+.mds-icon-btn--info:hover:not(:disabled) {
+  background-color: rgba(59, 130, 246, 0.15);
+}
+
+.mds-icon-btn--success {
+  color: var(--mds-color-success);
+}
+
+.mds-icon-btn--success:hover:not(:disabled) {
+  background-color: rgba(16, 185, 129, 0.15);
+}
+
+.mds-icon-btn--danger {
+  color: var(--mds-color-error);
+}
+
+.mds-icon-btn--danger:hover:not(:disabled) {
+  background-color: rgba(239, 68, 68, 0.15);
+}
+
+.mds-icon-btn--secondary {
+  color: var(--mds-color-text-secondary);
+}
+
+.mds-icon-btn--secondary:hover:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* ---------- Username Code Display ---------- */
+.mds-username {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: var(--mds-color-info);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.mds-username:hover {
+  background-color: rgba(59, 130, 246, 0.2);
+  transform: scale(1.02);
+}
+
+/* ---------- ID Row (Compact Identity Display) ---------- */
+.mds-id-row {
+  background-color: rgba(255, 255, 255, 0.04);
+}
+
+.mds-id-row td {
+  padding: 4px 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.mds-id-text {
+  color: var(--mds-color-text-secondary);
+  font-size: 0.65rem;
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  letter-spacing: 0.02em;
+  opacity: 0.7;
+}
+
+/* ---------- Data Row (Table Row with Hover) ---------- */
+.mds-data-row {
+  transition: background-color 0.2s;
+}
+
+.mds-data-row:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+/* ---------- Search Input Container ---------- */
+.mds-search-row {
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* ---------- Overflow X Auto ---------- */
+.mds-overflow-x-auto {
+  overflow-x: auto;
+}
+
+/* ---------- Modal Overlay ---------- */
+.mds-modal-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 24px;
+}
+
+.mds-modal-overlay--dark {
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(12px) saturate(120%);
+  -webkit-backdrop-filter: blur(12px) saturate(120%);
+}
+
+.mds-modal-overlay--light {
+  background-color: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(12px) saturate(120%);
+  -webkit-backdrop-filter: blur(12px) saturate(120%);
+}
+
+/* ---------- Grid Layouts ---------- */
+.mds-grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.mds-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.mds-grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+
+.mds-grid-2-1-1 {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: 12px;
+}
+
+.mds-grid-2-1 {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 12px;
+}
+
+/* Gap Variants for Grids */
+.mds-grid-gap-md { gap: 16px; }
+.mds-grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); }
+.mds-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); }
+.mds-grid--auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
+
+/* Font Weight Utilities */
+.mds-fw-400 { font-weight: 400; }
+.mds-fw-500 { font-weight: 500; }
+.mds-fw-600 { font-weight: 600; }
+.mds-fw-700 { font-weight: 700; }
+
+/* ---------- Info Card (Compact Info Display) ---------- */
+.mds-info-card {
+  padding: 12px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.mds-info-card--primary {
+  background-color: rgba(59, 130, 246, 0.1);
+  border-left: 3px solid var(--mds-color-info);
+}
+
+.mds-info-card--subtle {
+  background-color: rgba(255, 255, 255, 0.03);
+  border-left: 3px solid rgba(0, 212, 255, 0.5);
+}
+
+.mds-info-card__label {
+  font-size: 0.7rem;
+  margin-bottom: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--mds-color-text-secondary);
+}
+
+.mds-info-card__value {
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  letter-spacing: 0.5px;
+  font-size: 0.95rem;
+}
+
+/* ---------- Meta Row (Inline Meta Display) ---------- */
+.mds-meta-row {
+  padding: 10px 12px;
+  background-color: rgba(255, 255, 255, 0.03);
+  border-radius: 10px;
+  display: flex;
+  gap: 16px;
+  font-size: 0.8rem;
+  flex-wrap: wrap;
+}
+
+/* ---------- Preview Box ---------- */
+.mds-preview-box {
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  border-left: 4px solid var(--mds-color-info);
+  background-color: rgba(59, 130, 246, 0.1);
+}
+
+.mds-preview-box--warning {
+  background-color: rgba(234, 179, 8, 0.1);
+  border-left-color: var(--mds-color-warning);
+}
+
+/* ---------- Read-Only Field ---------- */
+.mds-readonly-field {
+  padding: 8px 10px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  color: var(--mds-color-text-secondary);
+  font-size: 0.85rem;
+}
+
+/* ---------- Flex Utilities ---------- */
+.mds-flex-1 { flex: 1; }
+.mds-align-stretch { align-items: stretch; }
+
+/* ---------- User Header Layout (Photo + Info Cards) ---------- */
+.mds-user-header {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+  align-items: stretch;
+}
+
+.mds-user-header__info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mds-user-header__cards {
+  display: flex;
+  gap: 8px;
+  flex: 1;
+}
+
+/* ---------- Info Card Value Variants ---------- */
+.mds-info-card__value--body {
+  font-size: 0.9rem;
+  color: var(--mds-color-text-primary);
+}
+
+.mds-info-card__value--small {
+  font-size: 0.75rem;
+  color: var(--mds-color-text-secondary);
+}
+
+/* ---------- Helper Text ---------- */
+.mds-helper-text {
+  font-size: 0.75rem;
+  margin-top: 2px;
+  display: block;
+}
+
+.mds-helper-text--checking {
+  color: var(--mds-color-text-secondary);
+}
+
+.mds-helper-text--success {
+  color: var(--mds-color-success);
+}
+
+.mds-helper-text--error {
+  color: var(--mds-color-error);
+}
+
+/* ---------- Info Banner (Full-width info/warning) ---------- */
+.mds-info-banner {
+  padding: 10px 12px;
+  border-radius: 6px;
+  border-left: 3px solid var(--mds-color-info);
+  background-color: rgba(59, 130, 246, 0.1);
+}
+
+.mds-info-banner--warning {
+  background-color: rgba(234, 179, 8, 0.1);
+  border-left-color: var(--mds-color-warning);
+}
+
+/* ---------- Preview Label/Value ---------- */
+.mds-preview-box__label {
+  font-size: 0.8rem;
+  margin-bottom: 4px;
+  color: var(--mds-color-text-secondary);
+}
+
+.mds-preview-box__value {
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  letter-spacing: 0.5px;
+  font-size: 1rem;
+}
+
+/* ---------- Text Utilities ---------- */
+.mds-text-sm { font-size: 0.8rem; }
+.mds-text-xs { font-size: 0.75rem; }
+.mds-text-primary { color: var(--mds-color-text-primary); }
+.mds-text-secondary { color: var(--mds-color-text-secondary); }
+.mds-text-success { color: var(--mds-color-success); }
+.mds-text-error { color: var(--mds-color-error); }
+.mds-text-warning { color: var(--mds-color-warning); }
+
+/* Link Utilities */
+.mds-link-primary { color: var(--mds-color-primary); text-decoration: none; }
+.mds-link-primary:hover { opacity: 0.8; }
+.mds-underline { text-decoration: underline; }
+.mds-no-underline { text-decoration: none; }
+
+/* ---------- Width Utilities ---------- */
+.mds-full-width { width: 100%; }
+
+/* ---------- Alignment Utilities ---------- */
+.mds-align-self-start { align-self: flex-start; }
+.mds-align-self-center { align-self: center; }
+.mds-align-self-end { align-self: flex-end; }
+.mds-text-center { text-align: center; }
+
+/* ---------- Flex Wrap Utilities ---------- */
+.mds-flex-wrap { flex-wrap: wrap; }
+
+/* ---------- Max Width Utilities ---------- */
+.mds-max-w-sm { max-width: 300px; }
+.mds-max-w-md { max-width: 400px; }
+.mds-max-w-lg { max-width: 500px; }
+.mds-max-w-xl { max-width: 600px; }
+.mds-max-w-2xl { max-width: 800px; }
+.mds-max-w-3xl { max-width: 1000px; }
+
+/* ---------- Border Utilities ---------- */
+.mds-border-bottom { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
+
+/* ---------- Table Container ---------- */
+.mds-table-container { overflow-x: auto; }
+
+/* ---------- Table Row Variants ---------- */
+.mds-tr--header { background-color: rgba(255, 255, 255, 0.05); }
+.mds-tr--hoverable {
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  transition: background-color 0.2s;
+}
+.mds-tr--hoverable:hover { background-color: rgba(255, 255, 255, 0.03); }
+
+/* ---------- Table Cell Variants ---------- */
+.mds-td--empty {
+  padding: 40px;
+  text-align: center;
+  color: var(--mds-color-text-secondary);
+}
+
+/* ---------- Code Variants ---------- */
+.mds-code--info {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: var(--mds-color-info);
+  font-weight: 600;
+}
+
+/* ---------- Badge Variants ---------- */
+.mds-badge--accent {
+  background-color: rgba(147, 51, 234, 0.1);
+  color: var(--mds-color-accent, #9333ea);
+}
+
+/* ---------- User Cell (Email + ID) ---------- */
+.mds-user-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.mds-user-cell__email {
+  font-weight: 500;
+  color: var(--mds-color-text-primary);
+}
+.mds-user-cell__id {
+  font-size: 0.75rem;
+  color: var(--mds-color-text-secondary);
+}
+
+/* ---------- Pending Item (Invitation/Request Row) ---------- */
+.mds-pending-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background-color: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  border-left: 3px solid var(--mds-color-warning);
+}
+
+/* ---------- Text Size Utilities ---------- */
+.mds-text-lg { font-size: 1.2rem; }
+
+/* ---------- Font Utilities ---------- */
+.mds-font-mono { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; }
+.mds-font-semibold { font-weight: 600; }
+.mds-font-medium { font-weight: 500; }
+
+/* ---------- Settings Section Layout ---------- */
+.mds-settings-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+.mds-settings-card {
+  padding: 24px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.mds-settings-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.mds-settings-header__icon {
+  font-size: 2rem;
+}
+
+.mds-settings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+/* ---------- Settings Panel ---------- */
+.mds-settings-panel {
+  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+}
+
+.mds-settings-panel__title {
+  margin-bottom: 8px;
+}
+
+.mds-settings-panel__description {
+  margin-bottom: 16px;
+}
+
+/* ---------- Key-Value Row ---------- */
+.mds-kv-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mds-kv-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mds-kv-label {
+  color: var(--mds-color-text-secondary);
+}
+
+.mds-kv-value {
+  font-weight: 600;
+}
+
+/* ---------- Info Box Header ---------- */
+.mds-info-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.mds-info-header__icon {
+  font-size: 1.2rem;
+}
+
+/* ---------- Margin Utilities ---------- */
+.mds-mb-xs { margin-bottom: 4px; }
+.mds-mb-sm { margin-bottom: var(--mds-spacing-sm); }
+.mds-mb-md { margin-bottom: var(--mds-spacing-md); }
+.mds-mb-lg { margin-bottom: var(--mds-spacing-lg); }
+.mds-mt-sm { margin-top: var(--mds-spacing-sm); }
+.mds-pt-sm { padding-top: var(--mds-spacing-sm); }
+
+/* ---------- Border Utilities ---------- */
+.mds-border-top { border-top: 1px solid rgba(255, 255, 255, 0.1); }
+
+/* ---------- Display Utilities ---------- */
+.mds-block { display: block; }
+
+/* ---------- Flex Alignment Utilities ---------- */
+.mds-justify-center { justify-content: center; }
+.mds-justify-between { justify-content: space-between; }
+.mds-justify-start { justify-content: flex-start; }
+.mds-justify-end { justify-content: flex-end; }
+
+/* ---------- Extra Padding Utilities ---------- */
+.mds-p-2xl { padding: 2.5rem; }
+.mds-p-3xl { padding: 3rem; }
+
+/* ---------- Margin Zero Utilities ---------- */
+.mds-m-0 { margin: 0; }
+.mds-mt-0 { margin-top: 0; }
+.mds-mb-0 { margin-bottom: 0; }
+
+/* ---------- Text Size Utilities ---------- */
+.mds-text-4xl { font-size: 4rem; }
+.mds-text-3xl { font-size: 3rem; }
+.mds-text-2xl { font-size: 2rem; }
+
+/* ---------- Min Height Utilities ---------- */
+.mds-min-h-400 { min-height: 400px; }
+.mds-min-h-300 { min-height: 300px; }
+.mds-min-h-200 { min-height: 200px; }
+
+/* ---------- Text Color Utilities ---------- */
+.mds-text-inherit { color: inherit; }
+
+/* ---------- Text Transform Utilities ---------- */
+.mds-capitalize { text-transform: capitalize; }
+
+/* ---------- Sidebar Utilities ---------- */
+.mds-sidebar-icon { font-size: 1.25rem; }
+.mds-sidebar-scroll { flex: 1; overflow-y: auto; padding-top: 0.5rem; position: relative; }
+.mds-sidebar-item { position: relative; }
+.mds-sidebar-footer { margin-top: auto; padding: 0.5rem 0; display: flex; justify-content: center; }
+.mds-mt-xs { margin-top: 0.25rem; }
+.mds-mt-md { margin-top: var(--mds-spacing-md); }
+.mds-mt-lg { margin-top: var(--mds-spacing-lg); }
+
+/* ---------- Legal Page Layout ---------- */
+.mds-legal-page {
+  min-height: 100vh;
+  padding: 2rem;
+  background-color: var(--mds-color-bg);
+  color: var(--mds-color-text-primary);
+}
+
+.mds-legal-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.mds-legal-back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--mds-color-info);
+  text-decoration: none;
+  font-size: 0.875rem;
+  margin-bottom: 1.5rem;
+  transition: opacity 0.2s;
+}
+.mds-legal-back-link:hover { opacity: 0.8; }
+
+.mds-legal-title {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--mds-color-text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.mds-legal-updated {
+  font-size: 0.875rem;
+  color: var(--mds-color-text-secondary);
+  margin-bottom: 2rem;
+}
+
+.mds-legal-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.mds-legal-section-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--mds-color-text-primary);
+  margin-bottom: 0.75rem;
+}
+
+.mds-legal-section-content {
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: var(--mds-color-text-secondary);
+}
+
+.mds-legal-list {
+  margin-top: 0.5rem;
+  padding-left: 1.5rem;
+}
+
+.mds-legal-glass-card {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+  background: var(--mds-liquid-bg-elevated);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border-radius: 16px;
+  border: 1px solid var(--mds-liquid-border-subtle);
+}
+
+.mds-legal-gradient-bg {
+  min-height: 100vh;
+  padding: 2rem;
+  background: var(--mds-liquid-gradient);
+  color: var(--mds-color-text-primary);
+}
+/**
+ * ProfileCard Component Styles
+ * Passport-style profile card with Liquid Glass aesthetic
+ * Supports light/dark themes via data-theme attribute
+ *
+ * @package @metropolle/design-system
+ */
+
+/* =============================================================================
+   Main Card
+   ============================================================================= */
+
+.mds-profile-card {
+  --mds-profile-card-photo-width: 280px;
+
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--mds-profile-card-photo-width) 1fr;
+  gap: 0;
+  /* Liquid Glass */
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(24px) saturate(140%);
+  -webkit-backdrop-filter: blur(24px) saturate(140%);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: visible;
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  max-width: 800px;
+  width: 100%;
+  animation: mds-profile-card-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes mds-profile-card-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Light theme */
+html[data-theme="light"] .mds-profile-card {
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
+}
+
+/* =============================================================================
+   Grain Overlay
+   ============================================================================= */
+
+.mds-profile-card__grain {
+  position: absolute;
+  inset: 0;
+  border-radius: 24px;
+  opacity: 0.12;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+  z-index: 5;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
+}
+
+html[data-theme="light"] .mds-profile-card__grain {
+  opacity: 0.05;
+}
+
+/* =============================================================================
+   Photo Section
+   ============================================================================= */
+
+.mds-profile-card__photo {
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+  border-radius: 24px 0 0 24px;
+  min-height: 272px;
+  background-color: rgba(26, 26, 46, 0.1);
+}
+
+html[data-theme="light"] .mds-profile-card__photo {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.mds-profile-card__avatar {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center top;
+     object-position: center top;
+  display: block;
+}
+
+.mds-profile-card__photo-slot {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 272px;
+}
+
+/* =============================================================================
+   Content Section
+   ============================================================================= */
+
+.mds-profile-card__content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 27px;
+  border-left: 1px solid rgba(255, 255, 255, 0.06);
+  z-index: 2;
+  gap: 16px;
+}
+
+html[data-theme="light"] .mds-profile-card__content {
+  border-left-color: rgba(0, 0, 0, 0.04);
+}
+
+/* =============================================================================
+   Identity Block
+   ============================================================================= */
+
+.mds-profile-card__identity {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.mds-profile-card__name {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 32px;
+  font-weight: normal;
+  color: var(--mds-color-text-primary, #ffffff);
+  margin: 0 0 5px 0;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  line-height: 1.2;
+}
+
+.mds-profile-card__profession {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 18px;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.7));
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin: 5px 0 0 0;
+}
+
+.mds-profile-card__username {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 15px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+  letter-spacing: 0.06em;
+  margin: 0;
+}
+
+/* =============================================================================
+   Details Block
+   ============================================================================= */
+
+.mds-profile-card__details {
+  width: 100%;
+}
+
+.mds-profile-card__location {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 18px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+  letter-spacing: 0.06em;
+  margin: 0 0 5px 0;
+}
+
+.mds-profile-card__username-detail {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 18px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+  letter-spacing: 0.06em;
+}
+
+.mds-profile-card__email {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 14px;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.7));
+  letter-spacing: 0.04em;
+  margin: 0 0 4px 0;
+}
+
+.mds-profile-card__member {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 11px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.4));
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* =============================================================================
+   Verification Section (Compact Variant)
+   ============================================================================= */
+
+.mds-profile-card__verification {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.mds-profile-card__verified-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: rgba(0, 212, 170, 0.1);
+  border: 1px solid rgba(0, 212, 170, 0.2);
+  border-radius: 100px;
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #00d4aa;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.mds-profile-card__verified-badge:hover {
+  background: rgba(0, 212, 170, 0.15);
+  border-color: rgba(0, 212, 170, 0.3);
+}
+
+.mds-profile-card__verified-badge svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.mds-profile-card__dots {
+  display: flex;
+  gap: 6px;
+}
+
+.mds-profile-card__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  transition: all 0.3s ease;
+}
+
+.mds-profile-card__dot.active {
+  background: #00d4aa;
+  box-shadow: 0 0 8px rgba(0, 212, 170, 0.4);
+}
+
+html[data-theme="light"] .mds-profile-card__dot {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+/* =============================================================================
+   Social Section (Full Variant)
+   ============================================================================= */
+
+.mds-profile-card__social {
+  position: absolute;
+  bottom: 27px;
+  right: 27px;
+  z-index: 10;
+}
+
+.mds-profile-card__social-trigger {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+}
+
+.mds-profile-card__social-trigger svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+  transition: transform 0.3s ease;
+}
+
+.mds-profile-card__social-trigger:hover {
+  color: var(--mds-color-text-primary, #ffffff);
+}
+
+.mds-profile-card__social-trigger:hover svg {
+  transform: rotate(90deg);
+}
+
+.mds-profile-card__social-popup {
+  position: absolute;
+  bottom: 0;
+  right: 36px;
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  /* Liquid Glass popup */
+  background: rgba(20, 20, 30, 0.75);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  z-index: 20;
+}
+
+html[data-theme="light"] .mds-profile-card__social-popup {
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
+}
+
+.mds-profile-card__social-link {
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.mds-profile-card__social-link:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+html[data-theme="light"] .mds-profile-card__social-link {
+  background: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.08);
+  color: rgba(0, 0, 0, 0.7);
+}
+
+html[data-theme="light"] .mds-profile-card__social-link:hover {
+  background: rgba(0, 0, 0, 0.1);
+  color: #000000;
+}
+
+.mds-profile-card__social-link svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+/* =============================================================================
+   Dynamic Info Group (Full Variant)
+   ============================================================================= */
+
+.mds-profile-card__dynamic-group {
+  position: absolute;
+  right: 27px;
+  top: 50%;
+  transform: translateY(-40%);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  z-index: 10;
+}
+
+.mds-profile-card__dynamic-info {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 11px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* =============================================================================
+   Verified Section (Full Variant)
+   ============================================================================= */
+
+.mds-profile-card__verified-section {
+  position: relative;
+}
+
+.mds-profile-card__verified-trigger {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+}
+
+html[data-theme="light"] .mds-profile-card__verified-trigger {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.mds-profile-card__verified-trigger:hover {
+  color: var(--mds-color-text-primary, #ffffff);
+}
+
+.mds-profile-card__verified-trigger svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+.mds-profile-card__verified-popup {
+  position: absolute;
+  top: calc(100% + 12px);
+  right: 0;
+  padding: 16px;
+  /* Liquid Glass popup */
+  background: rgba(20, 20, 30, 0.75);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  min-width: 180px;
+  z-index: 20;
+}
+
+html[data-theme="light"] .mds-profile-card__verified-popup {
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
+}
+
+.mds-profile-card__verified-header {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 12px;
+  font-weight: bold;
+  color: #00d4aa;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 14px;
+  white-space: nowrap;
+}
+
+.mds-profile-card__verified-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mds-profile-card__stat-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+}
+
+.mds-profile-card__stat-label {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 11px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+  letter-spacing: 0.06em;
+}
+
+.mds-profile-card__stat-value {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+}
+
+.mds-profile-card__stat-value--verified {
+  color: #00d4aa;
+}
+
+.mds-profile-card__verified-date {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 10px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.4));
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-top: 14px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+html[data-theme="light"] .mds-profile-card__verified-date {
+  border-top-color: rgba(0, 0, 0, 0.06);
+}
+
+/* Info dots (for rotating info) */
+.mds-profile-card__info-dots {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mds-profile-card__info-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.mds-profile-card__info-dot.active {
+  background: rgba(255, 255, 255, 0.8);
+  transform: scale(1.3);
+}
+
+html[data-theme="light"] .mds-profile-card__info-dot {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+html[data-theme="light"] .mds-profile-card__info-dot.active {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+/* =============================================================================
+   Responsive
+   ============================================================================= */
+
+@media (max-width: 700px) {
+  .mds-profile-card {
+    grid-template-columns: 1fr;
+    max-width: 400px;
+  }
+
+  .mds-profile-card__photo {
+    border-radius: 24px 24px 0 0;
+    min-height: 280px;
+  }
+
+  .mds-profile-card__content {
+    border-left: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    padding: 20px;
+    align-items: center;
+    text-align: center;
+  }
+
+  html[data-theme="light"] .mds-profile-card__content {
+    border-top-color: rgba(0, 0, 0, 0.04);
+  }
+
+  .mds-profile-card__identity,
+  .mds-profile-card__details {
+    text-align: center;
+  }
+
+  .mds-profile-card__verification {
+    justify-content: center;
+  }
+
+  .mds-profile-card__dynamic-group {
+    position: static;
+    transform: none;
+    justify-content: center;
+    margin-top: 16px;
+  }
+
+  .mds-profile-card__social {
+    position: static;
+    margin-top: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .mds-profile-card__name {
+    font-size: 24px;
+  }
+
+  .mds-profile-card__profession,
+  .mds-profile-card__location,
+  .mds-profile-card__username-detail {
+    font-size: 14px;
+  }
+}