/* ============================================================ ТЁМНЫЙ ЛЮКС (Dark Luxe) — skin (v2.3) Activated by data-skin="luxe" on . Matte charcoal + emerald + champagne. ============================================================ */ /* 1. Palette + matte tokens */ :root[data-skin="luxe"]{ --lux-em:#27C99C; --lux-em-d:#159C78; --lux-ch:#E8C77E; --lux-ch-d:#C9A85A; --blue:#2BC79B !important; --glass-bg:linear-gradient(180deg,rgba(34,33,29,.70),rgba(23,22,19,.76)); --glass-bg-2:linear-gradient(180deg,rgba(40,39,34,.66),rgba(28,27,23,.72)); --glass-brd:rgba(232,199,126,.13); --glass-hl:rgba(255,243,220,.09); --glass-shadow:0 16px 40px rgba(0,0,0,.52),0 2px 8px rgba(0,0,0,.4); --glass-blur:blur(17px) saturate(118%); } :root[data-skin="luxe"][data-theme=light]{ --blue:#0E8C6B !important; --lux-em:#0E9C76; --lux-ch:#B98A2E; --glass-bg:linear-gradient(180deg,rgba(255,255,255,.70),rgba(248,245,238,.60)); --glass-brd:rgba(30,28,20,.12); --glass-hl:rgba(255,255,255,.92); --glass-shadow:0 14px 34px rgba(40,36,24,.13),0 2px 6px rgba(40,36,24,.08); --glass-blur:blur(20px) saturate(150%); } /* 2. Flat matte background — no aurora */ :root[data-skin="luxe"]{ background: radial-gradient(130% 80% at 50% -18%, rgba(39,201,156,.055), transparent 56%), radial-gradient(120% 70% at 50% 118%, rgba(232,199,126,.04), transparent 60%), #131210 !important; background-attachment:fixed; } :root[data-skin="luxe"][data-theme=light]{ background:radial-gradient(130% 80% at 50% -18%, rgba(14,156,118,.08), transparent 56%), #F4F1E9 !important; background-attachment:fixed; } :root[data-skin="luxe"] .splash-screen{background:radial-gradient(120% 70% at 50% 8%, rgba(39,201,156,.14), transparent 60%),#131210 !important} :root[data-skin="luxe"] .splash-logo, :root[data-skin="luxe"] .about-logo, :root[data-skin="luxe"] .header-title::before{background:linear-gradient(140deg,#2BC79B,#128A68)!important;box-shadow:0 10px 30px rgba(39,201,156,.4),inset 0 1px 0 rgba(255,255,255,.25)!important} /* 3. Chrome */ :root[data-skin="luxe"] .app-header{background:rgba(18,17,14,.74)!important} :root[data-skin="luxe"][data-theme=light] .app-header{background:rgba(252,250,244,.7)!important} :root[data-skin="luxe"] .header-action{color:var(--lux-em)!important} :root[data-skin="luxe"] .hero-greeting{background:linear-gradient(100deg,#F2D89A 0%,#E8C77E 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important} :root[data-skin="luxe"] #runTime{background:linear-gradient(180deg,#F2D89A,#2BC79B)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:0 2px 26px rgba(39,201,156,.22)!important} /* 4. Module tiles — matte + champagne glyphs */ :root[data-skin="luxe"] #view-menu .module-row[data-go]{background:var(--glass-bg)!important} :root[data-skin="luxe"] #view-menu .module-row[data-go] .module-icon{background:linear-gradient(158deg,#2A2823,#1A1915)!important;box-shadow:inset 0 0 0 1px rgba(232,199,126,.22),0 6px 16px rgba(0,0,0,.36)!important} :root[data-skin="luxe"] #view-menu .module-row[data-go] .module-icon svg{fill:#E8C77E!important} /* 5. CTAs -> emerald */ :root[data-skin="luxe"] .btn-primary, :root[data-skin="luxe"] .btn-green, :root[data-skin="luxe"] .slp-add, :root[data-skin="luxe"] .slp-save, :root[data-skin="luxe"] .obj-add, :root[data-skin="luxe"] .tsk-add-btn, :root[data-skin="luxe"] .wk-share, :root[data-skin="luxe"] .rit-save, :root[data-skin="luxe"] .trk-save, :root[data-skin="luxe"] .foc-start-grad, :root[data-skin="luxe"] .tt-mega-add{background:linear-gradient(135deg,#2BC79B,#138D69)!important;color:#04211A!important;box-shadow:0 8px 22px rgba(39,201,156,.3),inset 0 1px 0 rgba(255,255,255,.22)!important;text-shadow:none!important} :root[data-skin="luxe"] .btn-tinted{background:rgba(39,201,156,.15)!important;color:var(--lux-em)!important} /* 6. Warm icon classes + hero numbers -> luxe */ :root[data-skin="luxe"] .g-focus, :root[data-skin="luxe"] .g-time{background:linear-gradient(135deg,#2BC79B,#138D69)!important} :root[data-skin="luxe"] .g-stats, :root[data-skin="luxe"] .g-diary{background:linear-gradient(135deg,#E8C77E,#C9A85A)!important} :root[data-skin="luxe"] .ach-hero-num, :root[data-skin="luxe"] .wk-hero-num, :root[data-skin="luxe"] .dtx-hero-num, :root[data-skin="luxe"] .path-rank, :root[data-skin="luxe"] .slp-hero-num{background:linear-gradient(135deg,#F2D89A,#D9B86A)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important} :root[data-skin="luxe"] .timer-phase-label.free{color:var(--lux-em)!important} /* 7. Level card + ranks + quest icons -> champagne */ :root[data-skin="luxe"] .lvl-card{--rankrgb:232,199,126!important;--rank:#E8C77E!important} :root[data-skin="luxe"] .lvl-em .rank-gl, :root[data-skin="luxe"] .lvl-badge svg{fill:#E8C77E!important} :root[data-skin="luxe"] .lvl-num{color:#E8C77E!important} :root[data-skin="luxe"] .quest-ic, :root[data-skin="luxe"] .rem-nudge-ic{background:linear-gradient(158deg,#2A2823,#1A1915)!important;box-shadow:inset 0 0 0 1px rgba(232,199,126,.22),0 5px 14px rgba(0,0,0,.32)!important} :root[data-skin="luxe"] .quest-ic svg, :root[data-skin="luxe"] .rem-nudge-ic svg{fill:#E8C77E!important} :root[data-skin="luxe"] .quest-ck.done{background:var(--lux-em)!important;border-color:var(--lux-em)!important} :root[data-skin="luxe"] .hero-streak{background:rgba(232,199,126,.1)!important;border:1px solid var(--glass-brd)!important} /* 8. Focus / breathe indigo -> emerald */ :root[data-skin="luxe"] .foc-pill.active{background:linear-gradient(135deg,rgba(39,201,156,.20),rgba(39,201,156,.1))!important;border-color:rgba(39,201,156,.5)!important} :root[data-skin="luxe"] .bs-cyc-preset.active{background:rgba(39,201,156,.18)!important;border-color:rgba(39,201,156,.45)!important;color:#2BC79B!important} :root[data-skin="luxe"] .seg-btn.active{color:var(--lux-em)!important} :root[data-skin="luxe"] .wk-entry-ch, :root[data-skin="luxe"] .trk-chev, :root[data-skin="luxe"] .obj-chev{color:var(--lux-ch)!important}