/* ============================================================ Platform Elements — Production Styles Responsive (mobile-first) + 3 Theme Variants + Glassmorphism BEM: .platform-{element}__{part}--{modifier} ============================================================ */ /* ===== DOCUMENT SHELL (UA reset) ===================================== Browsers apply an 8px margin on by default. Platform markup lives inside ; without this, previews and deployed pages show a visible gap around the app. */ html, body { margin: 0; padding: 0; } /* ===== THEME VARIANTS ===== */ /* Theme: Default (Indigo) — set by platform-app[theme="dark"] */ platform-app, platform-app[data-variant="default"] { --pe-accent: var(--ux-primary, #6366f1); --pe-accent-hover: var(--ux-primary-darker, #4f46e5); --pe-accent-glow: rgba(99, 102, 241, 0.25); --pe-accent-surface: rgba(99, 102, 241, 0.08); --pe-gradient: linear-gradient(135deg, #6366f1, #8b5cf6); --pe-gradient-hover: linear-gradient(135deg, #4f46e5, #7c3aed); --pe-nav-indicator: #6366f1; } /* Theme: Emerald */ platform-app[data-variant="emerald"] { --pe-accent: #10b981; --pe-accent-hover: #059669; --pe-accent-glow: rgba(16, 185, 129, 0.25); --pe-accent-surface: rgba(16, 185, 129, 0.08); --pe-gradient: linear-gradient(135deg, #10b981, #06b6d4); --pe-gradient-hover: linear-gradient(135deg, #059669, #0891b2); --pe-nav-indicator: #10b981; } /* Theme: Amber */ platform-app[data-variant="amber"] { --pe-accent: #f59e0b; --pe-accent-hover: #d97706; --pe-accent-glow: rgba(245, 158, 11, 0.25); --pe-accent-surface: rgba(245, 158, 11, 0.08); --pe-gradient: linear-gradient(135deg, #f59e0b, #ef4444); --pe-gradient-hover: linear-gradient(135deg, #d97706, #dc2626); --pe-nav-indicator: #f59e0b; } /* Theme: Rose */ platform-app[data-variant="rose"] { --pe-accent: #f43f5e; --pe-accent-hover: #e11d48; --pe-accent-glow: rgba(244, 63, 94, 0.25); --pe-accent-surface: rgba(244, 63, 94, 0.08); --pe-gradient: linear-gradient(135deg, #f43f5e, #ec4899); --pe-gradient-hover: linear-gradient(135deg, #e11d48, #db2777); --pe-nav-indicator: #f43f5e; } /* ===== RESET ===== */ platform-app { display: block; font-family: var(--ux-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); color: var(--ux-text-base, #e4e4e7); background: var(--ux-background, #0f0f14); min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } platform-app *, platform-app *::before, platform-app *::after { box-sizing: border-box; } /* ===== ROUTER NAV ===== */ .platform-router__nav { background: color-mix(in srgb, var(--ux-surface, #18181f) 85%, transparent); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border-bottom: 1px solid var(--ux-border, #27272a); padding: 0 var(--ux-spacing-md, 16px); position: sticky; top: 0; z-index: 100; } .platform-router__tabs { display: flex; gap: var(--ux-spacing-2xs, 4px); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .platform-router__tabs::-webkit-scrollbar { display: none; } .platform-router__tab { display: flex; align-items: center; gap: var(--ux-spacing-xs, 8px); padding: var(--ux-spacing-sm, 12px) var(--ux-spacing-md, 16px); border: none; background: none; color: var(--ux-text-muted, #71717a); cursor: pointer; font-size: var(--ux-font-size-sm, 0.875rem); font-family: inherit; border-bottom: 2px solid transparent; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; position: relative; } .platform-router__tab:hover { color: var(--ux-text-secondary, #a1a1aa); background: var(--pe-accent-surface); } .platform-router__tab--active { color: var(--pe-accent); border-bottom-color: var(--pe-nav-indicator); } .platform-router__tab-icon { font-size: 1.1em; } /* Mobile: smaller tabs */ @media (max-width: 640px) { .platform-router__tab { padding: var(--ux-spacing-xs, 8px) var(--ux-spacing-sm, 12px); font-size: var(--ux-font-size-xs, 0.75rem); } .platform-router__tab-label { display: none; } .platform-router__tab-icon { font-size: 1.3em; } } /* ===== ROUTE CONTENT ===== */ platform-route { display: block; padding: var(--ux-spacing-lg, 24px); width: 100%; } platform-router { display: block; width: 100%; } platform-crud { display: block; width: 100%; } platform-route:not([active]) { display: none !important; } @media (max-width: 640px) { platform-route { padding: var(--ux-spacing-sm, 12px); } } /* ===== TABLE ===== */ .platform-table { background: var(--ux-surface, #18181f); border-radius: var(--ux-radius-lg, 12px); border: 1px solid var(--ux-border, #27272a); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: box-shadow 200ms ease; width: 100%; } .platform-table:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .platform-table__header-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--ux-spacing-md, 16px) var(--ux-spacing-lg, 24px); border-bottom: 1px solid var(--ux-border, #27272a); flex-wrap: wrap; gap: var(--ux-spacing-sm, 12px); } .platform-table__title { display: flex; align-items: baseline; gap: var(--ux-spacing-sm, 12px); } .platform-table__title h3 { margin: 0; font-size: var(--ux-font-size-lg, 1.125rem); font-weight: 700; color: var(--ux-text-primary, #f4f4f5); } .platform-table__count { font-size: var(--ux-font-size-xs, 0.75rem); color: var(--ux-text-muted, #71717a); background: var(--ux-surface-variant, #1e1e26); padding: 2px 8px; border-radius: var(--ux-radius-full, 9999px); } .platform-table__toolbar { display: flex; align-items: center; gap: var(--ux-spacing-sm, 12px); } @media (max-width: 640px) { .platform-table__header-bar { padding: var(--ux-spacing-sm, 12px); flex-direction: column; align-items: stretch; } .platform-table__toolbar { flex-direction: column; width: 100%; } .platform-table__search-input { min-width: 0; width: 100%; } } .platform-table__search-input { padding: var(--ux-spacing-xs, 8px) var(--ux-spacing-sm, 12px); background: var(--ux-surface-variant, #1e1e26); border: 1px solid var(--ux-border, #27272a); border-radius: var(--ux-radius-md, 8px); color: var(--ux-text-base, #e4e4e7); font-size: var(--ux-font-size-sm, 0.875rem); font-family: inherit; outline: none; min-width: 200px; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } .platform-table__search-input:focus { border-color: var(--pe-accent); box-shadow: 0 0 0 3px var(--pe-accent-glow); } .platform-table__search-input::placeholder { color: var(--ux-text-disabled, #52525b); } /* Buttons */ .platform-table__btn { padding: var(--ux-spacing-xs, 8px) var(--ux-spacing-md, 16px); border: 1px solid var(--ux-border, #27272a); border-radius: var(--ux-radius-md, 8px); background: var(--ux-surface-variant, #1e1e26); color: var(--ux-text-base, #e4e4e7); cursor: pointer; font-size: var(--ux-font-size-sm, 0.875rem); font-family: inherit; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } .platform-table__btn:hover { background: var(--ux-surface-container, #232330); transform: translateY(-1px); } .platform-table__btn:active { transform: translateY(0); } .platform-table__btn--primary { background: var(--pe-gradient); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 2px 8px var(--pe-accent-glow); } .platform-table__btn--primary:hover { background: var(--pe-gradient-hover); box-shadow: 0 4px 16px var(--pe-accent-glow); transform: translateY(-1px); } /* Table scroll — desktop: full table, mobile: card layout */ .platform-table__scroll { overflow-x: auto; } .platform-table__table { width: 100%; border-collapse: collapse; } .platform-table__th { text-align: left; padding: var(--ux-spacing-sm, 12px) var(--ux-spacing-md, 16px); font-size: var(--ux-font-size-xs, 0.75rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ux-text-muted, #71717a); border-bottom: 1px solid var(--ux-border, #27272a); white-space: nowrap; user-select: none; } .platform-table__th--sortable { cursor: pointer; } .platform-table__th--sortable:hover { color: var(--ux-text-secondary, #a1a1aa); } .platform-table__th--active { color: var(--pe-accent); } .platform-table__sort-icon { margin-left: var(--ux-spacing-2xs, 4px); } .platform-table__th--actions { text-align: right; width: 100px; } .platform-table__row { border-bottom: 1px solid var(--ux-border, #27272a); cursor: pointer; transition: all 150ms ease; } .platform-table__row:hover { background: var(--pe-accent-surface); } .platform-table__row--selected { background: var(--pe-accent-surface); box-shadow: inset 3px 0 0 var(--pe-accent); } .platform-table__row:last-child { border-bottom: none; } .platform-table__td { padding: var(--ux-spacing-sm, 12px) var(--ux-spacing-md, 16px); font-size: var(--ux-font-size-sm, 0.875rem); color: var(--ux-text-base, #e4e4e7); } .platform-table__td--actions { text-align: right; } /* Mobile: card-based table */ @media (max-width: 640px) { .platform-table__table thead { display: none; } .platform-table__table, .platform-table__table tbody, .platform-table__table tr, .platform-table__table td { display: block; } .platform-table__row { padding: var(--ux-spacing-sm, 12px); margin: var(--ux-spacing-xs, 8px) var(--ux-spacing-sm, 12px); border-radius: var(--ux-radius-md, 8px); border: 1px solid var(--ux-border, #27272a); background: var(--ux-surface-variant, #1e1e26); } .platform-table__row:hover { background: var(--ux-surface-container, #232330); } .platform-table__td { padding: var(--ux-spacing-2xs, 4px) 0; display: flex; justify-content: space-between; align-items: center; } .platform-table__td::before { content: attr(data-label); font-size: var(--ux-font-size-xs, 0.75rem); font-weight: 600; color: var(--ux-text-muted, #71717a); text-transform: uppercase; letter-spacing: 0.03em; min-width: 100px; margin-right: var(--ux-spacing-sm, 12px); } .platform-table__td--actions { text-align: right; justify-content: flex-end; padding-top: var(--ux-spacing-xs, 8px); border-top: 1px solid var(--ux-border, #27272a); margin-top: var(--ux-spacing-xs, 8px); } .platform-table__td--actions::before { display: none; } } .platform-table__action-btn { padding: var(--ux-spacing-2xs, 4px) var(--ux-spacing-xs, 8px); border: none; background: none; color: var(--ux-text-muted, #71717a); cursor: pointer; font-size: var(--ux-font-size-md, 1rem); border-radius: var(--ux-radius-sm, 4px); transition: all 150ms ease; } .platform-table__action-btn:hover { background: var(--ux-surface-container, #232330); color: var(--ux-text-primary, #f4f4f5); } .platform-table__action-btn--danger:hover { color: var(--ux-error, #ef4444); background: rgba(239, 68, 68, 0.1); } /* Pagination */ .platform-table__pagination { display: flex; align-items: center; justify-content: center; gap: var(--ux-spacing-md, 16px); padding: var(--ux-spacing-sm, 12px) var(--ux-spacing-md, 16px); border-top: 1px solid var(--ux-border, #27272a); } .platform-table__page-btn { padding: var(--ux-spacing-2xs, 4px) var(--ux-spacing-sm, 12px); border: 1px solid var(--ux-border, #27272a); border-radius: var(--ux-radius-sm, 4px); background: var(--ux-surface-variant, #1e1e26); color: var(--ux-text-secondary, #a1a1aa); cursor: pointer; font-size: var(--ux-font-size-sm, 0.875rem); font-family: inherit; transition: all 150ms ease; } .platform-table__page-btn:hover:not(:disabled) { background: var(--ux-surface-container, #232330); color: var(--ux-text-primary, #f4f4f5); } .platform-table__page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .platform-table__page-info { font-size: var(--ux-font-size-sm, 0.875rem); color: var(--ux-text-muted, #71717a); } /* Loading / Empty / Error */ .platform-table__loading, .platform-table__empty, .platform-table__error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--ux-spacing-2xl, 48px) var(--ux-spacing-md, 16px); gap: var(--ux-spacing-sm, 12px); color: var(--ux-text-muted, #71717a); } .platform-table__empty-icon { font-size: 2.5rem; opacity: 0.5; } .platform-table__empty-text { font-size: var(--ux-font-size-sm, 0.875rem); } .platform-table__error-icon { font-size: 2rem; color: var(--ux-warning, #f59e0b); } .platform-table__spinner { width: 24px; height: 24px; border: 2px solid var(--ux-border, #27272a); border-top-color: var(--pe-accent); border-radius: 50%; animation: platform-spin 0.6s linear infinite; } @keyframes platform-spin { to { transform: rotate(360deg); } } /* ===== FORM ===== */ .platform-form { background: var(--ux-surface, #18181f); border-radius: var(--ux-radius-lg, 12px); border: 1px solid var(--ux-border, #27272a); overflow: hidden; } .platform-form--loading { display: flex; align-items: center; justify-content: center; padding: var(--ux-spacing-2xl, 48px); gap: var(--ux-spacing-sm, 12px); color: var(--ux-text-muted, #71717a); } .platform-form__header { padding: var(--ux-spacing-md, 16px) var(--ux-spacing-lg, 24px); border-bottom: 1px solid var(--ux-border, #27272a); background: var(--pe-accent-surface); } .platform-form__title { margin: 0; font-size: var(--ux-font-size-lg, 1.125rem); font-weight: 700; color: var(--ux-text-primary, #f4f4f5); } .platform-form__body { padding: var(--ux-spacing-lg, 24px); display: grid; grid-template-columns: 1fr; gap: var(--ux-spacing-md, 16px); } /* Two-column form on desktop */ @media (min-width: 640px) { .platform-form__body { grid-template-columns: 1fr 1fr; } /* Textarea and full-width fields span both columns */ .platform-form__field:has(.platform-form__textarea) { grid-column: 1 / -1; } } .platform-form__field { display: flex; flex-direction: column; gap: var(--ux-spacing-2xs, 4px); } .platform-form__label { font-size: var(--ux-font-size-sm, 0.875rem); font-weight: 500; color: var(--ux-text-secondary, #a1a1aa); text-transform: capitalize; } .platform-form__required { color: var(--ux-error, #ef4444); margin-left: 2px; } .platform-form__input, .platform-form__select, .platform-form__textarea { padding: 10px var(--ux-spacing-sm, 12px); background: var(--ux-surface-variant, #1e1e26); border: 1px solid var(--ux-border, #27272a); border-radius: var(--ux-radius-md, 8px); color: var(--ux-text-base, #e4e4e7); font-size: var(--ux-font-size-sm, 0.875rem); font-family: inherit; outline: none; width: 100%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } .platform-form__input:focus, .platform-form__select:focus, .platform-form__textarea:focus { border-color: var(--pe-accent); box-shadow: 0 0 0 3px var(--pe-accent-glow); } .platform-form__textarea { resize: vertical; min-height: 80px; } .platform-form__field--error .platform-form__input, .platform-form__field--error .platform-form__select { border-color: var(--ux-error, #ef4444); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); } .platform-form__error-text { font-size: var(--ux-font-size-xs, 0.75rem); color: var(--ux-error, #ef4444); } /* Toggle */ .platform-form__toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; } .platform-form__toggle input { opacity: 0; width: 0; height: 0; } .platform-form__toggle-slider { position: absolute; inset: 0; background: var(--ux-surface-container, #232330); border-radius: var(--ux-radius-full, 9999px); transition: background 200ms ease; } .platform-form__toggle-slider::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--ux-text-muted, #71717a); border-radius: 50%; transition: transform 200ms ease, background 200ms ease; } .platform-form__toggle input:checked + .platform-form__toggle-slider { background: var(--pe-accent); } .platform-form__toggle input:checked + .platform-form__toggle-slider::before { transform: translateX(20px); background: #fff; } .platform-form__footer { display: flex; justify-content: flex-end; gap: var(--ux-spacing-sm, 12px); padding: var(--ux-spacing-md, 16px) var(--ux-spacing-lg, 24px); border-top: 1px solid var(--ux-border, #27272a); } @media (max-width: 480px) { .platform-form__footer { flex-direction: column-reverse; } } .platform-form__btn { padding: 10px var(--ux-spacing-lg, 24px); border: 1px solid var(--ux-border, #27272a); border-radius: var(--ux-radius-md, 8px); cursor: pointer; font-size: var(--ux-font-size-sm, 0.875rem); font-family: inherit; font-weight: 600; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } .platform-form__btn--secondary { background: var(--ux-surface-variant, #1e1e26); color: var(--ux-text-secondary, #a1a1aa); } .platform-form__btn--secondary:hover { background: var(--ux-surface-container, #232330); } .platform-form__btn--primary { background: var(--pe-gradient); border-color: transparent; color: #fff; box-shadow: 0 2px 8px var(--pe-accent-glow); } .platform-form__btn--primary:hover { background: var(--pe-gradient-hover); box-shadow: 0 4px 16px var(--pe-accent-glow); transform: translateY(-1px); } .platform-form__btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ===== CRUD ===== */ .platform-crud { position: relative; } .platform-crud__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: platform-fade-in 200ms ease; } .platform-crud__modal { width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; animation: platform-slide-up 300ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes platform-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes platform-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ===== DETAIL ===== */ .platform-detail { background: var(--ux-surface, #18181f); border-radius: var(--ux-radius-lg, 12px); border: 1px solid var(--ux-border, #27272a); overflow: hidden; } .platform-detail--loading, .platform-detail--error, .platform-detail--empty { display: flex; align-items: center; justify-content: center; gap: var(--ux-spacing-sm, 12px); padding: var(--ux-spacing-2xl, 48px); color: var(--ux-text-muted, #71717a); } .platform-detail__header { display: flex; justify-content: space-between; align-items: center; padding: var(--ux-spacing-md, 16px) var(--ux-spacing-lg, 24px); border-bottom: 1px solid var(--ux-border, #27272a); background: var(--pe-accent-surface); } @media (max-width: 480px) { .platform-detail__header { flex-direction: column; gap: var(--ux-spacing-sm, 12px); align-items: stretch; } } .platform-detail__title { margin: 0; font-size: var(--ux-font-size-lg, 1.125rem); font-weight: 700; color: var(--ux-text-primary, #f4f4f5); } .platform-detail__actions { display: flex; gap: var(--ux-spacing-xs, 8px); } .platform-detail__body { padding: var(--ux-spacing-lg, 24px); } .platform-detail__section { margin-bottom: var(--ux-spacing-lg, 24px); } .platform-detail__section:last-child { margin-bottom: 0; } .platform-detail__section-title { font-size: var(--ux-font-size-sm, 0.875rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ux-text-muted, #71717a); margin-bottom: var(--ux-spacing-sm, 12px); padding-bottom: var(--ux-spacing-xs, 8px); border-bottom: 1px solid var(--ux-border, #27272a); } .platform-detail__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ux-spacing-md, 16px); } @media (max-width: 480px) { .platform-detail__fields { grid-template-columns: 1fr; } } .platform-detail__field { display: flex; flex-direction: column; gap: var(--ux-spacing-3xs, 2px); padding: var(--ux-spacing-xs, 8px); border-radius: var(--ux-radius-sm, 4px); background: var(--ux-surface-variant, #1e1e26); } .platform-detail__label { font-size: var(--ux-font-size-xs, 0.75rem); font-weight: 500; color: var(--ux-text-muted, #71717a); text-transform: capitalize; } .platform-detail__value { font-size: var(--ux-font-size-sm, 0.875rem); color: var(--ux-text-base, #e4e4e7); font-weight: 500; } /* ===== CARD ===== */ .platform-card { display: block; background: var(--ux-surface, #18181f); border-radius: var(--ux-radius-lg, 12px); border: 1px solid var(--ux-border, #27272a); overflow: hidden; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } .platform-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .platform-card__header { display: flex; justify-content: space-between; align-items: center; padding: var(--ux-spacing-md, 16px) var(--ux-spacing-lg, 24px); border-bottom: 1px solid var(--ux-border, #27272a); } .platform-card__title-wrap { display: flex; flex-direction: column; gap: 2px; } .platform-card__title { margin: 0; font-size: var(--ux-font-size-md, 1rem); font-weight: 600; color: var(--ux-text-primary, #f4f4f5); } .platform-card__subtitle { font-size: var(--ux-font-size-xs, 0.75rem); color: var(--ux-text-muted, #71717a); } .platform-card__toggle { border: none; background: none; color: var(--ux-text-muted, #71717a); font-size: 1.125rem; cursor: pointer; } .platform-card--collapsed > :not(.platform-card__header) { display: none; } /* ===== MODAL ===== */ platform-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .platform-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .platform-modal__wrapper { position: relative; background: var(--ux-surface, #18181f); border-radius: var(--ux-radius-lg, 12px); border: 1px solid var(--ux-border, #27272a); max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4); animation: platform-slide-up 300ms cubic-bezier(0.16, 1, 0.3, 1); } .platform-modal__wrapper--sm { width: min(400px, 95vw); } .platform-modal__wrapper--md { width: min(600px, 95vw); } .platform-modal__wrapper--lg { width: min(800px, 95vw); } .platform-modal__wrapper--xl { width: min(1000px, 95vw); } .platform-modal__header { display: flex; justify-content: space-between; align-items: center; padding: var(--ux-spacing-md, 16px) var(--ux-spacing-lg, 24px); border-bottom: 1px solid var(--ux-border, #27272a); } .platform-modal__title { margin: 0; font-size: var(--ux-font-size-lg, 1.125rem); font-weight: 700; color: var(--ux-text-primary, #f4f4f5); } .platform-modal__close { border: none; background: none; color: var(--ux-text-muted, #71717a); font-size: 1.125rem; cursor: pointer; padding: 4px; border-radius: var(--ux-radius-sm, 4px); transition: all 150ms ease; } .platform-modal__close:hover { color: var(--ux-text-primary, #f4f4f5); background: var(--ux-surface-variant, #1e1e26); } .platform-modal__body { padding: var(--ux-spacing-lg, 24px); } /* ===== STATUS BADGE ===== */ platform-status { display: inline-block; } .platform-status__badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--ux-radius-full, 9999px); font-size: var(--ux-font-size-xs, 0.75rem); font-weight: 600; text-transform: capitalize; letter-spacing: 0.02em; } .platform-status__badge--success { background: color-mix(in srgb, var(--ux-success, #22c55e) 15%, transparent); color: var(--ux-success, #22c55e); } .platform-status__badge--warning { background: color-mix(in srgb, var(--ux-warning, #f59e0b) 15%, transparent); color: var(--ux-warning, #f59e0b); } .platform-status__badge--error { background: color-mix(in srgb, var(--ux-error, #ef4444) 15%, transparent); color: var(--ux-error, #ef4444); } .platform-status__badge--info { background: color-mix(in srgb, var(--ux-info, #3b82f6) 15%, transparent); color: var(--ux-info, #3b82f6); } .platform-status__badge--neutral { background: var(--ux-surface-container, #232330); color: var(--ux-text-secondary, #a1a1aa); } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }