@metropolle/design-system 1.2026.0-1.3.159 → 1.2026.0-1.4.1227

package/dist/css/components.css

@@ -178,6 +178,18 @@
   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;
@@ -894,6 +906,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;
@@ -1343,6 +1364,145 @@ html[data-theme="light"] .mds-select-option--empty {
   gap: var(--mds-spacing-xl);
 }
 
+/* Dashboard Progress Bars */
+.mds-progress-row {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.mds-progress-label {
+  width: 120px;
+  font-size: 0.9rem;
+  color: var(--mds-color-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.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-progress-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.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
    ======================================== */
@@ -1799,3 +1959,1374 @@ 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);
+}