:root{
  /* Farbwelt: purpur/lila/cyan auf schwarz, dezente Kontraste */
  --bg: #07080d;
  --bg-2: #0a0f19;
  --fg: #e9ebff;
  --muted: #96a3c7;

  --purple: #8a5bff;
  --purple-2: #b39aff;
  --magenta: #c769ff;
  --cyan: #00e7ff;
  --cyan-2: #9ad5ff;

  --primary: var(--purple);
  --primary-2: var(--cyan-2);

  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;

  /* Fokus & Schatten */
  --focus: #b8e1ff;
  --shadow: 0 10px 40px rgba(0,0,0,.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 20% -10%, #2b3b7a33, transparent 60%),
    radial-gradient(1200px 800px at 120% 10%, #5b277a33, transparent 60%),
    var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height:1.5;
  overflow-x:hidden;
}

/* Background glyphs */
.bg{ position:fixed; inset:0; pointer-events:none; }
.bg .glyph{
  position:absolute; width:36vmin; height:36vmin; opacity:.06; filter: blur(.4px);
}
.bg .glyph text{
  fill: var(--primary);
  font: 800 70px/1 var(--sans);
  text-anchor: middle; dominant-baseline: middle;
}
.bg .pi{ left:-6vmin; top:-4vmin; transform:rotate(-12deg) }
.bg .phi{ right:-4vmin; top:-8vmin; transform:rotate(11deg); opacity:.05 }
.bg .infinity{ left:50%; bottom:-6vmin; transform:translateX(-50%) scale(1.2); opacity:.05 }
.bg .infinity path{ stroke: var(--primary-2); stroke-width:2; fill:none; }

.particles::before, .particles::after{
  content:""; position:absolute; inset:-10%; background:
  radial-gradient(2px 2px at 10% 20%, #8fa2ff88, transparent 40%),
  radial-gradient(2px 2px at 30% 80%, #9ad5ff88, transparent 40%),
  radial-gradient(2px 2px at 70% 30%, #b7ffd388, transparent 40%),
  radial-gradient(2px 2px at 90% 60%, #ffc6ff88, transparent 40%);
  animation: drift 40s linear infinite;
  opacity:.3;
}
.particles::after{ animation-duration: 55s; opacity:.25; filter: blur(1px); }
@keyframes drift { to { transform: translateY(-8%); } }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .particles::before, .particles::after { animation: none; }
}

/* Layout */
.container{ width:min(1200px, 92vw); margin-inline:auto; }
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px 0 12px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.logo{
  width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background: linear-gradient(135deg, #7b90ff33, #00f5ff22);
  border:1px solid #7b90ff55; color:#cfe3ff; font-weight:800; font-size:22px;
  box-shadow: 0 0 40px #7b90ff22 inset, 0 10px 30px #15204a44;
}
.titles h1{ margin:0; font-size:20px; letter-spacing:.2px }
.muted{ color:var(--muted) }
.mono{ font-family:var(--mono) }
.tiny{ font-size:12px }
.small{ font-size:14px }
.h3{ font-size:20px; font-weight:700; margin-bottom:8px }
.h4{ font-size:16px; font-weight:700; margin-bottom:6px }

.top-actions{ display:flex; align-items:center; gap:16px; }
.wallet-stats{ display:flex; gap:12px; font-size:14px }

.hero{
  margin: 18px 0 26px; padding: 20px 18px; border-radius: 16px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.hero .sigils{ display:flex; align-items:center; gap:10px; font-size:34px; opacity:.9 }
.hero .sigil{
  width:48px;height:48px;display:grid;place-items:center;border-radius:10px;
  background: linear-gradient(135deg, #7b90ff22, #00f5ff18);
  border:1px solid #7b90ff55; font-weight:800
}
.hero .arrow{ opacity:.5 }

.grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:18px;
}
@media (max-width: 940px){
  .grid{ grid-template-columns: 1fr; }
  .hero{ flex-direction:column; align-items:flex-start }
}

/* Cards */
.card{
  border:1px solid var(--border);
  border-radius:16px; overflow:hidden; background: var(--bg-2);
}
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow);
}
.card-body{ padding:14px 14px 16px 14px }

/* Media */
.media{
  aspect-ratio: 1/1; display:grid; place-items:center; background: #05070e;
  border-bottom:1px solid var(--border);
}
.media img, .media video{
  width:100%; height:100%; object-fit:contain; background:#000;
}
.media img{ image-rendering:auto; }

/* Rows */
.row{ display:flex; gap:10px; align-items:center }
.row.wrap{ flex-wrap:wrap }
.row.g8{ gap:8px }
.row.between{ justify-content:space-between }
.row.center{ align-items:center }

/* Inputs & Buttons */
.label{ font-size:14px }
.input{
  background:#0a0e18; color:var(--fg); border:1px solid var(--border);
  padding:10px 12px; border-radius:10px; font: 600 14px/1 var(--sans);
  width:140px;
}
.input:focus{ outline:none; border-color:var(--focus); box-shadow: 0 0 0 3px #7b90ff33 }

.btn{
  appearance:none; border:1px solid var(--border); color:var(--fg);
  background:#0c1220; padding:10px 14px; border-radius:10px; font-weight:700;
  cursor:pointer; transition: .15s ease transform, .15s ease background, .15s ease border;
}
.btn:hover{ transform: translateY(-1px); border-color:#8db4ff55; background:#0f1629 }
.btn:focus-visible{ outline:none; box-shadow: 0 0 0 3px #00e7ff33, 0 0 0 1px #00e7ff77 inset; }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none }

.btn-primary{
  background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
  color:#070b12; border: none;
  box-shadow: 0 10px 24px #00f5ff33, inset 0 -2px 0 #0002;
}
.btn-primary:hover{ filter: brightness(1.05) }

.btn-mini{
  margin-left:8px; font-size:12px; padding:6px 8px;
  border-radius:8px; background:#0e1422; border:1px solid var(--border);
  color:var(--cyan-2);
}

/* Donation */
.pill{
  user-select:none; border:1px solid var(--border); border-radius:999px;
  padding:8px 12px; cursor:pointer; font-weight:700; font-size:14px;
  background:#0c1220;
}
.pill.active{ border-color:#8db4ff; box-shadow: 0 0 0 2px #7b90ff33 inset }

.inline{ display:inline-flex; gap:8px; margin-left:8px }

/* Meta / URI */
.uri-line{ margin-top:8px; word-break: break-all }
.meta-box{ margin-top:10px; font-size:14px }
.meta-box dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 10px; margin:0 }
.meta-box dt{ color:var(--muted) }
.meta-box dd{ margin:0 }

/* Spinner */
.spinner{
  width:16px;height:16px;border-radius:999px; border:2px solid #fff;
  border-right-color: transparent; display:inline-block; margin-left:8px;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }

/* Status */
.status{ padding:8px 10px; border-radius:10px; background:#0a0f19; border:1px dashed var(--border) }
.status.ok{ border-color:#54ffad88; color:#c8ffe4; background:#0d1a14 }
.status.warn{ border-color:#ffe57f88; color:#fff1c1; background:#1a160d }
.status.err{ border-color:#ff9aa988; color:#ffccd1; background:#1a0d12 }
.status.info{ border-color:#8db4ff88; color:#d9e7ff; background:#0d1421 }

/* Log */
.log{
  height:180px; overflow:auto; background:#05070e; border:1px solid var(--border);
  border-radius:10px; padding:10px; white-space:pre; font-family:var(--mono);
}

/* Info grid */
.info{ margin:20px 0 }
.info-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px }
@media (max-width: 900px){ .info-grid{ grid-template-columns: 1fr } }
.info-card{ padding:14px; border-radius:14px }

/* Footer */
.site-footer{ margin:28px 0 24px }
.foot{ display:flex; gap:14px; flex-wrap:wrap; color:var(--muted) }

/* Meine Mints */
.my-mints{ display:grid; gap:10px; margin-top:10px }
.mint-row{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--border); border-radius:10px; padding:8px 10px;
  font-size:14px; background:#070b14;
}
a.link{ color:var(--cyan-2); text-decoration:none; border-bottom:1px dashed #9ad5ff66 }
a.link:hover{ border-bottom-color: transparent }

/* Noscript */
.noscript{
  margin: 10px auto; padding: 10px 12px; max-width: 1000px;
  background:#1a0d12; color:#ffd9df; border:1px dashed #ff9aa988; border-radius:10px;
}

/* Focus visibility for keyboard users */
:focus-visible{
  outline: 2px solid #00e7ff66;
  outline-offset: 2px;
  border-radius: 8px;
}