/* ============================================================================
 * Multigridbot Design-System v2 — Drop-in CSS
 *
 * Extends `tokens.css` (Token-Layer bleibt unverändert) und ergänzt:
 *   1. Erweiterte Tokens (Sub-Pixel-Tuning, Premium-Schatten, Layer-Stack)
 *   2. Base-Layer (Reset, Typografie, Form-Reset)
 *   3. Layout (App-Shell: Sidebar, Header, Main)
 *   4. Components (Card, Button, Badge, Form, Tab, Table, Stat, Sparkline)
 *   5. Utilities (Stack, Cluster, Grid, Helpers)
 *
 * Lade NACH `tokens.css` und VOR seitenspezifischen Stylesheets:
 *
 *   <link rel="stylesheet" href="{{ url_for('static', filename='css/tokens.css') }}">
 *   <link rel="stylesheet" href="{{ url_for('static', filename='css/mgb-design.css') }}">
 *   <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard-v3.css') }}">
 *
 * Klassen-Prefix: `.mgb-*` — kollidiert nicht mit bestehenden Styles.
 * Existing `.card`, `.btn`, `.stat-card` werden über ein optionales
 * Compat-Layer am Ende dieser Datei auf die neuen Tokens umgemappt.
 * ============================================================================ */

/* === 1. ERWEITERTE TOKENS ================================================== */

:root {
  /* Premium-Tuning für Dark-Mode (default) */
  --mgb-color-bg:              #0B1220;   /* tieferes Slate, Trading-Terminal-Vibe */
  --mgb-color-bg-elevated:     #131C2E;   /* Cards heben sich klar ab */
  --mgb-color-bg-subtle:       #1B273C;   /* Inputs, Hover */
  --mgb-color-bg-strong:       #243349;   /* aktive States, Highlights */
  --mgb-color-border:          rgba(255, 255, 255, 0.08);
  --mgb-color-border-subtle:   rgba(255, 255, 255, 0.04);
  --mgb-color-border-strong:   rgba(255, 255, 255, 0.14);

  --mgb-color-text:            #F1F5F9;
  --mgb-color-text-muted:      #94A3B8;
  --mgb-color-text-subtle:     #64748B;
  --mgb-color-text-inverse:    #0B1220;

  --mgb-color-accent:          #F97316;
  --mgb-color-accent-hover:    #EA580C;
  --mgb-color-accent-soft:     rgba(249, 115, 22, 0.10);
  --mgb-color-accent-strong:   rgba(249, 115, 22, 0.18);
  --mgb-color-accent-glow:     rgba(249, 115, 22, 0.32);

  --mgb-color-success:         #10B981;
  --mgb-color-success-soft:    rgba(16, 185, 129, 0.10);
  --mgb-color-success-strong:  rgba(16, 185, 129, 0.20);

  --mgb-color-danger:          #EF4444;
  --mgb-color-danger-soft:     rgba(239, 68, 68, 0.10);
  --mgb-color-danger-strong:   rgba(239, 68, 68, 0.20);

  --mgb-color-warning:         #F59E0B;
  --mgb-color-warning-soft:    rgba(245, 158, 11, 0.10);

  --mgb-color-info:            #3B82F6;
  --mgb-color-info-soft:       rgba(59, 130, 246, 0.10);

  --mgb-color-dca:             #8B5CF6;
  --mgb-color-dca-soft:        rgba(139, 92, 246, 0.10);

  /* Spacing-Erweiterung (4-px-Grid) */
  --mgb-space-0:    0;
  --mgb-space-px:   1px;
  --mgb-space-7:   40px;
  --mgb-space-9:   56px;
  --mgb-space-12:  80px;
  --mgb-space-16: 128px;

  /* Type-Scale erweitert */
  --mgb-text-2xs:  11px;   /* labels, badges */
  --mgb-text-4xl:  56px;   /* hero numbers, marketing */
  --mgb-text-5xl:  72px;   /* landing-page-headings */

  /* Schatten — schichtweise gestapelt für Tiefe ohne Plumpheit */
  --mgb-shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 4px 12px rgba(0, 0, 0, 0.18);
  --mgb-shadow-card-hover:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 2px 4px rgba(0, 0, 0, 0.24),
    0 12px 32px rgba(0, 0, 0, 0.28);
  --mgb-shadow-modal:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 20px 48px rgba(0, 0, 0, 0.50),
    0 4px 12px rgba(0, 0, 0, 0.30);
  --mgb-shadow-accent:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 4px 12px rgba(234, 88, 12, 0.40);

  /* App-Shell-Maße */
  --mgb-sidebar-w:       248px;
  --mgb-sidebar-w-min:    72px;
  --mgb-header-h:         64px;
  --mgb-content-max:    1440px;
  --mgb-gutter:           24px;

  /* Layer-Stack */
  --mgb-z-sidebar:   90;
  --mgb-z-header:   100;
}

[data-theme="light"] {
  --mgb-color-bg:              #F8FAFC;
  --mgb-color-bg-elevated:     #FFFFFF;
  --mgb-color-bg-subtle:       #F1F5F9;
  --mgb-color-bg-strong:       #E2E8F0;

  --mgb-color-border:          #E2E8F0;
  --mgb-color-border-subtle:   #F1F5F9;
  --mgb-color-border-strong:   #CBD5E1;

  --mgb-color-text:            #0F172A;
  --mgb-color-text-muted:      #475569;
  --mgb-color-text-subtle:     #94A3B8;
  --mgb-color-text-inverse:    #F8FAFC;

  --mgb-shadow-card:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.06);
  --mgb-shadow-card-hover:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 12px 28px rgba(15, 23, 42, 0.12);
  --mgb-shadow-modal:
    0 20px 48px rgba(15, 23, 42, 0.18),
    0 4px 12px rgba(15, 23, 42, 0.08);
  --mgb-shadow-accent:
    0 1px 0 rgba(255, 255, 255, 0.40) inset,
    0 4px 12px rgba(234, 88, 12, 0.30);

  --mgb-color-accent-soft:     rgba(249, 115, 22, 0.08);
  --mgb-color-accent-strong:   rgba(249, 115, 22, 0.14);
}

/* === 2. BASE-LAYER ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  margin: 0;
  font-family: var(--mgb-font-family);
  font-size: var(--mgb-text-base);
  font-weight: var(--mgb-weight-regular);
  line-height: var(--mgb-leading-normal);
  background: var(--mgb-color-bg);
  color: var(--mgb-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: common-ligatures;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Tabular numerals — kritisch für Trading-Apps */
.mgb-num,
.mgb-stat-value,
.mgb-table td.num,
.mgb-price,
.mgb-pnl {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* Monospace-Klasse für Code, Hashes, Bot-IDs */
.mgb-mono { font-family: var(--mgb-font-mono); }

/* Typografie-Skala */
.mgb-h1 { font-size: var(--mgb-text-3xl); font-weight: var(--mgb-weight-bold); line-height: 1.1; letter-spacing: -0.022em; }
.mgb-h2 { font-size: var(--mgb-text-2xl); font-weight: var(--mgb-weight-bold); line-height: 1.15; letter-spacing: -0.018em; }
.mgb-h3 { font-size: var(--mgb-text-xl); font-weight: var(--mgb-weight-semibold); line-height: 1.25; letter-spacing: -0.012em; }
.mgb-h4 { font-size: var(--mgb-text-lg); font-weight: var(--mgb-weight-semibold); line-height: 1.3; letter-spacing: -0.008em; }
.mgb-label {
  font-size: var(--mgb-text-2xs);
  font-weight: var(--mgb-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mgb-color-text-muted);
}
.mgb-muted { color: var(--mgb-color-text-muted); }
.mgb-subtle { color: var(--mgb-color-text-subtle); }

/* Focus-Ring (überschreibt das aus tokens.css, falls vorhanden) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--mgb-color-accent);
  outline-offset: 2px;
  border-radius: var(--mgb-radius-sm);
}

/* Selection */
::selection { background: var(--mgb-color-accent-strong); color: var(--mgb-color-text); }

/* Scrollbar (WebKit only — Firefox bekommt dezentes Default) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--mgb-color-bg-subtle);
  border-radius: var(--mgb-radius-pill);
  border: 2px solid var(--mgb-color-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--mgb-color-bg-strong); }

/* === 3. APP-SHELL ========================================================== */

.mgb-app {
  min-height: 100vh;
  background: var(--mgb-color-bg);
  display: grid;
  grid-template-columns: var(--mgb-sidebar-w) 1fr;
  grid-template-rows: var(--mgb-header-h) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}

.mgb-sidebar {
  grid-area: sidebar;
  background: var(--mgb-color-bg-elevated);
  border-right: 1px solid var(--mgb-color-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: var(--mgb-z-sidebar);
}

.mgb-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--mgb-space-3);
  padding: var(--mgb-space-5) var(--mgb-space-5);
  height: var(--mgb-header-h);
  border-bottom: 1px solid var(--mgb-color-border-subtle);
}
.mgb-sidebar-brand img { width: 32px; height: 32px; flex-shrink: 0; }
.mgb-sidebar-brand .name {
  font-size: var(--mgb-text-md);
  font-weight: var(--mgb-weight-bold);
  letter-spacing: -0.01em;
}
.mgb-sidebar-brand .name .bot {
  font-weight: var(--mgb-weight-medium);
  opacity: 0.6;
}

