@geenius/i18n 0.1.0

package/packages/solidjs-css/src/i18n.css

@@ -0,0 +1,1322 @@
+/* ═══════════════════════════════════════════════════════════════
+   @geenius-i18n/solidjs-css — BEM Design System
+   OKLCH Design Tokens + Comprehensive Component Styles
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ─── Design Tokens ──────────────────────────────────────────── */
+:root {
+  --i18n-bg: oklch(0.10 0.01 250);
+  --i18n-bg-card: oklch(0.13 0.01 250);
+  --i18n-bg-card-hover: oklch(0.15 0.01 250);
+  --i18n-bg-input: oklch(0.16 0.01 250);
+  --i18n-border: oklch(0.22 0.01 250);
+  --i18n-border-focus: oklch(0.65 0.20 265);
+  --i18n-text: oklch(0.95 0.01 250);
+  --i18n-text-muted: oklch(0.65 0.01 250);
+  --i18n-text-faint: oklch(0.45 0.01 250);
+  --i18n-accent: oklch(0.65 0.20 265);
+  --i18n-accent-hover: oklch(0.70 0.22 265);
+  --i18n-accent-subtle: oklch(0.65 0.20 265 / 0.12);
+  --i18n-success: oklch(0.72 0.20 145);
+  --i18n-success-subtle: oklch(0.72 0.20 145 / 0.12);
+  --i18n-warning: oklch(0.78 0.18 75);
+  --i18n-warning-subtle: oklch(0.78 0.18 75 / 0.12);
+  --i18n-error: oklch(0.60 0.25 25);
+  --i18n-error-subtle: oklch(0.60 0.25 25 / 0.08);
+  --i18n-error-border: oklch(0.60 0.25 25 / 0.20);
+  --i18n-radius: 0.75rem;
+  --i18n-radius-sm: 0.375rem;
+  --i18n-radius-lg: 1rem;
+  --i18n-radius-full: 9999px;
+  --i18n-shadow: 0 4px 24px oklch(0 0 0 / 0.4);
+  --i18n-shadow-lg: 0 8px 40px oklch(0 0 0 / 0.5);
+  --i18n-shadow-dropdown: 0 12px 48px oklch(0 0 0 / 0.6);
+  --i18n-transition: 200ms ease;
+  --i18n-transition-fast: 120ms ease;
+  --i18n-transition-slow: 300ms ease;
+  --i18n-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --i18n-font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   LOCALE SWITCHER
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__locale-switcher {
+  position: relative;
+  display: inline-block;
+}
+
+.i18n__locale-switcher-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--i18n-radius);
+  border: 1px solid var(--i18n-border);
+  background: oklch(1 0 0 / 0.05);
+  font-size: 0.875rem;
+  font-family: var(--i18n-font-sans);
+  color: var(--i18n-text);
+  cursor: pointer;
+  transition: all var(--i18n-transition);
+  white-space: nowrap;
+}
+
+.i18n__locale-switcher-trigger:hover {
+  background: oklch(1 0 0 / 0.10);
+  border-color: oklch(1 0 0 / 0.18);
+}
+
+.i18n__locale-switcher-trigger:focus-visible {
+  outline: 2px solid var(--i18n-accent);
+  outline-offset: 2px;
+}
+
+.i18n__locale-switcher-flag {
+  font-size: 1.125rem;
+  line-height: 1;
+}
+
+.i18n__locale-switcher-label {
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+
+.i18n__locale-switcher-arrow {
+  font-size: 0.75rem;
+  color: var(--i18n-text-faint);
+  margin-left: 0.125rem;
+  transition: transform var(--i18n-transition);
+}
+
+.i18n__locale-switcher-dropdown {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  right: 0;
+  z-index: 50;
+  min-width: 14rem;
+  max-height: 20rem;
+  overflow-y: auto;
+  border-radius: var(--i18n-radius);
+  border: 1px solid var(--i18n-border);
+  background: oklch(0.09 0.01 250);
+  padding: 0.25rem;
+  box-shadow: var(--i18n-shadow-dropdown);
+  animation: i18n-dropdown-in 150ms ease-out;
+}
+
+.i18n__locale-switcher-dropdown::-webkit-scrollbar {
+  width: 4px;
+}
+
+.i18n__locale-switcher-dropdown::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.i18n__locale-switcher-dropdown::-webkit-scrollbar-thumb {
+  background: oklch(1 0 0 / 0.1);
+  border-radius: var(--i18n-radius-full);
+}
+
+.i18n__locale-switcher-option {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: none;
+  border-radius: calc(var(--i18n-radius) - 0.125rem);
+  font-size: 0.875rem;
+  font-family: var(--i18n-font-sans);
+  color: oklch(1 0 0 / 0.7);
+  cursor: pointer;
+  background: transparent;
+  transition: all var(--i18n-transition-fast);
+  text-align: left;
+}
+
+.i18n__locale-switcher-option:hover {
+  background: oklch(1 0 0 / 0.06);
+  color: var(--i18n-text);
+}
+
+.i18n__locale-switcher-option--active {
+  background: var(--i18n-accent-subtle);
+  color: var(--i18n-accent);
+}
+
+.i18n__locale-switcher-option--active:hover {
+  background: oklch(0.65 0.20 265 / 0.18);
+}
+
+.i18n__locale-switcher-option-flag {
+  font-size: 1.125rem;
+  line-height: 1;
+}
+
+.i18n__locale-switcher-option-name {
+  flex: 1;
+  font-weight: 450;
+}
+
+.i18n__locale-switcher-option-rtl {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--i18n-radius-sm);
+  background: var(--i18n-warning-subtle);
+  color: var(--i18n-warning);
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   RTL WRAPPER
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__rtl-wrapper {
+  transition: all var(--i18n-transition-slow);
+}
+
+.i18n__rtl-wrapper--ltr {
+  direction: ltr;
+  text-align: left;
+}
+
+.i18n__rtl-wrapper--rtl {
+  direction: rtl;
+  text-align: right;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   LOCALE STATS CARD
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__stats-card {
+  padding: 1rem;
+  border: 1px solid var(--i18n-border);
+  border-radius: var(--i18n-radius);
+  background: var(--i18n-bg-card);
+  transition: all var(--i18n-transition);
+}
+
+.i18n__stats-card:hover {
+  background: var(--i18n-bg-card-hover);
+  border-color: oklch(1 0 0 / 0.14);
+  box-shadow: var(--i18n-shadow);
+}
+
+.i18n__stats-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.625rem;
+}
+
+.i18n__stats-card-flag {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.i18n__stats-card-locale {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--i18n-text);
+  letter-spacing: -0.01em;
+}
+
+.i18n__stats-card-coverage {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 0.6875rem;
+  color: var(--i18n-text-faint);
+  margin-bottom: 0.375rem;
+}
+
+.i18n__stats-card-keys {
+  color: var(--i18n-text-muted);
+}
+
+.i18n__stats-card-percent {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--i18n-text-muted);
+}
+
+.i18n__stats-card-bar {
+  height: 0.375rem;
+  border-radius: var(--i18n-radius-full);
+  background: oklch(1 0 0 / 0.06);
+  overflow: hidden;
+}
+
+.i18n__stats-card-bar-fill {
+  height: 100%;
+  border-radius: var(--i18n-radius-full);
+  transition: width var(--i18n-transition-slow);
+}
+
+.i18n__stats-card-bar-fill--complete {
+  background: var(--i18n-success);
+}
+
+.i18n__stats-card-bar-fill--partial {
+  background: var(--i18n-warning);
+}
+
+.i18n__stats-card-bar-fill--low {
+  background: var(--i18n-error);
+}
+
+.i18n__stats-card-counts {
+  margin-top: 0.375rem;
+  font-size: 0.625rem;
+}
+
+.i18n__stats-card-missing {
+  color: var(--i18n-error);
+  font-weight: 500;
+}
+
+.i18n__stats-card-complete {
+  color: var(--i18n-success);
+  font-weight: 500;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   MISSING KEY ALERT
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__missing-alert {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--i18n-radius);
+  border: 1px solid var(--i18n-error-border);
+  background: var(--i18n-error-subtle);
+  margin-bottom: 1.5rem;
+  animation: i18n-alert-in 250ms ease-out;
+}
+
+.i18n__missing-alert-icon {
+  font-size: 1rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.i18n__missing-alert-text {
+  font-size: 0.8125rem;
+  color: oklch(0.75 0.18 25);
+  line-height: 1.4;
+}
+
+.i18n__missing-alert-text strong {
+  font-weight: 600;
+  color: oklch(0.80 0.20 25);
+}
+
+.i18n__missing-alert-count {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--i18n-error);
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   TRANSLATION KEY ROW
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__key-row {
+  display: grid;
+  grid-template-columns: 1fr 2fr auto auto;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid oklch(1 0 0 / 0.05);
+  transition: background var(--i18n-transition-fast);
+}
+
+.i18n__key-row:hover {
+  background: oklch(1 0 0 / 0.03);
+}
+
+.i18n__key-row:last-child {
+  border-bottom: none;
+}
+
+.i18n__key-row-key {
+  font-family: var(--i18n-font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--i18n-accent);
+  letter-spacing: -0.01em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.i18n__key-row-value {
+  font-size: 0.8125rem;
+  color: oklch(1 0 0 / 0.75);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 20rem;
+}
+
+.i18n__key-row-locale {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.i18n__key-row-locale-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--i18n-radius-sm);
+  background: oklch(1 0 0 / 0.06);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  color: var(--i18n-text-faint);
+}
+
+.i18n__key-row-namespace {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--i18n-radius-sm);
+  background: var(--i18n-accent-subtle);
+  font-size: 0.5625rem;
+  font-weight: 500;
+  color: var(--i18n-accent);
+}
+
+.i18n__key-row-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  opacity: 0;
+  transition: opacity var(--i18n-transition);
+}
+
+.i18n__key-row:hover .i18n__key-row-actions {
+  opacity: 1;
+}
+
+.i18n__key-row-btn {
+  padding: 0.25rem 0.5rem;
+  border: none;
+  border-radius: var(--i18n-radius-sm);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  font-family: var(--i18n-font-sans);
+  cursor: pointer;
+  transition: all var(--i18n-transition-fast);
+  background: transparent;
+}
+
+.i18n__key-row-btn--edit {
+  color: var(--i18n-text-muted);
+}
+
+.i18n__key-row-btn--edit:hover {
+  color: var(--i18n-accent);
+  background: var(--i18n-accent-subtle);
+}
+
+.i18n__key-row-btn--delete {
+  color: oklch(1 0 0 / 0.25);
+}
+
+.i18n__key-row-btn--delete:hover {
+  color: var(--i18n-error);
+  background: var(--i18n-error-subtle);
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   LOCALE CARD
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__locale-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding: 1rem;
+  border: 1px solid var(--i18n-border);
+  border-radius: var(--i18n-radius);
+  background: var(--i18n-bg-card);
+  cursor: pointer;
+  transition: all var(--i18n-transition);
+  text-align: left;
+  font-family: var(--i18n-font-sans);
+  width: 100%;
+}
+
+.i18n__locale-card:hover {
+  background: var(--i18n-bg-card-hover);
+  border-color: oklch(1 0 0 / 0.16);
+  box-shadow: var(--i18n-shadow);
+  transform: translateY(-1px);
+}
+
+.i18n__locale-card--selected {
+  border-color: var(--i18n-accent);
+  background: var(--i18n-accent-subtle);
+  box-shadow: 0 0 0 1px var(--i18n-accent), var(--i18n-shadow);
+}
+
+.i18n__locale-card--selected:hover {
+  background: oklch(0.65 0.20 265 / 0.16);
+  border-color: var(--i18n-accent-hover);
+}
+
+.i18n__locale-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.i18n__locale-card-flag {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.i18n__locale-card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.i18n__locale-card-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--i18n-text);
+  letter-spacing: -0.01em;
+}
+
+.i18n__locale-card-code {
+  font-size: 0.6875rem;
+  color: var(--i18n-text-faint);
+}
+
+.i18n__locale-card-rtl {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--i18n-radius-sm);
+  background: var(--i18n-warning-subtle);
+  color: var(--i18n-warning);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.i18n__locale-card-bar {
+  height: 0.375rem;
+  border-radius: var(--i18n-radius-full);
+  background: oklch(1 0 0 / 0.06);
+  overflow: hidden;
+}
+
+.i18n__locale-card-bar-fill {
+  height: 100%;
+  border-radius: var(--i18n-radius-full);
+  transition: width var(--i18n-transition-slow);
+}
+
+.i18n__locale-card-bar-fill--complete {
+  background: var(--i18n-success);
+}
+
+.i18n__locale-card-bar-fill--partial {
+  background: var(--i18n-warning);
+}
+
+.i18n__locale-card-bar-fill--low {
+  background: var(--i18n-error);
+}
+
+.i18n__locale-card-coverage {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--i18n-text-faint);
+  text-align: right;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   ADMIN PAGE LAYOUT
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__admin-page {
+  min-height: 100vh;
+  background: var(--i18n-bg);
+  color: var(--i18n-text);
+  font-family: var(--i18n-font-sans);
+}
+
+.i18n__admin-container {
+  max-width: 72rem;
+  margin: 0 auto;
+  padding: 3rem 1.5rem;
+}
+
+.i18n__page-header {
+  margin-bottom: 2.5rem;
+}
+
+.i18n__page-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  color: var(--i18n-text);
+  margin: 0 0 0.375rem;
+  line-height: 1.2;
+}
+
+.i18n__page-subtitle {
+  font-size: 0.875rem;
+  color: var(--i18n-text-muted);
+  margin: 0;
+}
+
+.i18n__admin-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.i18n__admin-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.i18n__admin-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.i18n__admin-section-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--i18n-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin: 0;
+}
+
+.i18n__stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 0.75rem;
+}
+
+.i18n__locale-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 0.75rem;
+}
+
+.i18n__search-input {
+  width: 100%;
+  max-width: 16rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--i18n-border);
+  border-radius: var(--i18n-radius);
+  background: var(--i18n-bg-input);
+  font-size: 0.875rem;
+  font-family: var(--i18n-font-sans);
+  color: var(--i18n-text);
+  outline: none;
+  transition: all var(--i18n-transition);
+}
+
+.i18n__search-input::placeholder {
+  color: var(--i18n-text-faint);
+}
+
+.i18n__search-input:focus {
+  border-color: var(--i18n-border-focus);
+  box-shadow: 0 0 0 3px oklch(0.65 0.20 265 / 0.12);
+}
+
+.i18n__translation-list {
+  border: 1px solid var(--i18n-border);
+  border-radius: var(--i18n-radius);
+  background: var(--i18n-bg-card);
+  overflow: hidden;
+}
+
+.i18n__empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 1.5rem;
+  text-align: center;
+}
+
+.i18n__empty-state-icon {
+  font-size: 3rem;
+  opacity: 0.15;
+  margin-bottom: 1rem;
+}
+
+.i18n__empty-state-text {
+  font-size: 0.875rem;
+  color: var(--i18n-text-faint);
+  margin: 0;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   PREVIEW PAGE LAYOUT
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__preview-page {
+  min-height: 100vh;
+  background: var(--i18n-bg);
+  color: var(--i18n-text);
+  font-family: var(--i18n-font-sans);
+}
+
+.i18n__preview-container {
+  max-width: 52rem;
+  margin: 0 auto;
+  padding: 3rem 1.5rem;
+}
+
+.i18n__preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
+.i18n__preview-header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.i18n__preview-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.i18n__preview-subtitle {
+  font-size: 0.875rem;
+  color: var(--i18n-text-muted);
+  margin: 0;
+}
+
+.i18n__preview-info-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+}
+
+.i18n__preview-info-card {
+  padding: 1rem;
+  border: 1px solid var(--i18n-border);
+  border-radius: var(--i18n-radius);
+  background: var(--i18n-bg-card);
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  transition: all var(--i18n-transition);
+}
+
+.i18n__preview-info-card:hover {
+  background: var(--i18n-bg-card-hover);
+  box-shadow: var(--i18n-shadow);
+}
+
+.i18n__preview-info-label {
+  font-size: 0.625rem;
+  font-weight: 500;
+  color: var(--i18n-text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.i18n__preview-info-value {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--i18n-text);
+}
+
+.i18n__preview-info-value--highlight {
+  color: var(--i18n-warning);
+}
+
+.i18n__preview-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.i18n__preview-section {
+  padding: 1.25rem;
+  border: 1px solid var(--i18n-border);
+  border-radius: var(--i18n-radius);
+  background: var(--i18n-bg-card);
+}
+
+.i18n__preview-section-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: oklch(1 0 0 / 0.85);
+  margin: 0 0 1rem;
+}
+
+.i18n__preview-examples {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.i18n__preview-example {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid oklch(1 0 0 / 0.04);
+}
+
+.i18n__preview-example:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.i18n__preview-label {
+  font-size: 0.875rem;
+  color: var(--i18n-text-faint);
+}
+
+.i18n__preview-value {
+  font-family: var(--i18n-font-mono);
+  font-size: 0.8125rem;
+  color: oklch(1 0 0 / 0.85);
+  font-variant-numeric: tabular-nums;
+}
+
+.i18n__preview-rtl-notice {
+  padding: 0.875rem 1.125rem;
+  border-radius: var(--i18n-radius);
+  border: 1px solid oklch(0.78 0.18 75 / 0.20);
+  background: oklch(0.78 0.18 75 / 0.06);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--i18n-warning);
+}
+
+.i18n__preview-sample-text {
+  font-size: 0.875rem;
+  color: oklch(1 0 0 / 0.6);
+  line-height: 1.7;
+  margin: 0;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   ANIMATIONS
+   ═══════════════════════════════════════════════════════════════ */
+
+@keyframes i18n-dropdown-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes i18n-alert-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes i18n-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@keyframes i18n-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes i18n-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   SKELETON / LOADING
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__skeleton {
+  background: oklch(1 0 0 / 0.05);
+  border-radius: var(--i18n-radius);
+  animation: i18n-pulse 1.5s ease-in-out infinite;
+}
+
+.i18n__skeleton--sm {
+  height: 1rem;
+  border-radius: var(--i18n-radius-sm);
+}
+
+.i18n__skeleton--md {
+  height: 2.5rem;
+}
+
+.i18n__skeleton--lg {
+  height: 5rem;
+}
+
+.i18n__skeleton--xl {
+  height: 12rem;
+}
+
+.i18n__skeleton--card {
+  height: 6rem;
+  border-radius: var(--i18n-radius);
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   RESPONSIVE
+   ═══════════════════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+  .i18n__admin-container {
+    padding: 1.5rem 1rem;
+  }
+
+  .i18n__preview-container {
+    padding: 1.5rem 1rem;
+  }
+
+  .i18n__page-title {
+    font-size: 1.375rem;
+  }
+
+  .i18n__preview-title {
+    font-size: 1.25rem;
+  }
+
+  .i18n__stats-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  }
+
+  .i18n__locale-grid {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  }
+
+  .i18n__preview-info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .i18n__key-row {
+    grid-template-columns: 1fr 1.5fr auto;
+    gap: 0.5rem;
+    padding: 0.625rem 0.75rem;
+  }
+
+  .i18n__key-row-locale {
+    display: none;
+  }
+
+  .i18n__search-input {
+    max-width: 100%;
+  }
+
+  .i18n__admin-section-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .i18n__preview-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 480px) {
+  .i18n__stats-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .i18n__locale-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .i18n__preview-info-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+  }
+
+  .i18n__key-row {
+    grid-template-columns: 1fr auto;
+  }
+
+  .i18n__key-row-value {
+    display: none;
+  }
+
+  .i18n__locale-switcher-label {
+    display: none;
+  }
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   FOCUS & ACCESSIBILITY
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__locale-card:focus-visible {
+  outline: 2px solid var(--i18n-accent);
+  outline-offset: 2px;
+}
+
+.i18n__locale-switcher-option:focus-visible {
+  outline: 2px solid var(--i18n-accent);
+  outline-offset: -2px;
+}
+
+.i18n__key-row-btn:focus-visible {
+  outline: 2px solid var(--i18n-accent);
+  outline-offset: 2px;
+}
+
+.i18n__search-input:focus-visible {
+  outline: none;
+  border-color: var(--i18n-border-focus);
+  box-shadow: 0 0 0 3px oklch(0.65 0.20 265 / 0.12);
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   UTILITY CLASSES
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__divider {
+  height: 1px;
+  background: var(--i18n-border);
+  border: none;
+  margin: 1.5rem 0;
+}
+
+.i18n__badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--i18n-radius-full);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
+.i18n__badge--accent {
+  background: var(--i18n-accent-subtle);
+  color: var(--i18n-accent);
+}
+
+.i18n__badge--success {
+  background: var(--i18n-success-subtle);
+  color: var(--i18n-success);
+}
+
+.i18n__badge--warning {
+  background: var(--i18n-warning-subtle);
+  color: var(--i18n-warning);
+}
+
+.i18n__badge--error {
+  background: var(--i18n-error-subtle);
+  color: var(--i18n-error);
+}
+
+.i18n__text-mono {
+  font-family: var(--i18n-font-mono);
+}
+
+.i18n__text-muted {
+  color: var(--i18n-text-muted);
+}
+
+.i18n__text-faint {
+  color: var(--i18n-text-faint);
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   EDITOR FORM
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__editor {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1.25rem;
+  border: 1px solid var(--i18n-border);
+  border-radius: var(--i18n-radius);
+  background: var(--i18n-bg-card);
+}
+
+.i18n__editor-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--i18n-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin: 0;
+}
+
+.i18n__editor-input {
+  width: 100%;
+  padding: 0.625rem 1rem;
+  border: 1px solid var(--i18n-border);
+  border-radius: var(--i18n-radius);
+  background: var(--i18n-bg-input);
+  font-size: 0.875rem;
+  font-family: var(--i18n-font-sans);
+  color: var(--i18n-text);
+  outline: none;
+  transition: all var(--i18n-transition);
+}
+
+.i18n__editor-input::placeholder {
+  color: var(--i18n-text-faint);
+}
+
+.i18n__editor-input:focus {
+  border-color: var(--i18n-border-focus);
+  box-shadow: 0 0 0 3px oklch(0.65 0.20 265 / 0.12);
+}
+
+.i18n__editor-textarea {
+  width: 100%;
+  padding: 0.625rem 1rem;
+  border: 1px solid var(--i18n-border);
+  border-radius: var(--i18n-radius);
+  background: var(--i18n-bg-input);
+  font-size: 0.875rem;
+  font-family: var(--i18n-font-sans);
+  color: var(--i18n-text);
+  outline: none;
+  resize: vertical;
+  min-height: 4rem;
+  transition: all var(--i18n-transition);
+}
+
+.i18n__editor-textarea::placeholder {
+  color: var(--i18n-text-faint);
+}
+
+.i18n__editor-textarea:focus {
+  border-color: var(--i18n-border-focus);
+  box-shadow: 0 0 0 3px oklch(0.65 0.20 265 / 0.12);
+}
+
+.i18n__editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   BUTTONS
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  border-radius: var(--i18n-radius);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: var(--i18n-font-sans);
+  cursor: pointer;
+  border: none;
+  transition: all var(--i18n-transition);
+}
+
+.i18n__btn--primary {
+  background: var(--i18n-accent);
+  color: white;
+}
+
+.i18n__btn--primary:hover {
+  background: var(--i18n-accent-hover);
+  box-shadow: 0 2px 8px oklch(0.65 0.20 265 / 0.3);
+}
+
+.i18n__btn--primary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.i18n__btn--ghost {
+  background: transparent;
+  color: var(--i18n-text-muted);
+  border: 1px solid var(--i18n-border);
+}
+
+.i18n__btn--ghost:hover {
+  background: oklch(1 0 0 / 0.05);
+  color: var(--i18n-text);
+}
+
+.i18n__btn--danger {
+  background: var(--i18n-error-subtle);
+  color: var(--i18n-error);
+  border: 1px solid var(--i18n-error-border);
+}
+
+.i18n__btn--danger:hover {
+  background: oklch(0.60 0.25 25 / 0.15);
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   TOOLTIP
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__tooltip {
+  position: relative;
+}
+
+.i18n__tooltip-content {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.375rem 0.625rem;
+  border-radius: var(--i18n-radius-sm);
+  background: oklch(0.20 0.01 250);
+  color: var(--i18n-text);
+  font-size: 0.6875rem;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: var(--i18n-shadow);
+  animation: i18n-fade-in 150ms ease-out;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   SCROLLBAR (global for i18n containers)
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__admin-page::-webkit-scrollbar {
+  width: 6px;
+}
+
+.i18n__admin-page::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.i18n__admin-page::-webkit-scrollbar-thumb {
+  background: oklch(1 0 0 / 0.08);
+  border-radius: var(--i18n-radius-full);
+}
+
+.i18n__admin-page::-webkit-scrollbar-thumb:hover {
+  background: oklch(1 0 0 / 0.14);
+}
+
+.i18n__translation-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.i18n__translation-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.i18n__translation-list::-webkit-scrollbar-thumb {
+  background: oklch(1 0 0 / 0.08);
+  border-radius: var(--i18n-radius-full);
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   COVERAGE INDICATOR MODIFIERS
+   ═══════════════════════════════════════════════════════════════ */
+
+.i18n__locale-card--coverage-high .i18n__locale-card-coverage {
+  color: var(--i18n-success);
+}
+
+.i18n__locale-card--coverage-mid .i18n__locale-card-coverage {
+  color: var(--i18n-warning);
+}
+
+.i18n__locale-card--coverage-low .i18n__locale-card-coverage {
+  color: var(--i18n-error);
+}
+
+.i18n__stats-card--highlighted {
+  border-color: var(--i18n-accent);
+  box-shadow: 0 0 0 1px var(--i18n-accent);
+}
+
+.i18n__key-row--missing {
+  background: var(--i18n-error-subtle);
+  border-left: 3px solid var(--i18n-error);
+}
+
+.i18n__key-row--missing .i18n__key-row-key {
+  color: var(--i18n-error);
+}