/* ============================================================
   AMMIRELLA DESIGN SYSTEM  v1.0
   The foundation for every digital product in the empire.
   Dark mode default. Light mode via [data-theme="light"].
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Orbitron:wght@700;800;900&display=swap');

/* ── TOKENS — DARK (default) ──────────────────────────────── */
:root {
  /* Backgrounds */
  --am-bg:           #0A0A0F;
  --am-surface:      #111118;
  --am-surface-2:    #1A1A24;
  --am-surface-3:    #22222F;

  /* Accent — Gold (default) */
  --am-accent:       #F59E0B;
  --am-accent-hover: #FBBF24;
  --am-accent-dim:   rgba(245, 158, 11, 0.15);
  --am-accent-border:rgba(245, 158, 11, 0.30);

  /* Secondary — Electric Indigo */
  --am-secondary:    #6366F1;
  --am-secondary-hover:#818CF8;
  --am-secondary-dim:rgba(99, 102, 241, 0.15);

  /* Text */
  --am-text:         #FAFAFA;
  --am-text-2:       #A1A1AA;
  --am-text-3:       #71717A;

  /* Borders */
  --am-border:       rgba(255, 255, 255, 0.08);
  --am-border-2:     rgba(255, 255, 255, 0.14);

  /* Semantic */
  --am-success:      #10B981;
  --am-success-dim:  rgba(16, 185, 129, 0.15);
  --am-warning:      #F59E0B;
  --am-warning-dim:  rgba(245, 158, 11, 0.15);
  --am-error:        #EF4444;
  --am-error-dim:    rgba(239, 68, 68, 0.15);
  --am-info:         #A8A29E;
  --am-info-dim:     rgba(168, 162, 158, 0.15);

  /* Typography */
  --am-font-display: 'Orbitron', 'JetBrains Mono', sans-serif;
  --am-font-ui:      'Inter', system-ui, sans-serif;
  --am-font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Type Scale */
  --am-text-xs:   0.75rem;
  --am-text-sm:   0.875rem;
  --am-text-base: 1rem;
  --am-text-lg:   1.125rem;
  --am-text-xl:   1.25rem;
  --am-text-2xl:  1.5rem;
  --am-text-3xl:  1.875rem;
  --am-text-4xl:  2.25rem;
  --am-text-5xl:  3rem;
  --am-text-6xl:  3.75rem;

  /* Spacing */
  --am-1:  0.25rem;
  --am-2:  0.5rem;
  --am-3:  0.75rem;
  --am-4:  1rem;
  --am-5:  1.25rem;
  --am-6:  1.5rem;
  --am-8:  2rem;
  --am-10: 2.5rem;
  --am-12: 3rem;
  --am-16: 4rem;
  --am-20: 5rem;
  --am-24: 6rem;

  /* Radius — square language, no curves */
  --am-radius-sm:  0px;
  --am-radius:     0px;
  --am-radius-lg:  0px;
  --am-radius-xl:  0px;
  --am-radius-2xl: 0px;
  --am-radius-full:0px;

  /* Motion */
  --am-fast:   150ms ease-out;
  --am-normal: 300ms ease-out;
  --am-slow:   500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadow */
  --am-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --am-shadow:    0 4px 16px rgba(0,0,0,0.5);
  --am-shadow-lg: 0 16px 48px rgba(0,0,0,0.7);
  --am-shadow-accent: 0 0 24px rgba(245,158,11,0.2);

  /* Warm accent — orange in GOLD, scheme-matched elsewhere */
  --am-warm: #ea580c;
}

/* ── TOKENS — LIGHT ───────────────────────────────────────── */
[data-theme="light"] {
  --am-bg:           #F8F8FC;
  --am-surface:      #FFFFFF;
  --am-surface-2:    #F0F0F6;
  --am-surface-3:    #E8E8F0;

  --am-accent:       #D97706;
  --am-accent-hover: #B45309;
  --am-accent-dim:   rgba(217, 119, 6, 0.10);
  --am-accent-border:rgba(217, 119, 6, 0.25);

  --am-secondary:    #4F46E5;
  --am-secondary-hover:#4338CA;
  --am-secondary-dim:rgba(79, 70, 229, 0.10);

  --am-text:         #0A0A0F;
  --am-text-2:       #52525B;
  --am-text-3:       #A1A1AA;

  --am-border:       rgba(0, 0, 0, 0.08);
  --am-border-2:     rgba(0, 0, 0, 0.14);

  --am-success:      #059669;
  --am-success-dim:  rgba(5, 150, 105, 0.10);
  --am-warning:      #D97706;
  --am-warning-dim:  rgba(217, 119, 6, 0.10);
  --am-error:        #DC2626;
  --am-error-dim:    rgba(220, 38, 38, 0.10);
  --am-info:         #78716C;
  --am-info-dim:     rgba(120, 113, 108, 0.10);

  --am-shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --am-shadow:    0 4px 16px rgba(0,0,0,0.10);
  --am-shadow-lg: 0 16px 48px rgba(0,0,0,0.15);
  --am-shadow-accent: 0 0 24px rgba(217,119,6,0.15);
}