.mgb-sidebar-section {
  padding: var(--mgb-space-4) var(--mgb-space-3);
  display: flex; flex-direction: column; gap: var(--mgb-space-1);
}
.mgb-sidebar-section-label {
  font-size: var(--mgb-text-2xs);
  font-weight: var(--mgb-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--mgb-color-text-subtle);
  padding: 0 var(--mgb-space-3) var(--mgb-space-2);
}
.mgb-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--mgb-space-3);
  padding: var(--mgb-space-2) var(--mgb-space-3);
  border-radius: var(--mgb-radius-md);
  font-size: var(--mgb-text-sm);
  font-weight: var(--mgb-weight-medium);
  color: var(--mgb-color-text-muted);
  transition: background var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard),
              color var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard);
  cursor: pointer;
  position: relative;
}
.mgb-sidebar-item:hover {
  background: var(--mgb-color-bg-subtle);
  color: var(--mgb-color-text);
}
.mgb-sidebar-item.active {
  background: var(--mgb-color-accent-soft);
  color: var(--mgb-color-accent);
}
.mgb-sidebar-item.active::before {
  content: "";
  position: absolute;
  left: -3px; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 var(--mgb-radius-sm) var(--mgb-radius-sm) 0;
  background: var(--mgb-color-accent);
  box-shadow: 0 0 12px var(--mgb-color-accent-glow);
}
.mgb-sidebar-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }
.mgb-sidebar-item .badge {
  margin-left: auto;
  font-size: var(--mgb-text-2xs);
  padding: 2px 6px;
  background: var(--mgb-color-bg-subtle);
  border-radius: var(--mgb-radius-sm);
  color: var(--mgb-color-text-muted);
  font-weight: var(--mgb-weight-semibold);
}
.mgb-sidebar-item.active .badge {
  background: var(--mgb-color-accent);
  color: white;
}

.mgb-sidebar-footer {
  margin-top: auto;
  padding: var(--mgb-space-4);
  border-top: 1px solid var(--mgb-color-border-subtle);
}

/* Header */
.mgb-header {
  grid-area: header;
  background: var(--mgb-color-bg);
  border-bottom: 1px solid var(--mgb-color-border);
  display: flex;
  align-items: center;
  gap: var(--mgb-space-4);
  padding: 0 var(--mgb-gutter);
  height: var(--mgb-header-h);
  position: sticky;
  top: 0;
  /* Wie .mgb-main: als Grid-Item nicht über den Viewport hinaus aufblähen. */
  min-width: 0;
  z-index: var(--mgb-z-header);
}
.mgb-header-search {
  flex: 1;
  max-width: 480px;
  position: relative;
}
.mgb-header-search input {
  width: 100%;
  height: 36px;
  padding: 0 var(--mgb-space-3) 0 36px;
  background: var(--mgb-color-bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--mgb-radius-md);
  color: var(--mgb-color-text);
  font-size: var(--mgb-text-sm);
  transition: border-color var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard);
}
.mgb-header-search input:focus { border-color: var(--mgb-color-accent); }
.mgb-header-search input::placeholder { color: var(--mgb-color-text-subtle); }
.mgb-header-search svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--mgb-color-text-subtle);
}
.mgb-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--mgb-space-2);
}
.mgb-icon-btn {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mgb-radius-md);
  color: var(--mgb-color-text-muted);
  background: transparent;
  transition: all var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard);
  position: relative;
}
.mgb-icon-btn:hover {
  background: var(--mgb-color-bg-subtle);
  color: var(--mgb-color-text);
}
.mgb-icon-btn .dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mgb-color-accent);
  border: 2px solid var(--mgb-color-bg);
}

/* Main */
.mgb-main {
  grid-area: main;
  padding: var(--mgb-space-6) var(--mgb-gutter) var(--mgb-space-10);
  max-width: var(--mgb-content-max);
  width: 100%;
  /* WICHTIG: Grid-Items haben default min-width:auto und schrumpfen NICHT unter
     ihre Inhalts-Mindestbreite. Ein einzelnes breites Element (langer Token,
     Bot-ID, nicht-umbrechende Zeile) bläht damit die 1fr-Spalte über den
     Viewport hinaus → horizontaler Überlauf ("rechts fehlt was, erst nach
     Rauszoomen vollständig"). min-width:0 lässt die Spalte korrekt auf die
     verfügbare Breite schrumpfen, der Inhalt bricht/umfließt stattdessen. */
  min-width: 0;
}

