/* =================================================================================== skin.css — a makettek szerinti SÖTÉT konzol-bőr. Betöltve a styles.css UTÁN; a osztálya: "beta skin2". MIÉRT KÜLÖN FÁJL, ÉS MIÉRT MARAD A `beta` OSZTÁLY? A styles.css ma ÖT egymásra rakott réteg, benne HÁROM külön `body.beta` token-blokkal (:1395 világos, :1438 sötét, :2201 funkciószínek). Egy hatodikat ugyanabba a fájlba írni azt jelentené, hogy a következő fejlesztő 2700 sorban keresi, melyik szabály nyer. A `beta` osztály LEVÉTELE viszont NEM megoldás: azonnal stílus nélkül hagyná mindazt, ami még nem épült át — a menüből kivett, de a DOM-ban élő `sounds` / `boosters` / `obs` nézeteket, és a videó-kategória alnézetet (a legtöbbet használt képernyőt, amit a terv szándékosan érintetlenül hagy). Ezért marad, és helyette PONTOSABB SZELEKTORRAL nyerünk, nem !important-tal: body.skin2 → alap body.beta.skin2 → üti a body.beta-t (:1395, :2201) :root:not([data-theme="light"]) body.beta.skin2 → üti a sötét beta-blokkot (:1438) Két osztály nyer egy fölött, azonos mélységnél. Ha egy változó átírásának NINCS látható hatása, akkor a szelektor rossz — nem az van, hogy „nem működik a CSS". ⚠️ A régi `--x-rgb` triókat UGYANAZOKKAL a nevekkel újra kell definiálni: 332 régi szabály hivatkozik rájuk `rgba(var(--x-rgb), …)` formában. Így a még át nem épített panelek maguktól belesimulnak az új palettába. A színkódok a makett-képekből visszamért KÖZELÍTÉSEK (±1-2 árnyalat) — pontos színkód nem volt a képek mellett. A méretek ×1,284-del vannak visszaszámolva (a makett egy ~1440 px széles dizájn kicsinyítése). Terv: docs/TERV-KONZOL-SOTET-REDESIGN.md — 9.2 (változók), 9.7/b (ez a döntés), 4.5 (a rétegek). =================================================================================== */ /* =================================================================================== 1. VÁLTOZÓK =================================================================================== */ body.skin2, body.beta.skin2, :root:not([data-theme="light"]) body.beta.skin2 { /* --- alapfelületek ------------------------------------------------------------- */ --bg: #030d19; /* sík, sötét navy — a mai lila/cián ragyogás nélkül */ --bg-2: #030b16; /* felső sáv: egy árnyalattal sötétebb */ --panel: #0d1725; /* kártya: TÖMÖR szín, nincs áttetsző üveghatás */ --surface: #121b2a; /* kártyán belüli csempe */ --surface-2: #1a2433; /* mező, kiemelt csempe */ --field: #131d2c; /* beviteli mező háttere */ --line: #1f2a3a; /* kártya-keret — sokkal LÁTHATÓBB, mint a mai halvány */ --line-2: #2c3a4d; /* erősebb keret / hover */ --text: #ffffff; --muted: #a3adbd; --muted-2: #8b95a6; --eyebrow: #7fb5f9; /* --- brand-akcentek ------------------------------------------------------------ */ --accent: #2666f0; --accent-2: #722ed2; --accent-cyan: #18b8fc; /* az aktív menüpont bal éli fénycsíkja */ --accent-cyan-rgb: 24, 184, 252; --ok: #10b981; --live: #22c55e; --new: #ec4899; /* a „NEW" címke rózsaszín-magenta */ --switch-on: #2653db; --switch-on-2: #1a4dd4; --switch-off: #8a9098; /* --- gradiensek ---------------------------------------------------------------- */ --grad: linear-gradient(90deg, #2666f0, #722ed2); --grad-cta: linear-gradient(90deg, #e9519d, #8f39c4 45%, #2f6bf4); --grad-title: linear-gradient(90deg, #38bdf8, #6f77fe 50%, #b15ad8); --grad-cyan: linear-gradient(120deg, #38bdf8, #6f77fe 60%, #b15ad8); --grad-soft: linear-gradient(125deg, rgba(38,102,240,.14), rgba(114,46,210,.10)); /* --- a régi paletta nevei, ÚJ értékekkel --------------------------------------- Ezekre 332 meglévő szabály hivatkozik. Nem átnevezzük őket, hanem átfestjük — így a még át nem épített panelek (sounds, boosters, obs, videó-kategória) is az új palettát kapják. */ --cyan: #38bdf8; --cyan-rgb: 56, 189, 248; --blue: #2666f0; --blue-rgb: 38, 102, 240; --violet: #722ed2; --violet-rgb: 114, 46, 210; --green: #10b981; --green-rgb: 16, 185, 129; --red: #f0537d; --red-rgb: 240, 83, 125; --yellow: #f5b83d; --yellow-rgb: 245, 184, 61; --pink: #ec4899; --pink-rgb: 236, 72, 153; --orange: #f08a3d; --orange-rgb: 240, 138, 61; --teal: #229695; --teal-rgb: 34, 150, 149; --brand-pink: #e9519d; --brand-pink-rgb: 233, 81, 157; --gold: #f5c451; --silver: #cdd6e6; --bronze: #e0915a; /* --- funkciószínek (menüikon + „Your toolkit" csempe + oldalcímke) -------------- Az ÚJ makett-színek nyernek a 2026-07-es V3.1 készlet felett (terv 15/5.). */ --fun-home: #4f7fe0; --fun-home-rgb: 79, 127, 224; --fun-video: #407bca; --fun-video-rgb: 64, 123, 202; --fun-widget: #229695; --fun-widget-rgb: 34, 150, 149; --fun-tts: #bb4f79; --fun-tts-rgb: 187, 79, 121; --fun-fx: #5a41a2; --fun-fx-rgb: 90, 65, 162; --fun-apps: #6645a0; --fun-apps-rgb: 102, 69, 160; --fun-remote: #18b8fc; --fun-remote-rgb: 24, 184, 252; --fun-guide: #3b82f6; --fun-guide-rgb: 59, 130, 246; --fun-stats: #10b981; --fun-stats-rgb: 16, 185, 129; --fun-invite: #ec4899; --fun-invite-rgb: 236, 72, 153; --fun-live: #22c55e; --fun-live-rgb: 34, 197, 94; --fun-gold: #f5b83d; --fun-gold-rgb: 245, 184, 61; /* --- forma és méret ------------------------------------------------------------ A makett 1122 px széles, de az egy ~1440 px-es dizájn 0,78-as kicsinyítése. Minden méret ×1,284-gyel visszaszámolva — a nyers képpontokat beírva a felület ~22%-kal zsúfoltabb lenne, mint amit a tulajdonos a képen lát (terv 9.1). */ --radius: 18px; --radius-sm: 12px; --radius-pill: 999px; --sidenav-w: 240px; --rail-w: 300px; --page-pad: 28px; --card-pad: 25px; --nav-item-h: 52px; --btn-h: 48px; /* Sötét háttéren a klasszikus vetett árnyék nem látszik — a mélységet a keret és a világosabb belső tónus adja. Ragyogás CSAK az akcenteken. */ --shadow: none; --shadow-soft: none; --glow-accent: 0 8px 24px rgba(37, 99, 235, .35); /* A betűtípusok eddig a body.beta blokktól függtek — a :root-ban Outfit/Manrope állt, ami SOSEM töltődik be. Itt egy szinten van mindkettő. */ --font: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif; /* ⚠️ A `color-scheme` ÖRÖKLŐDŐ tulajdonság, és a ``-ra írt érték KÖZELEBB van a