/* ── COLOR SCHEMES ────────────────────────────────────────── */
/* VIOLET */
[data-color-scheme="violet"] {
  --am-accent:        #8b5cf6;
  --am-accent-hover:  #a78bfa;
  --am-accent-dim:    rgba(139, 92, 246, 0.15);
  --am-accent-border: rgba(139, 92, 246, 0.30);
  --am-shadow-accent: 0 0 24px rgba(139, 92, 246, 0.20);
}
[data-color-scheme="violet"][data-theme="light"] {
  --am-accent:        #7c3aed;
  --am-accent-hover:  #6d28d9;
  --am-accent-dim:    rgba(124, 58, 237, 0.10);
  --am-accent-border: rgba(124, 58, 237, 0.25);
  --am-shadow-accent: 0 0 24px rgba(124, 58, 237, 0.15);
}

/* CRIMSON */
[data-color-scheme="crimson"] {
  --am-accent:        #ef4444;
  --am-accent-hover:  #f87171;
  --am-accent-dim:    rgba(239, 68, 68, 0.15);
  --am-accent-border: rgba(239, 68, 68, 0.30);
  --am-shadow-accent: 0 0 24px rgba(239, 68, 68, 0.20);
}
[data-color-scheme="crimson"][data-theme="light"] {
  --am-accent:        #dc2626;
  --am-accent-hover:  #b91c1c;
  --am-accent-dim:    rgba(220, 38, 38, 0.10);
  --am-accent-border: rgba(220, 38, 38, 0.25);
  --am-shadow-accent: 0 0 24px rgba(220, 38, 38, 0.15);
}

/* JADE */
[data-color-scheme="jade"] {
  --am-accent:        #10b981;
  --am-accent-hover:  #34d399;
  --am-accent-dim:    rgba(16, 185, 129, 0.15);
  --am-accent-border: rgba(16, 185, 129, 0.30);
  --am-shadow-accent: 0 0 24px rgba(16, 185, 129, 0.20);
}
[data-color-scheme="jade"][data-theme="light"] {
  --am-accent:        #059669;
  --am-accent-hover:  #047857;
  --am-accent-dim:    rgba(5, 150, 105, 0.10);
  --am-accent-border: rgba(5, 150, 105, 0.25);
  --am-shadow-accent: 0 0 24px rgba(5, 150, 105, 0.15);
}

/* ROSE */
[data-color-scheme="rose"] {
  --am-accent:        #ec4899;
  --am-accent-hover:  #f472b6;
  --am-accent-dim:    rgba(236, 72, 153, 0.15);
  --am-accent-border: rgba(236, 72, 153, 0.30);
  --am-shadow-accent: 0 0 24px rgba(236, 72, 153, 0.20);
}
[data-color-scheme="rose"][data-theme="light"] {
  --am-accent:        #db2777;
  --am-accent-hover:  #be185d;
  --am-accent-dim:    rgba(219, 39, 119, 0.10);
  --am-accent-border: rgba(219, 39, 119, 0.25);
  --am-shadow-accent: 0 0 24px rgba(219, 39, 119, 0.15);
}

/* FROST */
[data-color-scheme="frost"] {
  --am-accent:        #94a3b8;
  --am-accent-hover:  #cbd5e1;
  --am-accent-dim:    rgba(148, 163, 184, 0.15);
  --am-accent-border: rgba(148, 163, 184, 0.30);
  --am-shadow-accent: 0 0 24px rgba(148, 163, 184, 0.15);
}
[data-color-scheme="frost"][data-theme="light"] {
  --am-accent:        #64748b;
  --am-accent-hover:  #475569;
  --am-accent-dim:    rgba(100, 116, 139, 0.10);
  --am-accent-border: rgba(100, 116, 139, 0.25);
  --am-shadow-accent: 0 0 24px rgba(100, 116, 139, 0.15);
}