/* Page header */
.mgb-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mgb-space-4);
  margin-bottom: var(--mgb-space-6);
  flex-wrap: wrap;
}
.mgb-page-header .titles { display: flex; flex-direction: column; gap: var(--mgb-space-1); min-width: 0; }
.mgb-page-header h1 {
  font-size: var(--mgb-text-2xl);
  font-weight: var(--mgb-weight-bold);
  letter-spacing: -0.018em;
  margin: 0;
}
.mgb-page-header p { margin: 0; color: var(--mgb-color-text-muted); font-size: var(--mgb-text-sm); }
.mgb-page-header .actions {
  display: flex;
  gap: var(--mgb-space-2);
  flex-wrap: wrap;
}

/* === 4. COMPONENTS ========================================================= */

/* --- Card ----------------------------------------------------------------- */
.mgb-card {
  background: var(--mgb-color-bg-elevated);
  border: 1px solid var(--mgb-color-border);
  border-radius: var(--mgb-radius-lg);
  box-shadow: var(--mgb-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mgb-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mgb-space-3);
  padding: var(--mgb-space-4) var(--mgb-space-5);
  border-bottom: 1px solid var(--mgb-color-border-subtle);
}
.mgb-card-header h2 {
  font-size: var(--mgb-text-md);
  font-weight: var(--mgb-weight-semibold);
  letter-spacing: -0.005em;
  margin: 0;
}
.mgb-card-header .actions {
  display: flex;
  align-items: center;
  gap: var(--mgb-space-2);
}
.mgb-card-body { padding: var(--mgb-space-5); flex: 1; }
.mgb-card-body.tight { padding: 0; }
.mgb-card-footer {
  padding: var(--mgb-space-3) var(--mgb-space-5);
  border-top: 1px solid var(--mgb-color-border-subtle);
  font-size: var(--mgb-text-sm);
  color: var(--mgb-color-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Interactive card (hover) */
.mgb-card-interactive {
  cursor: pointer;
  transition: transform var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard),
              box-shadow var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard),
              border-color var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard);
}
.mgb-card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--mgb-shadow-card-hover);
  border-color: var(--mgb-color-border-strong);
}

/* --- Stat Card ------------------------------------------------------------ */
.mgb-stat {
  background: var(--mgb-color-bg-elevated);
  border: 1px solid var(--mgb-color-border);
  border-radius: var(--mgb-radius-lg);
  padding: var(--mgb-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mgb-space-3);
  position: relative;
  overflow: hidden;
  box-shadow: var(--mgb-shadow-card);
}
.mgb-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}
.mgb-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mgb-space-2);
}
.mgb-stat-label {
  font-size: var(--mgb-text-sm);
  color: var(--mgb-color-text-muted);
  font-weight: var(--mgb-weight-medium);
}
.mgb-stat-icon {
  width: 36px; height: 36px;
  border-radius: var(--mgb-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mgb-color-accent-soft);
  color: var(--mgb-color-accent);
}
.mgb-stat-icon.success { background: var(--mgb-color-success-soft); color: var(--mgb-color-success); }
.mgb-stat-icon.info { background: var(--mgb-color-info-soft); color: var(--mgb-color-info); }
.mgb-stat-icon.dca { background: var(--mgb-color-dca-soft); color: var(--mgb-color-dca); }
.mgb-stat-icon svg { width: 18px; height: 18px; }
.mgb-stat-value {
  font-size: var(--mgb-text-2xl);
  font-weight: var(--mgb-weight-bold);
  letter-spacing: -0.018em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mgb-stat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--mgb-text-sm);
}
.mgb-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--mgb-space-1);
  font-weight: var(--mgb-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.mgb-stat-delta.up { color: var(--mgb-color-success); }
.mgb-stat-delta.down { color: var(--mgb-color-danger); }
.mgb-stat-delta.flat { color: var(--mgb-color-text-muted); }
.mgb-stat-foot .ctx { color: var(--mgb-color-text-subtle); font-size: var(--mgb-text-xs); }

/* --- Buttons -------------------------------------------------------------- */
.mgb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mgb-space-2);
  padding: 0 var(--mgb-space-4);
  height: 36px;
  border-radius: var(--mgb-radius-md);
  font-size: var(--mgb-text-sm);
  font-weight: var(--mgb-weight-semibold);
  letter-spacing: -0.005em;
  transition: all var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard);
  white-space: nowrap;
  border: 1px solid transparent;
}
.mgb-btn svg { width: 16px; height: 16px; }
.mgb-btn:disabled,
.mgb-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.mgb-btn-primary {
  background: linear-gradient(180deg, var(--mgb-color-accent), var(--mgb-color-accent-hover));
  color: white;
  box-shadow: var(--mgb-shadow-accent);
}
.mgb-btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.mgb-btn-primary:active { transform: translateY(0); filter: brightness(0.96); }

