/* ========================================================================== SHOW ЕГЭ · Пользовательские палитры и шрифты Применяется через data-атрибуты на (их ставит inline-скрипт в обоих base-шаблонов на основе localStorage). "original" трактуется как отсутствие оверрайда — поэтому здесь есть блоки только для "neutral", "ocean", "sunset". ========================================================================== */ /* ========================================================================== CSS-переменные акцентов: 3 цвета темы + rgb-варианты для alpha Используются всем сайтом вместо хардкода #7c5cff/#25d6ff/#2ee59d и т.п., чтобы при смене палитры менялись все hover-акценты, градиенты заголовков, hover-обводки и т.д. ========================================================================== */ :root { --c-acc-1: #7c5cff; --c-acc-1-rgb: 124,92,255; --c-acc-2: #25d6ff; --c-acc-2-rgb: 37,214,255; --c-acc-3: #2ee59d; --c-acc-3-rgb: 46,229,157; --c-title-edge: rgba(234,240,255,.95); } body.light { --c-acc-1: #5b3fcc; --c-acc-1-rgb: 91,63,204; --c-acc-2: #1a9fd4; --c-acc-2-rgb: 26,159,212; --c-acc-3: #0e8555; --c-acc-3-rgb: 14,133,85; --c-title-edge: #1c1540; } /* DARK palettes */ html[data-palette-dark="neutral"] body:not(.light){ --c-acc-1:#6b7280; --c-acc-1-rgb:107,114,128; --c-acc-2:#4a4e5e; --c-acc-2-rgb:74,78,94; --c-acc-3:#9aa3b2; --c-acc-3-rgb:154,163,178; --c-title-edge: rgba(230,232,240,.95); } html[data-palette-dark="ocean"] body:not(.light){ --c-acc-1:#00d4b4; --c-acc-1-rgb:0,212,180; --c-acc-2:#2a9dff; --c-acc-2-rgb:42,157,255; --c-acc-3:#3a6dff; --c-acc-3-rgb:58,109,255; --c-title-edge: rgba(226,248,252,.95); } html[data-palette-dark="aurora"] body:not(.light){ --c-acc-1:#3ee5a5; --c-acc-1-rgb:62,229,165; --c-acc-2:#2dd1ff; --c-acc-2-rgb:45,209,255; --c-acc-3:#8b5cff; --c-acc-3-rgb:139,92,255; --c-title-edge: rgba(228,240,252,.95); } html[data-palette-dark="cyber"] body:not(.light){ --c-acc-1:#ff2eb4; --c-acc-1-rgb:255,46,180; --c-acc-2:#b952ff; --c-acc-2-rgb:185,82,255; --c-acc-3:#28e0ff; --c-acc-3-rgb:40,224,255; --c-title-edge: rgba(252,232,255,.95); } html[data-palette-dark="crimson"] body:not(.light){ --c-acc-1:#dc2a44; --c-acc-1-rgb:220,42,68; --c-acc-2:#ff5e3c; --c-acc-2-rgb:255,94,60; --c-acc-3:#ff9a3c; --c-acc-3-rgb:255,154,60; --c-title-edge: rgba(252,230,220,.95); } html[data-palette-dark="forest"] body:not(.light){ --c-acc-1:#28b450; --c-acc-1-rgb:40,180,80; --c-acc-2:#5ed97c; --c-acc-2-rgb:94,217,124; --c-acc-3:#7ed960; --c-acc-3-rgb:126,217,96; --c-title-edge: rgba(210,255,220,.95); } html[data-palette-dark="void"] body:not(.light){ --c-acc-1:#3c64ff; --c-acc-1-rgb:60,100,255; --c-acc-2:#6040ff; --c-acc-2-rgb:96,64,255; --c-acc-3:#8040ff; --c-acc-3-rgb:128,64,255; --c-title-edge: rgba(220,225,255,.95); } html[data-palette-dark="rust"] body:not(.light){ --c-acc-1:#c85a14; --c-acc-1-rgb:200,90,20; --c-acc-2:#e07030; --c-acc-2-rgb:224,112,48; --c-acc-3:#ff8c2c; --c-acc-3-rgb:255,140,44; --c-title-edge: rgba(255,225,200,.95); } /* LIGHT palettes */ html[data-palette-light="neutral"] body.light{ --c-acc-1:#5a5045; --c-acc-1-rgb:90,80,69; --c-acc-2:#7a6e5e; --c-acc-2-rgb:122,110,94; --c-acc-3:#9b8d76; --c-acc-3-rgb:155,141,118; --c-title-edge: rgba(26,24,20,.95); } html[data-palette-light="sunset"] body.light{ --c-acc-1:#d6571a; --c-acc-1-rgb:214,87,26; --c-acc-2:#e83968; --c-acc-2-rgb:232,57,104; --c-acc-3:#c41a4e; --c-acc-3-rgb:196,26,78; --c-title-edge: rgba(60,20,12,.95); } html[data-palette-light="yellow"] body.light{ --c-acc-1:#a47800; --c-acc-1-rgb:164,120,0; --c-acc-2:#c69200; --c-acc-2-rgb:198,146,0; --c-acc-3:#e8780a; --c-acc-3-rgb:232,120,10; --c-title-edge: rgba(60,42,0,.95); } html[data-palette-light="citrus"] body.light{ --c-acc-1:#5e8a10; --c-acc-1-rgb:94,138,16; --c-acc-2:#a86c00; --c-acc-2-rgb:168,108,0; --c-acc-3:#cd5e0e; --c-acc-3-rgb:205,94,14; --c-title-edge: rgba(20,50,0,.95); } html[data-palette-light="pink"] body.light{ --c-acc-1:#c81278; --c-acc-1-rgb:200,18,120; --c-acc-2:#a83289; --c-acc-2-rgb:168,50,137; --c-acc-3:#d44694; --c-acc-3-rgb:212,70,148; --c-title-edge: rgba(80,0,50,.95); } html[data-palette-light="mint"] body.light{ --c-acc-1:#117048; --c-acc-1-rgb:17,112,72; --c-acc-2:#1a8c5c; --c-acc-2-rgb:26,140,92; --c-acc-3:#2ccd8a; --c-acc-3-rgb:44,205,138; --c-title-edge: rgba(10,50,26,.95); } html[data-palette-light="lavender"] body.light{ --c-acc-1:#5e2eb3; --c-acc-1-rgb:94,46,179; --c-acc-2:#7548c8; --c-acc-2-rgb:117,72,200; --c-acc-3:#a070f0; --c-acc-3-rgb:160,112,240; --c-title-edge: rgba(40,20,80,.95); } html[data-palette-light="slate"] body.light{ --c-acc-1:#2e4a72; --c-acc-1-rgb:46,74,114; --c-acc-2:#46648c; --c-acc-2-rgb:70,100,140; --c-acc-3:#6890bc; --c-acc-3-rgb:104,144,188; --c-title-edge: rgba(20,34,54,.95); } /* Шрифты больше НЕ @import-ятся здесь (не грузились бы впустую на каждой странице). Реально нужный грузится inline-скриптом в (см. base). На странице /settings/ все шрифты подключены для превью отдельным . */ html[data-font="inter"] body { font-family: "Inter", system-ui, -apple-system, sans-serif !important; } html[data-font="rubik"] body { font-family: "Rubik", system-ui, -apple-system, sans-serif !important; } html[data-font="manrope"] body { font-family: "Manrope", system-ui, -apple-system, sans-serif !important; } html[data-font="mono"] body { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace !important; } /* sans-serif varianty */ html[data-font="poppins"] body { font-family: "Poppins", system-ui, -apple-system, sans-serif !important; } html[data-font="montserrat"] body { font-family: "Montserrat", system-ui, -apple-system, sans-serif !important; } html[data-font="comfortaa"] body { font-family: "Comfortaa", system-ui, sans-serif !important; letter-spacing: -.1px; } /* condensed display */ html[data-font="oswald"] body { font-family: "Oswald", Impact, sans-serif !important; } html[data-font="bebas"] body { font-family: "Bebas Neue", Impact, sans-serif !important; letter-spacing: .3px; } /* serif */ html[data-font="playfair"] body { font-family: "Playfair Display", Georgia, "Times New Roman", serif !important; } html[data-font="lora"] body { font-family: "Lora", Georgia, "Times New Roman", serif !important; } html[data-font="merri"] body { font-family: "Merriweather", Georgia, "Times New Roman", serif !important; } html[data-font="robotoslab"] body { font-family: "Roboto Slab", Georgia, serif !important; } /* handwritten */ html[data-font="caveat"] body { font-family: "Caveat", "Comic Sans MS", cursive !important; font-size: 1.08em; } /* new sans-serif */ html[data-font="raleway"] body { font-family: "Raleway", system-ui, sans-serif !important; letter-spacing: -.1px; } html[data-font="nunito"] body { font-family: "Nunito", system-ui, sans-serif !important; } html[data-font="space"] body { font-family: "Space Grotesk", system-ui, sans-serif !important; } html[data-font="ubuntu"] body { font-family: "Ubuntu", system-ui, sans-serif !important; } /* display / retro */ html[data-font="righteous"] body { font-family: "Righteous", Impact, sans-serif !important; letter-spacing: .3px; } html[data-font="lobster"] body { font-family: "Lobster", cursive !important; font-size: 1.06em; } html[data-font="abril"] body { font-family: "Abril Fatface", Georgia, serif !important; } html[data-font="pacifico"] body { font-family: "Pacifico", cursive !important; font-size: .95em; } /* new serif */ html[data-font="ptserif"] body { font-family: "PT Serif", Georgia, "Times New Roman", serif !important; } /* cursive */ html[data-font="dancing"] body { font-family: "Dancing Script", cursive !important; font-size: 1.12em; } /* ===================================================================== DARK · NEUTRAL (графит) ===================================================================== */ html[data-palette-dark="neutral"] body:not(.light){ background: #0a0b0f !important; color: rgba(230,232,240,.92) !important; } html[data-palette-dark="neutral"] body:not(.light)::before{ background-image: linear-gradient(180deg, #14161f, #14161f) !important; } html[data-palette-dark="neutral"] body:not(.light)::after{ background-image: none !important; } /* — панели (сайдбар, form-контейнеры) — */ html[data-palette-dark="neutral"] body:not(.light) .panel, html[data-palette-dark="neutral"] body:not(.light) .content{ background: rgba(16,18,26,.85) !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 14px 40px rgba(0,0,0,.45) !important; } /* — карточки задач / общие card — */ html[data-palette-dark="neutral"] body:not(.light) .card{ background: linear-gradient(135deg, rgba(28,30,40,.82), rgba(18,20,28,.82)) !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 18px 44px rgba(0,0,0,.45) !important; } /* — все кнопки — */ html[data-palette-dark="neutral"] body:not(.light) .btn{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important; border: 1px solid rgba(255,255,255,.14) !important; color: rgba(230,232,240,.95) !important; box-shadow: 0 10px 24px rgba(0,0,0,.35) !important; } html[data-palette-dark="neutral"] body:not(.light) .btn--primary{ background: linear-gradient(135deg, #2a2d38, #4a4e5e) !important; color: #eaf0ff !important; box-shadow: 0 14px 30px rgba(0,0,0,.5) !important; border: none !important; } html[data-palette-dark="neutral"] body:not(.light) .btn--ghost{ background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; } /* — сайдбар-ссылки — */ html[data-palette-dark="neutral"] body:not(.light) .sidebar__link{ background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; color: rgba(230,232,240,.9) !important; } /* — чипы — */ html[data-palette-dark="neutral"] body:not(.light) .chip{ background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(230,232,240,.9) !important; } /* — топбар кнопки — */ html[data-palette-dark="neutral"] body:not(.light) .theme-toggle, html[data-palette-dark="neutral"] body:not(.light) .profile-btn, html[data-palette-dark="neutral"] body:not(.light) .burger-btn{ background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; } /* ===================================================================== DARK · OCEAN (бирюза + изумруд + сапфир) ===================================================================== */ html[data-palette-dark="ocean"] body:not(.light){ background: #04141c !important; color: rgba(226,248,252,.92) !important; } html[data-palette-dark="ocean"] body:not(.light)::before{ background-image: linear-gradient(180deg, #093a4d, #093a4d) !important; } html[data-palette-dark="ocean"] body:not(.light)::after{ background-image: none !important; } html[data-palette-dark="ocean"] body:not(.light) .panel, html[data-palette-dark="ocean"] body:not(.light) .content{ background: rgba(8,32,42,.82) !important; border-color: rgba(80,220,220,.14) !important; box-shadow: 0 14px 40px rgba(0,32,46,.55) !important; } html[data-palette-dark="ocean"] body:not(.light) .card{ background: radial-gradient(70% 100% at 0% 0%, rgba(28,200,200,.14), transparent 60%), linear-gradient(135deg, rgba(10,40,52,.82), rgba(6,28,40,.82)) !important; border-color: rgba(80,220,220,.18) !important; box-shadow: 0 18px 44px rgba(0,30,46,.55) !important; } html[data-palette-dark="ocean"] body:not(.light) .btn{ background: linear-gradient(180deg, rgba(80,220,220,.14), rgba(30,150,200,.10)) !important; border: 1px solid rgba(80,220,220,.28) !important; color: #d6fbfb !important; box-shadow: 0 10px 24px rgba(0,80,120,.35) !important; } html[data-palette-dark="ocean"] body:not(.light) .btn--primary{ background: linear-gradient(135deg, #008f78, #1f6fc8) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.25) !important; box-shadow: 0 16px 34px rgba(0,200,210,.45) !important; border: none !important; } html[data-palette-dark="ocean"] body:not(.light) .btn--ghost{ background: rgba(80,220,220,.08) !important; border-color: rgba(80,220,220,.2) !important; } html[data-palette-dark="ocean"] body:not(.light) .sidebar__link{ background: linear-gradient(135deg, rgba(28,200,200,.18), rgba(30,140,200,.12)) !important; border: 1px solid rgba(80,220,220,.22) !important; color: #d6fbfb !important; } html[data-palette-dark="ocean"] body:not(.light) .chip{ background: rgba(80,220,220,.14) !important; border: 1px solid rgba(80,220,220,.26) !important; color: #d6fbfb !important; } html[data-palette-dark="ocean"] body:not(.light) .theme-toggle, html[data-palette-dark="ocean"] body:not(.light) .profile-btn, html[data-palette-dark="ocean"] body:not(.light) .burger-btn{ background: rgba(80,220,220,.08) !important; border: 1px solid rgba(80,220,220,.22) !important; color: #d6fbfb !important; } /* ===================================================================== LIGHT · NEUTRAL (бумага — тёплый кремовый) ===================================================================== */ html[data-palette-light="neutral"] body.light{ background: #f2f1ec !important; color: rgba(26,24,20,.92) !important; } html[data-palette-light="neutral"] body.light::before{ background-image: linear-gradient(180deg, #efece4, #efece4) !important; } html[data-palette-light="neutral"] body.light::after{ background-image: none !important; } html[data-palette-light="neutral"] body.light .panel, html[data-palette-light="neutral"] body.light .content{ background: rgba(252,250,244,.82) !important; border: 1px solid rgba(180,170,150,.22) !important; box-shadow: 0 18px 44px rgba(160,150,130,.14) !important; color: rgba(26,24,20,.92) !important; } html[data-palette-light="neutral"] body.light .card{ background: linear-gradient(135deg, rgba(248,244,234,.88), rgba(238,232,220,.85)) !important; border: 1px solid rgba(180,170,150,.22) !important; box-shadow: 0 20px 45px rgba(160,150,130,.16) !important; } html[data-palette-light="neutral"] body.light .btn{ background: rgba(252,250,244,.88) !important; border: 1px solid rgba(160,150,130,.25) !important; color: rgba(26,24,20,.9) !important; box-shadow: 0 10px 24px rgba(160,150,130,.12) !important; } html[data-palette-light="neutral"] body.light .btn--primary{ background: linear-gradient(135deg, #4a4a4a, #6b6b6b) !important; color: #fff !important; box-shadow: 0 14px 30px rgba(80,80,80,.22) !important; border: none !important; } html[data-palette-light="neutral"] body.light .btn--ghost{ background: rgba(255,255,255,.55) !important; border-color: rgba(160,150,130,.22) !important; } html[data-palette-light="neutral"] body.light .sidebar__link{ background: linear-gradient(135deg, rgba(242,238,228,.85), rgba(228,222,210,.85)) !important; border: 1px solid rgba(180,170,150,.26) !important; color: rgba(26,24,20,.88) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important; } html[data-palette-light="neutral"] body.light .chip{ background: rgba(222,216,200,.6) !important; border: 1px solid rgba(180,170,150,.3) !important; color: rgba(26,24,20,.82) !important; } html[data-palette-light="neutral"] body.light .theme-toggle, html[data-palette-light="neutral"] body.light .profile-btn, html[data-palette-light="neutral"] body.light .burger-btn{ background: rgba(255,253,248,.72) !important; border: 1px solid rgba(180,170,150,.26) !important; color: rgba(26,24,20,.86) !important; } /* ===================================================================== LIGHT · SUNSET (оранж / коралл / малина) ===================================================================== */ html[data-palette-light="sunset"] body.light{ background: #fff1e4 !important; color: rgba(60,20,12,.92) !important; } html[data-palette-light="sunset"] body.light::before{ background-image: linear-gradient(180deg, #ffd5d9, #ffd5d9) !important; } html[data-palette-light="sunset"] body.light::after{ background-image: none !important; } html[data-palette-light="sunset"] body.light .panel, html[data-palette-light="sunset"] body.light .content{ background: rgba(255,245,232,.82) !important; border: 1px solid rgba(255,140,120,.24) !important; box-shadow: 0 18px 44px rgba(255,120,100,.16) !important; } html[data-palette-light="sunset"] body.light .card{ background: linear-gradient(135deg, rgba(255,210,170,.8), rgba(255,180,190,.78)) !important; border: 1px solid rgba(255,140,120,.28) !important; box-shadow: 0 22px 48px rgba(255,120,100,.22) !important; color: rgba(60,20,12,.95) !important; } html[data-palette-light="sunset"] body.light .btn{ background: rgba(255,250,242,.9) !important; border: 1px solid rgba(255,140,120,.28) !important; color: rgba(60,20,12,.9) !important; box-shadow: 0 10px 24px rgba(255,120,100,.15) !important; } html[data-palette-light="sunset"] body.light .btn--primary{ background: linear-gradient(135deg, #d6571a, #c41a4e) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.25) !important; box-shadow: 0 16px 34px rgba(255,120,100,.38) !important; border: none !important; } html[data-palette-light="sunset"] body.light .btn--ghost{ background: rgba(255,245,232,.6) !important; border-color: rgba(255,140,120,.24) !important; } html[data-palette-light="sunset"] body.light .sidebar__link{ background: linear-gradient(135deg, rgba(255,200,160,.75), rgba(255,170,190,.72)) !important; border: 1px solid rgba(255,140,120,.3) !important; color: rgba(60,20,12,.9) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important; } html[data-palette-light="sunset"] body.light .chip{ background: rgba(255,180,140,.42) !important; border: 1px solid rgba(255,140,120,.38) !important; color: rgba(60,20,12,.9) !important; } html[data-palette-light="sunset"] body.light .theme-toggle, html[data-palette-light="sunset"] body.light .profile-btn, html[data-palette-light="sunset"] body.light .burger-btn{ background: rgba(255,245,232,.72) !important; border: 1px solid rgba(255,140,120,.28) !important; color: rgba(60,20,12,.9) !important; } /* ===================================================================== DARK · AURORA (северное сияние: изумруд + фиолет + ледяной голубой) ===================================================================== */ html[data-palette-dark="aurora"] body:not(.light){ background: #0a0f1e !important; color: rgba(228,240,252,.92) !important; } html[data-palette-dark="aurora"] body:not(.light)::before{ background-image: linear-gradient(180deg, #121240, #121240) !important; } html[data-palette-dark="aurora"] body:not(.light)::after{ background-image: none !important; } html[data-palette-dark="aurora"] body:not(.light) .panel, html[data-palette-dark="aurora"] body:not(.light) .content{ background: rgba(14,20,44,.84) !important; border-color: rgba(140,120,255,.22) !important; box-shadow: 0 18px 48px rgba(15,10,40,.55) !important; } html[data-palette-dark="aurora"] body:not(.light) .card{ background: radial-gradient(70% 100% at 0% 0%, rgba(80,255,180,.14), transparent 60%), linear-gradient(135deg, rgba(20,30,60,.86), rgba(30,20,60,.86)) !important; border-color: rgba(140,120,255,.24) !important; box-shadow: 0 20px 50px rgba(20,10,50,.55) !important; } html[data-palette-dark="aurora"] body:not(.light) .btn{ background: linear-gradient(180deg, rgba(80,255,200,.12), rgba(170,110,255,.10)) !important; border: 1px solid rgba(140,120,255,.32) !important; color: #e3f5ff !important; box-shadow: 0 10px 24px rgba(20,10,50,.4) !important; } html[data-palette-dark="aurora"] body:not(.light) .btn--primary{ background: linear-gradient(135deg, #159a64, #6e3edb) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.25) !important; box-shadow: 0 16px 34px rgba(100,140,255,.48) !important; border: none !important; } html[data-palette-dark="aurora"] body:not(.light) .btn--ghost{ background: rgba(140,120,255,.08) !important; border-color: rgba(140,120,255,.22) !important; } html[data-palette-dark="aurora"] body:not(.light) .sidebar__link{ background: linear-gradient(135deg, rgba(80,255,180,.14), rgba(170,110,255,.14)) !important; border: 1px solid rgba(140,120,255,.28) !important; color: #e3f5ff !important; } html[data-palette-dark="aurora"] body:not(.light) .chip{ background: rgba(140,120,255,.18) !important; border: 1px solid rgba(140,120,255,.32) !important; color: #e3f5ff !important; } html[data-palette-dark="aurora"] body:not(.light) .theme-toggle, html[data-palette-dark="aurora"] body:not(.light) .profile-btn, html[data-palette-dark="aurora"] body:not(.light) .burger-btn{ background: rgba(140,120,255,.08) !important; border: 1px solid rgba(140,120,255,.28) !important; color: #e3f5ff !important; } /* ===================================================================== DARK · CYBER (киберпанк: неоновый магента + жёлтый + циан) ===================================================================== */ html[data-palette-dark="cyber"] body:not(.light){ background: #0b0014 !important; color: rgba(252,232,255,.92) !important; } html[data-palette-dark="cyber"] body:not(.light)::before{ background-image: linear-gradient(180deg, #23003f, #23003f) !important; } html[data-palette-dark="cyber"] body:not(.light)::after{ background-image: none !important; } html[data-palette-dark="cyber"] body:not(.light) .panel, html[data-palette-dark="cyber"] body:not(.light) .content{ background: rgba(22,6,32,.84) !important; border-color: rgba(255,60,200,.28) !important; box-shadow: 0 18px 48px rgba(60,0,80,.55) !important; } html[data-palette-dark="cyber"] body:not(.light) .card{ background: radial-gradient(70% 100% at 0% 0%, rgba(255,60,200,.16), transparent 60%), linear-gradient(135deg, rgba(30,10,45,.88), rgba(18,4,30,.88)) !important; border-color: rgba(255,60,200,.3) !important; box-shadow: 0 20px 50px rgba(60,0,80,.55) !important; } html[data-palette-dark="cyber"] body:not(.light) .btn{ background: linear-gradient(180deg, rgba(255,60,200,.14), rgba(40,230,255,.08)) !important; border: 1px solid rgba(255,60,200,.32) !important; color: #ffdaf0 !important; box-shadow: 0 10px 24px rgba(60,0,80,.4) !important; } html[data-palette-dark="cyber"] body:not(.light) .btn--primary{ background: linear-gradient(135deg, #c81288, #0d8aaf) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.30) !important; box-shadow: 0 16px 34px rgba(255,60,200,.48) !important; border: none !important; } html[data-palette-dark="cyber"] body:not(.light) .btn--ghost{ background: rgba(255,60,200,.08) !important; border-color: rgba(255,60,200,.22) !important; } html[data-palette-dark="cyber"] body:not(.light) .sidebar__link{ background: linear-gradient(135deg, rgba(255,60,200,.16), rgba(40,230,255,.14)) !important; border: 1px solid rgba(255,60,200,.32) !important; color: #ffdaf0 !important; } html[data-palette-dark="cyber"] body:not(.light) .chip{ background: rgba(255,60,200,.18) !important; border: 1px solid rgba(255,60,200,.34) !important; color: #ffdaf0 !important; } html[data-palette-dark="cyber"] body:not(.light) .theme-toggle, html[data-palette-dark="cyber"] body:not(.light) .profile-btn, html[data-palette-dark="cyber"] body:not(.light) .burger-btn{ background: rgba(255,60,200,.08) !important; border: 1px solid rgba(255,60,200,.3) !important; color: #ffdaf0 !important; } /* ===================================================================== DARK · CRIMSON (глубокий вишнёво-бордовый с золотым акцентом) ===================================================================== */ html[data-palette-dark="crimson"] body:not(.light){ background: #1a0608 !important; color: rgba(252,230,220,.94) !important; } html[data-palette-dark="crimson"] body:not(.light)::before{ background-image: linear-gradient(180deg, #36101a, #36101a) !important; } html[data-palette-dark="crimson"] body:not(.light)::after{ background-image: none !important; } html[data-palette-dark="crimson"] body:not(.light) .panel, html[data-palette-dark="crimson"] body:not(.light) .content{ background: rgba(34,10,12,.86) !important; border-color: rgba(220,40,60,.26) !important; box-shadow: 0 18px 48px rgba(70,10,20,.55) !important; } html[data-palette-dark="crimson"] body:not(.light) .card{ background: radial-gradient(70% 100% at 0% 0%, rgba(220,40,60,.16), transparent 60%), linear-gradient(135deg, rgba(50,14,18,.88), rgba(30,8,12,.88)) !important; border-color: rgba(220,40,60,.28) !important; box-shadow: 0 20px 50px rgba(70,10,20,.55) !important; } html[data-palette-dark="crimson"] body:not(.light) .btn{ background: linear-gradient(180deg, rgba(220,40,60,.16), rgba(180,20,40,.10)) !important; border: 1px solid rgba(220,40,60,.32) !important; color: #ffe0d5 !important; box-shadow: 0 10px 24px rgba(70,10,20,.4) !important; } html[data-palette-dark="crimson"] body:not(.light) .btn--primary{ background: linear-gradient(135deg, #b51a30, #c45e0e) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.25) !important; box-shadow: 0 16px 34px rgba(220,40,60,.45) !important; border: none !important; } html[data-palette-dark="crimson"] body:not(.light) .btn--ghost{ background: rgba(220,40,60,.08) !important; border-color: rgba(220,40,60,.22) !important; } html[data-palette-dark="crimson"] body:not(.light) .sidebar__link{ background: linear-gradient(135deg, rgba(220,40,60,.18), rgba(255,140,60,.14)) !important; border: 1px solid rgba(220,40,60,.3) !important; color: #ffe0d5 !important; } html[data-palette-dark="crimson"] body:not(.light) .chip{ background: rgba(220,40,60,.22) !important; border: 1px solid rgba(220,40,60,.36) !important; color: #ffe0d5 !important; } html[data-palette-dark="crimson"] body:not(.light) .theme-toggle, html[data-palette-dark="crimson"] body:not(.light) .profile-btn, html[data-palette-dark="crimson"] body:not(.light) .burger-btn{ background: rgba(220,40,60,.08) !important; border: 1px solid rgba(220,40,60,.3) !important; color: #ffe0d5 !important; } /* ===================================================================== LIGHT · YELLOW (солнечный лимонно-персиковый) ===================================================================== */ html[data-palette-light="yellow"] body.light{ background: #fff8d6 !important; color: rgba(60,42,0,.92) !important; } html[data-palette-light="yellow"] body.light::before{ background-image: linear-gradient(180deg, #ffea82, #ffea82) !important; } html[data-palette-light="yellow"] body.light::after{ background-image: none !important; } html[data-palette-light="yellow"] body.light .panel, html[data-palette-light="yellow"] body.light .content{ background: rgba(255,250,220,.86) !important; border: 1px solid rgba(220,170,30,.26) !important; box-shadow: 0 18px 44px rgba(220,170,30,.18) !important; } html[data-palette-light="yellow"] body.light .card{ background: linear-gradient(135deg, rgba(255,240,160,.85), rgba(255,220,120,.8)) !important; border: 1px solid rgba(220,170,30,.32) !important; box-shadow: 0 22px 48px rgba(220,170,30,.24) !important; color: rgba(60,42,0,.95) !important; } html[data-palette-light="yellow"] body.light .btn{ background: rgba(255,252,220,.92) !important; border: 1px solid rgba(220,170,30,.32) !important; color: rgba(60,42,0,.9) !important; box-shadow: 0 10px 24px rgba(220,170,30,.16) !important; } html[data-palette-light="yellow"] body.light .btn--primary{ background: linear-gradient(135deg, #ffd12a, #ff9a00) !important; color: #3a2700 !important; box-shadow: 0 16px 34px rgba(255,180,40,.42) !important; border: none !important; } html[data-palette-light="yellow"] body.light .btn--ghost{ background: rgba(255,250,220,.6) !important; border-color: rgba(220,170,30,.26) !important; } html[data-palette-light="yellow"] body.light .sidebar__link{ background: linear-gradient(135deg, rgba(255,235,120,.82), rgba(255,210,80,.78)) !important; border: 1px solid rgba(220,170,30,.34) !important; color: rgba(60,42,0,.9) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important; } html[data-palette-light="yellow"] body.light .chip{ background: rgba(255,220,90,.5) !important; border: 1px solid rgba(220,170,30,.42) !important; color: rgba(60,42,0,.9) !important; } html[data-palette-light="yellow"] body.light .theme-toggle, html[data-palette-light="yellow"] body.light .profile-btn, html[data-palette-light="yellow"] body.light .burger-btn{ background: rgba(255,250,220,.78) !important; border: 1px solid rgba(220,170,30,.3) !important; color: rgba(60,42,0,.9) !important; } /* ===================================================================== LIGHT · CITRUS (цитрус: лайм + апельсин + лимон, свежий) ===================================================================== */ html[data-palette-light="citrus"] body.light{ background: #f3ffde !important; color: rgba(20,50,0,.92) !important; } html[data-palette-light="citrus"] body.light::before{ background-image: linear-gradient(180deg, #fff1a0, #fff1a0) !important; } html[data-palette-light="citrus"] body.light::after{ background-image: none !important; } html[data-palette-light="citrus"] body.light .panel, html[data-palette-light="citrus"] body.light .content{ background: rgba(245,255,220,.86) !important; border: 1px solid rgba(120,180,30,.28) !important; box-shadow: 0 18px 44px rgba(120,180,30,.18) !important; } html[data-palette-light="citrus"] body.light .card{ background: linear-gradient(135deg, rgba(200,255,130,.82), rgba(255,210,90,.78)) !important; border: 1px solid rgba(120,180,30,.32) !important; box-shadow: 0 22px 48px rgba(140,180,40,.24) !important; color: rgba(20,50,0,.95) !important; } html[data-palette-light="citrus"] body.light .btn{ background: rgba(248,255,228,.92) !important; border: 1px solid rgba(120,180,30,.32) !important; color: rgba(20,50,0,.9) !important; box-shadow: 0 10px 24px rgba(120,180,30,.18) !important; } html[data-palette-light="citrus"] body.light .btn--primary{ background: linear-gradient(135deg, #a8d820, #ff9a2c) !important; color: #102c00 !important; box-shadow: 0 16px 34px rgba(160,200,40,.42) !important; border: none !important; } html[data-palette-light="citrus"] body.light .btn--ghost{ background: rgba(248,255,228,.62) !important; border-color: rgba(120,180,30,.28) !important; } html[data-palette-light="citrus"] body.light .sidebar__link{ background: linear-gradient(135deg, rgba(180,240,90,.78), rgba(255,200,70,.75)) !important; border: 1px solid rgba(120,180,30,.34) !important; color: rgba(20,50,0,.9) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important; } html[data-palette-light="citrus"] body.light .chip{ background: rgba(180,235,80,.5) !important; border: 1px solid rgba(120,180,30,.42) !important; color: rgba(20,50,0,.9) !important; } html[data-palette-light="citrus"] body.light .theme-toggle, html[data-palette-light="citrus"] body.light .profile-btn, html[data-palette-light="citrus"] body.light .burger-btn{ background: rgba(248,255,228,.78) !important; border: 1px solid rgba(120,180,30,.32) !important; color: rgba(20,50,0,.9) !important; } /* ===================================================================== LIGHT · PINK (яркий нежный светящийся розовый) ===================================================================== */ html[data-palette-light="pink"] body.light{ background: #fff0f6 !important; color: rgba(80,0,50,.92) !important; } html[data-palette-light="pink"] body.light::before{ background-image: linear-gradient(180deg, #ffb8db, #ffb8db) !important; } html[data-palette-light="pink"] body.light::after{ background-image: none !important; } html[data-palette-light="pink"] body.light .panel, html[data-palette-light="pink"] body.light .content{ background: rgba(255,246,250,.88) !important; border: 1px solid rgba(220,80,160,.24) !important; box-shadow: 0 18px 44px rgba(220,80,160,.20) !important; } html[data-palette-light="pink"] body.light .card{ background: linear-gradient(135deg, rgba(255,200,230,.82), rgba(255,150,210,.78)) !important; border: 1px solid rgba(220,80,160,.32) !important; box-shadow: 0 24px 50px rgba(220,80,160,.28) !important; color: rgba(80,0,50,.95) !important; } html[data-palette-light="pink"] body.light .btn{ background: rgba(255,248,252,.92) !important; border: 1px solid rgba(220,80,160,.32) !important; color: rgba(80,0,50,.9) !important; box-shadow: 0 10px 24px rgba(220,80,160,.16) !important; } html[data-palette-light="pink"] body.light .btn--primary{ background: linear-gradient(135deg, #c81278, #c44698) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.25) !important; box-shadow: 0 16px 34px rgba(255,80,170,.45) !important; border: none !important; } html[data-palette-light="pink"] body.light .btn--ghost{ background: rgba(255,248,252,.62) !important; border-color: rgba(220,80,160,.26) !important; } html[data-palette-light="pink"] body.light .sidebar__link{ background: linear-gradient(135deg, rgba(255,180,220,.82), rgba(255,140,200,.78)) !important; border: 1px solid rgba(220,80,160,.34) !important; color: rgba(80,0,50,.9) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important; } html[data-palette-light="pink"] body.light .chip{ background: rgba(255,160,210,.5) !important; border: 1px solid rgba(220,80,160,.42) !important; color: rgba(80,0,50,.9) !important; } html[data-palette-light="pink"] body.light .theme-toggle, html[data-palette-light="pink"] body.light .profile-btn, html[data-palette-light="pink"] body.light .burger-btn{ background: rgba(255,248,252,.78) !important; border: 1px solid rgba(220,80,160,.3) !important; color: rgba(80,0,50,.9) !important; } /* ===================================================================== DARK · FOREST (тёмно-зелёный, лесной) ===================================================================== */ html[data-palette-dark="forest"] body:not(.light){ background: #051208 !important; color: rgba(210,255,220,.92) !important; } html[data-palette-dark="forest"] body:not(.light)::before{ background-image: linear-gradient(180deg, #0e2a16, #0e2a16) !important; } html[data-palette-dark="forest"] body:not(.light)::after{ background-image: none !important; } html[data-palette-dark="forest"] body:not(.light) .panel, html[data-palette-dark="forest"] body:not(.light) .content{ background: rgba(10,30,14,.84) !important; border-color: rgba(40,180,80,.22) !important; box-shadow: 0 14px 40px rgba(0,30,10,.55) !important; } html[data-palette-dark="forest"] body:not(.light) .card{ background: radial-gradient(70% 100% at 0% 0%, rgba(40,200,80,.14), transparent 60%), linear-gradient(135deg, rgba(14,36,18,.86), rgba(8,22,12,.86)) !important; border-color: rgba(40,180,80,.22) !important; box-shadow: 0 18px 44px rgba(0,30,10,.55) !important; } html[data-palette-dark="forest"] body:not(.light) .btn{ background: linear-gradient(180deg, rgba(40,180,80,.14), rgba(20,120,50,.10)) !important; border: 1px solid rgba(40,180,80,.30) !important; color: #c8ffd0 !important; box-shadow: 0 10px 24px rgba(0,40,20,.35) !important; } html[data-palette-dark="forest"] body:not(.light) .btn--primary{ background: linear-gradient(135deg, #117540, #2d8838) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.25) !important; box-shadow: 0 16px 34px rgba(40,180,80,.45) !important; border: none !important; } html[data-palette-dark="forest"] body:not(.light) .btn--ghost{ background: rgba(40,180,80,.08) !important; border-color: rgba(40,180,80,.22) !important; } html[data-palette-dark="forest"] body:not(.light) .sidebar__link{ background: linear-gradient(135deg, rgba(40,180,80,.18), rgba(80,200,100,.14)) !important; border: 1px solid rgba(40,180,80,.28) !important; color: #c8ffd0 !important; } html[data-palette-dark="forest"] body:not(.light) .chip{ background: rgba(40,180,80,.18) !important; border: 1px solid rgba(40,180,80,.32) !important; color: #c8ffd0 !important; } html[data-palette-dark="forest"] body:not(.light) .theme-toggle, html[data-palette-dark="forest"] body:not(.light) .profile-btn, html[data-palette-dark="forest"] body:not(.light) .burger-btn{ background: rgba(40,180,80,.08) !important; border: 1px solid rgba(40,180,80,.28) !important; color: #c8ffd0 !important; } /* ===================================================================== DARK · VOID (абсолютный мрак с электрик-синим) ===================================================================== */ html[data-palette-dark="void"] body:not(.light){ background: #000006 !important; color: rgba(220,225,255,.92) !important; } html[data-palette-dark="void"] body:not(.light)::before{ background-image: linear-gradient(180deg, #05001f, #05001f) !important; } html[data-palette-dark="void"] body:not(.light)::after{ background-image: none !important; } html[data-palette-dark="void"] body:not(.light) .panel, html[data-palette-dark="void"] body:not(.light) .content{ background: rgba(4,2,18,.90) !important; border-color: rgba(60,100,255,.26) !important; box-shadow: 0 14px 40px rgba(0,0,30,.70) !important; } html[data-palette-dark="void"] body:not(.light) .card{ background: radial-gradient(70% 100% at 0% 0%, rgba(60,100,255,.16), transparent 60%), linear-gradient(135deg, rgba(8,6,26,.92), rgba(4,2,16,.92)) !important; border-color: rgba(60,100,255,.28) !important; box-shadow: 0 18px 44px rgba(0,0,30,.70) !important; } html[data-palette-dark="void"] body:not(.light) .btn{ background: linear-gradient(180deg, rgba(60,100,255,.16), rgba(30,50,200,.10)) !important; border: 1px solid rgba(60,100,255,.34) !important; color: #d0d8ff !important; box-shadow: 0 10px 24px rgba(0,0,60,.50) !important; } html[data-palette-dark="void"] body:not(.light) .btn--primary{ background: linear-gradient(135deg, #3c64ff, #8040ff) !important; color: #fff !important; box-shadow: 0 16px 34px rgba(60,100,255,.50) !important; border: none !important; } html[data-palette-dark="void"] body:not(.light) .btn--ghost{ background: rgba(60,100,255,.08) !important; border-color: rgba(60,100,255,.24) !important; } html[data-palette-dark="void"] body:not(.light) .sidebar__link{ background: linear-gradient(135deg, rgba(60,100,255,.18), rgba(100,60,255,.14)) !important; border: 1px solid rgba(60,100,255,.30) !important; color: #d0d8ff !important; } html[data-palette-dark="void"] body:not(.light) .chip{ background: rgba(60,100,255,.20) !important; border: 1px solid rgba(60,100,255,.36) !important; color: #d0d8ff !important; } html[data-palette-dark="void"] body:not(.light) .theme-toggle, html[data-palette-dark="void"] body:not(.light) .profile-btn, html[data-palette-dark="void"] body:not(.light) .burger-btn{ background: rgba(60,100,255,.08) !important; border: 1px solid rgba(60,100,255,.28) !important; color: #d0d8ff !important; } /* ===================================================================== DARK · RUST (ржавый медный, тёплый) ===================================================================== */ html[data-palette-dark="rust"] body:not(.light){ background: #1a0c00 !important; color: rgba(255,225,200,.92) !important; } html[data-palette-dark="rust"] body:not(.light)::before{ background-image: linear-gradient(180deg, #3a1800, #3a1800) !important; } html[data-palette-dark="rust"] body:not(.light)::after{ background-image: none !important; } html[data-palette-dark="rust"] body:not(.light) .panel, html[data-palette-dark="rust"] body:not(.light) .content{ background: rgba(32,14,2,.86) !important; border-color: rgba(200,90,20,.28) !important; box-shadow: 0 14px 40px rgba(50,20,0,.55) !important; } html[data-palette-dark="rust"] body:not(.light) .card{ background: radial-gradient(70% 100% at 0% 0%, rgba(200,90,20,.18), transparent 60%), linear-gradient(135deg, rgba(48,20,4,.88), rgba(28,10,2,.88)) !important; border-color: rgba(200,90,20,.30) !important; box-shadow: 0 18px 44px rgba(50,20,0,.55) !important; } html[data-palette-dark="rust"] body:not(.light) .btn{ background: linear-gradient(180deg, rgba(200,90,20,.18), rgba(150,60,10,.12)) !important; border: 1px solid rgba(200,90,20,.36) !important; color: #ffe0c0 !important; box-shadow: 0 10px 24px rgba(60,20,0,.45) !important; } html[data-palette-dark="rust"] body:not(.light) .btn--primary{ background: linear-gradient(135deg, #a13e08, #c45f10) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.25) !important; box-shadow: 0 16px 34px rgba(200,90,20,.48) !important; border: none !important; } html[data-palette-dark="rust"] body:not(.light) .btn--ghost{ background: rgba(200,90,20,.08) !important; border-color: rgba(200,90,20,.24) !important; } html[data-palette-dark="rust"] body:not(.light) .sidebar__link{ background: linear-gradient(135deg, rgba(200,90,20,.20), rgba(255,140,60,.16)) !important; border: 1px solid rgba(200,90,20,.32) !important; color: #ffe0c0 !important; } html[data-palette-dark="rust"] body:not(.light) .chip{ background: rgba(200,90,20,.22) !important; border: 1px solid rgba(200,90,20,.38) !important; color: #ffe0c0 !important; } html[data-palette-dark="rust"] body:not(.light) .theme-toggle, html[data-palette-dark="rust"] body:not(.light) .profile-btn, html[data-palette-dark="rust"] body:not(.light) .burger-btn{ background: rgba(200,90,20,.08) !important; border: 1px solid rgba(200,90,20,.30) !important; color: #ffe0c0 !important; } /* ===================================================================== LIGHT · MINT (мятный, освежающий) ===================================================================== */ html[data-palette-light="mint"] body.light{ background: #edfff4 !important; color: rgba(10,50,26,.92) !important; } html[data-palette-light="mint"] body.light::before{ background-image: linear-gradient(180deg, #b6f5d0, #b6f5d0) !important; } html[data-palette-light="mint"] body.light::after{ background-image: none !important; } html[data-palette-light="mint"] body.light .panel, html[data-palette-light="mint"] body.light .content{ background: rgba(240,255,248,.88) !important; border: 1px solid rgba(30,160,90,.24) !important; box-shadow: 0 18px 44px rgba(30,160,90,.16) !important; } html[data-palette-light="mint"] body.light .card{ background: linear-gradient(135deg, rgba(160,255,210,.82), rgba(100,230,180,.78)) !important; border: 1px solid rgba(30,160,90,.30) !important; box-shadow: 0 22px 48px rgba(30,160,90,.22) !important; color: rgba(10,50,26,.95) !important; } html[data-palette-light="mint"] body.light .btn{ background: rgba(240,255,248,.92) !important; border: 1px solid rgba(30,160,90,.30) !important; color: rgba(10,50,26,.9) !important; box-shadow: 0 10px 24px rgba(30,160,90,.14) !important; } html[data-palette-light="mint"] body.light .btn--primary{ background: linear-gradient(135deg, #117048, #1a8c5c) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.25) !important; box-shadow: 0 16px 34px rgba(30,160,90,.40) !important; border: none !important; } html[data-palette-light="mint"] body.light .btn--ghost{ background: rgba(240,255,248,.62) !important; border-color: rgba(30,160,90,.24) !important; } html[data-palette-light="mint"] body.light .sidebar__link{ background: linear-gradient(135deg, rgba(140,240,200,.82), rgba(80,210,160,.78)) !important; border: 1px solid rgba(30,160,90,.32) !important; color: rgba(10,50,26,.9) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important; } html[data-palette-light="mint"] body.light .chip{ background: rgba(120,230,180,.50) !important; border: 1px solid rgba(30,160,90,.40) !important; color: rgba(10,50,26,.9) !important; } html[data-palette-light="mint"] body.light .theme-toggle, html[data-palette-light="mint"] body.light .profile-btn, html[data-palette-light="mint"] body.light .burger-btn{ background: rgba(240,255,248,.78) !important; border: 1px solid rgba(30,160,90,.30) !important; color: rgba(10,50,26,.9) !important; } /* ===================================================================== LIGHT · LAVENDER (лавандовый, нежный) ===================================================================== */ html[data-palette-light="lavender"] body.light{ background: #f4f0ff !important; color: rgba(40,20,80,.92) !important; } html[data-palette-light="lavender"] body.light::before{ background-image: linear-gradient(180deg, #d8caff, #d8caff) !important; } html[data-palette-light="lavender"] body.light::after{ background-image: none !important; } html[data-palette-light="lavender"] body.light .panel, html[data-palette-light="lavender"] body.light .content{ background: rgba(248,244,255,.88) !important; border: 1px solid rgba(130,80,220,.22) !important; box-shadow: 0 18px 44px rgba(130,80,220,.14) !important; } html[data-palette-light="lavender"] body.light .card{ background: linear-gradient(135deg, rgba(220,200,255,.84), rgba(190,170,255,.80)) !important; border: 1px solid rgba(130,80,220,.28) !important; box-shadow: 0 22px 48px rgba(130,80,220,.22) !important; color: rgba(40,20,80,.95) !important; } html[data-palette-light="lavender"] body.light .btn{ background: rgba(248,244,255,.92) !important; border: 1px solid rgba(130,80,220,.28) !important; color: rgba(40,20,80,.9) !important; box-shadow: 0 10px 24px rgba(130,80,220,.12) !important; } html[data-palette-light="lavender"] body.light .btn--primary{ background: linear-gradient(135deg, #5e2eb3, #7548c8) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.25) !important; box-shadow: 0 16px 34px rgba(130,80,220,.40) !important; border: none !important; } html[data-palette-light="lavender"] body.light .btn--ghost{ background: rgba(248,244,255,.62) !important; border-color: rgba(130,80,220,.22) !important; } html[data-palette-light="lavender"] body.light .sidebar__link{ background: linear-gradient(135deg, rgba(200,180,255,.82), rgba(170,150,255,.78)) !important; border: 1px solid rgba(130,80,220,.30) !important; color: rgba(40,20,80,.9) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important; } html[data-palette-light="lavender"] body.light .chip{ background: rgba(180,160,255,.50) !important; border: 1px solid rgba(130,80,220,.38) !important; color: rgba(40,20,80,.9) !important; } html[data-palette-light="lavender"] body.light .theme-toggle, html[data-palette-light="lavender"] body.light .profile-btn, html[data-palette-light="lavender"] body.light .burger-btn{ background: rgba(248,244,255,.78) !important; border: 1px solid rgba(130,80,220,.28) !important; color: rgba(40,20,80,.9) !important; } /* ===================================================================== LIGHT · SLATE (серо-голубой, офисный) ===================================================================== */ html[data-palette-light="slate"] body.light{ background: #f0f4f8 !important; color: rgba(20,34,54,.92) !important; } html[data-palette-light="slate"] body.light::before{ background-image: linear-gradient(180deg, #c8d6e8, #c8d6e8) !important; } html[data-palette-light="slate"] body.light::after{ background-image: none !important; } html[data-palette-light="slate"] body.light .panel, html[data-palette-light="slate"] body.light .content{ background: rgba(240,246,252,.88) !important; border: 1px solid rgba(70,100,140,.22) !important; box-shadow: 0 18px 44px rgba(70,100,140,.14) !important; } html[data-palette-light="slate"] body.light .card{ background: linear-gradient(135deg, rgba(200,220,245,.84), rgba(180,204,234,.80)) !important; border: 1px solid rgba(70,100,140,.26) !important; box-shadow: 0 22px 48px rgba(70,100,140,.20) !important; color: rgba(20,34,54,.95) !important; } html[data-palette-light="slate"] body.light .btn{ background: rgba(240,246,252,.92) !important; border: 1px solid rgba(70,100,140,.26) !important; color: rgba(20,34,54,.9) !important; box-shadow: 0 10px 24px rgba(70,100,140,.12) !important; } html[data-palette-light="slate"] body.light .btn--primary{ background: linear-gradient(135deg, #46648c, #6890bc) !important; color: #fff !important; box-shadow: 0 16px 34px rgba(70,100,140,.38) !important; border: none !important; } html[data-palette-light="slate"] body.light .btn--ghost{ background: rgba(240,246,252,.62) !important; border-color: rgba(70,100,140,.22) !important; } html[data-palette-light="slate"] body.light .sidebar__link{ background: linear-gradient(135deg, rgba(180,208,238,.82), rgba(160,192,226,.78)) !important; border: 1px solid rgba(70,100,140,.28) !important; color: rgba(20,34,54,.9) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important; } html[data-palette-light="slate"] body.light .chip{ background: rgba(160,190,226,.50) !important; border: 1px solid rgba(70,100,140,.36) !important; color: rgba(20,34,54,.9) !important; } html[data-palette-light="slate"] body.light .theme-toggle, html[data-palette-light="slate"] body.light .profile-btn, html[data-palette-light="slate"] body.light .burger-btn{ background: rgba(240,246,252,.78) !important; border: 1px solid rgba(70,100,140,.26) !important; color: rgba(20,34,54,.9) !important; } /* ===================================================================== PROGRESS BAR · цвет полоски заливки под каждую палитру ===================================================================== */ /* — DARK — */ html[data-palette-dark="neutral"] body:not(.light) .progress__fill{ background: linear-gradient(90deg, #2a2d38, #4a4e5e, #6b7280) !important; box-shadow: 0 10px 30px rgba(80,80,90,.35) !important; } html[data-palette-dark="ocean"] body:not(.light) .progress__fill{ background: linear-gradient(90deg, #00d4b4, #2a9dff, #3a6dff) !important; box-shadow: 0 10px 30px rgba(0,180,200,.40) !important; } html[data-palette-dark="aurora"] body:not(.light) .progress__fill{ background: linear-gradient(90deg, #3ee5a5, #2dd1ff, #8b5cff) !important; box-shadow: 0 10px 30px rgba(100,160,255,.40) !important; } html[data-palette-dark="cyber"] body:not(.light) .progress__fill{ background: linear-gradient(90deg, #ff2eb4, #b952ff, #28e0ff) !important; box-shadow: 0 10px 30px rgba(255,60,200,.40) !important; } html[data-palette-dark="crimson"] body:not(.light) .progress__fill{ background: linear-gradient(90deg, #dc2a44, #ff5e3c, #ff9a3c) !important; box-shadow: 0 10px 30px rgba(220,60,40,.40) !important; } /* — LIGHT — */ html[data-palette-light="neutral"] body.light .progress__fill{ background: linear-gradient(90deg, #4a4a4a, #6b6b6b, #8a8a8a) !important; box-shadow: 0 10px 30px rgba(80,80,80,.22) !important; } html[data-palette-light="sunset"] body.light .progress__fill{ background: linear-gradient(90deg, #ff8a4c, #ff5e6c, #ff4d7e) !important; box-shadow: 0 10px 30px rgba(255,120,100,.32) !important; } html[data-palette-light="yellow"] body.light .progress__fill{ background: linear-gradient(90deg, #ffe14a, #ffd12a, #ff9a00) !important; box-shadow: 0 10px 30px rgba(255,180,40,.32) !important; } html[data-palette-light="citrus"] body.light .progress__fill{ background: linear-gradient(90deg, #a8d820, #d4c020, #ff9a2c) !important; box-shadow: 0 10px 30px rgba(160,200,40,.32) !important; } html[data-palette-light="pink"] body.light .progress__fill{ background: linear-gradient(90deg, #ff4ea0, #ff6cb4, #ff8cc8) !important; box-shadow: 0 10px 30px rgba(255,80,170,.32) !important; } html[data-palette-dark="forest"] body:not(.light) .progress__fill{ background: linear-gradient(90deg, #28b450, #5ed97c, #7ed960) !important; box-shadow: 0 10px 30px rgba(40,180,80,.38) !important; } html[data-palette-dark="void"] body:not(.light) .progress__fill{ background: linear-gradient(90deg, #3c64ff, #6040ff, #8040ff) !important; box-shadow: 0 10px 30px rgba(60,100,255,.42) !important; } html[data-palette-dark="rust"] body:not(.light) .progress__fill{ background: linear-gradient(90deg, #c85a14, #e07030, #ff8c2c) !important; box-shadow: 0 10px 30px rgba(200,90,20,.40) !important; } html[data-palette-light="mint"] body.light .progress__fill{ background: linear-gradient(90deg, #1ea060, #2ccd8a, #50e0a8) !important; box-shadow: 0 10px 30px rgba(30,160,90,.30) !important; } html[data-palette-light="lavender"] body.light .progress__fill{ background: linear-gradient(90deg, #8250dc, #a070f0, #b080ff) !important; box-shadow: 0 10px 30px rgba(130,80,220,.32) !important; } html[data-palette-light="slate"] body.light .progress__fill{ background: linear-gradient(90deg, #46648c, #5880a8, #6890bc) !important; box-shadow: 0 10px 30px rgba(70,100,140,.28) !important; }