/* ── WARM ACCENT — per-scheme overrides (dark enough for cream backgrounds) ── */
/* GOLD default: --am-warm stays #ea580c (inherited from :root) */
[data-color-scheme="violet"]  { --am-warm: #6d28d9; }
[data-color-scheme="crimson"] { --am-warm: #dc2626; }
[data-color-scheme="jade"]    { --am-warm: #065f46; }
[data-color-scheme="rose"]    { --am-warm: #be185d; }
[data-color-scheme="frost"]   { --am-warm: #44403c; }

/* ── RESET + BASE ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--am-font-ui);
  font-size: var(--am-text-base);
  line-height: 1.6;
  color: var(--am-text);
  background: var(--am-bg);
  transition: background var(--am-normal), color var(--am-normal);
}

a { color: var(--am-accent); text-decoration: none; transition: color var(--am-fast); }
a:hover { color: var(--am-accent-hover); }

img, svg { display: block; max-width: 100%; }

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
.am-display {
  font-family: var(--am-font-display);
  font-size: var(--am-text-6xl);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.1;
  color: var(--am-text);
}
.am-h1 {
  font-family: var(--am-font-display);
  font-size: var(--am-text-5xl);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.15;
}
.am-h2 {
  font-family: var(--am-font-display);
  font-size: var(--am-text-4xl);
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1.2;
}
.am-h3 {
  font-family: var(--am-font-display);
  font-size: var(--am-text-3xl);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.25;
}
.am-h4 {
  font-family: var(--am-font-display);
  font-size: var(--am-text-2xl);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.am-h5 {
  font-family: var(--am-font-display);
  font-size: var(--am-text-xl);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.35;
}
.am-label {
  font-family: var(--am-font-ui);
  font-size: var(--am-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--am-text-3);
}
.am-body    { font-size: var(--am-text-base); line-height: 1.7; color: var(--am-text-2); }
.am-small   { font-size: var(--am-text-sm); color: var(--am-text-2); }
.am-mono    { font-family: var(--am-font-mono); font-size: 0.9em; }
.am-accent-text { color: var(--am-accent); }
.am-muted   { color: var(--am-text-3); }

/* ── BUTTONS ──────────────────────────────────────────────── */
/* Keyline principle: borders define the button. No filled blocks at rest. */
.am-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--am-2);
  padding: 0.625rem 1.25rem;
  font-family: var(--am-font-ui);
  font-size: var(--am-text-sm);
  font-weight: 500;
  line-height: 1;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--am-fast);
  white-space: nowrap;
  text-decoration: none;
  outline: none;
  letter-spacing: 0.03em;
  background: transparent;
}
.am-btn:focus-visible { box-shadow: 0 0 0 2px var(--am-accent); outline: none; }
.am-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Primary — thick keyline, fills on hover */
.am-btn-primary {
  color: var(--am-accent);
  border: 1.5px solid var(--am-accent);
  background: transparent;
}
.am-btn-primary:hover:not(:disabled) {
  background: var(--am-accent);
  color: #0A0A0F;
  box-shadow: var(--am-shadow-accent);
}

/* Outline — thin keyline, dimmer accent */
.am-btn-outline {
  color: var(--am-accent);
  border: 1px solid var(--am-accent-border);
  background: transparent;
}
.am-btn-outline:hover:not(:disabled) {
  border-color: var(--am-accent);
  background: var(--am-accent-dim);
}

/* Ghost — structural keyline only */
.am-btn-ghost {
  color: var(--am-text-2);
  border: 1px solid var(--am-border);
  background: transparent;
}
.am-btn-ghost:hover:not(:disabled) {
  border-color: var(--am-border-2);
  color: var(--am-text);
  background: var(--am-surface-2);
}

/* Secondary — indigo keyline */
.am-btn-secondary {
  color: var(--am-secondary);
  border: 1.5px solid var(--am-secondary);
  background: transparent;
}
.am-btn-secondary:hover:not(:disabled) {
  background: var(--am-secondary);
  color: #FFFFFF;
}

/* Danger — error keyline */
.am-btn-danger {
  color: var(--am-error);
  border: 1px solid var(--am-error);
  background: transparent;
}
.am-btn-danger:hover:not(:disabled) {
  background: var(--am-error);
  color: #fff;
}

/* Sizes — sharp edges maintained */
.am-btn-sm { padding: 0.375rem 0.75rem; font-size: var(--am-text-xs); }
.am-btn-lg { padding: 0.875rem 1.75rem; font-size: var(--am-text-base); border-radius: 2px; }
.am-btn-xl { padding: 1.125rem 2.25rem; font-size: var(--am-text-lg); border-radius: 2px; }
.am-btn-full { width: 100%; }

/* Brick press — mechanical inward compression on click */
@keyframes am-brick-press {
  0%   { transform: scale(1)    translateY(0);    box-shadow: none; }
  28%  { transform: scale(0.93) translateY(2px);  }
  100% { transform: scale(1)    translateY(0);    }
}
.am-btn.am-pressed {
  animation: am-brick-press 0.2s cubic-bezier(0.15, 0, 0.3, 1) forwards;
}

/* ── CARDS ────────────────────────────────────────────────── */
/* Keyline: card is defined by its border, not its fill */
.am-card {
  background: transparent;
  border: 1px solid var(--am-border);
  border-radius: 2px;
  padding: var(--am-6);
  transition: border-color var(--am-fast), box-shadow var(--am-fast);
}
.am-card-elevated {
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: 2px;
  padding: var(--am-6);
  box-shadow: var(--am-shadow);
}
.am-card-hover:hover {
  border-color: var(--am-accent);
  box-shadow: var(--am-shadow-accent);
  transition: all var(--am-normal);
}
.am-card-accent {
  background: transparent;
  border-color: var(--am-accent-border);
}

/* Stat card */
.am-stat {
  display: flex;
  flex-direction: column;
  gap: var(--am-2);
  padding: var(--am-6);
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-lg);
}
.am-stat-value {
  font-family: var(--am-font-display);
  font-size: var(--am-text-3xl);
  font-weight: 700;
  color: var(--am-text);
  letter-spacing: -0.02em;
}
.am-stat-label {
  font-size: var(--am-text-sm);
  color: var(--am-text-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.am-stat-delta-up   { font-size: var(--am-text-sm); color: var(--am-success); font-weight: 500; }
.am-stat-delta-down { font-size: var(--am-text-sm); color: var(--am-error); font-weight: 500; }

/* ── INPUTS ───────────────────────────────────────────────── */
.am-input {
  width: 100%;
  padding: 0.625rem var(--am-4);
  font-family: var(--am-font-ui);
  font-size: var(--am-text-sm);
  color: var(--am-text);
  background: transparent;
  border: 1px solid var(--am-border-2);
  border-radius: 2px;
  outline: none;
  transition: border-color var(--am-fast), box-shadow var(--am-fast);
  -webkit-appearance: none;
}
.am-input::placeholder { color: var(--am-text-3); }
.am-input:focus {
  border-color: var(--am-accent);
  box-shadow: 0 0 0 3px var(--am-accent-dim);
}
.am-input:invalid:not(:placeholder-shown) { border-color: var(--am-error); }

.am-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.am-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A1A1AA' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.am-field { display: flex; flex-direction: column; gap: var(--am-2); }
.am-field-label {
  font-size: var(--am-text-sm);
  font-weight: 500;
  color: var(--am-text-2);
}
.am-field-hint { font-size: var(--am-text-xs); color: var(--am-text-3); }
.am-field-error { font-size: var(--am-text-xs); color: var(--am-error); }

/* ── BADGES ───────────────────────────────────────────────── */
.am-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--am-1);
  padding: 0.2rem 0.6rem;
  font-size: var(--am-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--am-radius-full);
  border: 1px solid transparent;
}
.am-badge-default  { background: var(--am-surface-2); color: var(--am-text-2); border-color: var(--am-border-2); }
.am-badge-accent   { background: var(--am-accent-dim); color: var(--am-accent); border-color: var(--am-accent-border); }
.am-badge-success  { background: var(--am-success-dim); color: var(--am-success); }
.am-badge-warning  { background: var(--am-warning-dim); color: var(--am-warning); }
.am-badge-error    { background: var(--am-error-dim); color: var(--am-error); }
.am-badge-info     { background: var(--am-info-dim); color: var(--am-info); }
.am-badge-secondary{ background: var(--am-secondary-dim); color: var(--am-secondary); }

/* ── NAVIGATION ───────────────────────────────────────────── */
.am-nav {
  display: flex;
  align-items: center;
  padding: 0 var(--am-6);
  height: 60px;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--am-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
[data-theme="light"] .am-nav {
  background: rgba(248, 248, 252, 0.85);
}
.am-nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--am-font-display);
  font-size: var(--am-text-lg);
  font-weight: 700;
  color: var(--am-text);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.am-nav-brand span { color: var(--am-accent); }
.am-nav-links {
  display: flex;
  align-items: center;
  gap: var(--am-1);
  margin-left: var(--am-8);
  list-style: none;
}
.am-nav-link {
  padding: var(--am-2) var(--am-3);
  font-size: var(--am-text-sm);
  font-weight: 500;
  color: var(--am-text-2);
  border-radius: var(--am-radius);
  transition: all var(--am-fast);
  cursor: pointer;
}
.am-nav-link:hover, .am-nav-link.active {
  color: var(--am-text);
  background: var(--am-surface-2);
}
.am-nav-link.active { color: var(--am-accent); }
.am-nav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--am-3); }

