/* ====================================================================
   Tradaly Partner-Bereich — Brand-Shell
   Konsistent zu tradaly.de · lila #5245C2 + teal #63CCB9 · Inter + JetBrains Mono
   ==================================================================== */

:root {
  --tr-bg: #070810;
  --tr-surface: #10131C;
  --tr-surface2: #161A26;
  --tr-line: #252937;
  --tr-line2: #1F2330;
  --tr-text: #F4F4F0;
  --tr-text-soft: #D4D6DA;
  --tr-muted: #8A8F9D;
  --tr-subtle: #5A5F6D;
  --tr-purple: #5245C2;
  --tr-purple2: #6B5DD8;
  --tr-purple-bright: #8478E6;
  --tr-teal: #63CCB9;
  --tr-amber: #F0B952;
  --tr-danger: #E16B6B;
}

* { box-sizing: border-box; }
html, body {
  background: var(--tr-bg);
  color: var(--tr-text);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

.font-tr { letter-spacing: -0.018em; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* ── Layout ───────────────────────────────────────────────────────── */
.bg-grid {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(82,69,194,0.10), transparent 45%),
    radial-gradient(circle at 88% 78%, rgba(99,204,185,0.06), transparent 55%);
}
.bg-glow-hero {
  position: relative;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(82,69,194,0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(99,204,185,0.08), transparent 60%),
    var(--tr-bg);
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--tr-surface);
  border: 1px solid var(--tr-line);
  border-radius: 14px;
  transition: border-color .2s ease, transform .2s ease;
}
.card-hover:hover {
  border-color: rgba(82,69,194,0.4);
}
.card-strong {
  background: linear-gradient(180deg, var(--tr-surface), #0A0C14);
  border: 1px solid var(--tr-line);
  border-radius: 18px;
}
.card-featured {
  background: linear-gradient(180deg, rgba(82,69,194,0.08), var(--tr-surface));
  border: 1px solid rgba(82,69,194,0.35);
  box-shadow: 0 12px 36px -12px rgba(82,69,194,0.25);
  border-radius: 18px;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--tr-purple), var(--tr-purple2));
  color: white; border: none; padding: 12px 22px; border-radius: 10px;
  font-weight: 600; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  transition: all .18s ease;
  box-shadow: 0 4px 14px -4px rgba(82,69,194,0.4);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--tr-purple2), var(--tr-purple-bright));
  box-shadow: 0 8px 24px -4px rgba(107,93,216,0.55);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secondary {
  background: transparent; color: var(--tr-text); border: 1px solid var(--tr-line);
  padding: 12px 22px; border-radius: 10px; font-weight: 500; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  transition: all .15s ease;
}
.btn-secondary:hover { border-color: var(--tr-subtle); background: rgba(255,255,255,0.03); }

.btn-ghost {
  background: transparent; color: var(--tr-muted); border: none;
  padding: 12px 18px; font-size: 14px; cursor: pointer; font-weight: 500;
  transition: color .15s ease;
}
.btn-ghost:hover { color: var(--tr-text); }

/* ── Inputs ─────────────────────────────────────────────────────── */
.input {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--tr-line);
  color: var(--tr-text);
  padding: 12px 14px; border-radius: 10px; width: 100%;
  font-size: 14px; transition: all .15s ease;
}
.input:focus { outline: none; border-color: var(--tr-purple); background: rgba(82,69,194,0.06); box-shadow: 0 0 0 3px rgba(82,69,194,0.12); }
.input::placeholder { color: var(--tr-subtle); }

/* ── Pills ──────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  border: 1px solid;
}
.pill-active   { background: rgba(99,204,185,0.12); color: var(--tr-teal); border-color: rgba(99,204,185,0.3); }
.pill-pending  { background: rgba(240,185,82,0.12); color: var(--tr-amber); border-color: rgba(240,185,82,0.3); }
.pill-paid     { background: rgba(82,69,194,0.15); color: var(--tr-purple2); border-color: rgba(82,69,194,0.35); }
.pill-revoked  { background: rgba(225,107,107,0.12); color: var(--tr-danger); border-color: rgba(225,107,107,0.3); }
.pill-muted    { background: rgba(138,143,157,0.08); color: var(--tr-muted); border-color: var(--tr-line); }
.pill-brand    { background: rgba(82,69,194,0.12); color: var(--tr-purple2); border-color: rgba(82,69,194,0.35); }

.pill-tag {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  background: rgba(82,69,194,0.10); color: var(--tr-purple2); border: 1px solid rgba(82,69,194,0.30);
}

/* ── Stats ───────────────────────────────────────────────────────── */
.stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 30px; font-weight: 700; color: var(--tr-text);
  letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--tr-muted); margin-bottom: 12px;
}
.stat-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.stat-icon-purple { background: rgba(82,69,194,0.15); color: var(--tr-purple2); }
.stat-icon-teal   { background: rgba(99,204,185,0.15); color: var(--tr-teal); }
.stat-icon-amber  { background: rgba(240,185,82,0.13); color: var(--tr-amber); }
.stat-icon-muted  { background: rgba(138,143,157,0.10); color: var(--tr-muted); }