.mgb-btn-secondary {
  background: var(--mgb-color-bg-elevated);
  color: var(--mgb-color-text);
  border-color: var(--mgb-color-border);
}
.mgb-btn-secondary:hover:not(:disabled) {
  background: var(--mgb-color-bg-subtle);
  border-color: var(--mgb-color-border-strong);
}

.mgb-btn-ghost {
  background: transparent;
  color: var(--mgb-color-text-muted);
}
.mgb-btn-ghost:hover:not(:disabled) {
  background: var(--mgb-color-bg-subtle);
  color: var(--mgb-color-text);
}

.mgb-btn-danger {
  background: var(--mgb-color-danger);
  color: white;
}
.mgb-btn-danger:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }

.mgb-btn-sm { height: 28px; padding: 0 var(--mgb-space-3); font-size: var(--mgb-text-xs); }
.mgb-btn-sm svg { width: 14px; height: 14px; }
.mgb-btn-lg { height: 44px; padding: 0 var(--mgb-space-5); font-size: var(--mgb-text-base); }
.mgb-btn-lg svg { width: 18px; height: 18px; }

.mgb-btn-block { display: flex; width: 100%; }

/* --- Badge ---------------------------------------------------------------- */
.mgb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mgb-space-1);
  padding: 2px 8px;
  border-radius: var(--mgb-radius-pill);
  font-size: var(--mgb-text-2xs);
  font-weight: var(--mgb-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--mgb-color-bg-subtle);
  color: var(--mgb-color-text-muted);
  border: 1px solid var(--mgb-color-border);
  white-space: nowrap;
}
.mgb-badge-success { background: var(--mgb-color-success-soft); color: var(--mgb-color-success); border-color: var(--mgb-color-success-strong); }
.mgb-badge-danger  { background: var(--mgb-color-danger-soft); color: var(--mgb-color-danger); border-color: var(--mgb-color-danger-strong); }
.mgb-badge-warning { background: var(--mgb-color-warning-soft); color: var(--mgb-color-warning); border-color: rgba(245, 158, 11, 0.30); }
.mgb-badge-info    { background: var(--mgb-color-info-soft); color: var(--mgb-color-info); border-color: rgba(59, 130, 246, 0.30); }
.mgb-badge-accent  { background: var(--mgb-color-accent-soft); color: var(--mgb-color-accent); border-color: var(--mgb-color-accent-strong); }
.mgb-badge-dca     { background: var(--mgb-color-dca-soft); color: var(--mgb-color-dca); border-color: rgba(139, 92, 246, 0.30); }
.mgb-badge-pro {
  background: linear-gradient(135deg, var(--mgb-color-accent), var(--mgb-color-accent-hover));
  color: white;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.20);
  letter-spacing: 0.06em;
}

.mgb-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.mgb-dot.pulse {
  animation: mgb-pulse 2s ease-in-out infinite;
}
@keyframes mgb-pulse {
  50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
  0%, 100% { box-shadow: 0 0 0 0 var(--mgb-color-success-strong); }
}

/* --- Inputs --------------------------------------------------------------- */
.mgb-input,
.mgb-select,
.mgb-textarea {
  display: block;
  width: 100%;
  padding: 0 var(--mgb-space-3);
  height: 40px;
  background: var(--mgb-color-bg-subtle);
  border: 1px solid var(--mgb-color-border);
  border-radius: var(--mgb-radius-md);
  color: var(--mgb-color-text);
  font-size: var(--mgb-text-sm);
  transition: border-color var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard),
              box-shadow var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard);
}
.mgb-textarea { padding: var(--mgb-space-2) var(--mgb-space-3); height: auto; min-height: 96px; resize: vertical; line-height: var(--mgb-leading-normal); }
.mgb-input:focus,
.mgb-select:focus,
.mgb-textarea:focus {
  border-color: var(--mgb-color-accent);
  box-shadow: 0 0 0 3px var(--mgb-color-accent-soft);
  outline: none;
}
.mgb-input::placeholder,
.mgb-textarea::placeholder { color: var(--mgb-color-text-subtle); }
.mgb-input:disabled { opacity: 0.5; cursor: not-allowed; }

.mgb-field { display: flex; flex-direction: column; gap: var(--mgb-space-2); }
.mgb-field-label {
  font-size: var(--mgb-text-sm);
  font-weight: var(--mgb-weight-medium);
  color: var(--mgb-color-text);
}
.mgb-field-hint {
  font-size: var(--mgb-text-xs);
  color: var(--mgb-color-text-muted);
}
.mgb-field-error {
  font-size: var(--mgb-text-xs);
  color: var(--mgb-color-danger);
}

