*{box-sizing:border-box;margin:0;padding:0}
.sp-wrap{background:#f3f0ff;border-radius:20px;overflow:hidden;display:flex;min-height:520px;font-family:system-ui,sans-serif;box-shadow:0 8px 40px rgba(80,40,160,0.18),0 2px 8px rgba(80,40,160,0.10)}
.sp-left{background:linear-gradient(170deg,#1e0a4a 0%,#3d1a8a 55%,#5c28c0 100%);padding:36px 28px 28px;width:230px;flex-shrink:0;color:#fff;display:flex;flex-direction:column;gap:0;position:relative;overflow:hidden}
.sp-left::after{content:'';position:absolute;bottom:-30px;right:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,0.04)}
.sp-left h2{font-size:20px;font-weight:800;line-height:1.25;margin-bottom:18px;color:#fff}
.sp-left h2 span{color:#f5c518}
.sp-chk{display:flex;gap:9px;align-items:flex-start;margin-bottom:13px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,0.88)}
.sp-chk-ico{color:#f5c518;font-size:14px;flex-shrink:0;margin-top:1px}
.sp-left-img{margin-top:auto;text-align:center;padding-top:12px}
.sp-person{width:100%;max-width:160px;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4))}
.sp-right{flex:1;padding:32px 28px 28px;background:#faf8ff;display:flex;flex-direction:column}
.sp-header{text-align:center;margin-bottom:20px}
.sp-title{font-size:24px;font-weight:800;color:#1a0a3d;margin-bottom:14px}
.sp-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:4px}
.sp-step-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;transition:all 0.3s;border:2px solid #d0c8f0;background:#fff;color:#9988cc;flex-shrink:0}
.sp-step-dot.active{background:linear-gradient(135deg,#6c3fff,#a855f7);border-color:#6c3fff;color:#fff;box-shadow:0 4px 12px rgba(108,63,255,0.4),0 0 0 4px rgba(108,63,255,0.12)}
.sp-step-dot.done{background:#f5c518;border-color:#f5c518;color:#1a0a3d;box-shadow:0 4px 10px rgba(245,197,24,0.35)}
.sp-step-line{width:40px;height:2px;background:#d0c8f0;transition:background 0.3s}
.sp-step-line.done{background:#f5c518}
.sp-step-label{font-size:10px;color:#9988cc;text-align:center;margin-top:4px}
.sp-step-label.active{color:#6c3fff;font-weight:600}
.sp-step-label.done{color:#b89400}
.sp-steps-row{display:flex;align-items:flex-start;justify-content:center;margin-bottom:20px}
.sp-step-col{display:flex;flex-direction:column;align-items:center;gap:3px;width:70px}
.sp-line-col{padding-top:14px;width:40px}
.sp-content{flex:1}
.sp-subtitle{font-size:13px;color:#9988cc;text-align:center;margin-bottom:16px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.svc-card{background:#fff;border:2px solid #e0d8f8;border-radius:14px;padding:16px 8px 12px;text-align:center;cursor:pointer;transition:all 0.2s;transform:perspective(600px) rotateX(0deg);box-shadow:0 2px 8px rgba(108,63,255,0.07)}
.svc-card:hover{transform:perspective(600px) rotateX(-4deg) translateY(-3px);box-shadow:0 8px 24px rgba(108,63,255,0.18);border-color:#a880ff}
.svc-card.sel{background:linear-gradient(135deg,#f0e8ff,#ede0ff);border-color:#7c4dff;box-shadow:0 6px 20px rgba(108,63,255,0.25),inset 0 1px 0 rgba(255,255,255,0.8)}
.svc-icon{width:44px;height:44px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.svc-name{font-size:12px;font-weight:700;color:#1a0a3d;margin-bottom:8px}
.svc-cb{width:20px;height:20px;border:2px solid #d0c8f0;border-radius:5px;margin:0 auto;display:flex;align-items:center;justify-content:center;background:#fff;transition:all 0.2s}
.svc-card.sel .svc-cb{background:#f5c518;border-color:#f5c518;box-shadow:0 2px 6px rgba(245,197,24,0.4)}
.goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.goal-card{background:#fff;border:2px solid #e0d8f8;border-radius:14px;padding:20px 12px 14px;text-align:center;cursor:pointer;transition:all 0.2s;box-shadow:0 2px 8px rgba(108,63,255,0.07)}
.goal-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(108,63,255,0.16);border-color:#a880ff}
.goal-card.sel{background:linear-gradient(135deg,#f0e8ff,#ede0ff);border-color:#7c4dff;box-shadow:0 6px 20px rgba(108,63,255,0.25)}
.goal-name{font-size:12.5px;font-weight:700;color:#1a0a3d;margin-bottom:10px;line-height:1.3}
.goal-cb{width:20px;height:20px;border:2px solid #d0c8f0;border-radius:5px;margin:0 auto;display:flex;align-items:center;justify-content:center;background:#fff;transition:all 0.2s}
.goal-card.sel .goal-cb{background:#f5c518;border-color:#f5c518}
.sp-form-group{margin-bottom:13px}
.sp-form-group label{display:block;font-size:12px;font-weight:700;color:#5a3fa0;margin-bottom:5px;text-transform:uppercase;letter-spacing:0.5px}
.sp-form-group input,.sp-form-group select{width:100%;padding:10px 14px;border:1.5px solid #d0c8f0;border-radius:10px;font-size:14px;background:#fff;color:#1a0a3d;outline:none;transition:border 0.2s,box-shadow 0.2s}
.sp-form-group input:focus,.sp-form-group select:focus{border-color:#7c4dff;box-shadow:0 0 0 3px rgba(124,77,255,0.12)}
.sp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sp-btns{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.btn-prev{background:#fff;border:2px solid #d0c8f0;color:#5a3fa0;padding:10px 24px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s}
.btn-prev:hover{border-color:#7c4dff;color:#7c4dff}
.btn-next{background:linear-gradient(135deg,#f5c518,#f0a800);border:none;color:#1a0a3d;padding:11px 32px;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 14px rgba(245,197,24,0.4)}
.btn-next:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,197,24,0.5)}
.btn-submit{background:linear-gradient(135deg,#6c3fff,#a855f7);border:none;color:#fff;padding:11px 32px;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 14px rgba(108,63,255,0.4)}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(108,63,255,0.5)}
.sp-close{position:absolute;top:14px;right:16px;background:rgba(255,255,255,0.15);border:none;color:#fff;width:28px;height:28px;border-radius:50%;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;transition:background 0.2s}
.sp-close:hover{background:rgba(255,255,255,0.3)}
.sp-success{text-align:center;padding:30px 20px;display:none}
.sp-success-icon{width:60px;height:60px;background:linear-gradient(135deg,#6c3fff,#a855f7);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 6px 20px rgba(108,63,255,0.4)}

@media (max-width: 768px) {
  .sp-wrap {
    flex-direction: column-reverse;
  }
  .sp-left {
    width: 100%;
    padding: 24px 20px;
    align-items: center;
  }
  .sp-left h2 {
    text-align: center;
  }
  .sp-left-img {
    margin-top: 20px;
  }
  .sp-right {
    padding: 24px 20px;
  }
  .svc-grid, .goal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sp-form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .svc-grid, .goal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}