/* ═══════════════════════════════════════════════════════════════════════════════════════ FOTO-SKIN HIPHOP v1 (2026-07-18) — nach Mockups 30_GENRES/HIPHOP_UI_DETAIL_01-03.png Design-Sprache: Graffiti-Wand + Carbon-Panels mit NEON-Rahmen, Chrom-Transport, Phosphor-GRÜNES LCD mit Glühbirne (Melognite-Motiv), Foto-Knobs, Neon-Röhren-Slider, LCD-Seed-Zähler. Playbook §5 (Weg B): Fotos tragen Atmosphäre, Daten bleiben Overlays. Rollback: aus index.html entfernen. ═══════════════════════════════════════════════════════════════════════════════════════ */ /* ── §5.1 TOKEN-STRUKTUR (CSS liegt in skins/ -> relative Dateinamen) ── */ body{ --skin-knob:url('hh-knob.webp?v=hhui1'); --skin-chrome:url('hh-chrome.webp?v=hhui1'); --skin-bulb:url('hh-bulb.webp?v=hhui1'); --skin-bg:url('hh-bg.webp?v=hhui1'); --graffiti:'Rubik Spray Paint','Sedgwick Ave Display',var(--display),cursive; --lcd-green:#5cff72; --lcd-soft:#9be8a8; --lcd-glow:rgba(80,255,120,.55); --neon-amber:#ffb84d; --neon-magenta:#f24dff; --neon-cyan:#5ad8ff; --lvl:#ffb84d; /* Pegel-Bögen der Spur-Knobs: gold wie Mock 1 */ } /* ── §5.2 STIL-PALETTEN (Neon-Akzent je Stil; dunkle Basis identisch) ── */ body[data-stil="boom_bap"], body[data-stil="westlich"], body[data-stil="trap"], body[data-stil="drill"], body[data-stil="g_funk"], body[data-stil="lofi"]{ --bg-0:#0b0a10; --surf:rgba(26,25,36,.78); --surf-2:rgba(17,16,26,.88); --ln:rgba(255,255,255,.10); --ln-2:rgba(255,255,255,.17); --txt:#eef0f6; --lab:#c6cbde; --hnt:#8b90a8; --lcd-txt:#d8ffe0; --gk:#e8b64a; --gk-soft:rgba(232,182,74,.10); --gk-line:rgba(232,182,74,.4); /* Waveform/LCD-Aliase -> Phosphor-Grün (Mock 1) */ --wf-wave:#5cff72; --wf-accent:#5cff72; --wf-line:rgba(120,255,150,.16); --wf-line2:rgba(120,255,150,.26); --wf-bg:rgba(90,255,120,.05); --wf-surface:rgba(90,255,120,.04); /* Scope-Canvas (gfx() liest diese Tokens): Linie = Phosphor-Grün, Glow = dunkleres Grün */ --scope-line:#6bff80; --scope-glow:#2ea84a; --scope-glow2:#9bffae; } body[data-stil="boom_bap"], body[data-stil="westlich"]{ --acc:#ff9c2a; --acc-2:#ffce7a; --acc-glow:rgba(255,156,42,.55); --grad:linear-gradient(120deg,#c96f14,#ff9c2a); --cool:#5ad8ff; } body[data-stil="trap"]{ --acc:#ff2da0; --acc-2:#c94dff; --acc-glow:rgba(255,45,160,.55); --grad:linear-gradient(120deg,#a01a78,#ff2da0); --cool:#5ad8ff; } body[data-stil="drill"]{ --acc:#4db8ff; --acc-2:#a8d8ff; --acc-glow:rgba(77,184,255,.5); --grad:linear-gradient(120deg,#1e5e9e,#4db8ff); --cool:#c8d8e8; } body[data-stil="g_funk"]{ --acc:#7de83c; --acc-2:#c8ff8a; --acc-glow:rgba(125,232,60,.5); --grad:linear-gradient(120deg,#3e9e14,#7de83c); --cool:#ffce7a; } body[data-stil="lofi"]{ --acc:#b06bff; --acc-2:#e0a8ff; --acc-glow:rgba(176,107,255,.5); --grad:linear-gradient(120deg,#6a2ec8,#b06bff); --cool:#ff9c8a; } /* ── BODY: Graffiti-Wand (geblurter Mock als Farbfeld) + Vignette ── */ body{ background: radial-gradient(140% 70% at 50% 0%, rgba(20,16,30,.0), rgba(8,7,12,.55) 74%), linear-gradient(rgba(8,7,12,.38), rgba(8,7,12,.66)), var(--skin-bg) center/cover fixed, #0b0a10 !important; } body::after{ opacity:.06 } /* Grain leicht anheben (Wand-Patina) */ /* ── PANELS: Carbon + Neon-Rahmen (De-Uniforming: Akzent wechselt je Panel) ── */ .panel, details.adv{ --pacc:var(--acc); --pglow:var(--acc-glow); background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(0,0,0,.32) 60%), repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, rgba(0,0,0,0) 2px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,.20) 0 2px, rgba(0,0,0,0) 2px 5px), linear-gradient(180deg,#14131e,#0c0b14) !important; border:1px solid color-mix(in srgb, var(--pacc) 55%, #1a1a26) !important; border-radius:16px !important; box-shadow: 0 0 18px -7px var(--pglow), inset 0 0 26px -18px var(--pglow), inset 0 1px 0 rgba(255,255,255,.06), 0 16px 34px -20px rgba(0,0,0,.9) !important; } .panel:nth-of-type(2n), details.adv:nth-of-type(2n){ --pacc:var(--cool); --pglow:color-mix(in srgb, var(--cool) 50%, transparent); } .zone{ color:#a8c8e8; text-shadow:0 1px 2px rgba(0,0,0,.8); } .zone .ln{ background:linear-gradient(90deg, var(--pglow, var(--acc-glow)), transparent); } .flabel{ color:#a8c8e8; text-shadow:0 1px 2px rgba(0,0,0,.7); } /* ── STIL-REITER: Graffiti-Tags (Spray-Font, je Stil eigene Spray-Farbe) ── */ .tab{ font-family:var(--graffiti) !important; font-weight:400 !important; font-size:12px !important; letter-spacing:.03em !important; background:linear-gradient(165deg,#1c1b28,#0e0d16) !important; border:1px solid rgba(255,255,255,.12) !important; border-bottom:none !important; text-shadow:0 2px 3px rgba(0,0,0,.9), 0 0 12px currentColor !important; } .tab-boom_bap{ color:#ffb04d !important } .tab-westlich{ color:#ffb04d !important } .tab-trap{ color:#ff5dc8 !important } .tab-drill{ color:#7cc8ff !important } .tab-g_funk{ color:#8dff5c !important } .tab-lofi{ color:#c89cff !important } .tab:not(.on):not(.locked){ opacity:.72; transform:translateY(3px); filter:saturate(.85); } .tab.on{ background:linear-gradient(165deg,#26243a,#131220) !important; box-shadow:inset 0 0 0 2px var(--acc), inset 0 0 16px -6px var(--acc-glow), 0 -4px 20px -6px var(--acc-glow) !important; } .tab.on::after{ background:linear-gradient(90deg, transparent, var(--acc), transparent) !important; height:3px !important; } .tab .ab{ font-size:7px } /* ── LCD: Phosphor-Grün + LED-Grid + GLÜHBIRNE (Melognite-Motiv, Mock 1) ── */ .lcd{ background: radial-gradient(120% 100% at 50% 8%, rgba(80,255,120,.10), transparent 55%), repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90,255,120,.028) 0 3px, transparent 3px 7px), linear-gradient(180deg,#081408,#050a06) !important; border:1px solid #26382a !important; border-top:none !important; box-shadow: inset 0 0 46px rgba(0,0,0,.72), inset 0 0 90px -40px rgba(60,255,100,.22), 0 12px 30px -18px #000 !important; } .lcd::before{ /* Glühbirne zentral hinter der Welle — Kanten weich maskiert */ content:'' !important; inset:0 !important; height:auto !important; z-index:1 !important; background:var(--skin-bulb) center 30%/auto 88% no-repeat !important; opacity:.8 !important; -webkit-mask-image:radial-gradient(56% 78% at 50% 45%, #000 42%, transparent 78%); mask-image:radial-gradient(56% 78% at 50% 45%, #000 42%, transparent 78%); pointer-events:none; } .lcdtitle{ color:var(--lcd-soft) !important; text-shadow:0 0 14px var(--lcd-glow), 0 1px 2px #000 !important; } .bpmread b{ color:var(--lcd-green) !important; font-family:var(--mono) !important; text-shadow:0 0 16px var(--lcd-glow), 0 1px 2px #000 !important; } .bpmread span{ color:var(--lcd-soft) !important; } .vlabel{ color:var(--lcd-soft) !important; } .vb{ background:rgba(8,20,10,.72) !important; border:1px solid #2c4a30 !important; color:var(--lcd-soft) !important; } .vb.on{ background:rgba(16,28,14,.9) !important; color:#ffd9a0 !important; box-shadow:inset 0 0 0 1.6px var(--neon-amber), 0 0 12px -3px rgba(255,184,77,.6) !important; } canvas.timeline{ background:rgba(0,10,4,.45) !important; } .lcdfoot{ background:rgba(0,8,3,.55) !important; color:var(--lcd-soft) !important; } .lcdfoot .k{ color:var(--neon-amber) !important; } #scopeCursor{ background:linear-gradient(180deg,#fff,var(--lcd-green)) !important; box-shadow:0 0 10px var(--lcd-green) !important; } #genFill{ background:linear-gradient(90deg, rgba(90,255,120,.05), rgba(90,255,120,.20)) !important; border-right:2px solid rgba(140,255,170,.95) !important; box-shadow:0 0 16px rgba(90,255,120,.55) !important; } /* ── TRANSPORT: FORGE = dunkle Bar + Neon-Rahmen + Graffiti-Chrom-Schrift (Mock 1) ── */ .forge{ font-family:var(--graffiti) !important; font-weight:400 !important; font-size:17px !important; letter-spacing:.06em !important; background:linear-gradient(180deg,#232230,#0e0d16) !important; border:2px solid var(--acc) !important; border-radius:12px !important; color:#f2f3f8 !important; text-shadow:0 2px 4px rgba(0,0,0,.95), 0 0 14px rgba(255,255,255,.28) !important; box-shadow:0 0 24px -6px var(--acc-glow), inset 0 0 20px -10px var(--acc-glow), 0 12px 26px -14px #000 !important; } .forge::before{ display:none } /* Chrom-Buttons (PLAY/STOP/EXPORT + Reset-Stack): gebürsteter Stahl, dunkle Gravur */ .tbtn{ background:linear-gradient(rgba(255,255,255,.05),rgba(0,0,0,.22)), var(--skin-chrome) center/cover !important; border:1px solid #6a6d76 !important; border-radius:10px !important; color:#15161c !important; font-weight:700 !important; text-shadow:0 1px 0 rgba(255,255,255,.55) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -3px 6px rgba(0,0,0,.30), 0 4px 10px -4px #000 !important; } .tbtn:hover{ color:#000 !important; filter:brightness(1.07); } .tbtn .ic{ color:#0a8c2c !important; filter:drop-shadow(0 0 4px rgba(40,255,90,.9)); } #stop .ic{ color:#c81a1a !important; filter:drop-shadow(0 0 4px rgba(255,60,60,.8)); } .tbtn.playing{ box-shadow:inset 0 0 0 2px #46e868, 0 0 16px -3px rgba(70,232,104,.7), inset 0 1px 0 rgba(255,255,255,.65) !important; color:#0a3a14 !important; } .tbtn:disabled{ opacity:.42 !important; filter:grayscale(.5); } .tbtn.locked .cnt{ color:#7a5c14 !important; } .tbtn .extag{ color:#3a2c08 !important; background:rgba(232,182,74,.35) !important; border-color:rgba(90,70,20,.5) !important; } /* Reset-Stack (Reset UI / Reset 🔊): dunkle Utility-Buttons, lesbar (Mock 1 rechts) — .tbar-Präfix schlägt die spätere Inline-Regel .tbtnstack .tbtn-stk (background-image:none) */ .tbar .tbtnstack .tbtn-stk{ background-image:linear-gradient(180deg,#2c2e38,#171820) !important; background-color:#171820 !important; color:#c6cbde !important; border:1px solid #4a4d58 !important; text-shadow:0 1px 2px rgba(0,0,0,.9) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 3px 8px -4px #000 !important; } .tbar .tbtnstack .tbtn-stk:hover{ color:#fff !important; border-color:#6a6d78 !important; } /* ── INSTRUMENTE: dunkle Pads, aktiv = GOLD-Pad (Mock 1 „Piano") ── */ .sbtn{ background:linear-gradient(180deg,#1b1a26,#100f18) !important; border:1px solid rgba(255,255,255,.10) !important; color:#ccd1e2 !important; border-radius:10px !important; text-shadow:0 1px 2px rgba(0,0,0,.8); } .sbtn.on{ background:linear-gradient(180deg,#eec05a,#c08a20) !important; color:#221604 !important; border-color:#ffdf9c !important; font-weight:700 !important; text-shadow:0 1px 0 rgba(255,244,214,.55) !important; box-shadow:0 0 16px -4px rgba(255,190,80,.65), inset 0 1px 0 rgba(255,240,200,.8), inset 0 -4px 9px rgba(120,70,10,.45) !important; } .instpanel{ background-image:linear-gradient(180deg, color-mix(in srgb, var(--acc) 10%, transparent), transparent 55%) !important; } /* ── SPUR-KNOBS: Foto-Kopf (Mock 1) + Gold-Bogen; LIVE = grüne LED-Badge ── */ .vknob{ border:none !important; background:radial-gradient(circle at 50% 42%, #23222e 52%, #08080e 100%) !important; overflow:visible !important; } .vknob .vcap{ inset:3px !important; border:none !important; border-radius:50% !important; background:var(--skin-knob) center/cover no-repeat !important; font-size:0 !important; /* Emoji-Icon aus — der Foto-Knopf trägt die Fläche, Label steht darunter */ box-shadow:0 3px 8px -2px rgba(0,0,0,.8); } .vknob .varc{ filter:drop-shadow(0 0 5px rgba(255,184,77,.55)) !important; } .trk.off .vcap{ opacity:.55 !important; filter:grayscale(.4) brightness(.75); } .trk.gated .vknob{ opacity:1 !important; filter:grayscale(.6) brightness(.55) !important; } .trklabel{ color:#ccd1e2 !important; } .trkstate.live{ color:#7dffa0 !important; background:rgba(40,255,90,.10); border:1px solid rgba(70,232,104,.5); border-radius:5px; padding:1px 6px; text-shadow:0 0 8px rgba(70,232,104,.7); } .trkreload{ background:linear-gradient(rgba(255,255,255,.05),rgba(0,0,0,.22)), var(--skin-chrome) center/cover !important; color:#15161c !important; border:1px solid #6a6d76 !important; border-radius:7px !important; text-shadow:0 1px 0 rgba(255,255,255,.5) !important; transition:transform .12s, box-shadow .12s; } /* Reload-Feedback (JS setzt .rlflash für 520ms — CSS starb mit dem Alt-Skin, hier neu): Dreh + Amber-Glow */ .trkreload.rlflash{ animation:rlspin .5s ease; color:#7a4a00 !important; box-shadow:0 0 14px 2px rgba(255,184,77,.85), inset 0 0 8px rgba(255,184,77,.55) !important; border-color:var(--neon-amber) !important; } @keyframes rlspin{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } } /* R38 Zyklus-SCHALTER unter den Reglern: waagerecht, Chrom-Beschriftungsplatte (Funktion) + LCD-Wertfenster (3-Letter-Wert). Ersetzt die vertikalen Buchstaben-Chips (r021). */ .sscyc{ display:inline-flex; flex-direction:row; align-items:stretch; min-width:0; padding:0 !important; overflow:hidden; cursor:pointer; background:linear-gradient(rgba(255,255,255,.07),rgba(0,0,0,.28)), var(--skin-chrome) center/cover !important; border:1px solid #5a5e68 !important; border-radius:6px !important; font-family:var(--mono) !important; line-height:1 !important; box-shadow:0 1px 3px rgba(0,0,0,.5) !important; } .sscyc .scl{ display:flex; align-items:center; padding:3px 5px !important; font-size:8px !important; font-weight:700 !important; letter-spacing:.08em; color:#23252c !important; text-shadow:0 1px 0 rgba(255,255,255,.45) !important; } .sscyc .scv{ display:flex; align-items:center; padding:3px 6px !important; min-width:24px; justify-content:center; font-size:9px !important; font-weight:600 !important; letter-spacing:.06em; text-transform:uppercase; background:#081008 !important; color:var(--lcd-green) !important; border-left:1px solid #2c4a30 !important; text-shadow:0 0 6px rgba(90,255,120,.45) !important; box-shadow:inset 0 1px 4px rgba(0,0,0,.7) !important; } .sscyc:hover{ border-color:#46e868 !important; box-shadow:0 0 8px -2px rgba(70,232,104,.6) !important; } .sscyc:active .scv{ color:#c8ffd4 !important; text-shadow:0 0 10px rgba(120,255,150,.8) !important; } /* R40 (User-Screenshot): (1) fr-min-content-Falle — Spalten mit Schaltern drückten die Chords- Spalte schmal, deren Knopf (width:100%) schrumpfte mit -> gleiche Spaltenbreiten erzwingen. (2) Wertfenster bricht nie um (E-B brach am Bindestrich). */ .tracks{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } /* HipHop hat 5 Spuren (kein Riff) — 6. Spalte war immer leer */ .sscyc{ max-width:100%; } .sscyc .scl, .sscyc .scv{ white-space:nowrap; } @media (max-width:900px), (pointer:coarse){ /* schmale Spalten: Schalter kompakt, nichts clippt */ .sscyc .scl{ padding:3px 3px !important; font-size:7px !important; letter-spacing:.03em; } .sscyc .scv{ padding:3px 4px !important; font-size:8.5px !important; min-width:16px; } } /* R42: Sing./Acc.-Schalter komplett entfernt (Doppel-Steuerung zu MODE AUT/SGL/AKK) — die in R40 neu gebaute .mvsw-CSS ging mit; MODE ist die einzige Melodie-Umschaltstelle. */ /* ── BPM-KNOB: Chrom-Lünette + LCD-grüne Anzeige (Mock 2 Tempo-Dial) ── */ .knob{ border:none !important; background:conic-gradient(#d8dbe2, #7a7e88 12%, #eceef2 25%, #8a8e98 40%, #dfe2e8 55%, #74788a 70%, #e8eaef 85%, #d8dbe2) !important; box-shadow:0 0 0 1px #3a3d46, 0 4px 12px -4px #000, inset 0 0 4px rgba(0,0,0,.4) !important; } .knob .cap{ inset:5px !important; background:radial-gradient(circle at 50% 38%, #10241a, #060f0a 75%) !important; border:1px solid #2c4a30 !important; } .knob .kval{ color:var(--lcd-green) !important; font-family:var(--mono) !important; text-shadow:0 0 12px var(--lcd-glow) !important; } .knob .ind{ background:var(--lcd-green) !important; box-shadow:0 0 8px var(--lcd-green) !important; } .klabel{ color:#8b90a8 !important; } /* ── SEGMENTE/STEPPER: dunkles Metall, aktiv = GRÜNER Neon-Rahmen (Mock 2 „AUTO"/„4/4") ── */ .seg{ background:rgba(10,10,16,.6) !important; border-color:#3a3d4a !important; } .seg button{ color:#b8bed2 !important; } .seg button.on, .ctbtn.on, #modeSeg button.on{ background:rgba(14,24,16,.92) !important; color:#8dffa0 !important; box-shadow:inset 0 0 0 2px #46e868, 0 0 14px -3px rgba(70,232,104,.6) !important; text-shadow:0 0 10px rgba(70,232,104,.6) !important; border-color:transparent !important; } #modeSeg button{ background:rgba(10,10,16,.6) !important; border:1px solid #3a3d4a !important; } .stepper{ background:rgba(10,10,16,.6) !important; border-color:#3a3d4a !important; } .stepper .val{ color:var(--lcd-green) !important; font-family:var(--mono) !important; text-shadow:0 0 10px var(--lcd-glow) !important; } .ctoggle{ background:rgba(10,10,16,.6) !important; border-color:#3a3d4a !important; } .ctbtn{ color:#b8bed2 !important; } .cinst{ background:rgba(10,10,16,.7) !important; border-color:#3a3d4a !important; color:#c6cbde !important; } /* ── PLAN/TIER (Mock 1): dunkle Buttons mit Neon-Outline, aktiv = MAGENTA („PRO"-Neon) ── */ .tierpanel{ background:linear-gradient(165deg,#15141f,#0c0b14) !important; border-color:#3a3d4a !important; } .tierpanel .flabel{ color:#a8c8e8 !important; } #tierSeg{ gap:6px; border:none !important; background:transparent !important; overflow:visible !important; } #tierSeg button{ border:1px solid #3e4252 !important; border-radius:9px !important; background:rgba(12,12,20,.78) !important; color:#9fb4d8 !important; } #tierSeg button.on{ background:rgba(28,14,32,.92) !important; color:#f2b3ff !important; box-shadow:inset 0 0 0 2px var(--neon-magenta), 0 0 16px -3px rgba(242,77,255,.65) !important; text-shadow:0 0 10px rgba(242,77,255,.6) !important; } #qualSeg button.on{ background:rgba(30,22,10,.92) !important; color:#ffd9a0 !important; box-shadow:inset 0 0 0 2px var(--neon-amber), 0 0 12px -3px rgba(255,184,77,.65) !important; text-shadow:0 0 10px rgba(255,184,77,.55) !important; } /* ── SONG FORM (Mock 2): abwechselnd Silber-Metall / dunkel+eisblau, aktiv = grüner Neon ── */ .formgrid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; } /* Mobile-Overflow-Fix: Spalten dürfen schrumpfen, fseq-Ellipsis greift */ .fbtn{ min-width:0; } .fbtn .fseq{ overflow:hidden; } .fbtn{ background:linear-gradient(180deg,#191826,#0f0e18) !important; border:1px solid rgba(255,255,255,.10) !important; color:#a8d8ff !important; border-radius:10px !important; } .fbtn .fseq{ color:#6a7a9a !important; } .fbtn:nth-child(4n+2), .fbtn:nth-child(4n+3){ background:linear-gradient(180deg,#d4d7df,#8f939e) !important; color:#1a1c24 !important; border-color:#b8bcc8 !important; text-shadow:0 1px 0 rgba(255,255,255,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 6px rgba(0,0,0,.22); } .fbtn:nth-child(4n+2) .fseq, .fbtn:nth-child(4n+3) .fseq{ color:#3c4252 !important; } .fbtn.on, .fbtn:nth-child(4n+2).on, .fbtn:nth-child(4n+3).on{ background:rgba(14,24,16,.94) !important; color:#8dffa0 !important; border-color:transparent !important; box-shadow:inset 0 0 0 2px #46e868, 0 0 14px -3px rgba(70,232,104,.6) !important; text-shadow:0 0 10px rgba(70,232,104,.55) !important; } .fbtn.on .fseq{ color:#5cba70 !important; } .formcount{ background:#081008 !important; border:1px solid #2c4a30 !important; color:var(--lcd-green) !important; font-family:var(--mono) !important; text-shadow:0 0 8px rgba(90,255,120,.5) !important; } /* Sektionen: gewählte = grüne Neon-Chips, Pool = amber Neon, LEEREN = magenta (Mock 2) */ .secchip{ background:rgba(14,24,16,.85) !important; border:1px solid rgba(70,232,104,.55) !important; color:#8dffa0 !important; box-shadow:0 0 10px -4px rgba(70,232,104,.5); text-shadow:0 0 8px rgba(70,232,104,.4); } .secchip .mv,.secchip .x{ color:#5cba70 !important; } .secchip .x:hover{ color:#ff5d6a !important; } .pbtn{ border:1px solid rgba(255,184,77,.5) !important; border-style:solid !important; color:#ffd9a0 !important; background:rgba(30,22,10,.5) !important; border-radius:8px !important; text-shadow:0 0 8px rgba(255,184,77,.35); } .pbtn .pl{ color:var(--neon-amber) !important; } .pbtn:hover{ box-shadow:0 0 10px -3px rgba(255,184,77,.6); border-color:var(--neon-amber) !important; } .secclear{ border:1px solid rgba(242,77,255,.55) !important; color:#f2b3ff !important; background:rgba(28,14,32,.6) !important; border-radius:8px !important; text-shadow:0 0 8px rgba(242,77,255,.4); } /* ── GENERATION PARAMETERS (Mock 3): Neon-Röhren-Slider + LCD-Wertboxen ── */ .track{ height:12px !important; border-radius:8px !important; background:linear-gradient(180deg,#07070d,#12121c) !important; border:1px solid #3a3d4a !important; box-shadow:inset 0 2px 4px rgba(0,0,0,.8), 0 0 10px -4px var(--acc-glow) !important; } .fill{ border-radius:8px !important; background:linear-gradient(90deg,#46e868,#39c8e8 45%,#b04de8) !important; box-shadow:0 0 12px -2px rgba(120,210,255,.75), inset 0 1px 0 rgba(255,255,255,.35) !important; } .sval{ font-family:var(--mono) !important; font-size:11px !important; color:var(--lcd-green) !important; background:#081008 !important; border:1px solid #2c4a30 !important; border-radius:6px !important; padding:3px 6px !important; min-width:44px !important; text-align:center !important; text-shadow:0 0 8px rgba(90,255,120,.55) !important; } #genDefault{ background:linear-gradient(180deg, rgba(90,216,255,.16), rgba(8,16,24,.75)) !important; border:1px solid rgba(90,216,255,.6) !important; color:#bfeaff !important; border-radius:999px !important; box-shadow:0 0 16px -4px rgba(90,216,255,.6), inset 0 0 14px -7px rgba(90,216,255,.55) !important; text-shadow:0 0 10px rgba(90,216,255,.5) !important; } /* ── SEED & HISTORY (Mock 3): LCD-Zählwerk + Amber-Lock + Violett-Shuffle ── */ .seedbox{ background:#040804 !important; border:2px solid #3a3f4a !important; border-radius:9px !important; color:var(--lcd-green) !important; font-family:var(--mono) !important; letter-spacing:.16em !important; text-shadow:0 0 12px var(--lcd-glow) !important; box-shadow:inset 0 2px 10px rgba(0,0,0,.9), inset 0 0 24px -12px rgba(90,255,120,.35) !important; } #seedLock{ border:1px solid rgba(255,184,77,.6) !important; color:var(--neon-amber) !important; background:rgba(30,22,10,.7) !important; border-radius:9px !important; box-shadow:0 0 12px -4px rgba(255,184,77,.6), inset 0 0 10px -6px rgba(255,184,77,.5) !important; } #seedRnd{ border:1px solid rgba(176,107,255,.6) !important; color:#d8b8ff !important; background:rgba(22,14,32,.7) !important; border-radius:9px !important; box-shadow:0 0 12px -4px rgba(176,107,255,.6), inset 0 0 10px -6px rgba(176,107,255,.5) !important; } .hchip{ background:#060a06 !important; border:1px solid rgba(70,232,104,.5) !important; color:#8dffa0 !important; font-family:var(--mono) !important; text-shadow:0 0 8px rgba(70,232,104,.45) !important; border-radius:7px !important; } .hchip:nth-child(2n){ border-color:rgba(176,107,255,.55) !important; color:#d8b8ff !important; text-shadow:0 0 8px rgba(176,107,255,.5) !important; } .hchip .s{ color:inherit !important; opacity:.75; } /* ── §5.4 TIER-PLAKETTEN (Farbregel: BASIC s/w, STANDARD Silber, PRO Gold — eingestanzt) ── */ .t-basic{ background:#111 !important; color:#fff !important; border:1px solid #fff !important; border-radius:4px !important; } .t-standard{ background:linear-gradient(180deg,#e8e9f0,#9a9dab) !important; color:#23252e !important; border:1px solid #70737f !important; text-shadow:0 1px 0 rgba(255,255,255,.6) !important; border-radius:4px !important; } .t-pro{ background:linear-gradient(180deg,#f4d98a,#c2952c) !important; color:#3a2606 !important; border:1px solid #8a6a1a !important; text-shadow:0 1px 0 rgba(255,240,200,.65) !important; border-radius:4px !important; } .plock{ color:#e8c264 !important; border-color:rgba(232,182,74,.5) !important; } /* ── SPLASH: dunkle Wand + grün-amber Neon statt Synthwave-Pink ── */ .splash{ background:linear-gradient(rgba(8,7,12,.82),rgba(8,7,12,.94)), var(--skin-bg) center/cover, #0b0a10 !important; } .splashLogo{ text-shadow:0 0 26px rgba(90,255,120,.55) !important; } .splashLogo span{ color:var(--lcd-green) !important; } .splashTitle{ text-shadow:0 0 30px rgba(90,255,120,.4) !important; } .splashTitle .ed{ background:linear-gradient(120deg,#ffb84d,#5cff72 60%,#39c8e8) !important; -webkit-background-clip:text !important; background-clip:text !important; } .splashBar{ background:linear-gradient(90deg,#46e868,#39c8e8) !important; } .splashBtn{ background:linear-gradient(120deg,#2a9e4a,#1c7ac8) !important; box-shadow:0 10px 30px -8px rgba(70,232,104,.4), 0 1px 0 rgba(255,255,255,.35) inset !important; } .splashEmail:focus{ border-color:#46e868 !important; box-shadow:0 0 0 3px rgba(70,232,104,.18) !important; } .splashSub,.splashTipHead{ color:#8b90a8 !important; } /* ── MOBILE PAINT-BUDGET (2026-07-19, User: „Scrollen zerstört den Sound"): Android repainted bei background-attachment:fixed + fixed Grain-Overlay + großen Glow-Schatten JEDEN Scroll-Frame → Main-Thread verhungert → Tone.js-Scheduling stolpert (hörbare Störungen). Auf Touch/schmal: billige Layer — Neon-Identität bleibt über die farbigen Rahmen erhalten. ── */ @media (pointer:coarse), (max-width:900px){ body{ background-attachment:scroll, scroll, scroll !important; } body::after{ display:none !important; } /* Grain (fixed + mix-blend) = teuerster Layer */ .panel, details.adv{ box-shadow:0 10px 22px -16px rgba(0,0,0,.85) !important; } /* Glows aus, Rahmen trägt den Neon-Look */ .lcd{ box-shadow:inset 0 0 28px rgba(0,0,0,.6) !important; } .vb{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .forge{ box-shadow:0 8px 18px -10px rgba(0,0,0,.8) !important; } .tab.on{ box-shadow:inset 0 0 0 2px var(--acc) !important; } } /* ── Kleinkram: Footer, Scrollbar, Diagnose-Elemente ── */ .serial{ color:#5c8a64 !important; text-shadow:0 0 6px rgba(90,255,120,.25); padding-bottom:26px !important; } /* Luft für die fixe Diagnose-Zeile darunter (User: „letzte Zeile überlappt") */ #rDbg{ opacity:.5; font-size:8px !important; max-width:46vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } ::-webkit-scrollbar{ width:11px; height:11px; } ::-webkit-scrollbar-track{ background:#0a0a12; } ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#d4d7df,#8f939e) !important; border-radius:6px; border:2px solid #0a0a12; }