/* --- Tabs ----------------------------------------------------------------- */
.mgb-tabs {
  display: flex;
  gap: var(--mgb-space-1);
  border-bottom: 1px solid var(--mgb-color-border);
  margin-bottom: var(--mgb-space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.mgb-tabs::-webkit-scrollbar { display: none; }
.mgb-tab {
  padding: var(--mgb-space-3) var(--mgb-space-4);
  font-size: var(--mgb-text-sm);
  font-weight: var(--mgb-weight-medium);
  color: var(--mgb-color-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard),
              border-color var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard);
  display: inline-flex;
  align-items: center;
  gap: var(--mgb-space-2);
  white-space: nowrap;
  margin-bottom: -1px;
}
.mgb-tab:hover { color: var(--mgb-color-text); }
.mgb-tab.active {
  color: var(--mgb-color-accent);
  border-bottom-color: var(--mgb-color-accent);
  font-weight: var(--mgb-weight-semibold);
}
.mgb-tab .count {
  font-size: var(--mgb-text-2xs);
  padding: 1px 7px;
  background: var(--mgb-color-bg-subtle);
  border-radius: var(--mgb-radius-pill);
  font-weight: var(--mgb-weight-semibold);
}
.mgb-tab.active .count { background: var(--mgb-color-accent-strong); color: var(--mgb-color-accent); }

/* --- Table ---------------------------------------------------------------- */
.mgb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mgb-text-sm);
}
.mgb-table thead { background: var(--mgb-color-bg-subtle); }
.mgb-table th {
  text-align: left;
  padding: var(--mgb-space-3) var(--mgb-space-4);
  font-size: var(--mgb-text-2xs);
  font-weight: var(--mgb-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mgb-color-text-muted);
  border-bottom: 1px solid var(--mgb-color-border);
}
.mgb-table td {
  padding: var(--mgb-space-3) var(--mgb-space-4);
  border-bottom: 1px solid var(--mgb-color-border-subtle);
  vertical-align: middle;
}
.mgb-table tbody tr:last-child td { border-bottom: none; }
.mgb-table tbody tr {
  transition: background var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard);
}
.mgb-table tbody tr:hover { background: var(--mgb-color-bg-subtle); }
.mgb-table td.num,
.mgb-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mgb-table .pnl-up { color: var(--mgb-color-success); }
.mgb-table .pnl-down { color: var(--mgb-color-danger); }

/* --- List Item (bot card-row) -------------------------------------------- */
.mgb-list { display: flex; flex-direction: column; }
.mgb-list-item {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: var(--mgb-space-3);
  padding: var(--mgb-space-3) var(--mgb-space-5);
  border-bottom: 1px solid var(--mgb-color-border-subtle);
  transition: background var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard);
}
.mgb-list-item:hover { background: var(--mgb-color-bg-subtle); }
.mgb-list-item:last-child { border-bottom: none; }
.mgb-list-item .avatar {
  width: 32px; height: 32px;
  border-radius: var(--mgb-radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--mgb-color-bg-subtle);
  font-weight: var(--mgb-weight-bold);
  font-size: var(--mgb-text-xs);
}
.mgb-list-item .primary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mgb-list-item .primary .name {
  font-weight: var(--mgb-weight-semibold);
  font-size: var(--mgb-text-sm);
  letter-spacing: -0.005em;
}
.mgb-list-item .primary .meta {
  font-size: var(--mgb-text-xs);
  color: var(--mgb-color-text-muted);
  display: flex; gap: var(--mgb-space-2);
}