/* ── Header (sticky) ────────────────────────────────────────────── */
.tr-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,8,16,0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tr-line);
}
.tr-header-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  height: 70px; display: flex; align-items: center; justify-content: space-between;
}
.tr-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.tr-logo img { height: 38px; width: auto; display: block; }
.tr-logo-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tr-purple2); padding: 4px 10px; border-radius: 6px;
  background: rgba(82,69,194,0.10); border: 1px solid rgba(82,69,194,0.25);
}
.tr-nav { display: flex; align-items: center; gap: 4px; }
.tr-nav-link {
  padding: 9px 14px; border-radius: 8px;
  color: var(--tr-muted); font-size: 14px; font-weight: 500;
  text-decoration: none; transition: all .15s ease;
}
.tr-nav-link:hover { color: var(--tr-text); background: rgba(255,255,255,0.03); }
.tr-nav-link.active { color: var(--tr-text); background: rgba(82,69,194,0.12); }
.tr-nav-logout {
  margin-left: 6px; padding: 9px 14px; border-radius: 8px;
  color: var(--tr-muted); font-size: 13px; font-weight: 500;
  background: transparent; border: none; cursor: pointer;
  transition: color .15s ease;
}
.tr-nav-logout:hover { color: var(--tr-danger); }

/* Mobile-Burger */
.tr-burger {
  background: transparent; border: none; color: var(--tr-text);
  font-size: 24px; cursor: pointer; padding: 6px;
  display: none;
}
.tr-mobile-menu {
  display: none; border-top: 1px solid var(--tr-line);
  background: rgba(7,8,16,0.97);
}
.tr-mobile-menu a, .tr-mobile-menu button {
  display: block; padding: 16px 24px; color: var(--tr-muted);
  text-decoration: none; border-bottom: 1px solid var(--tr-line2);
  font-size: 15px; transition: color .15s ease;
  width: 100%; text-align: left; background: transparent; border-left: 0; border-right: 0; border-top: 0;
  font-family: inherit;
}
.tr-mobile-menu a:hover, .tr-mobile-menu button:hover { color: var(--tr-text); }
.tr-mobile-menu a.active { color: var(--tr-text); }
@media (max-width: 768px) {
  .tr-nav { display: none; }
  .tr-burger { display: inline-flex; }
  .tr-logo-tag { display: none; }
}

/* ── Footer ─────────────────────────────────────────────────────── */
.tr-footer {
  margin-top: 80px; border-top: 1px solid var(--tr-line);
  padding: 32px 24px;
}
.tr-footer-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--tr-subtle);
}
@media (min-width: 640px) {
  .tr-footer-inner { flex-direction: row; }
}
.tr-footer-inner a { color: var(--tr-muted); text-decoration: none; transition: color .15s ease; }
.tr-footer-inner a:hover { color: var(--tr-text); }

/* ── Tabellen ───────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th {
  text-align: left; font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--tr-muted); padding: 14px 16px;
  border-bottom: 1px solid var(--tr-line); font-weight: 600;
}
.data-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(37,41,55,0.5);
  color: var(--tr-text-soft); vertical-align: middle;
}
.data-table tbody tr { transition: background .15s ease; }
.data-table tbody tr:hover { background: rgba(255,255,255,0.015); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table th.col-c, .data-table td.col-c { text-align: center; }
.data-table th.col-r, .data-table td.col-r { text-align: right; }

/* ── Spinner / Toast ────────────────────────────────────────────── */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--tr-line); border-top-color: var(--tr-purple2);
  border-radius: 50%; animation: spin .8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; bottom: 24px; right: 24px;
  padding: 14px 22px; border-radius: 12px;
  font-size: 14px; font-weight: 500; z-index: 100;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  animation: toast-in .25s cubic-bezier(.16,1,.3,1);
  max-width: 380px;
}
.toast-ok  { background: rgba(99,204,185,0.95); color: #06120F; }
.toast-err { background: rgba(225,107,107,0.95); color: #1A0808; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Animations ─────────────────────────────────────────────────── */
.fade-up { animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.live-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tr-teal); box-shadow: 0 0 0 0 rgba(99,204,185,0.55);
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,204,185,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(99,204,185,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,204,185,0); }
}

/* ── Utility ────────────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--tr-purple-bright), var(--tr-teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.divider-soft { border-top: 1px solid var(--tr-line2); }
.code-block {
  background: #070810; border: 1px solid var(--tr-line);
  border-radius: 10px; padding: 12px 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--tr-text); word-break: break-all;
}

/* Copy-Pulse-Effekt */
.copy-pulse { animation: copy-pulse .5s ease both; }
@keyframes copy-pulse {
  0%   { background: rgba(99,204,185,0.18); }
  100% { background: transparent; }
}