.usage-guide { position: relative; display: grid; grid-template-columns: 1.05fr 2.25fr auto; gap: 22px; align-items: center; margin-top: 18px; padding: 20px 22px; overflow: hidden; background: linear-gradient(120deg,#fff 0%,#f5f8ff 72%,#eaf5ff 100%); border: 1px solid #dbe4f2; border-radius: 14px; box-shadow: 0 7px 22px #17315b0b; }
.usage-guide:after { content: "1H"; position: absolute; right: -14px; bottom: -35px; color: #225ae807; font: 800 110px Manrope,sans-serif; pointer-events: none; }
.guide-intro { position: relative; z-index: 1; }
.guide-intro h2 { font: 750 17px/1.25 Manrope,sans-serif; }
.guide-intro p { margin-top: 6px; color: #778397; font-size: 10px; line-height: 1.45; }
.guide-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.guide-step { position: relative; min-width: 0; min-height: 76px; display: flex; gap: 9px; align-items: flex-start; padding: 12px 11px 15px; overflow: hidden; text-align: left; color: #617086; background: #ffffffa8; border: 1px solid #e1e7f0; border-radius: 10px; cursor: pointer; transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease; }
.guide-step:hover,.guide-step.active { transform: translateY(-2px); color: #101827; border-color: #9fb9f5; box-shadow: 0 9px 20px #1e4fba12; }
.guide-step>b { flex: 0 0 23px; width: 23px; height: 23px; display: grid; place-items: center; color: #fff; background: #9aa8bc; border-radius: 50%; font: 800 10px Manrope,sans-serif; transition: background .25s ease,box-shadow .25s ease; }
.guide-step.active>b { background: #225ee8; box-shadow: 0 0 0 5px #225ee814; }
.guide-step span { min-width: 0; }
.guide-step strong,.guide-step small { display: block; }
.guide-step strong { font: 700 11px/1.25 Manrope,sans-serif; }
.guide-step small { margin-top: 4px; color: #8390a3; font-size: 8px; line-height: 1.35; }
.guide-step>i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.guide-step.active>i { background: linear-gradient(90deg,#225ee8,#19d8ee); transform-origin: left; animation: guide-progress 5s linear both; }
.guide-action { position: relative; z-index: 1; display: grid; gap: 8px; min-width: 142px; }
.guide-action button { border: 0; padding: 11px 13px; color: #fff; background: linear-gradient(135deg,#225ee8,#1347bb); border-radius: 8px; font: 700 10px Manrope,sans-serif; cursor: pointer; box-shadow: 0 7px 16px #225ee82c; }
.guide-action button span { margin-left: 5px; transition: margin .2s ease; }
.guide-action button:hover span { margin-left: 9px; }
.guide-action a { color: #60708a; text-align: center; font-size: 8px; font-weight: 700; text-decoration: none; }
.guide-target-pulse { animation: guide-target 1.2s ease; }
@keyframes guide-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes guide-target { 0%,100% { box-shadow: initial; } 35% { box-shadow: 0 0 0 5px #22bfea35,0 14px 34px #185fd51f; } }
@media (max-width: 1050px) { .usage-guide { grid-template-columns: 1fr; gap: 14px; } .guide-intro p { max-width: 560px; } .guide-action { display: flex; align-items: center; } }
@media (max-width: 600px) { .usage-guide { margin-top: 14px; padding: 17px 14px; } .guide-intro h2 { font-size: 16px; } .guide-steps { grid-template-columns: 1fr; } .guide-step { min-height: 65px; align-items: center; padding: 10px 11px 12px; } .guide-action { display: grid; grid-template-columns: 1fr 1fr; } .guide-action a { display: grid; place-items: center; border: 1px solid #dce3ee; border-radius: 8px; } }
@media (prefers-reduced-motion: reduce) { .guide-step,.guide-action button span { transition: none; } .guide-step.active>i,.guide-target-pulse { animation: none; } }