/* --- Bot Card (used on dashboard) ---------------------------------------- */
.mgb-botcard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--mgb-space-4);
  align-items: center;
  padding: var(--mgb-space-4) var(--mgb-space-5);
  border-bottom: 1px solid var(--mgb-color-border-subtle);
  transition: background var(--mgb-motion-duration-fast) var(--mgb-motion-ease-standard);
  cursor: pointer;
}
.mgb-botcard:hover { background: var(--mgb-color-bg-subtle); }
.mgb-botcard:last-child { border-bottom: none; }
.mgb-botcard .coin {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--mgb-color-bg-subtle);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--mgb-weight-bold);
  font-size: var(--mgb-text-xs);
  letter-spacing: 0.02em;
  color: var(--mgb-color-text);
  flex-shrink: 0;
}
.mgb-botcard .info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mgb-botcard .info .row {
  display: flex; align-items: center; gap: var(--mgb-space-2);
}
.mgb-botcard .info .pair {
  font-size: var(--mgb-text-base);
  font-weight: var(--mgb-weight-semibold);
  letter-spacing: -0.005em;
}
.mgb-botcard .info .meta {
  font-size: var(--mgb-text-xs);
  color: var(--mgb-color-text-muted);
  display: flex; gap: var(--mgb-space-3);
}
.mgb-botcard .info .meta span { display: inline-flex; align-items: center; gap: 4px; }
.mgb-botcard .stats {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 4px;
  text-align: right;
}
.mgb-botcard .stats .pnl {
  font-size: var(--mgb-text-md);
  font-weight: var(--mgb-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.mgb-botcard .stats .pnl.up { color: var(--mgb-color-success); }
.mgb-botcard .stats .pnl.down { color: var(--mgb-color-danger); }
.mgb-botcard .stats .pct {
  font-size: var(--mgb-text-xs);
  color: var(--mgb-color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Activity Item -------------------------------------------------------- */
.mgb-activity-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--mgb-space-3);
  align-items: center;
  padding: var(--mgb-space-3) var(--mgb-space-5);
  border-bottom: 1px solid var(--mgb-color-border-subtle);
}
.mgb-activity-item:last-child { border-bottom: none; }
.mgb-activity-item .icon {
  width: 32px; height: 32px;
  border-radius: var(--mgb-radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mgb-activity-item .icon.buy  { background: var(--mgb-color-success-soft); color: var(--mgb-color-success); }
.mgb-activity-item .icon.sell { background: var(--mgb-color-danger-soft); color: var(--mgb-color-danger); }
.mgb-activity-item .icon.info { background: var(--mgb-color-info-soft); color: var(--mgb-color-info); }
.mgb-activity-item .icon svg { width: 14px; height: 14px; }
.mgb-activity-item .desc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mgb-activity-item .desc .text { font-size: var(--mgb-text-sm); }
.mgb-activity-item .desc .text strong { font-weight: var(--mgb-weight-semibold); }
.mgb-activity-item .desc .meta {
  font-size: var(--mgb-text-xs);
  color: var(--mgb-color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.mgb-activity-item .amount {
  font-size: var(--mgb-text-sm);
  font-weight: var(--mgb-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* --- Sparkline (inline SVG) ---------------------------------------------- */
.mgb-spark { display: block; }
.mgb-spark path.line { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mgb-spark path.area { stroke: none; opacity: 0.18; }
.mgb-spark.up path.line { stroke: var(--mgb-color-success); }
.mgb-spark.up path.area { fill: var(--mgb-color-success); }
.mgb-spark.down path.line { stroke: var(--mgb-color-danger); }
.mgb-spark.down path.area { fill: var(--mgb-color-danger); }

/* --- Banner / Callout ---------------------------------------------------- */
.mgb-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--mgb-space-3);
  padding: var(--mgb-space-4) var(--mgb-space-5);
  background: var(--mgb-color-info-soft);
  border: 1px solid rgba(59, 130, 246, 0.20);
  border-radius: var(--mgb-radius-lg);
  color: var(--mgb-color-text);
}
.mgb-callout .icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--mgb-color-info);
}
.mgb-callout .title {
  font-weight: var(--mgb-weight-semibold);
  margin-bottom: 2px;
}
.mgb-callout p {
  font-size: var(--mgb-text-sm);
  color: var(--mgb-color-text-muted);
  margin: 0;
}
.mgb-callout.accent { background: var(--mgb-color-accent-soft); border-color: var(--mgb-color-accent-strong); }
.mgb-callout.accent .icon { color: var(--mgb-color-accent); }
.mgb-callout.success { background: var(--mgb-color-success-soft); border-color: var(--mgb-color-success-strong); }
.mgb-callout.success .icon { color: var(--mgb-color-success); }
.mgb-callout.warning { background: var(--mgb-color-warning-soft); border-color: rgba(245, 158, 11, 0.30); }
.mgb-callout.warning .icon { color: var(--mgb-color-warning); }

/* === 5. UTILITIES & LAYOUT-HELPERS ========================================= */

.mgb-stack { display: flex; flex-direction: column; gap: var(--mgb-space-4); }
.mgb-stack-2 { gap: var(--mgb-space-2); }
.mgb-stack-3 { gap: var(--mgb-space-3); }
.mgb-stack-5 { gap: var(--mgb-space-5); }
.mgb-stack-6 { gap: var(--mgb-space-6); }

.mgb-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mgb-space-3);
  align-items: center;
}

.mgb-grid {
  display: grid;
  gap: var(--mgb-space-4);
}
.mgb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mgb-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mgb-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mgb-grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.mgb-split { display: grid; grid-template-columns: 2fr 1fr; gap: var(--mgb-space-5); }

/* Responsive */
@media (max-width: 1024px) {
  .mgb-app { grid-template-columns: var(--mgb-sidebar-w-min) 1fr; }
  .mgb-sidebar-brand .name,
  .mgb-sidebar-item .label,
  .mgb-sidebar-item .badge,
  .mgb-sidebar-section-label { display: none; }
  .mgb-sidebar-item { justify-content: center; }
  .mgb-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .mgb-grid-3 { grid-template-columns: 1fr 1fr; }
  .mgb-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mgb-grid-2, .mgb-grid-3, .mgb-grid-4 { grid-template-columns: 1fr; }
  .mgb-main { padding: var(--mgb-space-4); }
  .mgb-page-header { align-items: flex-start; flex-direction: column; }
}

/* === MOBILE COMPONENTS =====================================================
 * Mobile-spezifische Patterns: Bottom-Nav, Mobile-Header, Stack-Cards.
 * Werden nur bei Bildschirmbreite < 640px aktiv.
 * ============================================================================ */

.mgb-mobile-shell {
  min-height: 100vh;
  background: var(--mgb-color-bg);
  display: flex; flex-direction: column;
  padding-bottom: 80px;
}

/* Mobile Header (fixed top) */
.mgb-mobile-header {
  position: sticky; top: 0; z-index: 50;
  height: 56px;
  background: rgba(11, 18, 32, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--mgb-color-border-subtle);
  display: flex; align-items: center;
  padding: 0 var(--mgb-space-4);
  gap: var(--mgb-space-3);
}
.mgb-mobile-header .title {
  flex: 1; min-width: 0;
  font-size: var(--mgb-text-md);
  font-weight: var(--mgb-weight-bold);
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mgb-mobile-header .icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--mgb-radius-md);
  color: var(--mgb-color-text-muted);
  background: transparent;
  position: relative;
  flex-shrink: 0;
}
.mgb-mobile-header .icon-btn:active { background: var(--mgb-color-bg-subtle); }
.mgb-mobile-header .icon-btn .dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mgb-color-accent);
  border: 2px solid var(--mgb-color-bg);
}