/* ── TABLE ────────────────────────────────────────────────── */
.am-table-wrap { overflow-x: auto; border: 1px solid var(--am-border); border-radius: var(--am-radius-lg); }
.am-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--am-text-sm);
}
.am-table th {
  padding: var(--am-3) var(--am-4);
  text-align: left;
  font-size: var(--am-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--am-text-3);
  background: var(--am-surface-2);
  border-bottom: 1px solid var(--am-border);
}
.am-table td {
  padding: var(--am-3) var(--am-4);
  border-bottom: 1px solid var(--am-border);
  color: var(--am-text-2);
}
.am-table tr:last-child td { border-bottom: none; }
.am-table tbody tr { transition: background var(--am-fast); }
.am-table tbody tr:hover { background: var(--am-surface-2); }

/* ── TABS ─────────────────────────────────────────────────── */
.am-tabs { display: flex; border-bottom: 1px solid var(--am-border); gap: var(--am-1); }
.am-tab {
  padding: var(--am-3) var(--am-4);
  font-size: var(--am-text-sm);
  font-weight: 500;
  color: var(--am-text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all var(--am-fast);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--am-font-ui);
}
.am-tab:hover { color: var(--am-text); }
.am-tab.active { color: var(--am-accent); border-bottom-color: var(--am-accent); }
.am-tab-panel { display: none; }
.am-tab-panel.active { display: block; }

