aimeat 1.2.0

package/dist/public/css/theme.css

@@ -0,0 +1,716 @@
+/* ═══════════════════════════════════════════════════════
+   AIMEAT Unified Theme
+   Single source of truth for all portal CSS variables,
+   base styles, animations, and shared components.
+   ═══════════════════════════════════════════════════════ */
+
+/* ── Reset ── */
+*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+/* ── Root Variables ── */
+:root {
+  /* Background */
+  --bg: #FAFAF8;
+  --bg-surface: #F3F4F6;
+  --bg-card: #FFFFFF;
+  --bg-elevated: #FFFFFF;
+
+  /* Cards & Surfaces */
+  --card-bg: #FFFFFF;
+  --card-bg-hover: #FFFFFF;
+  --card-bg-solid: #FFFFFF;
+  --card-bg-alt: #F3F4F6;
+  --card-border: #E5E7EB;
+
+  /* Accent (coral heart) */
+  --accent: #E8564A;
+  --accent-bright: #FF6B6B;
+  --accent-deep: #E8564A;
+  --accent-glow: rgba(232, 86, 74, 0.3);
+  --accent-subtle: rgba(232, 86, 74, 0.06);
+
+  /* Love palette (profile gradients — now coral-based) */
+  --love1: #E8564A;
+  --love2: #FF6B6B;
+  --love3: #FF8A80;
+  --love4: #FF6B6B;
+  --love5: #E8564A;
+
+  /* Text */
+  --text: #1A1A2E;
+  --text-bright: #1A1A2E;
+  --text-dim: #6B7280;
+  --text-muted: #9CA3AF;
+
+  /* Semantic colors */
+  --success: #10B981;
+  --warn: #F59E0B;
+  --danger: #EF4444;
+  --purple: #8B5CF6;
+
+  /* Accent palette */
+  --blue: #3B82F6;
+  --mint: #34D399;
+  --teal: #06B6D4;
+  --pink: #F472B6;
+  --orange: #FB923C;
+  --yellow: #FBBF24;
+
+  /* Borders */
+  --border: #E5E7EB;
+  --border-subtle: #F3F4F6;
+  --border-focus: #E8564A;
+
+  /* Radii */
+  --radius: 16px;
+  --radius-sm: 10px;
+  --radius-xs: 6px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+
+  /* Typography */
+  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
+
+  /* Layout */
+  --nav-height: 56px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
+  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
+  --shadow-heart: 0 4px 14px rgba(232,86,74,0.3);
+
+  /* Input */
+  --bg-input: var(--bg);
+  --bg-input-focus: #FFFFFF;
+
+  /* Code */
+  --code-bg: #F3F4F6;
+}
+
+/* ── Base ── */
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: inherit; text-decoration: none; }
+
+/* ── Animations ── */
+@keyframes heartPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.15); }
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.05; transform: scale(0.8); }
+  50% { opacity: 0.6; transform: scale(1.1); }
+}
+
+@keyframes livePulse {
+  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
+  50% { opacity: 0.4; box-shadow: 0 0 18px rgba(34, 197, 94, 0.9); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes btnGlow {
+  0%, 100% { box-shadow: 0 4px 12px rgba(232, 86, 74, 0.3); }
+  50% { box-shadow: 0 6px 20px rgba(232, 86, 74, 0.4); }
+}
+
+@keyframes expandGlow {
+  0%, 100% { box-shadow: 0 0 12px rgba(232, 86, 74, 0.08); }
+  50% { box-shadow: 0 0 24px rgba(232, 86, 74, 0.15); }
+}
+
+@keyframes worldOpen {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pageIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes nebulaDrift {
+  0% { transform: translate(0, 0) scale(1); }
+  100% { transform: translate(30px, -20px) scale(1.15); }
+}
+
+@keyframes auroraShift {
+  0% { transform: translateX(-20%) scaleY(1); }
+  100% { transform: translateX(-10%) scaleY(0.8); }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Background layers ── */
+.bg-canvas {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  z-index: 0;
+  pointer-events: none;
+  background: var(--bg);
+}
+
+.bg-canvas .star { display: none; }
+
+/* Aurora waves — hidden in light theme */
+.bg-aurora { display: none; }
+.aurora-wave { display: none; }
+
+/* ── App root — must sit above bg-canvas (z-index:0) so all non-positioned
+   descendants form a stacking context that paints over the fixed background ── */
+#app {
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Top Navigation ── */
+.topnav {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  height: var(--nav-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1.5rem;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+}
+
+.topnav-brand {
+  font-weight: 800;
+  font-size: 1.125rem;
+  color: var(--text);
+  letter-spacing: 0.3px;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  text-decoration: none;
+}
+
+.topnav-brand .brand-name { white-space: nowrap; }
+
+.brand-morsels {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px 10px;
+  border-radius: var(--radius-full);
+  border: 1px solid rgba(232, 86, 74, 0.15);
+  background: linear-gradient(135deg, #FFF1F0, #FFE0DE);
+  color: var(--accent);
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.brand-morsels::before { content: '\2665 '; color: var(--accent); }
+
+.topnav-brand .heart {
+  color: var(--accent);
+  font-style: normal;
+  margin: 0 1px;
+  font-size: 1rem;
+  animation: none;
+  filter: none;
+}
+.topnav-brand .brand-at {
+  color: var(--accent);
+}
+
+.topnav-center {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  overflow: hidden;
+  padding: 0;
+}
+
+.topnav-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.topnav-right a {
+  font-size: 0.84rem;
+  color: var(--text-dim);
+  text-decoration: none;
+  padding: 6px 12px;
+  border-radius: var(--radius-xs);
+  transition: all 0.15s;
+  font-weight: 500;
+  border: none;
+}
+
+.topnav-right a:hover {
+  color: var(--text);
+  background: var(--bg-surface);
+}
+
+.topnav-right a.active {
+  color: var(--accent);
+  background: rgba(232, 86, 74, 0.06);
+}
+
+.topnav-right .profile-link {
+  display: none;
+  color: var(--accent);
+  background: rgba(232, 86, 74, 0.06);
+}
+
+.topnav-right .profile-link.visible { display: inline-flex; }
+
+.header-auth-slot {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ── Language Buttons ── */
+.lang-btn {
+  padding: 4px 10px;
+  border-radius: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-decoration: none;
+  color: var(--text-muted);
+  transition: all 0.15s;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  font-family: var(--font);
+}
+
+.lang-btn.active {
+  background: var(--text);
+  color: #FFFFFF;
+  box-shadow: none;
+}
+
+.lang-btn:not(.active):hover {
+  color: var(--text);
+  background: var(--bg-surface);
+}
+
+/* ── Buttons ── */
+.btn-primary {
+  padding: 8px 20px;
+  background: linear-gradient(135deg, #E8564A 0%, #FF6B6B 100%);
+  color: #FFFFFF;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 0.84rem;
+  font-weight: 600;
+  font-family: var(--font);
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: var(--shadow-heart);
+  letter-spacing: 0;
+  animation: none;
+}
+
+.btn-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(232, 86, 74, 0.35);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+.btn-primary.success {
+  background: linear-gradient(135deg, #10B981, #059669);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
+  animation: none;
+}
+
+.btn-outline {
+  padding: 0.65rem 1.5rem;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  font-size: 0.84rem;
+  font-weight: 500;
+  font-family: var(--font);
+  cursor: pointer;
+  transition: all 0.15s;
+  letter-spacing: 0;
+  box-shadow: none;
+  animation: none;
+}
+
+.btn-outline:hover {
+  border-color: var(--text-muted);
+  color: var(--text);
+  background: transparent;
+  box-shadow: none;
+  transform: none;
+}
+
+.btn-sm {
+  padding: 0.35rem 0.75rem;
+  font-size: 0.8rem;
+  border-radius: var(--radius-xs);
+}
+
+.btn-success {
+  padding: 0.65rem 1.5rem;
+  background: linear-gradient(135deg, #10B981, #059669);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 0.9rem;
+  font-weight: 600;
+  font-family: var(--font);
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
+}
+
+.btn-success:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
+}
+
+.btn-info {
+  padding: 0.65rem 1.5rem;
+  background: #3B82F6;
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 0.84rem;
+  font-weight: 600;
+  font-family: var(--font);
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+}
+.btn-info:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
+}
+
+.btn-danger {
+  background: #FEE2E2;
+  color: var(--danger);
+  border: 1px solid #FECACA;
+}
+
+.btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 7px 16px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-dim);
+  text-decoration: none;
+  font-size: 0.81rem;
+  font-weight: 500;
+  transition: all 0.15s;
+}
+
+.btn-ghost:hover {
+  border-color: var(--text-muted);
+  color: var(--text);
+  background: transparent;
+}
+
+/* ── Cards ── */
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 2rem;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.2s ease;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+}
+
+.card-solid {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+}
+
+/* ── Content Group Container ── */
+.content-group {
+  position: relative;
+  z-index: 1;
+  max-width: 560px;
+  margin: 3rem auto 0;
+  padding: 2rem 1.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  box-shadow: var(--shadow-md);
+}
+
+.content-group > *:first-child { margin-top: 0; }
+.content-group > *:last-child { margin-bottom: 0; }
+
+/* ── Stat Cards ── */
+.stat-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px 20px;
+  background: var(--bg-card);
+  box-shadow: var(--shadow-sm);
+  text-align: center;
+}
+
+.stat-card-label {
+  font-size: 0.66rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+}
+
+.stat-card-value {
+  font-size: 1.35rem;
+  color: var(--text);
+  font-weight: 800;
+  margin-top: 0.15rem;
+}
+
+/* ── Badges ── */
+.badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  font-size: 0.66rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.badge-success { background: #D1FAE5; color: #047857; }
+.badge-warn { background: #FEF3C7; color: #B45309; }
+.badge-danger { background: #FEE2E2; color: #DC2626; }
+.badge-info { background: #EFF6FF; color: #1D4ED8; }
+
+/* ── Live dot ── */
+.live-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
+  animation: livePulse 1.5s ease-in-out infinite;
+}
+
+/* ── Section divider ── */
+.section-divider {
+  position: relative;
+  z-index: 1;
+  max-width: 520px;
+  margin: 1rem auto 1.5rem;
+  height: 1px;
+  background: var(--border);
+}
+
+/* ── Inputs ── */
+.input-field {
+  width: 100%;
+  padding: 11px 14px;
+  background: var(--bg);
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 0.94rem;
+  outline: none;
+  transition: all 0.15s;
+}
+
+.input-field::placeholder { color: var(--text-muted); }
+
+.input-field:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(232, 86, 74, 0.1);
+  background: #FFFFFF;
+}
+
+.prompt-box {
+  width: 100%;
+  min-height: 140px;
+  max-height: 300px;
+  padding: 1rem 1.2rem;
+  background: var(--bg);
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  line-height: 1.7;
+  resize: vertical;
+  outline: none;
+  text-align: left;
+}
+
+.prompt-box:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(232, 86, 74, 0.1);
+}
+
+/* ── Spinner ── */
+.spinner {
+  display: inline-block;
+  width: 1.25em;
+  height: 1.25em;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+/* ── Empty state ── */
+.empty {
+  padding: 1.5rem;
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; }
+
+/* ── Footer ── */
+.footer {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  padding: 3rem 1.25rem 3.5rem;
+  font-size: 0.82rem;
+  color: var(--text-dim);
+  line-height: 1.7;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.footer .heart-icon {
+  display: inline-block;
+  color: var(--accent);
+  font-size: 0.85rem;
+  margin: 0 0.1rem;
+}
+
+/* ── Page entrance ── */
+.page-content { animation: pageIn 0.8s ease; }
+
+/* ── Responsive ── */
+@media (max-width: 480px) {
+  .content-group { margin-top: 2rem; padding: 1.5rem 1rem; }
+  .topnav { padding: 0 0.75rem; }
+}
+
+/* ═══════════════════════════════════════════════════════
+   Shared Components
+   ═══════════════════════════════════════════════════════ */
+
+/* ── Alert ── */
+.alert {
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.75rem 1rem; border-radius: var(--radius-xs);
+  font-size: 0.85rem; margin-bottom: 1rem;
+}
+.alert-icon { font-weight: 700; flex-shrink: 0; }
+.alert-msg { flex: 1; }
+.alert-close { background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; padding: 0 0.25rem; opacity: 0.7; }
+.alert-close:hover { opacity: 1; }
+.alert-success { background: #D1FAE5; color: #047857; border: 1px solid #A7F3D0; }
+.alert-error { background: #FEE2E2; color: #DC2626; border: 1px solid #FECACA; }
+.alert-warn { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
+.alert-info { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
+
+/* ── Toast ── */
+.toast {
+  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
+  z-index: 9999; max-width: min(90vw, 420px); width: fit-content;
+  padding: 0.75rem 1.25rem; border-radius: var(--radius-xs);
+  font-size: 0.85rem; font-weight: 600;
+  background: rgba(34, 197, 94, 0.95); color: #fff;
+  animation: toastIn 0.3s ease, toastOut 0.4s ease 2.4s forwards;
+  pointer-events: auto; box-sizing: border-box;
+}
+.toast.error, .toast-error { background: rgba(239, 68, 68, 0.95); color: #fff; }
+.toast-success { background: rgba(34, 197, 94, 0.95); color: #fff; }
+@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
+@keyframes toastOut { from { opacity: 1; } to { opacity: 0; pointer-events: none; } }
+
+/* ── Modal ── */
+.modal-overlay {
+  position: fixed; inset: 0; z-index: 1000;
+  background: rgba(26, 26, 46, 0.4); backdrop-filter: blur(8px);
+  display: flex; align-items: center; justify-content: center;
+  padding: 24px;
+  animation: fadeIn 0.2s ease;
+}
+.modal {
+  background: var(--bg-card); border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-xl); padding: 1.5rem;
+  min-width: 320px; max-width: 90vw; max-height: 85vh; overflow-y: auto;
+}
+.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
+.modal-header h3 { font-size: 1.1rem; font-weight: 700; }
+.modal-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1.2rem; padding: 0.25rem; opacity: 0.7; }
+.modal-close:hover { opacity: 1; }
+.modal-confirm-message { color: var(--text-dim); margin: 0 0 1.25rem; line-height: 1.5; }
+.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 0.5rem; }
+.btn-danger-solid { padding: 8px 20px; background: var(--danger,#ef4444); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 0.84rem; font-weight: 500; cursor: pointer; transition: all 0.15s; }
+.btn-danger-solid:hover { background: #dc2626; }
+
+/* ── Card extensions ── */
+.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
+.card-title { font-weight: 600; font-size: 1rem; }
+.card-subtitle { color: var(--text-dim); font-size: 0.8rem; }
+.card-hoverable { cursor: pointer; }
+
+/* ── Form Group ── */
+.form-group { margin-bottom: 1rem; }
+.form-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-dim); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
+.form-hint { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; }
+
+/* ── Loading text ── */
+.loading-text { margin-left: 0.5rem; color: var(--text-dim); font-size: 0.85rem; }
+
+/* ── Accessibility ── */
+.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }