html.dkx-config-modal-open, body.dkx-config-modal-open { background: #FCF6F5 !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__config-modal-backdrop { display: block !important; opacity: 1 !important; pointer-events: auto !important; background: radial-gradient(circle at 14% 8%, rgba(153,0,17,.13), transparent 32%), radial-gradient(circle at 86% 18%, rgba(168,164,163,.22), transparent 30%), linear-gradient(180deg, rgba(252,246,245,.86) 0%, rgba(252,246,245,.94) 100%) !important; backdrop-filter: blur(12px) saturate(1.05) !important; -webkit-backdrop-filter: blur(12px) saturate(1.05) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__panel { position: fixed !important; top: clamp(8px, 1.2vw, 16px) !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 2147483001 !important; width: min(1480px, calc(100vw - 20px)) !important; max-width: none !important; height: auto !important; max-height: calc(100dvh - clamp(16px, 2.4vw, 32px)) !important; margin: 0 !important; padding: clamp(18px, 2vw, 30px) clamp(16px, 2vw, 28px) clamp(20px, 2.2vw, 34px) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-width: thin !important; scrollbar-color: rgba(153,0,17,.35) rgba(252,246,245,.60) !important; color: #1a1818 !important; background: radial-gradient(circle at 8% 0%, rgba(153,0,17,.095), transparent 30%), radial-gradient(circle at 94% 12%, rgba(168,164,163,.20), transparent 28%), linear-gradient(180deg, #FCF6F5 0%, #fffaf9 54%, #FCF6F5 100%) !important; border: 1px solid rgba(153,0,17,.18) !important; border-radius: clamp(22px, 2.4vw, 34px) !important; box-shadow: 0 1px 0 rgba(255,255,255,.96) inset, 0 0 0 1px rgba(252,246,245,.72) inset, 0 18px 0 rgba(153,0,17,.08), 0 36px 90px rgba(26,24,24,.24), 0 0 70px rgba(153,0,17,.13) !important; box-sizing: border-box !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__panel::-webkit-scrollbar { display: block !important; width: 8px !important; height: 8px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__panel::-webkit-scrollbar-track { background: rgba(252,246,245,.66) !important; border-radius: 999px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__panel::-webkit-scrollbar-thumb { background: rgba(153,0,17,.34) !important; border-radius: 999px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__panel, #dkx.dkx-config-modal-open #dkx-config .dkx__panel * { color: #1a1818 !important; text-shadow: none !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__config-modal-close { position: absolute !important; top: clamp(12px, 1.4vw, 20px) !important; right: clamp(12px, 1.4vw, 20px) !important; z-index: 2147483002 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: clamp(42px, 4vw, 50px) !important; height: clamp(42px, 4vw, 50px) !important; padding: 0 !important; border-radius: 16px !important; border: 1px solid rgba(153,0,17,.22) !important; background: linear-gradient(180deg, #FCF6F5 0%, #f3e9e7 100%) !important; color: #1a1818 !important; font-size: clamp(25px, 2.1vw, 30px) !important; line-height: 1 !important; font-weight: 900 !important; box-shadow: 0 6px 0 rgba(26,24,24,.13), 0 18px 34px rgba(26,24,24,.18) !important; cursor: pointer !important; transition: transform .22s ease, box-shadow .22s ease, color .22s ease, border-color .22s ease !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__config-modal-close:hover { color: #990011 !important; border-color: rgba(153,0,17,.44) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 0 rgba(153,0,17,.15), 0 22px 42px rgba(26,24,24,.20) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step { position: relative !important; margin: 0 0 clamp(14px, 1.8vw, 22px) !important; padding: 0 0 clamp(16px, 1.7vw, 24px) !important; border-bottom: 1px solid rgba(153,0,17,.16) !important; background: transparent !important; box-shadow: none !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step:last-of-type { border-bottom: 0 !important; padding-bottom: 0 !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; margin: 0 0 clamp(14px, 1.6vw, 20px) !important; padding-right: clamp(58px, 6vw, 72px) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step-title { margin: 0 !important; color: #1a1818 !important; font-family: TildaSans, Arial, sans-serif !important; font-size: clamp(27px, 2.55vw, 46px) !important; line-height: .95 !important; letter-spacing:0 !important; font-weight: 950 !important; text-transform: none !important; opacity: 1 !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step-num { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 34px !important; padding: 0 16px !important; border-radius: 999px !important; background: rgba(153,0,17,.08) !important; border: 1px solid rgba(153,0,17,.22) !important; color: #990011 !important; font-size: clamp(11px, .95vw, 13px) !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .055em !important; text-transform: uppercase !important; white-space: nowrap !important; box-shadow: 0 10px 24px rgba(153,0,17,.07) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__pills, #dkx.dkx-config-modal-open #dkx-config #dkxSeriesTabs, #dkx.dkx-config-modal-open #dkx-config #dkxProtectSeriesTabs { display: flex !important; flex-wrap: wrap !important; gap: clamp(10px, 1.3vw, 16px) !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__pill { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: clamp(52px, 5vw, 66px) !important; height: clamp(52px, 5vw, 66px) !important; min-width: clamp(52px, 5vw, 66px) !important; min-height: clamp(52px, 5vw, 66px) !important; padding: 0 !important; border-radius: 999px !important; background: radial-gradient(circle at 30% 18%, rgba(255,255,255,.94), transparent 36%), linear-gradient(180deg, #FCF6F5 0%, #f1e8e6 100%) !important; border: 1px solid rgba(168,164,163,.38) !important; color: #1a1818 !important; font-size: clamp(16px, 1.25vw, 19px) !important; font-weight: 950 !important; line-height: 1 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 5px 0 rgba(26,24,24,.12), 0 16px 34px rgba(26,24,24,.12) !important; transform: translateY(0) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__pill:hover { color: #990011 !important; border-color: rgba(153,0,17,.36) !important; transform: translateY(-3px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 8px 0 rgba(153,0,17,.13), 0 22px 42px rgba(26,24,24,.15), 0 0 24px rgba(153,0,17,.13) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__pill.active, #dkx.dkx-config-modal-open #dkx-config .dkx__pill.active * { color: #FCF6F5 !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__pill.active { background: radial-gradient(circle at 30% 18%, rgba(252,246,245,.22), transparent 34%), linear-gradient(145deg, #990011 0%, #b30018 48%, #990011 100%) !important; border-color: rgba(153,0,17,.50) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 0 #7c0010, 0 22px 44px rgba(153,0,17,.26), 0 0 30px rgba(153,0,17,.22) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__materials { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important; gap: clamp(10px, 1.05vw, 16px) !important; align-items: stretch !important; justify-content: center !important; width: 100% !important; margin: 0 !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; height: clamp(178px, 15.4vw, 230px) !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: clamp(19px, 1.55vw, 26px) !important; border: 1px solid rgba(168,164,163,.34) !important; background: radial-gradient(circle at 18% 6%, rgba(255,255,255,.78), transparent 34%), linear-gradient(180deg, #FCF6F5 0%, #f4ecea 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 7px 0 rgba(26,24,24,.12), 0 20px 42px rgba(26,24,24,.14) !important; transform: translateY(0) scale(1) !important; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, filter .24s ease !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material:hover { border-color: rgba(153,0,17,.38) !important; transform: translateY(-4px) scale(1.012) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 10px 0 rgba(153,0,17,.13), 0 26px 52px rgba(26,24,24,.18), 0 0 24px rgba(153,0,17,.13) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material.active { color: #1a1818 !important; background: radial-gradient(circle at 18% 6%, rgba(255,255,255,.82), transparent 34%), linear-gradient(180deg, #FCF6F5 0%, #f4ecea 100%) !important; border-color: #990011 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 10px 0 rgba(153,0,17,.26), 0 26px 56px rgba(26,24,24,.18), 0 0 0 2px rgba(153,0,17,.20), 0 0 34px rgba(153,0,17,.24) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material.active, #dkx.dkx-config-modal-open #dkx-config .dkx__material.active * { color: #1a1818 !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__sample { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; background: transparent !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__sample img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transform: scale(1) !important; filter: saturate(1.03) contrast(1.02) drop-shadow(0 14px 22px rgba(26,24,24,.10)) !important; transition: transform .24s ease, filter .24s ease !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material:hover .dkx__sample img { transform: scale(1.025) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material-badge { position: absolute !important; left: clamp(10px, 1vw, 14px) !important; right: clamp(10px, 1vw, 14px) !important; bottom: clamp(10px, 1vw, 14px) !important; z-index: 3 !important; display: block !important; padding: 10px 12px !important; border-radius: 16px !important; background: rgba(252,246,245,.74) !important; border: 1px solid rgba(153,0,17,.20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 12px 26px rgba(26,24,24,.12) !important; backdrop-filter: blur(10px) saturate(1.04) !important; -webkit-backdrop-filter: blur(10px) saturate(1.04) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material-name { margin: 0 !important; color: #1a1818 !important; font-size: clamp(14px, 1.05vw, 18px) !important; line-height: 1.05 !important; font-weight: 950 !important; letter-spacing:0 !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material-meta { margin: 6px 0 0 !important; color: rgba(26,24,24,.68) !important; font-size: clamp(10px, .78vw, 12px) !important; line-height: 1.1 !important; font-weight: 750 !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material.active .dkx__material-badge { background: rgba(252,246,245,.88) !important; border-color: rgba(153,0,17,.42) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 13px 28px rgba(153,0,17,.16) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material.active .dkx__material-name { color: #990011 !important; } @media (max-width: 1180px) { #dkx.dkx-config-modal-open #dkx-config .dkx__materials { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)) !important; gap: 12px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material { height: clamp(164px, 18vw, 210px) !important; border-radius: 22px !important; } } @media (max-width: 920px) { #dkx.dkx-config-modal-open #dkx-config .dkx__panel { top: 8px !important; width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; padding: 18px 14px 22px !important; border-radius: 24px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step-head { align-items: flex-start !important; flex-direction: column !important; gap: 10px !important; padding-right: 58px !important; margin-bottom: 14px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step-title { font-size: clamp(25px, 6vw, 38px) !important; line-height: .98 !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__materials { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)) !important; gap: 12px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material { height: clamp(172px, 34vw, 224px) !important; } } @media (max-width: 560px) { #dkx.dkx-config-modal-open #dkx-config .dkx__panel { top: 6px !important; width: calc(100vw - 12px) !important; max-height: calc(100dvh - 12px) !important; padding: 16px 12px 18px !important; border-radius: 22px !important; box-shadow: 0 1px 0 rgba(255,255,255,.94) inset, 0 12px 0 rgba(153,0,17,.07), 0 26px 60px rgba(26,24,24,.24) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__config-modal-close { top: 10px !important; right: 10px !important; width: 42px !important; height: 42px !important; border-radius: 14px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step { margin-bottom: 14px !important; padding-bottom: 16px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step-head { padding-right: 50px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step-title { font-size: clamp(23px, 7.4vw, 32px) !important; letter-spacing:0 !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step-num { min-height: 30px !important; padding: 0 12px !important; font-size: 10px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__pills, #dkx.dkx-config-modal-open #dkx-config #dkxSeriesTabs, #dkx.dkx-config-modal-open #dkx-config #dkxProtectSeriesTabs { gap: 10px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__pill { width: 50px !important; height: 50px !important; min-width: 50px !important; min-height: 50px !important; font-size: 15px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 4px 0 rgba(26,24,24,.12), 0 12px 26px rgba(26,24,24,.12) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__materials { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material { height: clamp(150px, 48vw, 196px) !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 5px 0 rgba(26,24,24,.11), 0 15px 30px rgba(26,24,24,.13) !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material-badge { left: 8px !important; right: 8px !important; bottom: 8px !important; padding: 8px 9px !important; border-radius: 14px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material-name { font-size: 14px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material-meta { font-size: 10px !important; margin-top: 4px !important; } } @media (max-width: 370px) { #dkx.dkx-config-modal-open #dkx-config .dkx__materials { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material { height: 142px !important; border-radius: 18px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__pill { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; font-size: 14px !important; } }