:root { /* ── Existing tokens ── */ --bg: #05060a; --card: #10131a; --cyan: #22d3ee; --purple: #8b8cf8; --text: #edf0f5; /* #7a7f9a auf --card ergab 4,36:1 — knapp unter dem WCAG-AA-Wert von 4,5:1 für Fließtext. Das betraf jeden gedämpften Text in der App, nicht eine einzelne Karte. Ein Prozent mehr Helligkeit bei gleichem Farbton bringt 4,53:1; der Unterschied ist mit bloßem Auge nicht zu sehen, die Schwelle aber genommen. */ --muted: #8b94a7; --green: #34d399; --red: #fb6069; --bar: var(--cyan); /* Clean-Fintech-Radien: 12px ist die Karte, 8px alles, was in einer Karte sitzt (Chips, Inputs), 18px die grosse Flaeche (Sheets, Hero). Vorher gab es nur die 14 und daneben zwei Dutzend handverdrahtete Werte. */ --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --radius-pill: 999px; /* ── Typography Scale ── Body copy used to sit at 8.5–11px. That is caption size, not reading size: on a phone it is the reason every card felt like a ticker. Floor for running text is --text-sm (13px). --text-2xs remains for badges and overline labels only. */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; /* ── Spacing (4px grid) ── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; /* ── Elevated Surfaces ── */ --card-elevated: #171b25; --card-hover: #1d2230; --surface-dim: rgba(255,255,255,.022); --surface-subtle: rgba(255,255,255,.05); --surface-medium: rgba(255,255,255,.075); --border-subtle: rgba(255,255,255,.085); --border-medium: rgba(255,255,255,.16); --border-strong: rgba(255,255,255,.24); /* ── Extended Color Palette ── */ --cyan-glow: rgba(34,211,238,.16); --cyan-dim: rgba(34,211,238,.10); --purple-glow: rgba(139,140,248,.15); --green-glow: rgba(52,211,153,.15); --red-glow: rgba(251,96,105,.15); --gold: #f5b83d; --gold-glow: rgba(245,184,61,.15); /* ── Rollen, die es längst gab, nur ohne Namen ────────────── Diese vier Werte lagen als rohe Hex-Codes über die Datei verteilt (#7aa2f7 9x, #d9a441 7x, #f2cf7a 5x, #07131a 13x). Ein roher Hex-Wert ist nicht nur unordentlich, er ist im Hell-Theme schlicht falsch: der Block html[data-theme="light"] weiter unten schreibt die Tokens um, an einem festen #fff läuft er wirkungslos vorbei. Genau daran war der neue Premium-Bereich im Hell-Theme unlesbar (weiße Schrift auf weißem Grund, gemessene 1,09:1). */ --blue-soft: #7aa2f7; /* zweites, weicheres Blau neben --cyan */ --premium-1: #d9a441; /* Premium-Verlauf, dunkles Ende */ --premium-2: #f2cf7a; /* Premium-Verlauf, helles Ende */ --on-accent: #07131a; /* Schrift auf hellen Akzentflächen */ --warn: #f5b971; /* Hinweis, unterhalb von --red */ --scrim: rgba(6,9,16,.94); /* Vollflächen-Abdunklung */ /* ── Shadows ── */ --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 4px 14px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.22); --shadow-lg: 0 20px 48px rgba(0,0,0,.46), 0 4px 14px rgba(0,0,0,.28); /* War ein 20px-Farbnebel. Ein Ring liest sich als Fokus, ein Nebel als Leuchtreklame — und genau das war der Auftrag. */ --shadow-glow-cyan: 0 0 0 1px rgba(34,211,238,.30); /* ── Transitions ── */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ── Glass Surfaces ── */ --glass-bg: rgba(5,6,10,.72); --glass-bg-strong: rgba(11,13,19,.92); --glass-border: rgba(255, 255, 255, 0.09); --glass-highlight: rgba(255, 255, 255, 0.10); --glass-blur: blur(20px) saturate(115%); --glass-blur-sm: blur(12px) saturate(110%); /* ── Neon Glows (multi-layer) ── */ /* Dieselben Namen, andere Sprache: ein 1px-Ring plus ein weicher Schlagschatten in der Akzentfarbe. Die ~90 Stellen, die diese Tokens benutzen, mussten dafuer nicht angefasst werden — das ist der ganze Grund, warum sie Tokens sind. */ --glow-cyan-sm: 0 0 0 1px rgba(34,211,238,.24); --glow-cyan-md: 0 0 0 1px rgba(34,211,238,.34), 0 8px 20px rgba(34,211,238,.12); --glow-purple-sm: 0 0 0 1px rgba(139,140,248,.24); --glow-purple-md: 0 0 0 1px rgba(139,140,248,.34), 0 8px 20px rgba(139,140,248,.12); --glow-green-sm: 0 0 0 1px rgba(52,211,153,.26); --glow-red-sm: 0 0 0 1px rgba(251,96,105,.26); --glow-gold-sm: 0 0 0 1px rgba(245,184,61,.28); /* ── Aurora Palette ── */ --aurora-1: var(--cyan); --aurora-2: var(--purple); --aurora-3: #ff3d8c; --aurora-4: #00ffa3; /* Aurora-Blobs und Partikel sind aus. Sie waren die Signatur des alten Designs; ein Handelsprodukt, hinter dessen Zahlen sich farbige Nebel bewegen, liest sich als Spielzeug. Die Regler bleiben stehen (und die Elemente im DOM), damit weder JS noch der Reduced-Motion-Block angefasst werden muss — sie stehen nur auf null. Den Tiefeneindruck traegt jetzt ein statischer Verlauf auf im Redesign-Layer am Dateiende. */ --aurora-strength: 0; /* multiplier for blob opacity / blur (cut by reduced-motion) */ --aurora-blur: 80px; --particle-strength: 0; /* multiplier for particle canvas */ --glow-strength: .5; /* multiplier for neon glows */ /* ── Easing & Springs ── */ --ease-out: cubic-bezier(.22,.9,.26,1); --ease-in: cubic-bezier(.55,0,.78,.42); --ease-spring: cubic-bezier(.34,1.56,.64,1); --ease-snap: cubic-bezier(.32,.72,0,1); /* ── Letter spacing ── */ /* ── Rollen, die benutzt, aber nie definiert waren ────────── Gefunden beim Redesign: 17 Stellen benutzen var(--accent), var(--ink), var(--amber), var(--accent-glow/-soft) oder var(--space-md) — definiert war keine davon. Was das anrichtet, hat drei Stufen: 1. Ohne Fallback (`border-color:var(--accent)`, `background:var(--accent)`) ist die Deklaration schlicht ungueltig — die Flaeche hatte gar keine Akzentfarbe. 2. Mit Fallback stand dort ein rohes Hex, an dem das Hell-Theme wirkungslos vorbeilaeuft: `var(--ink,#fff)` ist im Hell-Theme weisse Schrift auf weisser Karte. 3. Dieselbe Rolle trug je nach Fundstelle einen anderen Fallback (#19c37d gruen und #7aa2ff blau fuer --accent). Die Ratsche in designTokens.test.mjs sieht davon nichts: sie zaehlt rohe Hex-Werte, und ein Hex INNERHALB von var(--x,#y) sah aus wie ein sauberer Token-Zugriff. Jetzt zeigen alle fuenf auf eine echte Rolle und folgen damit dem Theme. */ --accent: var(--cyan); --accent-glow: var(--cyan-glow); --accent-soft: var(--cyan-dim); --ink: var(--text); --amber: var(--gold); --space-md: 14px; /* ── Obsidian (03.09.26) ────────────────────────────────── Zahlen in Mono (System-Stack, kein Netz-Font: Telegram-nativ und offline-fest), eine Ring-Linie fuer Akzent-Umrisse, der Grund als RGB-Tripel fuer den Verlauf ueber dem Punktraster, die Punkte selbst. Alle vier auch im Hell-Theme. */ --cyan-line: rgba(34,211,238,.35); --bg-rgb: 5,6,10; --dot: rgba(255,255,255,.07); --tracking-tight: -.3px; --tracking-base: 0; --tracking-wide: .5px; /* ── Line heights ── */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.6; color-scheme: dark; } /* ── Light Theme Overrides ────────────────────────── Activated by setting `data-theme="light"` on . JS handles 'auto' (matchMedia + Telegram colorScheme). */ html[data-theme="light"] { color-scheme: light; --bg: #f4f4f0; --card: #ffffff; --card-elevated: #ffffff; --card-hover: #f0f0ec; --text: #12151b; --muted: #5d6675; --bar: #0a7381; --surface-dim: rgba(18,21,27,.03); --surface-subtle: rgba(18,21,27,.05); --surface-medium: rgba(18,21,27,.08); --border-subtle: rgba(18,21,27,.11); --border-medium: rgba(18,21,27,.2); --border-strong: rgba(18,21,27,.28); --glass-bg: rgba(255,255,255,.78); --glass-bg-strong: rgba(255,255,255,.93); --glass-border: rgba(18,21,27,.11); --glass-highlight: rgba(255,255,255,.85); --shadow-sm: 0 1px 2px rgba(18,21,27,.06); --shadow-md: 0 4px 14px rgba(18,21,27,.09), 0 1px 3px rgba(18,21,27,.05); --shadow-lg: 0 20px 48px rgba(18,21,27,.14), 0 4px 14px rgba(18,21,27,.07); --shadow-glow-cyan: 0 0 0 1px rgba(10,115,129,.32); --cyan: #0a7381; --cyan-glow: rgba(10,115,129,.18); --cyan-dim: rgba(10,115,129,.10); --purple: #5b52d6; --purple-glow: rgba(91,82,214,.16); --green: #0f7d4f; --green-glow: rgba(15,125,79,.18); --red: #c2363c; --red-glow: rgba(194,54,60,.16); --gold: #8a5b00; --gold-glow: rgba(138,91,0,.18); /* Die neuen Rollen im Hell-Theme. Blau und Hinweis müssen dunkler werden, sonst tragen sie auf Weiß keinen Kontrast. Der Premium-Verlauf bleibt: er ist eine Fläche mit dunkler Schrift darauf und funktioniert in beiden Themes. --on-accent bleibt aus demselben Grund dunkel. */ --blue-soft: #2f5fd0; --warn: #8a5300; --scrim: rgba(244,244,240,.94); --cyan-line: rgba(10,115,129,.38); --bg-rgb: 244,244,240; --dot: rgba(18,21,27,.13); --aurora-strength: 0; --particle-strength: 0; --glow-strength: .4; } html[data-theme="light"] body::after { background: radial-gradient(ellipse at center, transparent 30%, rgba(244,244,240,.55) 100%); } html[data-theme="light"] .balance-card { background: linear-gradient(135deg, #e7ecff 0%, #f1e7ff 100%); } html[data-theme="light"] h1, html[data-theme="light"] .lang-overlay h2 { text-shadow: none; } html[data-theme="light"] .ha { text-shadow: 0 0 12px rgba(7,114,127,.2); } * { margin: 0; padding: 0; box-sizing: border-box; } body { color: var(--text); padding: 16px; min-height: 100vh; position: relative; overflow-x: hidden; } /* ── Aurora Mesh Background ─────────────────────── */ .aurora-bg { position: fixed; inset: -20%; z-index: -2; pointer-events: none; overflow: hidden; } .aurora-bg::before, .aurora-bg::after, .aurora-bg > .aurora-blob { content: ""; position: absolute; border-radius: 50%; filter: blur(var(--aurora-blur)); opacity: calc(.38 * var(--aurora-strength, 1)); mix-blend-mode: screen; will-change: transform; } .aurora-bg::before { width: 60vw; height: 60vw; left: -10%; top: -5%; background: radial-gradient(circle at 30% 30%, var(--aurora-1), transparent 65%); animation: aurora-drift-a 28s ease-in-out infinite alternate; } .aurora-bg::after { width: 55vw; height: 55vw; right: -12%; top: 20%; background: radial-gradient(circle at 60% 40%, var(--aurora-2), transparent 65%); animation: aurora-drift-b 34s ease-in-out infinite alternate; } .aurora-bg > .aurora-blob { width: 65vw; height: 65vw; left: 15%; bottom: -20%; background: radial-gradient(circle at 50% 50%, var(--aurora-3), transparent 65%); animation: aurora-drift-c 40s ease-in-out infinite alternate; opacity: calc(.26 * var(--aurora-strength, 1)); } @keyframes aurora-drift-a { 0% { transform: translate3d(-4%, -2%, 0) scale(1); } 100% { transform: translate3d(8%, 6%, 0) scale(1.15); } } @keyframes aurora-drift-b { 0% { transform: translate3d(2%, 4%, 0) scale(1.05); } 100% { transform: translate3d(-7%, -6%, 0) scale(1.2); } } @keyframes aurora-drift-c { 0% { transform: translate3d(0, 3%, 0) scale(1); } 100% { transform: translate3d(-5%, -8%, 0) scale(1.18); } } .particle-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: calc(.55 * var(--particle-strength, 1)); } html[data-theme="light"] .particle-bg { display: none; } /* subtle vignette so text stays readable over aurora */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 30%, rgba(10,13,20,.55) 100%); } /* ── Glassmorphism across existing cards ───────── */ .hr, .cw, .cd, .st, .pd-card, .os-card, .balance-card, .subnet-section, .ai-teaser { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .hr:hover, .pd-card:hover, .os-card:hover, .st:hover, .ai-teaser:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--glow-cyan-sm), inset 0 1px 0 var(--glass-highlight); border-color: rgba(46,211,224,.25); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hr, .cw, .cd, .st, .pd-card, .os-card, .balance-card, .subnet-section, .ai-teaser { background: var(--card) !important; } } /* ── Hero Glow Border Animation ────────────────── */ .hr { position: relative; overflow: hidden; } .hr::before { content: ""; position: absolute; inset: -2px; border-radius: calc(var(--radius) + 2px); padding: 2px; background: conic-gradient(from 0deg, var(--cyan), var(--purple), var(--aurora-3), var(--cyan)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .35; animation: hero-border-spin 24s linear infinite; pointer-events: none; z-index: 0; } /* HUD corner brackets (matches the dashboard cells) */ .hr::after { content: ''; position: absolute; inset: 7px; pointer-events: none; z-index: 2; background: linear-gradient(rgba(46,211,224,.55), rgba(46,211,224,.55)) left 0 top 0 / 12px 1px, linear-gradient(rgba(46,211,224,.55), rgba(46,211,224,.55)) left 0 top 0 / 1px 12px, linear-gradient(rgba(143,157,255,.5), rgba(143,157,255,.5)) right 0 bottom 0 / 12px 1px, linear-gradient(rgba(143,157,255,.5), rgba(143,157,255,.5)) right 0 bottom 0 / 1px 12px; background-repeat: no-repeat; opacity: .55; } .hr[data-trend="up"]::before { opacity: .75; filter: hue-rotate(-10deg); } .hr[data-trend="down"]::before { filter: hue-rotate(130deg); opacity: .55; } .hr > * { position: relative; z-index: 1; } @keyframes hero-border-spin { to { transform: rotate(360deg); } } /* stronger hero title glow */ /* ── Sparkline enhancements ────────────────────── */ @keyframes spark-pulse { 0%,100% { r: 3; opacity: 1; } 50% { r: 5; opacity: .6; } } /* ── Radial Gauges ─────────────────────────────── */ .gauge { position: relative; width: 84px; height: 84px; margin: 0 auto; } .gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); } .gauge .gauge-bg { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 8; } .gauge .gauge-fg { fill: none; stroke: url(#gaugeGrad); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 264; transition: stroke-dashoffset 1.2s cubic-bezier(.22,.9,.26,1); filter: drop-shadow(0 0 6px rgba(46,211,224,.5)); } .gauge .gauge-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.3px; } .gauge .gauge-lbl { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: var(--text-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; } .os-card .gauge { margin-bottom: 22px; } .os-card .gauge + .os-val { display: none; } /* gauge replaces raw number */ /* ── Ripple effect ─────────────────────────────── */ .ripple { position: relative; overflow: hidden; isolation: isolate; } .ripple::after { content: ""; position: absolute; left: var(--rx, 50%); top: var(--ry, 50%); width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, rgba(46,211,224,.45), transparent 70%); opacity: 0; pointer-events: none; } .ripple.ripple-active::after { animation: ripple-out 600ms ease-out; } @keyframes ripple-out { 0% { transform: translate(-50%,-50%) scale(0); opacity: .8; } 100% { transform: translate(-50%,-50%) scale(80); opacity: 0; } } /* ── Skeleton Shimmer ─────────────────────────── */ .skeleton { display: inline-block; min-width: 40px; height: 1em; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.04) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s linear infinite; color: transparent !important; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Live pulse dot ───────────────────────────── */ .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } @keyframes live-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.4); } } /* ── Heatmap / Treemap View ───────────────────── */ .heat-header { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 10px; } .heat-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1 inherit; letter-spacing: .8px; text-transform: uppercase; } .heat-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(47,212,138,.85); animation: live-pulse 1.8s ease-in-out infinite; } .heat-eyebrow b { color: rgba(255,255,255,.92); font-weight: 700; letter-spacing: .8px; } .heat-eyebrow .heat-rule { flex: 1 1 auto; height: 1px; min-width: 24px; background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0)); } .heat-subtitle { font: 500 12px/1.3 inherit; color: var(--muted); } .heat-toolbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin: 0 0 10px; } .heat-seg button { font: 700 11px/1 inherit; letter-spacing: .2px; padding: 7px 13px; cursor: pointer; } .heat-seg button:hover { color: var(--text); } .heat-seg button[disabled] { opacity: .45; cursor: not-allowed; position: relative; } .heat-seg button[disabled]:hover { color: var(--muted); } .sn-heatmap { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 38px; grid-auto-flow: dense; gap: 4px; padding: 2px 0 6px; } .heat-tile { border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, z-index 0s; grid-column: span 2; grid-row: span 2; } .heat-tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 55%); pointer-events: none; } .heat-tile:active { transform: scale(.97); } .heat-tile:hover { z-index: 2; } .heat-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: .3px; color: #fff; margin-bottom: 4px; border: 1px solid rgba(255,255,255,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.35); } .heat-tile .heat-id { font-size: var(--text-2xs); opacity: .8; font-weight: 600; letter-spacing: .3px; } .heat-tile .heat-sym { font-size: 11px; line-height: 1.15; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .heat-tile .heat-chg { font-size: 11px; font-weight: 800; margin-top: 3px; } /* Tier-based sizing — set per render via data-tier */ .heat-tile[data-tier="hero"] { grid-column: span 4; grid-row: span 6; } .heat-tile[data-tier="hero"] .heat-avatar { width: 56px; height: 56px; font-size: 22px; margin-bottom: 8px; } .heat-tile[data-tier="hero"] .heat-sym { font-size: 18px; font-weight: 800; } .heat-tile[data-tier="hero"] .heat-chg { font-size: 24px; } .heat-tile[data-tier="hero"] .heat-id { font-size: 11px; } .heat-tile[data-tier="major"] { grid-column: span 4; grid-row: span 4; } .heat-tile[data-tier="major"] .heat-avatar { width: 44px; height: 44px; font-size: 17px; margin-bottom: 6px; } .heat-tile[data-tier="major"] .heat-sym { font-size: 15px; } .heat-tile[data-tier="major"] .heat-chg { font-size: 19px; } .heat-tile[data-tier="lg"] { grid-column: span 2; grid-row: span 3; } .heat-tile[data-tier="lg"] .heat-avatar { width: 32px; height: 32px; font-size: 13px; margin-bottom: 5px; } .heat-tile[data-tier="lg"] .heat-sym { font-size: 12px; } .heat-tile[data-tier="lg"] .heat-chg { font-size: 13px; } .heat-tile[data-tier="md"] { grid-column: span 2; grid-row: span 2; } .heat-tile[data-tier="sm"] { grid-column: span 2; grid-row: span 2; } .heat-tile[data-tier="sm"] .heat-avatar { display: none; } .heat-tile[data-tier="sm"] .heat-sym { font-size: var(--text-2xs); } .heat-tile[data-tier="sm"] .heat-chg { font-size: var(--text-2xs); margin-top: 1px; } .heat-tile[data-tier="sm"] .heat-id { font-size: var(--text-2xs); } .heat-empty { grid-column: 1 / -1; text-align: center; padding: 32px 12px; color: var(--muted); font-size: 12px; } @media (max-width: 480px) { .sn-heatmap { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 34px; } .heat-tile[data-tier="hero"] { grid-column: span 3; grid-row: span 5; } .heat-tile[data-tier="major"] { grid-column: span 3; grid-row: span 4; } .heat-tile[data-tier="lg"] { grid-column: span 2; grid-row: span 3; } .heat-tile[data-tier="md"] { grid-column: span 2; grid-row: span 2; } .heat-tile[data-tier="sm"] { grid-column: span 2; grid-row: span 2; } } /* ── Reduced motion ───────────────────────────── Honest implementation: not only kills animations, but also dials down heavy GPU effects (blur, glow, particles) that can trigger vestibular discomfort even when static. */ @media (prefers-reduced-motion: reduce) { :root { --aurora-strength: .25; --aurora-blur: 40px; --particle-strength: 0; --glow-strength: .35; --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } .aurora-bg, .aurora-bg::before, .aurora-bg::after, .aurora-bg > .aurora-blob, .hr::before, .live-dot, .sparkline-dot, .skeleton, .skel, .heat-eyebrow::before, .pro-dash-section::before { animation: none !important; } .hr::before { opacity: .12 !important; } .ha { text-shadow: none !important; } .particle-bg { display: none !important; } /* shadow-glow tokens carry the multiplier */ .glow-cyan, .glow-purple { box-shadow: none !important; } } /* User-toggled equivalent (data-motion="reduced") so users can opt-in even if their OS pref is set to "no-preference". */ html[data-motion="reduced"] { --aurora-strength: .25; --aurora-blur: 40px; --particle-strength: 0; --glow-strength: .35; } html[data-motion="reduced"] .aurora-bg::before, html[data-motion="reduced"] .aurora-bg::after, html[data-motion="reduced"] .aurora-bg > .aurora-blob, html[data-motion="reduced"] .hr::before, html[data-motion="reduced"] .skeleton, html[data-motion="reduced"] .skel { animation: none !important; } html[data-motion="reduced"] .particle-bg { display: none !important; } /* ── Overheating mitigation: pause CSS animations while the mini app is backgrounded (tab hidden / user switched chats in Telegram). The `tdx-inactive` class is toggled from JS via the Page Visibility API. */ html.tdx-inactive *, html.tdx-inactive *::before, html.tdx-inactive *::after { animation-play-state: paused !important; } /* Low-power devices: drop the heaviest always-on GPU effects (aurora blobs, hero conic-gradient spin, particle canvas). Detected from JS via navigator.deviceMemory / hardwareConcurrency. */ html.tdx-low-power .aurora-bg::before, html.tdx-low-power .aurora-bg::after, html.tdx-low-power .aurora-bg > .aurora-blob, html.tdx-low-power .hr::before { animation: none !important; } html.tdx-low-power .aurora-bg::before, html.tdx-low-power .aurora-bg::after, html.tdx-low-power .aurora-bg > .aurora-blob { filter: blur(40px); opacity: .22; } html.tdx-low-power .particle-bg { display: none !important; } /* ── RTL Support ──────────────────────────────── */ html[dir="rtl"] body { direction: rtl; text-align: right; } html[dir="rtl"] .subnet-left { flex-direction: row-reverse; } html[dir="rtl"] .subnet-right { text-align: left; } html[dir="rtl"] .stat-card { text-align: right; } html[dir="rtl"] .btn-row { flex-direction: row-reverse; } h1 { font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-align: center; margin-bottom: 16px; } /* ── Language Picker Overlay ───────────────────── */ .lang-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 20px 20px; overflow-y: auto; } .lang-overlay.hidden { display: none; } .lang-overlay h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-bottom: 24px; text-align: center; } .lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 400px; } .lang-btn { background: var(--card); border: 1px solid var(--border-medium); padding: 16px 12px; text-align: center; cursor: pointer; color: var(--text); font-size: var(--text-md); } .lang-btn:hover { border-color: var(--cyan); background: var(--surface-medium); } .lang-flag { font-size: 28px; display: block; margin-bottom: 6px; } .lang-name { font-weight: 600; } .lang-overlay-close { position: absolute; top: 14px; right: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 50%; width: 32px; height: 32px; font-size: 16px; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; } .lang-overlay-close.hidden { display: none; } /* ── Main App (hidden until language chosen) ──── */ #mainApp { display: none; } #mainApp.visible { display: block; } /* ── Balance Card ─────────────────────────────── */ .balance-card { padding: 20px; margin-bottom: 16px; text-align: center; } .balance-card .label { font-size: var(--text-base); color: var(--muted); } .balance-card .tao { font-size: var(--text-3xl); font-weight: 800; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; margin: 4px 0; } .balance-card .usd { font-size: var(--text-md); color: var(--muted); font-variant-numeric: tabular-nums; } .balance-card .change { display: inline-block; font-size: var(--text-base); font-variant-numeric: tabular-nums; margin-top: 6px; padding: 2px 10px; border-radius: 8px; } .change.positive { background: rgba(47,212,138,.15); color: var(--green); } .change.negative { background: rgba(242,88,94,.15); color: var(--red); } /* ── Hero Card (new dashboard) ───────────────── */ .hr { padding:16px;margin-bottom:9px } .ha { margin-bottom:2px } .hu { font-size:12px;color:var(--muted) } .hc { display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;background:rgba(47,212,138,.15);color:var(--green) } .hc.ng { background:rgba(242,88,94,.15);color:var(--red) } .hc.hc-na { background:rgba(255,255,255,.06);color:var(--muted) } /* ── 3-Stat Grid ─────────────────────────────── */ .st { padding:10px;text-align:center } .sv { color:var(--text) } .sv.pos { color:var(--green) } .sv.neg { color:var(--red) } .ss { margin-top:2px;overflow-wrap:anywhere } /* ── Price Chart Card ────────────────────────── */ .cw { padding:14px;margin-bottom:9px } .ch { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px } .ctt { cursor:pointer } @keyframes chartDraw { to { stroke-dashoffset: 0; } } /* ── Flow / Generic Card ─────────────────────── */ .cd { padding:14px } /* ── Subnet Row (new APY style) ──────────────── */ .si { display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06) } .si:last-child { border-bottom:none } .rk { width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);font-weight:800;flex-shrink:0 } .r1 { background:rgba(240,180,41,.15);color:var(--gold) } .r2 { background:rgba(192,192,192,.15);color:#c0c0c0 } .r3 { background:rgba(205,127,50,.15);color:#cd7f32 } .rn { background:rgba(255,255,255,.06);color:var(--muted) } .sif { flex:1;min-width:0;cursor:pointer } .snm { font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .sid { font-size:var(--text-2xs);color:var(--muted) } .sir { text-align:right;flex-shrink:0;cursor:pointer } .sem { font-size:11px;font-weight:700;color:var(--cyan) } .sem.pos { color:var(--green) } .sem.mid { color:var(--gold) } .sem.neg { color:var(--red) } .sc2 { font-size:var(--text-2xs) } .sc2.pos { color:var(--green) } .sc2.neg { color:var(--red) } .sstar { font-size:14px;flex-shrink:0;background:none;border:none;padding:4px;cursor:pointer;line-height:1;color:var(--muted) } .sstar.on { color:var(--gold) } .sbadge { display:inline-block;font-size:var(--text-2xs);font-weight:800;padding:1px 4px;border-radius:4px;background:rgba(255,69,96,.2);color:var(--red);margin-left:4px;vertical-align:middle } /* sort controls */ .sort-row { display:flex;gap:6px;margin-bottom:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px } .sort-row::-webkit-scrollbar { display:none } .sort-btn { padding:4px 10px;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0 } .sort-btn.on { border-color:rgba(46,211,224,.4);} /* pagination controls */ .pg-ctrl { display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 0 4px } .pg-btn { background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:4px 14px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit } .pg-btn:disabled { opacity:.3;cursor:default } .pg-info { font-size:11px;color:var(--muted);font-weight:600 } /* subnet detail modal */ .snd-overlay { position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:16px } .snd-overlay.hidden { display:none } @keyframes sndPopIn { from { opacity:0;transform:scale(.94) } to { opacity:1;transform:scale(1) } } .snd-sheet { border-radius:18px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;overflow-x:hidden;animation:sndPopIn .22s cubic-bezier(.32,.72,0,1);} .snd-handle { display:none } .snd-title { font-size:22px;font-weight:800;margin-bottom:4px } .snd-sub { font-size:14px;color:var(--muted);margin-bottom:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden } .snd-close-x { background:rgba(255,255,255,.08);border:none;border-radius:10px;width:40px;height:40px;font-size:18px;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s } .snd-close-x:active { background:rgba(255,255,255,.15) } .snd-change-pill { display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:700;padding:5px 12px;border-radius:20px;line-height:1 } .snd-change-pill.up { background:rgba(47,212,138,.12);color:var(--green) } .snd-change-pill.down { background:rgba(242,88,94,.12);color:var(--red) } .snd-change-pill.flat { background:rgba(255,255,255,.06);color:var(--muted) } .snd-mcap { font-size:13px;color:var(--muted);font-weight:600 } .snd-actions { display:flex;gap:12px;margin-top:18px } /* Subnet DNA banner (detail sheet) + accent for the Home ca-btn */ .rc-card .rc-hero { margin:10px 0 6px } .rc-card .rc-amount { font-size:1.9rem;font-weight:800;letter-spacing:-.02em; font-variant-numeric:tabular-nums } .rc-card .rc-sub { color:var(--muted);font-size:12px;margin-top:2px } .rc-row { display:grid;grid-template-columns:1fr 60px;gap:8px;align-items:center; padding:6px 0;font-size:13px } .rc-row .rc-nm { overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .rc-row .rc-val { text-align:right;font-weight:700;font-variant-numeric:tabular-nums } .rc-bar { grid-column:1 / -1;height:6px;background:rgba(255,255,255,.07); border-radius:3px;overflow:hidden } .rc-bar i { display:block;height:100%;background:var(--cyan);border-radius:3px } .rc-fee { margin-top:10px;font-size:13px;font-weight:700; font-variant-numeric:tabular-nums } .rc-fee.ok { color:var(--green) } .rc-fee.mid { color:#ffab00 } .rc-fee.bad { color:var(--red) } .rc-single { width:100%;margin-top:6px;background:none;border:0; color:var(--cyan);font-size:12px;font-weight:700;cursor:pointer; font-family:inherit;text-align:left;padding:4px 2px } .rc-note { margin-top:8px;font-size:11px;color:var(--muted);line-height:1.5 } /* Multi-Wallet: ein Chip je bekannter Adresse, MIT ihrem Anspruch. Der Betrag gehört auf den Chip, weil sonst niemand durchtippt, um herauszufinden, wo überhaupt etwas liegt — und was man nicht findet, claimt man nie. Die aktive Wallet ist über Rahmen UND Textfarbe markiert, nicht allein über die Farbe. */ .rc-wallets { display:flex;gap:6px;overflow-x:auto;margin:8px 0 2px; padding-bottom:2px;-webkit-overflow-scrolling:touch } .rc-wchip { flex:0 0 auto;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);border-radius:12px; padding:6px 10px;font-family:inherit;font-size:11px;color:var(--muted); cursor:pointer;line-height:1.35;text-align:left;white-space:nowrap } .rc-wchip .a { display:block;font-weight:700;color:var(--text) } .rc-wchip .v { display:block;font-variant-numeric:tabular-nums } .rc-wchip.active { border-color:var(--cyan);background:rgba(46,211,224,.12) } .rc-wchip.active .a { color:var(--cyan) } .rc-wchip.has .v { color:var(--green);font-weight:700 } /* Signier-Wahl: bewusst Radio-Optik statt Knopfreihe. Eine Reihe gleichwertiger Knöpfe lädt zum Danebentippen ein; hier ist die Auswahl sichtbar getroffen, bevor der Weiter-Knopf überhaupt klickbar wird. */ .rc-sign-list { margin:12px 0 4px } .rc-sign-opt { display:flex;align-items:center;gap:10px;width:100%; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-radius:14px;padding:12px;margin-bottom:8px;cursor:pointer; font-family:inherit;font-size:13px;color:var(--text);text-align:left } .rc-sign-opt.sel { border-color:var(--cyan);background:rgba(46,211,224,.10) } .rc-sign-opt .rad { flex:0 0 auto;width:16px;height:16px;border-radius:50%; border:2px solid rgba(255,255,255,.35) } .rc-sign-opt.sel .rad { border-color:var(--cyan);background:var(--cyan) } .rc-sign-opt .meta { flex:1;min-width:0 } .rc-sign-opt .adr { display:block;font-weight:700;overflow:hidden; text-overflow:ellipsis;white-space:nowrap } .rc-sign-opt .sub { display:block;font-size:11px;color:var(--muted); font-variant-numeric:tabular-nums } .rc-sign-go[disabled] { opacity:.45;cursor:default } /* Root-Check — Rang nach tatsächlich ausgezahltem Ertrag. Die Balkenfarbe ist eine SEQUENZIELLE Rampe in einem Ton (Cyan), hell = viel: die Zahl ist eine Größe, keine Identität, und wechselnde Farbtöne würden Rangplätze wie Kategorien aussehen lassen. Alle vier Stufen liegen ≥ 3:1 über der Kartenfläche und sind monoton in der Helligkeit — mit dem Validator des dataviz-Skills geprüft, nicht geschätzt. Die eigene Zeile trägt Gold PLUS ein Textlabel, damit sie nicht allein über Farbe erkennbar ist. */ .ry-idx1 { background:#7cf5ff } .ry-idx2 { background:#35d9ef } .ry-idx3 { background:#00b4cc } .ry-idx4 { background:#0091a6 } .ry-mine { background:var(--gold) } .ry-verdict { margin:10px 0 12px } .ry-lede { font-size:13px;line-height:1.5 } /* margin:0 — die Falte ist ein Flex-Container mit gap:12px, eigene Margins addieren sich darauf und rissen den Rhythmus auf 24px auf. Radius und Schatten wie jede andere Karte der Falte: im hellen Theme trennt der Schatten die Fläche vom Grund (1,08:1 allein reicht nicht). */ .wn-card { margin:0;padding:10px 12px;} .wn-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px } /* 44px Trefferfläche, aber ohne die Kopfzeile aufzublasen: die negativen Ränder holen die optische Höhe zurück. */ .wn-x { background:none;border:0;color:var(--muted);font-size:15px;cursor:pointer;font-family:inherit; width:44px;height:44px;margin:-12px -10px -12px 0;display:flex;align-items:center;justify-content:center } .wn-row { display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;background:none;border:0;border-top:1px solid var(--border-subtle);padding:8px 2px;min-height:44px;font-size:var(--text-sm);color:var(--text);cursor:pointer;font-family:inherit;text-align:left } .wn-row:first-of-type { border-top:0 } .wn-arrow { color:var(--cyan);font-weight:800 } /* Die Vertrauenszeile ist eine Karte wie die anderen. */ #homeTrust { border-radius:var(--radius);box-shadow:var(--shadow-sm) } /* Ein „·" am Zeilenende trennt nichts — auf Deutsch bricht die Zeile um und ließ den zweiten Punkt verwaist stehen. */ .hf-trust { column-gap:6px } .hf-trust-dot:last-of-type { display:none } .rg-block { margin-top:10px;padding:9px 10px;border:1px dashed var(--border-medium);} .rg-head { font-weight:700;margin-bottom:5px } .rg-line { color:var(--muted);margin-bottom:6px;font-variant-numeric:tabular-nums } .rg-lbl { display:flex;align-items:center;gap:6px;color:var(--muted);margin:4px 0 } .rg-num { width:52px;background:none;border:1px solid var(--border-subtle);border-radius:6px;color:var(--text);padding:2px 6px;font-size:11.5px;font-family:inherit } .rg-btn { margin-top:6px;padding:6px 10px;font-size:11.5px;cursor:pointer;font-family:inherit } .rg-note { color:var(--muted);margin-top:6px;} .pf-xray { margin:10px 0 4px;padding:10px 12px;} .pf-xray-head { display:flex;align-items:center;justify-content:space-between;gap:8px } .pf-xray-pct { font-size:15px;font-weight:800;font-variant-numeric:tabular-nums } .pf-xray-pct.warn { color:var(--red) } .pf-xray-sub { color:var(--muted);margin:2px 0 6px } .pf-xray-row { display:flex;justify-content:space-between;gap:8px;width:100%;background:none;border:0;border-top:1px solid var(--border-subtle);padding:7px 2px;font-size:12px;color:var(--text);cursor:pointer;font-family:inherit;text-align:left } .pf-xray-val { color:var(--muted);font-variant-numeric:tabular-nums } .pf-xray-note { color:var(--muted);margin-top:6px;} .pf-attr-seg button { background:none;border:1px solid var(--border-subtle);border-radius:8px;color:var(--muted);padding:3px 8px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit } .pf-attr-seg button.active { color:var(--text);border-color:var(--border-medium) } /* Exit-Plan: die Tranchen-Zeile unter einer Position des Realisierbaren Werts. Ein Knopf, keine zweite Karte — der Weg von der Zahl zur Handlung ist ein Tipp. */ .pf-exit-tr { display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 2px 8px;font-size:11px;color:var(--muted);line-height:1.35 } .pf-exit-tr-btn { flex:0 0 auto;background:none;border:1px solid var(--border-subtle);border-radius:999px;padding:4px 10px;color:var(--cyan);font-size:11px;font-weight:700;font-family:inherit;cursor:pointer;min-height:28px } /* Katalysator-Feed: Zeilen mit Haarlinie, keine Karte in der Karte. */ .ktl-row { display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--border-subtle) } .ktl-row:first-child { border-top:0 } .ktl-row[role="button"] { cursor:pointer } .ktl-body { flex:1;min-width:0 } .ktl-title { font-size:12.5px;font-weight:700;color:var(--text);line-height:1.3;overflow-wrap:anywhere } .ktl-name { color:var(--cyan) } .ktl-mech { font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35 } .ktl-when { flex-shrink:0;font-size:var(--text-2xs);color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px;white-space:nowrap } .ktl-foot, .ktl-empty { font-size:var(--text-2xs);color:var(--muted);margin-top:6px;line-height:1.45 } .ktl-empty { text-align:center;padding:10px 4px } .snd-conv .ktl-row { padding:8px 0 } /* Wer kauft: das Urteil steht ÜBER den Rohzahlen, nicht darunter. Vier Zahlen nebeneinander beantworten "Wal oder nicht" nicht — der Leser muss sie sonst selbst verrechnen, und die meisten tun es nicht. Umriss statt Fuellung wie jede Marke im Haus: eine Auskunft, kein Alarm. */ .fl-verdict { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px } .fl-chip { flex:0 0 auto;border:1px solid var(--border-medium);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;color:var(--text);white-space:nowrap } .fl-whale .fl-chip { border-color:var(--amber);color:var(--amber) } .fl-broad .fl-chip { border-color:var(--green);color:var(--green) } .fl-sub { flex:1;min-width:120px;font-size:11px;color:var(--muted);line-height:1.35 } .pf-attr-row { display:flex;justify-content:space-between;gap:8px;padding:6px 2px;border-top:1px solid var(--border-subtle);font-size:12px } .pf-attr-row:first-child { border-top:0 } .pf-attr-row.strong { font-weight:800 } .ry-fund { margin:0 0 12px;padding:10px 12px;border:1px solid var(--border-subtle);} .ry-fund-row + .ry-fund-row { margin-top:10px;padding-top:10px;border-top:1px solid var(--border-subtle) } .ry-fund-name { font-size:12px;font-weight:700;margin-bottom:4px } .ry-fund-line { font-size:12px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums } .ry-multiple { font-size:1.9rem;font-weight:800;letter-spacing:-.02em; color:var(--gold);font-variant-numeric:tabular-nums;margin-top:4px } .ry-row { display:grid;grid-template-columns:18px 1fr 44px;gap:8px; align-items:center;font-size:12px;padding:5px 0 } .ry-row .ry-rank { color:var(--muted);font-variant-numeric:tabular-nums; text-align:right;font-size:11px } .ry-row .ry-nm { overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .ry-row .ry-val { text-align:right;font-weight:700; font-variant-numeric:tabular-nums } .ry-row.mine .ry-nm { color:var(--gold);font-weight:800 } .ry-tag { font-size:var(--text-2xs);font-weight:800;letter-spacing:.06em; padding:1px 5px;border-radius:5px;margin-left:6px;vertical-align:middle } .ry-tag.you { background:var(--gold-glow);color:var(--gold) } .ry-tag.prov { background:var(--surface-medium);color:var(--muted) } .ry-tag.fade { background:var(--red-glow);color:var(--red) } .ry-tag.gated { background:transparent;color:var(--amber); box-shadow:inset 0 0 0 1px var(--amber) } /* 2px Abstand zur Fläche unter dem Balken — sonst verschmelzen benachbarte Zeilen zu einem Block. */ .ry-bar { grid-column:1 / -1;height:6px;background:rgba(255,255,255,.07); border-radius:3px;overflow:hidden;margin:1px 0 3px } .ry-bar i { display:block;height:100%;border-radius:3px } .ry-more { width:100%;margin-top:8px;background:none;border:0; color:var(--cyan);font-size:12px;font-weight:700;cursor:pointer; font-family:inherit;text-align:left;padding:4px 2px } .ry-note { margin-top:10px;font-size:11px;color:var(--muted);line-height:1.5 } /* Handlungsblock. Abgesetzt von der Rangliste, weil er kein weiterer Messwert ist, sondern das, was aus ihr folgt — dieselbe Cyan-Fläche wie der Claim-Knopf, damit "hier passiert etwas mit Geld" im Portfolio immer gleich aussieht. */ .ry-act { margin-top:14px;padding:12px; background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.18) } .ry-act-lede { font-size:12px;color:var(--muted);line-height:1.5 } .ry-act-free { color:var(--green);font-weight:800; font-variant-numeric:tabular-nums } .ry-act .snd-dna-btn { margin:10px 0 0 } .ry-act .ry-more { text-align:center;margin-top:2px } /* Wechsel ohne lohnenden Abstand: erreichbar, aber nicht beworben. Ausblenden waere falsch — es ist eine Funktion, keine Empfehlung. */ .ry-act .snd-dna-btn.ry-move-quiet { background:none; border:1px solid rgba(255,255,255,.12);box-shadow:none } /* Lange Validatornamen ("OpenTensor Foundation") duerfen die Zeile nicht sprengen: der Name kuerzt, Index und Take bleiben ganz — die beiden Zahlen sind der Grund, warum der Knopf diesen Namen traegt. */ .ry-act-lbl { flex:1 1 auto;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap } .ry-act .snd-dna-sub { flex:0 0 auto;text-align:right;white-space:nowrap } /* Root-Verkaufsdruck. Eine Zahl gross, der Rest klein: die Einloesequote ist die Aussage, alles andere ist Beleg. Bewusst KEINE Ampelfarbe — 46 % eingeloest ist weder gut noch schlecht, und ein rotes Feld wuerde eine Wertung behaupten, die aus der Zahl allein nicht folgt. */ .rs-verdict { margin:10px 0 10px } .rs-pct { font-size:1.9rem;font-weight:800;letter-spacing:-.02em; font-variant-numeric:tabular-nums } .rs-lede { font-size:13px;line-height:1.5;margin-top:4px } .rs-facts { display:grid;grid-template-columns:1fr 1fr;gap:8px } .rs-fact { background:var(--surface-medium);border-radius:10px; padding:8px 10px } .rs-fact .rs-k { font-size:var(--text-2xs);color:var(--muted);letter-spacing:.04em; text-transform:uppercase } .rs-fact .rs-v { font-size:14px;font-weight:800;margin-top:2px; font-variant-numeric:tabular-nums } .help-intro-t { font-size:15px;font-weight:800;margin-bottom:4px } .help-intro-s { font-size:12.5px;color:var(--muted);line-height:1.55 } .help-intro-row { display:flex;gap:8px;align-items:center;margin-top:12px } .help-intro-go { flex:1 1 auto;display:flex;align-items:center;gap:8px; justify-content:center;background:var(--cyan-dim);border:1px solid var(--cyan); color:var(--cyan);border-radius:12px;padding:10px 14px;font-size:13px; font-weight:800;font-family:inherit;cursor:pointer } /* "Kenn ich" bleibt bewusst leise. Wer wegtippt, soll das koennen, ohne dass der Weg dorthin genauso laut ist wie der Weg hinein. */ .help-intro-x { flex:0 0 auto;background:none;border:0;color:var(--muted); font-size:12px;font-family:inherit;cursor:pointer;padding:10px 4px } .help-card-sub { font-size:12px;color:var(--muted);line-height:1.55;margin-top:4px } .ry-help { margin:4px 0 2px;padding:10px 12px;background:var(--surface-dim); border:1px solid var(--border-subtle);border-radius:10px } .ry-help p { margin:0 0 8px;font-size:11.5px;line-height:1.55;color:var(--text) } .ry-help p:last-child { margin-bottom:0 } .ry-help b { color:var(--cyan) } .ry-help .ry-help-not { color:var(--muted) } .ry-chg { margin-top:10px;font-size:11px;line-height:1.5;color:var(--red) } .snd-dna-btn { display:flex;align-items:center;gap:10px;width:100%;margin:14px 0 4px;padding:13px 14px;font-size:14px;cursor:pointer;font-family:inherit;transition:transform .15s;text-align:left } .snd-dna-btn:active { transform:scale(.98) } .snd-dna-btn .snd-dna-sub { flex:1;font-size:var(--text-2xs);color:var(--muted);font-weight:600 } .snd-dna-btn .snd-dna-arrow { color:var(--cyan);font-size:18px;font-weight:800 } .ca-btn-dna { border-color:rgba(0,212,255,.45) } /* ── Nova Wallet Connect & Stake UI ─────────────── */ .wc-connect-row { display:flex;gap:8px;margin-top:8px;margin-bottom:8px } .wc-connect-btn { flex:1;padding:11px 14px;cursor:pointer;font-family:inherit;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px } .wc-connect-btn:active { transform:scale(.97) } .wc-connect-btn:disabled { opacity:.5;cursor:not-allowed } .wc-connect-btn.wc-disabled { opacity:.55;cursor:help;background:linear-gradient(135deg,#64748b,#475569) } .wc-connected-badge { display:inline-flex;align-items:center;gap:4px;padding:6px 10px;font-size:11px;color:var(--green);font-weight:600 } .wc-connected-badge.wc-session-dead { background:rgba(255,171,0,.12);border-color:rgba(255,171,0,.35);color:#ffab00 } .wc-disconnect-btn { background:none;border:none;color:var(--red);font-size:var(--text-2xs);cursor:pointer;margin-left:4px;opacity:.7 } .wc-disconnect-btn:hover { opacity:1 } .wc-reconnect-btn { display:flex;align-items:center;justify-content:center;gap:4px;margin-top:6px;background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:700;color:#fff;cursor:pointer;font-family:inherit;width:100%;transition:all .15s } .wc-reconnect-btn:active { transform:scale(.97) } .wc-pair-copy-btn { display:flex;align-items:center;justify-content:center;gap:4px;margin-top:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:9px 14px;font-size:12px;color:rgba(255,255,255,.7);cursor:pointer;font-family:inherit;width:100% } .wc-pair-copy-btn:active { background:rgba(255,255,255,.15) } /* Stake Modal Overlay */ .stake-overlay { position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1100;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s } .stake-overlay.visible { opacity:1;pointer-events:auto } .stake-sheet { width:100%;max-width:500px;max-height:85vh;border-radius:20px 20px 0 0;padding:24px 20px calc(32px + env(safe-area-inset-bottom, 16px));overflow-y:auto;transform:translateY(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);} .stake-overlay.visible .stake-sheet { transform:translateY(0) } .stake-handle { width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.15);margin:0 auto 16px } .stake-title { color:var(--text);margin-bottom:4px } .stake-subtitle { font-size:12px;color:var(--muted);margin-bottom:6px } .stake-move-lede { font-size:12px;color:var(--muted);line-height:1.5;margin:2px 0 12px } .wc-modal-status { font-size:11px;font-weight:600;padding:5px 10px;border-radius:8px;margin-bottom:12px;display:inline-flex;align-items:center;gap:4px } .wc-modal-status.wc-live { color:var(--green);background:rgba(47,212,138,.10);border:1px solid rgba(47,212,138,.25) } .wc-modal-status.wc-dead { color:#ffab00;background:rgba(255,171,0,.10);border:1px solid rgba(255,171,0,.25);cursor:pointer } .wc-modal-status.wc-none { color:var(--muted);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);cursor:pointer } .stake-input-group { margin-bottom:16px } .stake-input-label { font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:600 } .stake-input-row { display:flex;gap:8px;align-items:center } .stake-amount-input { flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:12px 14px;color:var(--text);font-size:16px;font-family:inherit;outline:none } .stake-amount-input:focus { border-color:rgba(46,211,224,.5) } .stake-max-btn { padding:8px 12px;font-size:12px;cursor:pointer;font-family:inherit } .stake-fee-breakdown { background:rgba(255,255,255,.04);border-radius:10px;padding:12px;margin-bottom:16px } .stake-fee-row { display:flex;justify-content:space-between;font-size:13px;padding:4px 0 } .stake-fee-row .lbl { color:var(--muted) } .stake-fee-row .val { font-weight:600;color:var(--text) } .stake-fee-row.total { border-top:1px solid rgba(255,255,255,.08);margin-top:4px;padding-top:8px;font-weight:700 } .stake-confirm-btn { width:100%;padding:14px;cursor:pointer;font-family:inherit;transition:all .15s } .stake-confirm-btn:active { transform:scale(.97) } .stake-confirm-btn:disabled { opacity:.5;cursor:not-allowed } .stake-sec-link { display:block;width:100%;margin-top:10px;padding:8px;background:transparent;border:none;color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;text-align:center;font-family:inherit;text-decoration:underline;text-underline-offset:3px;opacity:.75;transition:opacity .15s } .stake-sec-link:hover,.stake-sec-link:active { opacity:1;color:var(--cyan) } .sec-sheet { border-radius:20px 20px 0 0;padding:24px 20px 32px;max-height:85vh;overflow-y:auto;color:var(--text);font-size:14px;line-height:1.55 } .sec-sheet h3 { margin:0 0 12px;font-size:17px;font-weight:700;color:var(--text) } .sec-sheet p { margin:0 0 10px;color:var(--muted) } .sec-sheet strong { color:var(--text);font-weight:700 } .sec-sheet .sec-bullets { margin:6px 0 14px;padding-left:18px;color:var(--muted) } .sec-sheet .sec-bullets li { margin-bottom:6px } .sec-sheet .sec-actions { display:flex;flex-direction:column;gap:8px;margin-top:16px } .sec-sheet .sec-btn { width:100%;padding:12px;border-radius:10px;font-size:13px;cursor:pointer;font-family:inherit;text-align:center;text-decoration:none;display:block;transition:all .15s } .sec-sheet .sec-btn:active { transform:scale(.98);background:rgba(46,211,224,.18) } .sec-sheet .sec-close { width:100%;margin-top:8px;padding:12px;background:transparent;border:none;color:var(--muted);font-size:14px;cursor:pointer;font-family:inherit } .stake-status { text-align:center;padding:16px 20px;font-size:15px;line-height:1.5;word-break:break-word;border-radius:10px;margin-top:12px } .stake-status.pending { color:var(--muted) } .stake-status.success { color:var(--green) } .stake-status.error { color:var(--red);background:var(--red-glow);font-size:14px } .stake-hotkey-input { width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px;color:var(--text);font-size:12px;font-family:inherit;outline:none;margin-bottom:8px } .stake-hotkey-input:focus { border-color:rgba(46,211,224,.5) } /* Validator selector */ .stake-val-select { width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px;color:var(--text);font-size:12px;font-family:inherit;outline:none;margin-bottom:6px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2399a' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;cursor:pointer } .stake-val-select:focus { border-color:rgba(46,211,224,.5) } .stake-val-select option { background:var(--card-elevated);color:var(--text) } .stake-val-toggle { font-size:11px;color:var(--cyan);cursor:pointer;margin-bottom:8px;display:inline-block;opacity:.8 } .stake-val-toggle:hover { opacity:1;text-decoration:underline } .stake-val-loading { font-size:11px;color:var(--muted);margin-bottom:6px } /* Rich validator picker (replaces native