.mgb-mobile-content {
  flex: 1;
  padding: var(--mgb-space-4);
}

/* Bottom Nav */
.mgb-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(11, 18, 32, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--mgb-color-border-subtle);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: var(--mgb-space-2) var(--mgb-space-2) max(var(--mgb-space-3), env(safe-area-inset-bottom));
}
.mgb-bottom-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  padding: 6px 0;
  font-size: 10px;
  font-weight: var(--mgb-weight-semibold);
  color: var(--mgb-color-text-subtle);
  border-radius: var(--mgb-radius-md);
  transition: color 120ms;
}
.mgb-bottom-item svg { width: 22px; height: 22px; }
.mgb-bottom-item.active { color: var(--mgb-color-accent); }
.mgb-bottom-item.active svg { stroke-width: 2.4; }
.mgb-bottom-item.primary {
  background: linear-gradient(180deg, var(--mgb-color-accent), var(--mgb-color-accent-hover));
  color: white;
  margin: -16px var(--mgb-space-1) 0;
  border-radius: var(--mgb-radius-pill);
  font-size: 0;
  align-self: stretch;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.30);
}
.mgb-bottom-item.primary svg { width: 24px; height: 24px; }

/* Mobile Stat Compact */
.mgb-mobile-stat {
  background: var(--mgb-color-bg-elevated);
  border: 1px solid var(--mgb-color-border);
  border-radius: var(--mgb-radius-md);
  padding: var(--mgb-space-3);
  display: flex; flex-direction: column; gap: 4px;
}
.mgb-mobile-stat .label {
  font-size: var(--mgb-text-2xs);
  color: var(--mgb-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--mgb-weight-semibold);
}
.mgb-mobile-stat .val {
  font-size: var(--mgb-text-lg);
  font-weight: var(--mgb-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}
.mgb-mobile-stat .delta {
  font-size: var(--mgb-text-2xs);
  font-variant-numeric: tabular-nums;
  font-weight: var(--mgb-weight-semibold);
}
.mgb-mobile-stat .delta.up { color: var(--mgb-color-success); }
.mgb-mobile-stat .delta.down { color: var(--mgb-color-danger); }

/* === 6. COMPAT-LAYER: re-map old class names ============================= */

/* Lege das nach allen anderen Stylesheets, damit es bestehende Definitionen
 * sanft auf neue Tokens umlenkt — aber NICHT überall vorhandenes Markup bricht.
 * Diese Regeln greifen NUR wenn keine spezifischere existiert. */

.card { background: var(--mgb-color-bg-elevated); border: 1px solid var(--mgb-color-border); border-radius: var(--mgb-radius-lg); }
.btn-primary { background: linear-gradient(180deg, var(--mgb-color-accent), var(--mgb-color-accent-hover)); color: white; }