/* ── PROGRESS ─────────────────────────────────────────────── */
.am-progress {
  width: 100%;
  height: 6px;
  background: var(--am-surface-2);
  border-radius: var(--am-radius-full);
  overflow: hidden;
}
.am-progress-bar {
  height: 100%;
  background: var(--am-accent);
  border-radius: var(--am-radius-full);
  transition: width var(--am-slow);
}
.am-progress-bar-secondary { background: var(--am-secondary); }
.am-progress-bar-success   { background: var(--am-success); }

/* ── DIVIDER ──────────────────────────────────────────────── */
.am-divider {
  border: none;
  border-top: 1px solid var(--am-border);
  margin: var(--am-6) 0;
}
.am-divider-accent { border-top-color: var(--am-accent-border); }

/* ── SPINNER ──────────────────────────────────────────────── */
.am-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--am-border-2);
  border-top-color: var(--am-accent);
  border-radius: 0;
  animation: am-spin 0.7s linear infinite;
  display: inline-block;
}
.am-spinner-sm { width: 14px; height: 14px; }
.am-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes am-spin { to { transform: rotate(360deg); } }

/* ── TOAST ────────────────────────────────────────────────── */
#am-toast-container {
  position: fixed;
  bottom: var(--am-6);
  right: var(--am-6);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--am-3);
  pointer-events: none;
}
.am-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--am-3);
  min-width: 280px;
  max-width: 400px;
  padding: var(--am-4);
  background: var(--am-surface-2);
  border: 1px solid var(--am-border-2);
  border-radius: var(--am-radius-lg);
  box-shadow: var(--am-shadow-lg);
  pointer-events: all;
  animation: am-toast-in var(--am-slow) forwards;
  font-size: var(--am-text-sm);
  color: var(--am-text);
}
.am-toast.success { border-left: 3px solid var(--am-success); }
.am-toast.error   { border-left: 3px solid var(--am-error); }
.am-toast.warning { border-left: 3px solid var(--am-warning); }
.am-toast.info    { border-left: 3px solid var(--am-info); }
.am-toast-out     { animation: am-toast-out var(--am-normal) forwards; }
@keyframes am-toast-in  {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes am-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(4px) scale(0.96); }
}

/* ── MODAL ────────────────────────────────────────────────── */
.am-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--am-4);
  animation: am-fade-in 200ms ease-out;
}
.am-modal {
  background: var(--am-surface);
  border: 1px solid var(--am-border-2);
  border-radius: var(--am-radius-2xl);
  padding: var(--am-8);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--am-shadow-lg);
  animation: am-slide-up var(--am-slow);
}
.am-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--am-6);
}
.am-modal-title {
  font-family: var(--am-font-display);
  font-size: var(--am-text-xl);
  font-weight: 700;
  color: var(--am-text);
}
.am-modal-close {
  background: var(--am-surface-2);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  color: var(--am-text-2);
  padding: var(--am-2);
  cursor: pointer;
  transition: all var(--am-fast);
  line-height: 1;
  font-size: 1.1rem;
}
.am-modal-close:hover { color: var(--am-text); background: var(--am-surface-3); }
.am-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--am-3);
  margin-top: var(--am-8);
  padding-top: var(--am-6);
  border-top: 1px solid var(--am-border);
}

@keyframes am-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-slide-up {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── CODE BLOCK ───────────────────────────────────────────── */
.am-code {
  font-family: var(--am-font-mono);
  font-size: var(--am-text-sm);
  background: var(--am-surface-2);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  padding: var(--am-4) var(--am-5);
  overflow-x: auto;
  color: var(--am-text-2);
  line-height: 1.7;
}
.am-code-inline {
  font-family: var(--am-font-mono);
  font-size: 0.85em;
  background: var(--am-surface-2);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  padding: 0.1em 0.4em;
  color: var(--am-accent);
}

/* ── ALERT ────────────────────────────────────────────────── */
.am-alert {
  display: flex;
  gap: var(--am-3);
  padding: var(--am-4) var(--am-5);
  border-radius: var(--am-radius-lg);
  font-size: var(--am-text-sm);
  border: 1px solid transparent;
}
.am-alert-success { background: var(--am-success-dim); color: var(--am-success); border-color: rgba(16,185,129,0.2); }
.am-alert-error   { background: var(--am-error-dim);   color: var(--am-error);   border-color: rgba(239,68,68,0.2); }
.am-alert-warning { background: var(--am-warning-dim); color: var(--am-warning); border-color: var(--am-accent-border); }
.am-alert-info    { background: var(--am-info-dim);    color: var(--am-info);    border-color: rgba(168,162,158,0.2); }

/* ── AVATAR ───────────────────────────────────────────────── */
.am-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--am-radius-full);
  background: var(--am-accent-dim);
  border: 1px solid var(--am-accent-border);
  color: var(--am-accent);
  font-family: var(--am-font-display);
  font-weight: 700;
  font-size: var(--am-text-sm);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.am-avatar-sm { width: 28px; height: 28px; font-size: var(--am-text-xs); }
.am-avatar-lg { width: 56px; height: 56px; font-size: var(--am-text-xl); }

/* ── THEME TOGGLE ─────────────────────────────────────────── */
.am-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--am-radius);
  background: var(--am-surface-2);
  border: 1px solid var(--am-border);
  color: var(--am-text-2);
  cursor: pointer;
  transition: all var(--am-fast);
}
.am-theme-toggle:hover { color: var(--am-accent); border-color: var(--am-accent-border); }

/* ── LAYOUT UTILITIES ─────────────────────────────────────── */
.am-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--am-6); }
.am-container-sm { max-width: 768px; }
.am-container-lg { max-width: 1440px; }
.am-section { padding: var(--am-16) 0; }
.am-section-sm { padding: var(--am-8) 0; }

.am-grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--am-6); }
.am-grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--am-6); }
.am-grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--am-6); }
.am-flex    { display: flex; }
.am-flex-center { display: flex; align-items: center; justify-content: center; }
.am-flex-between { display: flex; align-items: center; justify-content: space-between; }
.am-gap-2 { gap: var(--am-2); }
.am-gap-3 { gap: var(--am-3); }
.am-gap-4 { gap: var(--am-4); }
.am-gap-6 { gap: var(--am-6); }

@media (max-width: 768px) {
  .am-grid-2, .am-grid-3, .am-grid-4 { grid-template-columns: 1fr; }
  .am-display { font-size: var(--am-text-4xl); }
  .am-h1 { font-size: var(--am-text-3xl); }
  .am-container { padding: 0 var(--am-4); }
}

/* ── GLOW / DECORATIVE ────────────────────────────────────── */
.am-glow {
  position: relative;
}
.am-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--am-accent), var(--am-secondary));
  z-index: -1;
  opacity: 0;
  transition: opacity var(--am-normal);
}
.am-glow:hover::before { opacity: 0.6; }

.am-gradient-text {
  background: linear-gradient(135deg, var(--am-accent), var(--am-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}